Escrever

Criando e editando páginas

Criar o arquivo

Crie um arquivo com extensão .mdx dentro da coleção correta.

Estrutura de exemplo:

src/content/editarSite/minha-pagina.mdx

Configurar o frontmatter

No topo do arquivo, defina título e descrição:

---
title: 'Nome da página'
description: 'Resumo do conteúdo'
---

Exemplo completo de estrutura da página:

---
title: 'Nome da página'
description: 'Resumo do conteúdo'
sidebar_label: 'Nome curto'
sidebar_section: 'Operação'
sidebar_order: 20
---

# Título principal

Texto inicial da página.

Usar componentes

Importe e use os componentes para dar um visual profissional ao texto.

Componentes MDX

1. Caixas de aviso (Notice)

Estrutura em código:

<Notice type="info">Informações gerais.</Notice>
<Notice type="tip">Dicas práticas.</Notice>
<Notice type="warning">Pontos de atenção.</Notice>
<Notice type="danger">Risco de perda de dados.</Notice>

Resultado:

ℹ️ Informação

Padrão: use para informações gerais.

💡 Dica

Dica: use para atalhos e boas práticas.

⚠️ Aviso

Aviso: use para alertas que requerem atenção.

🚫 Cuidado

Perigo: use para ações que podem causar perda de dados.

2. Cards e grades (CardGrid)

Estrutura em código:

<CardGrid columns={2}>
  <Card title="Recurso A" icon="📁">
    Descrição curta do recurso.
  </Card>
  <Card title="Recurso B" icon="🌐">
    Descrição curta do recurso.
  </Card>
</CardGrid>

Resultado:

📁 Recurso A

Descrição curta do recurso.

🌐 Recurso B

Descrição curta do recurso.

3. Links em destaque (LinkCard)

Estrutura em código:

<LinkCard
  title="Infraestrutura Linux"
  href="/pt/atividades/projetos/sistemas/infraestrutura"
  description="Saiba como configuramos nossos servidores."
  icon="🐧"
/>

Resultado:

🐧 Infraestrutura Linux

Saiba como configuramos nossos servidores.

Imagens e layout

O posicionamento correto das imagens melhora a experiência de leitura.

Estrutura base em código:

<img src="/imagens/logos/logo-cpps-unesp.png" class="img-left" />
<img src="/imagens/logos/logo-cpps-unesp.png" class="img-right" />
<img src="/imagens/logos/logo-cpps-unesp.png" class="img-center" />

Classe	Como aplicar	Resultado
`img-left`	`<img src="/imagens/logos/logo-cpps-unesp.png" class="img-left" />`	Texto flui à direita.
`img-right`	`<img src="/imagens/logos/logo-cpps-unesp.png" class="img-right" />`	Texto flui à esquerda.
`img-center`	`<img src="/imagens/logos/logo-cpps-unesp.png" class="img-center" />`	Imagem centralizada e isolada.

💡 Dica

Ao usar img-left ou img-right, certifique-se de que o parágrafo seja longo o suficiente para contornar a imagem.

Sidebars colapsáveis

Comportamento esperado:

Colapso vertical: clique nas setas ao lado dos nomes dos grupos para expandir/recolher subpastas.
Colapso horizontal: no desktop, use as setas laterais para ocultar menus e ganhar área de leitura.

Estrutura de referência (rotas que usam o mesmo layout):

src/pages/[lang]/atividades/[...slug].astro
src/pages/[lang]/[support]/[...slug].astro
src/pages/[lang]/[editSite]/[...slug].astro

Exemplo de comando

Estrutura de verificação local:

# Para rodar o site localmente
npm run dev

# Para validar antes de abrir PR
npm run build

Qualidade de conteúdo

Para manter o projeto organizado e sem erros:

Use um editor com formatação automática de Markdown/MDX.
Revise links internos e caminhos de imagem.
Rode o build local antes de abrir PR:

npm run build

Edição via GitHub

Para facilitar a colaboração, as páginas possuem um link de edição no GitHub.

No final da página, clique em “Editar a página”.
O link abre o arquivo fonte no repositório.
Edite via interface web ou localmente.
Depois de salvar e enviar, o CI/CD do Cloudflare Pages publica as alterações.