Extra Documentação Técnica com Markdown • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 15.1 — Configuração Canônica do mkdocs.yml com Tema Material

Contexto: Configurar um arquivo de projeto MkDocs utilizando o popular tema Material for MkDocs com suporte a busca offline em português e modo escuro.

Requisitos de Execução:

  1. Definir site_name e site_url.
  2. Habilitar o tema name: material com alternador de paleta claro/escuro.
  3. Configurar a barra de navegação nav com 3 seções.

Resultado Esperado

site_name: Documentação do SDK Oficial
site_url: https://sdk.exemplo.org
theme:
  name: material
  palette:
    - scheme: default
      primary: indigo
      toggle:
        icon: material/brightness-7
        name: Mudar para modo escuro
    - scheme: slate
      primary: indigo
      toggle:
        icon: material/brightness-4
        name: Mudar para modo claro
nav:
  - Início: index.md
  - Guia de Instalação: instalacao.md
  - Referência de API: api.md

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_15_1_SeuNome.yml
  2. Envie na tarefa: Atividade Cap 15 - SSGs Modernos
🔑 Gabarito de Código & Solução Comentada 
site_name: Documentação do SDK Oficial
site_url: https://sdk.exemplo.org
theme:
  name: material
  palette:
    - scheme: default
      primary: indigo
      toggle:
        icon: material/brightness-7
        name: Mudar para modo escuro
    - scheme: slate
      primary: indigo
      toggle:
        icon: material/brightness-4
        name: Mudar para modo claro
nav:
  - Início: index.md
  - Guia de Instalação: instalacao.md
  - Referência de API: api.md

Comentário: O MkDocs Material compila em segundos em Python e inclui busca client-side de texto completo sem dependência de serviços externos como Algolia.

🎯 Nível 2: Prática

Problema 15.2 — Abas de Instalação Multi-Gerenciador em MDX (Docusaurus)

Construa um trecho MDX utilizando componentes <Tabs> e <TabItem> para exibir comandos de instalação em npm, pnpm e yarn.

🔑 Gabarito de Código & Solução Comentada 
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs groupId="package-managers">
  <TabItem value="npm" label="npm" default>
```bash
npm install express

</TabItem>

```bash pnpm add express ``` ```bash yarn add express ```

</Tabs>

</details>

---

## 🎯 Nível 3: Integração
### Problema 15.3 — Estrutura de Documentação Versionada no Docusaurus

Explique e configure a estrutura de pastas e o comando de CLI do Docusaurus para congelar a versão `1.0.0` da documentação antes de iniciar as alterações da versão `2.0.0`.

<details markdown="1">
<summary>🔑 Gabarito de Código & Solução Comentada</summary>

```bash
# 1. Congelar a versão atual dos docs:
npm run docusaurus docs:version 1.0.0

# Estrutura gerada automaticamente no projeto:
# - versioned_docs/version-1.0.0/ (cópia estática e imutável da v1)
# - versioned_sidebars/version-1.0.0-sidebars.json
# - docs/ (permanece livre para o desenvolvimento da v2.0-next)

🎯 Nível 4: Desafio

Problema 15.4 — Componente Customizado MDX de Contador Interativo

Crie um componente funcional React em JSX puro que possa ser importado em uma página .mdx para fornecer um contador de requisições interativo em tempo real dentro da documentação técnica.

🔑 Gabarito de Código & Solução Comentada 
// src/components/ContadorRequisicoes.jsx
import React, { useState } from 'react';

export default function ContadorRequisicoes() {
  const [contador, setContador] = useState(0);

  return (
    <div style={{ padding: '16px', border: '1px solid #0288d1', borderRadius: '8px', margin: '16px 0' }}>
      <h4>Simulador de Carga em Tempo Real</h4>
      <p>Requisições disparadas: <strong>{contador}</strong></p>
      <button onClick={() => setContador(contador + 1)} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        Disparar Requisição Mock
      </button>
    </div>
  );
}

// Uso dentro do arquivo MDX:
// import ContadorRequisicoes from '@site/src/components/ContadorRequisicoes';
// <ContadorRequisicoes />