blogCreator — Style Guide

Guia de referência completo para criação de posts. Aqui você encontra todos os markups disponíveis no Markdown e os componentes Vue que podem ser usados nos arquivos .mdx.

Sumário

• Títulos
• Ênfase e formatação de texto
• Listas
• Links e imagens
• Código
• Tabelas
• Citações
• Divisores
• Checkboxes
• Frontmatter
• Componentes Vue
  • Callout
  • DiagramFlow
  • DnsTable
  • AdvantageGrid
  • BadgeGroup

Títulos

Títulos são criados com o símbolo #. Quanto mais #, menor o nível do título. Use # apenas uma vez por post (é o título principal). A hierarquia correta melhora tanto a leitura quanto o SEO.

# H1 — Título principal do post (use apenas uma vez)
## H2 — Seção principal
### H3 — Subseção
#### H4 — Tópico menor
##### H5 — Raramente necessário
###### H6 — Evite usar

Resultado:

H1 — Título principal

H2 — Seção principal

H3 — Subseção

H4 — Tópico menor

H5 — Raramente necessário

H6 — Evite usar

Ênfase e formatação de texto

Recursos para destacar partes do texto sem precisar de HTML.

**negrito** — para termos importantes
*itálico* — para ênfase suave ou títulos de obras
***negrito e itálico*** — use com moderação
~~tachado~~ — para indicar algo removido ou incorreto
`código inline` — para nomes de arquivos, comandos, variáveis

Resultado:

negrito — para termos importantes itálico — para ênfase suave ou títulos de obras negrito e itálico — use com moderação tachado — para indicar algo removido ou incorreto código inline — para nomes de arquivos, comandos, variáveis

Listas

Lista não ordenada

Use - ou * para itens sem ordem definida.

- Primeiro item
- Segundo item
- Terceiro item
  - Item aninhado
  - Outro aninhado
    - Terceiro nível

Resultado:

• Primeiro item
• Segundo item
• Terceiro item
  • Item aninhado
  • Outro aninhado
    • Terceiro nível

Lista ordenada

Use números seguidos de . para sequências com ordem importa.

1. Instalar dependências
2. Configurar o ambiente
3. Rodar o projeto
   1. Subir o banco
   2. Subir a API
   3. Subir o frontend

Resultado:

1. Instalar dependências
2. Configurar o ambiente
3. Rodar o projeto
   1. Subir o banco
   2. Subir a API
   3. Subir o frontend

Links e imagens

Links

[texto visível](https://url-do-link.com)
[link com título](https://url.com "Aparece no hover")
[link interno](#títulos)

Resultado:

texto visívellink com títulolink interno

Imagens

![texto alternativo](https://url-da-imagem.com/foto.jpg)
![logo do projeto](./assets/logo.png "Título opcional")

Resultado:

💡 Dica: sempre preencha o texto alternativo — ele é importante para acessibilidade e SEO.

Código

Inline

Use crase simples para mencionar código dentro de um parágrafo.

Execute `npm install` antes de rodar o projeto.
O arquivo de config fica em `nuxt.config.ts`.

Resultado:

Execute npm install antes de rodar o projeto. O arquivo de config fica em nuxt.config.ts.

Bloco de código

Use três crases e informe a linguagem para ativar o syntax highlight.

```javascript
const tunnel = {
  id: 'fbd983b2-24fd-4aa7-a358-25944befdc59',
  name: 'globe',
  url: 'https://globe.icoms.com.br'
}
```

Resultado:

const tunnel = {
  id: 'fbd983b2-24fd-4aa7-a358-25944befdc59',
  name: 'globe',
  url: 'https://globe.icoms.com.br'
}

Linguagens suportadas mais comuns:

Tabelas

Tabelas são criadas com | para separar colunas e --- para definir o cabeçalho. O alinhamento é controlado pelos : na linha do separador.

| Coluna 1      | Coluna 2       | Coluna 3       |
|---------------|:--------------:|---------------:|
| alinhado esq  | centralizado   | alinhado dir   |
| valor         | valor          | valor          |

Resultado:

💡 Dica: para tabelas DNS, registros ou dados técnicos, prefira o componente ::dns-table — ele é muito mais elegante visualmente.

Citações

Use > para criar blocos de citação. Útil para destacar frases, notas ou trechos de outras fontes.

> Esta é uma citação simples.

> Esta é uma citação mais longa que pode ocupar
> várias linhas no arquivo fonte.
>
> E pode ter múltiplos parágrafos.

>> Citação aninhada dentro de outra citação.

Resultado:

Esta é uma citação simples.

Esta é uma citação mais longa que pode ocupar várias linhas no arquivo fonte.

E pode ter múltiplos parágrafos.

Citação aninhada dentro de outra citação.

Divisores

Use --- para criar uma linha horizontal que separa seções visualmente.

Seção A

---

Seção B

⚠️ Deixe sempre uma linha em branco antes e depois do ---, caso contrário o parser pode interpretá-lo como um título H2.

Checkboxes

Útil para listas de tarefas, checklists de configuração ou pré-requisitos.

- [x] Instalar Node.js
- [x] Instalar Cloudflared
- [ ] Criar conta na Cloudflare
- [ ] Configurar o DNS
- [ ] Testar o túnel

Resultado:

• Instalar Node.js
• Instalar Cloudflared
• Criar conta na Cloudflare
• Configurar o DNS
• Testar o túnel

Frontmatter

O frontmatter fica no topo do arquivo entre --- e define os metadados do post. O Nuxt Content lê esses dados e os disponibiliza para o layout da página.

---
title: "Título do Post"
description: "Descrição curta para SEO e listagens"
date: 2026-03-31
category: "tutoriais"
tags: ["Tag1", "Tag2", "Tag3"]
cover: "https://url-da-imagem-de-capa.com/foto.jpg"
readTime: 8
draft: false
---

Componentes Vue

Os componentes abaixo são usados em blocos MDC (::nome-do-componente{...} … ::) nos ficheiros de conteúdo. Com markdown.mdc: true no Nuxt (este projeto), isso funciona em .md e .mdx. Os ficheiros Vue ficam em app/components/ e são auto-importados pelo Nuxt.

Callout

Blocos de destaque para informações importantes, avisos e dicas. Existem quatro variantes visuais controladas pela prop type.

Props:

Uso:

::callout{type="info"}
**Informação** — Use para dicas, contexto adicional ou observações neutras.
::

::callout{type="warning"}
**Atenção** — Use para alertar sobre comportamentos inesperados ou cuidados necessários.
::

::callout{type="success"}
**Sucesso** — Use para confirmar que algo está correto ou funcionando.
::

::callout{type="error"}
**Erro** — Use para indicar algo que não deve ser feito ou que causará problemas.
::

Resultado:

DiagramFlow

Diagrama de fluxo vertical interativo. Ideal para mostrar arquiteturas, pipelines e sequências de etapas. Cada nó aceita ícone, label, sublabel e variante visual.

Props do array nodes:

Uso:

::diagram-flow
---
nodes:
  - label: "Browser"
    sub: "Usuário final"
    icon: "🌐"
    type: "highlight"
  - label: "Cloudflare Edge"
    sub: "CDN + TLS"
    icon: "🔶"
  - label: "Túnel criptografado"
    sub: "cfargotunnel.com"
    icon: "🔒"
    type: "accent"
  - label: "Sua aplicação"
    sub: "localhost:5173"
    icon: "💻"
    type: "highlight"
---
::

Resultado:

DnsTable

Tabela elegante para exibir registros DNS. Gera badges coloridos automaticamente por tipo de registro (A, CNAME, MX, TXT, etc.).

Props do array rows:

Uso:

::dns-table
---
rows:
  - type: "CNAME"
    name: "globe.icoms.com.br"
    value: "fbd983b2-24fd-4aa7-a358-25944befdc59.cfargotunnel.com"
  - type: "A"
    name: "icoms.com.br"
    value: "192.0.2.1"
  - type: "MX"
    name: "icoms.com.br"
    value: "mail.icoms.com.br"
  - type: "TXT"
    name: "icoms.com.br"
    value: "v=spf1 include:_spf.google.com ~all"
---
::

Resultado:

AdvantageGrid

Grid de cards para destacar vantagens, features ou características de uma solução. Os cards aparecem com animação escalonada e têm hover interativo.

Props do array items:

Uso:

::advantage-grid
---
items:
  - icon: "🚀"
    title: "Alta performance"
    desc: "Respostas em menos de 100ms"
  - icon: "🔒"
    title: "Seguro por padrão"
    desc: "TLS em todas as conexões"
  - icon: "📦"
    title: "Fácil de instalar"
    desc: "Um comando e está rodando"
  - icon: "🌐"
    title: "Funciona em qualquer rede"
    desc: "Sem necessidade de IP fixo"
---
::

Resultado:

BadgeGroup

Grupo de tags/badges coloridas para o rodapé do post. As cores são atribuídas automaticamente em rotação a partir de uma paleta de 6 cores.

Props:

Uso:

::badge-group{:tags='["Cloudflare", "Node.js", "Vue", "Nuxt", "DNS", "Firebird"]'}
::

Resultado:

ArticleFigure

Imagem com legenda opcional, largura em percentagem da coluna do artigo, alinhamento (esquerda / centro / direita) e modo bloco ou flutuante: com float-*, o texto dos parágrafos Markdown que vêm logo a seguir pode ficar ao lado da imagem (em ecrãs largos; em viewports estreitas a figura volta a ocupar a largura útil).

Props:

Notas:

• Com layout="block", width e align posicionam o bloco (ex.: 48% à esquerda).
• Com float-left ou float-right, não coloques --- nem um título entre a figura e o texto que queres ao lado; o fluxo Markdown tem de ser contínuo.
• HTML alternativo: <figure class="article-figure"> … </figure> continua válido; o CSS global aplica o estilo “simples” (aprox. ~50% centralizado) a figuras sem o atributo data-article-figure gerado por este componente.

Uso:

::article-figure{src="/images/exemplo.jpg" alt="Descrição" caption='Legenda visível' width="52" align="center" layout="block"}
::

::article-figure{src="/images/exemplo.jpg" alt="Mini" caption="Texto ao lado" width="36" layout="float-right"}
::

Resultado (exemplo):

Referência rápida