ADR-0006: Menu Responsivo Zero-JS e Enriquecimento SEO

Este documento especifica a decisão de design de interfaces autônomas sem JavaScript no cliente e os requisitos de metadados de acessibilidade e SEO do gerador de sites estáticos.

1. Contexto e Motivação

No paradigma de *Sistemas Lúcidos*, o navegador não deve ser sobrecarregado com a execução de scripts do lado do cliente para rotinas de apresentação triviais. A manipulação de visibilidade de menus em dispositivos móveis e a navegação contextual sequencial de páginas devem ser resolvidas em tempo de compilação (Lustre SSR) e interpretadas pelo navegador nativamente usando puramente HTML e CSS.

2. Decisão Arquitetural e de UX

Para assegurar uma interface robusta e de alta performance no Cloudflare Pages, adotamos as seguintes premissas técnicas:

1. *O "Checkbox Hack" no Tailwind CSS:* - Para o menu hamburguer móvel, introduziremos um checkbox invisível no topo da árvore DOM: html <input type="checkbox" id="mobile-toggle" class="hidden peer"> - O botão do menu (ícone de barras) será encapsulado em uma tag <label for="mobile-toggle">, acionando a mudança de estado do input ao ser clicada. - A Sidebar lateral usará a classe de controle peer-checked:block (ou equivalente absoluto) e estará oculta por padrão em mobile (hidden), mas visível em telas grandes (md:block), permitindo alternar a exibição sem um único byte de JavaScript.
2. *Injeção de Metadados SEO Dinâmicos:* - O título das páginas no head do HTML será montado dinamicamente: Gleam-BR | [PageMetadata.title]. - A tag meta description extrairá a propriedade description correspondente: <meta name="description" content="[PageMetadata.description]">.
3. *Navegação Sequencial (Próximo e Anterior):* - O rodapé de cada artigo Wiki exibirá links contextuais para a página anterior ("← Anterior") e página seguinte ("Próximo →"). - A lógica buscará os documentos vizinhos a partir da lista plana e ordenada de metadados obtidos do SiteIndex, baseando-se estritamente na ordenação categórica e de prioridade (order).

3. Requisitos EARS

*Requisitos Ubíquos (Ubiquitous Requirements)* - *UBQ-01 (Zero-JS Interativo):* O comportamento de abrir e fechar a Sidebar lateral em dispositivos móveis deve ser acionado exclusivamente pelo mapeamento CSS da propriedade :checked do input do tipo checkbox. - *UBQ-02 (SEO Dinâmico):* Toda página gerada pelo SSG deve injetar de forma automatizada e semântica as tags <title> e <meta name="description"> preenchidas a partir das propriedades de PageMetadata.

*Requisitos Orientados a Eventos (Event-Driven Requirements)* - *EVD-01 (Navegação Cruzada):* Quando o usuário clicar nos botões de navegação sequencial no rodapé, o navegador deve ser redirecionado para o caminho (path) do vizinho lógico indexado correspondente.

*Requisitos Orientados a Estado (State-Driven Requirements)* - *STD-01 (Limites do Índice):* Se o documento corrente corresponder ao primeiro item ordenado da Wiki, o botão de página "Anterior" deve ser suprimido da exibição. - *STD-02 (Fim da Wiki):* Se o documento corrente corresponder ao último item ordenado da Wiki, o botão de página "Próxima" deve ser suprimido da exibição.