🌱 Seed

Sua primeira página

Do zero ao browser em menos de 5 minutos. Esta página mostra o caminho completo: instalar, criar o projeto, entender a sintaxe e explorar os componentes disponíveis.

1. Instale o Seed

```bash
pip install seed-html
```

2. Crie um projeto

```bash
seed init meu-site
```

O Seed cria a estrutura de pastas e instala o tema Ada automaticamente. Se estiver offline, aparece Continue without theme? — você pode instalar depois com seed theme-install.

3. Inicie o servidor

```bash
seed dev meu-site
```

Abre em http://localhost:8000. O servidor fica em espera: qualquer mudança em arquivo .seed recarrega o browser automaticamente.

⌨️

Com o servidor rodando, você tem atalhos de teclado no terminal: o abre o browser, h abre o explorador de componentes como overlay, r reinicia o servidor, q encerra. O explorador também fica disponível em http://localhost:8000/__explorer como página independente.

4. Edite sua primeira página

Abra meu-site/src/index.seed. O arquivo começa com um bloco --- chamado front matter — metadados da página em YAML. Abaixo vem o conteúdo:

```seed
---
title: Minha Primeira Página
lang: pt-BR
---

@h1
  Olá, mundo!

@p class=text-gray-500
  Minha primeira página com Seed.

@button variant=primary
  Saiba mais
```

Salve e o browser atualiza sozinho.

Como a sintaxe funciona

Tudo começa com @. Cada @nome é um componente. O conteúdo e os filhos ficam abaixo, indentados com 2 espaços:

```seed
@componente prop=valor, outra-prop
  Conteúdo aqui
  @filho
    Conteúdo do filho
```

As props ficam na mesma linha, separadas por vírgula:

```seed
@button variant=primary, class=mt-4
  Clique aqui

@img src=foto.jpg, alt=Minha foto
```
⚠️

Vírgula entre props é obrigatória. @button variant=primary size=lg está errado — o parser lê size=lg como parte do valor de variant. Correto: @button variant=primary, size=lg.

Componentes que não são tags HTML recebem classes e comportamento do tema — @button, @card, @badge, etc. Os que são tags HTML padrão (@div, @h1, @p) renderizam diretamente.

Explorando os componentes disponíveis

Com o servidor rodando, você tem três formas de acessar o explorador de componentes:

Em qualquer forma, você vê todos os componentes disponíveis com nome, tag HTML gerada, variantes e um snippet de exemplo pronto para copiar.

5. Veja o layout padrão

Todas as páginas herdam automaticamente o arquivo src/default.layout. Abra-o para entender a estrutura geral — header, footer, onde o conteúdo de cada página é injetado:

```seed
@header
  @a href=.
    Meu Site
@main
  {content}
@footer
  © 2025
```

O {content} é onde o conteúdo de cada página entra. Edite o layout para personalizar o visual de todas as páginas de uma vez.

6. Build para produção

```bash
seed build meu-site
```

Gera HTML estático em meu-site/dist/ — pronto para qualquer hospedagem estática (Netlify, Vercel, GitHub Pages, etc.).

Próximos passos

Agora que você tem o básico funcionando:

Feito com ❤️ e Seed