ADR-0012: Componente Visual Modular - ContentSection | Wiki
ADR-0012: Componente Visual Modular - ContentSection
Este documento especifica a decisão de design sobre a implementação do componente visual ContentSection para o layout "Site" do gerador estático gbr_ssg.
1. Contexto e Motivação
O componente ContentSection permite injetar blocos de texto rico (Rich Text) e tipografia de leitura longa dentro da estrutura modular de seções institucionais do layout "Site".
Diferente dos componentes puramente baseados em metadados TOML (Hero, FeatureGrid, CaseStudy, TeamGrid), este componente precisa ser capaz de atuar como o container primário do corpo do arquivo .djot, garantindo a transição fluida entre seções estruturadas no TOML e o texto narrativo principal do documento.
2. Decisão Arquitetural
-
**Tipagem e Estrutura (
ContentSectionProps):** -ContentSectionProps(title: Option(String), body_html: String) -
*Estratégia de Content Fallback (Injeção Híbrida):* A função de parsing do componente receberá tanto o dicionário da seção TOML quanto a string contendo o HTML compilado a partir do corpo do documento Markdown/Djot (
main_html_content):gleam pub fn parse( section_data: Dict(String, String), main_html_content: String, ) -> Result(ContentSectionProps, String)- *Prioridade 1:* Se o dicionário TOML contiver explicitamente a chavebody, o valor dessa chave será utilizado como obody_html. - *Prioridade 2 (Fallback):* Se a chavebodyfor omitida ou estiver em branco no TOML, a função injetará automaticamente omain_html_content(o HTML traduzido do corpo.djot). -
*Injeção Segura e Tipografia Prose:* O componente utilizará
element.unsafe_raw_htmlenvolvido por contêineres de estilo Tailwind Typography (prose prose-invert prose-pink max-w-none text-slate-300 leading-relaxed) com limite de largura otimizado para legibilidade (max-w-3xl).
3. Requisitos EARS
*Requisitos Ubíquos (Ubiquitous Requirements)*
- *UBQ-01 (Injeção de Fallback do Djot):* Se a chave body não for definida no TOML da seção content, o parser DEVE preencher body_html com o conteúdo processado do corpo da página (main_html_content).
- *UBQ-02 (Contêiner para Leitura Longa):* O contêiner de leitura DEVE limitar sua largura máxima para max-w-3xl e centralizar-se (mx-auto), aplicando estilos do Tailwind Typography para a renderização limpa do HTML (prose prose-invert).