Como tudo se conecta

O Seed tem poucos conceitos centrais — e eles se encaixam de forma previsível. Esta página mostra como cada peça se relaciona com as outras antes de você mergulhar nos detalhes.

A página

Tudo começa com um arquivo .seed. É um arquivo de texto simples onde você escreve o conteúdo da página usando componentes:

```seed
---
title: Sobre nós
---

@h1
  Quem somos
@p
  Uma empresa focada em resultados.
@button variant=primary
  Fale conosco
```

O Seed lê esse arquivo e gera uma página HTML completa.

O layout

Quase sempre você quer que todas as páginas compartilhem o mesmo header, footer e estrutura geral. Para isso existe o default.layout — um arquivo que envolve o conteúdo de cada página:

```seed
// default.layout
@header
  @a href=.
    Meu Site
@main
  {content}     ← aqui entra o conteúdo de cada página
@footer
  © 2025
```

O Seed encontra o layout automaticamente — você não precisa declarar nada na página. Se quiser um layout diferente para uma seção, basta criar outro default.layout naquela pasta.

Os componentes

Componentes são os blocos de construção das páginas. Alguns são tags HTML diretas (@div, @h1, @button). Outros são componentes registrados que trazem classes e comportamento prontos:

```seed
@card variant=elevated
  Conteúdo do card
```

Um componente é definido num arquivo YAML — que especifica a tag HTML, as classes base e as variantes disponíveis. O YAML pode também definir a estrutura interna do componente via template.

O template

Quando um componente tem estrutura interna complexa — título, corpo, rodapé, ações — você define essa estrutura num template. O template usa slots para marcar onde cada parte do conteúdo vai:

```seed
// card.template (ou diretamente no YAML com template: |)
@div class=p-6
  {title}
  {?body}
  {?footer}
```

Quem usa o componente preenche os slots por nome:

```seed
@card
  @title
    Título do card
  @body
    Conteúdo principal.
  @footer
    @button variant=primary
      Saiba mais
```

O template define a ordem e a estrutura do HTML final — não a ordem que você escreve no .seed.

Os includes

Partes repetidas entre páginas (uma sidebar, um banner promocional, um bloco de CTA) podem ser extraídas para arquivos separados e incluídas onde forem necessárias:

```seed
@include _sidebar
@include _cta-banner
```

Por convenção, arquivos de include começam com _ e não são gerados como páginas independentes.

O front matter

O bloco entre --- no início de cada arquivo é o front matter — onde você configura metadados da página: título, idioma, layout, CSS e JS específicos:

```seed
---
title: Sobre nós
lang: pt-BR
css: /static/extras.css
---
```

O front matter da página se mescla com o do layout — a página sempre tem a palavra final.

Os temas

Um tema é um conjunto de componentes e assets prontos para uso. Você instala uma vez e passa a ter acesso a dezenas de componentes — botões, cards, heroes, navbars e muito mais. O Seed carrega os componentes do tema automaticamente, e você pode sobrescrever qualquer um deles no seu projeto sem modificar o tema.

A lógica de build

O Seed resolve três mecanismos programáticos antes de gerar o HTML — nada disso vira JavaScript no browser:

Esses recursos cobrem os casos mais comuns sem precisar de código: páginas de listagem, navegação condicional, seções opcionais, e exemplos de código com resultado visual. Para os detalhes, veja Lógica: @if, @each e variáveis.

Como tudo se encaixa

```
seed.yaml              → ativa o tema e configura o build
default.layout         → envolve todas as páginas (header, footer, CSS, JS)
src/index.seed         → conteúdo da página
  └─ usa @componentes  → definidos em YAML (com classes e variantes)
       └─ com template → define a estrutura interna via slots
@include _partes       → blocos reutilizáveis entre páginas
{front-matter}         → variáveis de metadados acessíveis em qualquer ponto
@if / @each            → lógica de build (condicionais e iteração)
```

Feito com ❤️ e Seed