Sprint 19: A Revelação da Palavra

Respire com calma. Chegamos à morada da Papisa (Arcano II). Se na Sprint anterior o Mago organizou os elementos, agora a Papisa abre o livro do conhecimento oculto. No nosso templo digital, o editor MDX é o instrumento de revelação: onde a ideia abstrata se torna palavra escrita e manifesta.

Ⅰ. O Embasamento Filosófico: A Escrita como Ato Sagrado

A Papisa e o Registro do Conhecimento

A Papisa representa a sabedoria intuitiva, o registro akáshico e o conhecimento que espera o momento certo para ser revelado. Ao construirmos um editor de páginas, estamos criando o pergaminho onde a história do projeto será contada.

Na mística, a "Palavra" (Logos) é o que organiza o caos. Escrever documentação técnica não é apenas descrever funções; é um ato de Tikkun (Reparação), trazendo clareza onde antes havia confusão e silêncio.

"A escrita é o espelho da mente. Onde há ordem na palavra, há paz no sistema." — Reflexão do Moreh.

---

Ⅱ. O Embasamento Técnico: Edição em Tempo Real

Para a implementação técnica do editor, utilizamos ferramentas que permitem a fluidez entre o pensamento e a visualização.

Arquitetura de Edição no Next.js 15

Utilizamos o @uiw/react-md-editor devido à sua robustez e capacidade de renderização em tempo real. No entanto, sua natureza dependente do navegador exige uma estratégia de carregamento dinâmico no App Router do Next.js.

Pontos Chave:

1. Carregamento Dinâmico: Uso de next/dynamic com ssr: false para evitar erros de window is not defined.
2. Sanitização de HTML: Integração com rehype-sanitize e rehype-raw para permitir embeds seguros (como YouTube).
3. On-Demand ISR: Mecanismo de revalidação que limpa o cache do Next.js assim que o "Livro da Papisa" (o arquivo MDX) é atualizado.

Tutorial Recomendado

Para entender a mecânica por trás da renderização de Markdown e embeds em React:

Referência: Official UIW MDX Editor Documentation

---

Ⅲ. Implementação: O Livro Aberto

Nesta sprint, consagramos os componentes que permitem a revelação do conteúdo:

1. MDXEditor.tsx: O ambiente de escrita em tempo real.
2. FrontmatterForm.tsx: Onde definimos os metadados (a identidade da página).
3. Fluxo de Publicação: Integração com o backend para salvar arquivos e disparar a revalidação.

Ver Código Fonte dos Componentes →

---

Voltar para o Mapa da Reconstrução →