🪄 Ferramenta Dev

MARKDOWNFORMATTER

Cole texto cru e receba Markdown limpo automaticamente — headings, listas e blocos de código prontos.

Fluxo instantâneo

7 headings5 itens de lista1 blocos de código1,903 caracteres

Texto de entradaCole qualquer conteúdo bruto ou rascunho

📄 Arquitetura – Renderização de Markdown no Frontend

1. Objetivo

Permitir que posts sejam escritos em Markdown cru ou em MDX (Markdown + JSX).

O frontend deve renderizar ambos sem distinção.

Evitar duplicação de dados (content_raw é a fonte da verdade).

Garantir liberdade total para criar novos componentes React (<Callout>, <Counter>, etc.) sem mudar o backend.

2. Fonte de Verdade

Banco armazena sempre:

```
{
"slug": "string",
"title": "string",
"content_raw": "string (MD/MDX cru)",
"excerpt": "string (pré-calculado ou gerado no front)",
"created_at": "timestamp",
"updated_at": "timestamp"
}
```

✅ content_raw: texto cru, único e obrigatório.

✅ excerpt: primeiro parágrafo limpo (auxiliar para listagem).

✅ topics: lista de tópicos principais (opcional, para analytics/preview).

❌ Nada de content_html duplicado no banco.

3. Fluxo de Dados
   CMS

Salva conteúdo cru no banco (content_raw).

Preview interno usando MDXProvider.

Não salva versão compilada.

Backend (Supabase)

Guarda apenas content_raw.

Pode ter triggers para gerar excerpt e topics.

Frontend (Next.js)

Busca content_raw.

Passa para MDXRemote.

Usa MDXProvider com MDXComponents registrados globalmente.

Se o post for apenas Markdown → renderiza normal.

Se tiver JSX → injeta os componentes registrados.

4. Renderização no Front

export default function Post({ post }) {
return (
<MDXProvider components={components}>

<article className="prose">
<MDXRemote source={post.content_raw} />
</article>
</MDXProvider>
);
}

5. Princípios

Sem duplicação → content_raw é a única fonte da verdade.

Sem compile no backend → renderização só no front.

Extensível → novos componentes = apenas registrar no MDXComponents.

Preview ≠ persistência → o editor compila apenas para preview local, nunca para salvar.

👉 Esse documento é o contrato fixo:

CMS escreve cru.

Banco guarda cru.

Front renderiza cru.

Markdown formatadoAtualizado automaticamente enquanto você digita

# Arquitetura – Renderização de Markdown no Frontend

## Objetivo

Permitir que posts sejam escritos em Markdown cru ou em MDX (Markdown + JSX).

O frontend deve renderizar ambos sem distinção.

Evitar duplicação de dados (content_raw é a fonte da verdade).

Garantir liberdade total para criar novos componentes React (<Callout>, <Counter>, etc.) sem mudar o backend.

## Fonte de Verdade

Banco armazena sempre:

```
{
"slug": "string",
"title": "string",
"content_raw": "string (MD/MDX cru)",
"excerpt": "string (pré-calculado ou gerado no front)",
"created_at": "timestamp",
"updated_at": "timestamp"
}
```

- ✅ content_raw: texto cru, único e obrigatório.

- ✅ excerpt: primeiro parágrafo limpo (auxiliar para listagem).

- ✅ topics: lista de tópicos principais (opcional, para analytics/preview).

- ❌ Nada de content_html duplicado no banco.

## Fluxo de Dados
### CMS

Salva conteúdo cru no banco (content_raw).

Preview interno usando MDXProvider.

Não salva versão compilada.

Backend (Supabase)

Guarda apenas content_raw.

Pode ter triggers para gerar excerpt e topics.

Frontend (Next.js)

Busca content_raw.

Passa para MDXRemote.

Usa MDXProvider com MDXComponents registrados globalmente.

Se o post for apenas Markdown → renderiza normal.

Se tiver JSX → injeta os componentes registrados.

## Renderização no Front

export default function Post({ post }) {
return (
<MDXProvider components={components}>

<article className="prose">
<MDXRemote source={post.content_raw} />
</article>
</MDXProvider>
);
}

## Princípios

Sem duplicação → content_raw é a única fonte da verdade.

Sem compile no backend → renderização só no front.

Extensível → novos componentes = apenas registrar no MDXComponents.

Preview ≠ persistência → o editor compila apenas para preview local, nunca para salvar.

- 👉 Esse documento é o contrato fixo:

CMS escreve cru.

Banco guarda cru.

Front renderiza cru.

Carregando...