🗺️ O Ecossistema de Geradores Estáticos de Alta Performance

flowchart TD
    SOURCE["Documentação Técnica em Markdown / MDX"] --> TOOLS{"Escolha do Gerador Estático (SSG)"}

    TOOLS --> DOCU["Docusaurus (Meta)\n- React + MDX\n- Versionamento nativo de docs (v1, v2)\n- Suporte a i18n multilíngue"]
    TOOLS --> VP["VitePress (Evan You)\n- Vue 3 + Vite\n- Carregamento instantâneo\n- Estética minimalista e leve"]
    TOOLS --> MK["MkDocs Material (Python)\n- Python puro com tema Material\n- Busca offline Lunr ultraveloz\n- Adotado amplamente em APIs/DevOps"]
    TOOLS --> ASTRO["Astro Starlight\n- Zero JS no cliente (Islands Architecture)\n- Performance Core Web Vitals 100/100 ⚡"]

    style SOURCE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style TOOLS fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style DOCU fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style VP fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style MK fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style ASTRO fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

📖 Fundamentos e Aplicação

Embora o Jekyll tenha estabelecido o padrão histórico, projetos corporativos com centenas de páginas, componentes interativos e necessidade de busca client-side instantânea migraram para SSGs modernos baseados em Node.js e Python.

1. MDX: O Poder dos Componentes React dentro do Markdown

O Docusaurus utiliza MDX, permitindo importar componentes interativos JSX/React diretamente no arquivo .md:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="npm" label="npm" default>
    ```bash
    npm install @empresa/sdk
    ```
  </TabItem>
  <TabItem value="yarn" label="yarn">
    ```bash
    yarn add @empresa/sdk
    ```
  </TabItem>
</Tabs>

2. VitePress e Astro Starlight

  • VitePress: Desenvolvido pelo criador do Vue.js, utiliza o empacotador Vite para oferecer Hot Module Replacement (HMR) em milissegundos.
  • Astro Starlight: Arquitetura de “Ilhas” (Islands) que entrega zero JavaScript por padrão, alcançando pontuação máxima no Google PageSpeed.