Criando uma Section

Agora que você está mais familiarizado com Sections e como elas são usadas no admin, vamos criar uma Section do zero. Neste guia, você aprenderá a criar uma Section, a adicionar propriedades a ela e a estilizá-la com seus temas.

Abra a pasta do seu site em uma IDE e execute as seguintes ações:

1. Crie um arquivo .tsx na pasta sections/

Crie um arquivo .tsx na pasta sections/ em seu Site com o nome desejado para Section (e.g: Post.tsx).

A Section é um componente Preact que é configurável no Admin. Para que a Section seja visível no Admin, é preciso criar esse componente na pasta sections/ ou em algum de seus sub-diretórios.

2. Exporte o componente

Exporte um componente Preact usando export default como o exemplo abaixo:

sections/Post.tsx

export interface Props {
  title: string;
}

export default function Post({ title }: Props) {
  return (
    <div>
      <h1 class="font-bold">{title}</h1>
      <p>This is an example section</p>
    </div>
  );
}

Pronto! A Section foi criada localmente no seu projeto.

3. Visualize a Section no Admin

Execute o projeto localmente como foi feito anteriormente no setup. Ao selecionar seu ambiente local no Admin, você poderá visualizar a nova Section na biblioteca de Sections (Sections) e adicioná-la a uma página.

4. Adicionando propriedades à Section

Vamos adicionar três novas propriedades ao nosso componente Post, uma para imagem (photo), outro para o corpo da postagem (post) e um para a hora da postagem.

import type { ImageWidget } from "apps/admin/widgets.ts";
import Image from "apps/website/components/Image.tsx";

export interface Props {
  /**
   * @title Post image.
   */
  photo?: ImageWidget;
  /**
   * @title Post body.
   * @format textarea
   */
  post: string;
  /**
   * @title Publish date.
   * @format datetime
   */
  datetime: string;
  /**
   * @title Post title.
   */
  title: string;
}

export default function Post({ title, photo, datetime, post }: Props) {
  return (
    <div>
      {photo && (
        <Image
          src={photo}
          alt={`${title} image`}
          height={300}
          width={300}
          class="rounded"
        />
      )}
      <h1 class="font-bold text-lg">{title}</h1>
      <p>Published at: {datetime}</p>
      <p>This is an example section</p>
      <p>{post}</p>
    </div>
  );
}

Uma Section pode ter como propriedade qualquer elemento que seja serializável, e interpretável no formulário de propriedades no admin da deco. Isto inclue:

• strings e numbers
• Tipos simples de objetos serializáveis
• Tipos gerados de união, extensão, Pick ou Omit
• Sections ( import { Section } from "deco/blocks/section.ts" )
• ImageWidget (import type { ImageWidget } from "apps/admin/widgets.ts";) e outros components do admin
• Arrays dos tipos indicados acima

Além dos tipos acima, é possível anotar algumas propriedades para que o formulário do admin altere o mecanismo de inserção ou para determinar alguns aspectos do comportamento da propriedade (através da anotação @format, por exemplo). Leia mais sobre essas anotações aqui

5. Visualizando as novas propriedades no Admin

Com o projeto executando localmente, abra novamente a Section no Admin. Você verá as novas propriedades adicionadas ao componente Post. É possível ver que o admin prepara componentes próprios de formulário para a inserção de imagens, data, bem como sinaliza o que é cada campo a partir do title indicado em código.

6. Tematizando a Section

6.1 Tema do Site

No projeto base deco, é possível acessar uma Section especial, a Theme.tsx. Esta section define tokens e nomes especiais de classes que podem ser utilizadas por outras Sections seguindo a estrutura da ferramenta DaisyUI. Dentro do Theme.tsx é possível observar alguns tokens como o de cores principais:

export interface MainColors {
  /**
   * @format color
   * @title Base
   * @default #FFFFFF
   */
  "base-100": string;
  /**
   * @format color
   * @title Primary
   * @default #003232
   */
  "primary": string;
  /**
   * @format color
   * @title Scondary
   * @default #8C3D3D
   */
  "secondary": string;
  /**
   * @format color
   * @title Tertiary
   * @default #00FF7F
   */
  "tertiary": string;
}

As cores de cada token podem ser alteradas no Admin, na aba de Themes. Nela, você pode alterar as cores do seu tema atual ou criar um novo tema.

6.2 Tema de uma página

Além do tema do site, é possível alterar o tema de uma página específica. Para isso, basta acessar uma página específica no Admin adicionar a section do tema desejado.

Neste caso, adicionamos na página My New Page a Section do tema Groovy Vibes. Esta página em específico agora tem um tema diferente do restante do site.

6.3 Estilizando a Section

Adapte a classe de postagens para fazer uso de alguns tokens. Por exemplo, o título principal da postagem agora segue a cor primária do tema.

import type { ImageWidget } from "apps/admin/widgets.ts";
import Image from "apps/website/components/Image.tsx";

export interface Props {
  /**
   * @title Post image.
   */
  photo?: ImageWidget;
  /**
   * @title Post body.
   * @format textarea
   */
  post: string;
  /**
   * @title Publish date.
   * @format datetime
   */
  datetime: string;
  /**
   * @title Post title.
   */
  title: string;
}

export default function Post({ title, photo, datetime, post }: Props) {
  return (
    <div>
      {photo && (
        <Image
          src={photo}
          alt={`${title} image`}
          height={300}
          width={300}
          class="rounded"
        />
      )}
      <h1 class="font-bold text-lg text-primary">{title}</h1>
      <p>Published at: {datetime}</p>
      <p>This is an example section</p>
      <p>{post}</p>
    </div>
  );
}

Agora, a Section Post segue o tema do site (ou da página) e utiliza as cores definidas no tema.