Layouts

Layouts permitem compartilhar estrutura (header, footer, sidebar) entre múltiplas páginas sem repetição.

Como funciona

Um layout é um arquivo .layout que contém o placeholder {content}. Quando uma página é renderizada, seu conteúdo é injetado nesse ponto.

default.layout

```seed
---
title: Meu Site
lang: pt-BR
---

@header class=border-b
  @div class=max-w-5xl mx-auto px-6 py-4 flex items-center justify-between
    @a href=.
      Meu Site
    @nav
      @a href=sobre
        Sobre
      @a href=contato
        Contato

@div class=max-w-5xl mx-auto px-6 py-12
  {content}

@footer class=border-t mt-12
  @div class=max-w-5xl mx-auto px-6 py-6 text-sm text-gray-500
    © 2025 Meu Site
```

index.seed (página)

```seed
---
title: Home — Meu Site
---

@section
  @h1
    Bem-vindo
```

O Seed substitui {content} pelo HTML renderizado da página. O title da página prevalece sobre o do layout.

Descoberta automática de layout

O Seed busca automaticamente o arquivo default.layout subindo na árvore de diretórios a partir da página, parando em src/. Isso significa que um layout fora de src/ nunca é capturado acidentalmente. Você pode ter layouts específicos para subseções:

```
src/
├── default.layout       ← usado por todas as páginas abaixo
├── index.seed
├── sobre.seed
└── blog/
    ├── default.layout   ← sobrescreve para páginas em /blog/
    ├── post1.seed
    └── post2.seed
```

Assets no layout

O padrão mais comum é declarar o CSS e JS do tema no front matter do default.layout, para que todas as páginas os herdem automaticamente:

```seed
---
title: Meu Site
lang: pt-BR
css: /static/seed-ui.css
js: /static/seed-ui.js
---

@div class=min-h-screen
  {content}
```

Cada página pode sobrescrever ou acrescentar assets no próprio front matter — o front matter da página tem prioridade sobre o do layout.

Layout explícito

Você pode apontar para um layout específico via front matter:

```seed
---
title: Página Especial
layout: layouts/minimal
---
```

O caminho é relativo ao arquivo .seed atual e a extensão .layout é adicionada automaticamente. Para desativar o layout numa página específica, use layout: false:

```seed
---
title: Página sem layout
layout: false
---
```

Variáveis do front matter no layout

Além de {content}, layouts podem referenciar qualquer campo do front matter da página usando {campo}. Isso é especialmente útil em layouts de blog, mas funciona em qualquer layout:

```seed
---
title: Blog Post
---
@article
  @h1
    {title}
  @p class=text-gray-500
    {description}
  @div
    {content}
```

Se o campo não existir no front matter da página, o placeholder {campo} é mantido inalterado. Para listas (como tags), os valores são unidos por vírgula.

Meta merging

O front matter da página sobrescreve o do layout. Isso permite que o layout defina padrões (idioma, CSS) e cada página personalize o que precisar (título, descrição, etc.).

```yaml
# default.layout front matter
title: Meu Site
lang: pt-BR

# index.seed front matter (sobrescreve title)
title: Home — Meu Site
```

Feito com ❤️ e Seed