📊 Cap 15: SSGs Modernos para Docs

Docs-as-Code • MDX, Componentes Interativos e Performance Máxima

🗺️ A Evolução: Do HTML Estático para Componentes Vivos

flowchart LR
    MD_OLD["Markdown Puro\n(Apenas texto estático e código)"]
    --> MDX["MDX (Markdown + JSX/React)\n(Abas interativas, formulários de teste e simuladores na página!) ⚡"]

    style MD_OLD fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style MDX fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: O Que é MDX?

• A união perfeita entre a simplicidade do Markdown e o dinamismo do React.

• Permite importar e usar componentes visuais diretamente no .md:
  • Abas para diferentes linguagens.
  • Playgrounds de código executáveis.
  • Simuladores interativos de chamadas de API!

🎯 Slide 2: Docusaurus (Meta Open Source)

• O padrão ouro de grandes corporações (React, Redux, Supabase).

• Diferenciais Nativos:
  • Versionamento de Documentação: Permite alternar entre versões v1, v2 e “Next” em um clique.
  • Internacionalização (i18n): Tradução estruturada para múltiplos idiomas.

🎯 Slide 3: MkDocs Material vs VitePress

• MkDocs Material:
  • Em Python, incrivelmente estável e rápido.

  • Busca offline instantânea sem depender de indexadores de terceiros.

• VitePress & Astro Starlight:
  • Desenvolvidos para a era moderna do JavaScript.
  • Tempos de inicialização e hot-reload praticamente instantâneos!