Como Criar Artigos no Blog

O JustLaunch oferece suporte nativo para blog usando MDX, permitindo que você crie artigos ricos em conteúdo com suporte para Markdown e componentes React.

Estrutura de Arquivos

Para criar um novo artigo, você precisa criar uma nova pasta dentro do diretório src/app/articles com a seguinte estrutura:

src/app/articles/
└── nome-do-seu-artigo/
├── metadata.ts
└── page.mdx

Criando o Metadata

O arquivo metadata.ts contém as informações básicas do seu artigo. Crie-o seguindo este modelo:

export const article = {
  author: 'Seu Nome',
  date: '2024-01-04', // Data no formato YYYY-MM-DD
  title: 'Título do Seu Artigo',
  description:
    'Uma breve descrição do seu artigo que aparecerá nos cards e previews.',
}

export const metadata = {
  title: article.title,
  description: article.description,
}

Criando o Conteúdo

O arquivo page.mdx é onde você escreverá o conteúdo do seu artigo. Use este template como base:

import { ArticleLayout } from '@/app/shared/@JustLaunch/components/Blog/ArticleLayout'
import { getAllArticles } from '@/app/shared/@JustLaunch/services/blog/articles'
import { article } from './metadata.ts'

export default async function MDXPage(props) {
const allArticles = await getAllArticles()
return (
<ArticleLayout article={article} allArticles={allArticles} {...props} />
)
}

## Seu Conteúdo Começa Aqui

Escreva seu artigo usando Markdown. Você pode usar:

### Títulos e Subtítulos

- Listas com marcadores
- Para organizar informações
- De forma clara

1. Listas numeradas
2. Para passos sequenciais
3. E instruções

### Formatação de Texto

**Texto em negrito** e _texto em itálico_ são suportados.

### Blocos de Código

\`\`\`javascript
function exemplo() {
return 'Olá, mundo!';
}
\`\`\`

### Imagens

![Descrição da imagem](URL_DA_IMAGEM)

### Links

[Texto do link](URL_DO_LINK)

Recursos Suportados

O MDX suporta todos os recursos do Markdown e ainda permite:

• Componentes React
• Sintaxe JSX
• Importação de outros componentes
• Estilização personalizada
• Interatividade

Melhores Práticas

1. URLs Amigáveis: Use nomes de pasta em minúsculas, separados por hífen
2. Imagens: Otimize as imagens antes de usar
3. Metadata: Escreva descrições concisas e informativas
4. Formatação: Mantenha uma estrutura consistente nos artigos
5. Data: Mantenha a data atualizada no formato correto

Exemplo Completo

Aqui está um exemplo de um artigo completo:

metadata.ts

export const article = {
  author: 'João Silva',
  date: '2024-03-20',
  title: 'Como Implementar Autenticação no JustLaunch',
  description:
    'Um guia passo a passo para adicionar autenticação segura em seu projeto JustLaunch.',
}

export const metadata = {
  title: article.title,
  description: article.description,
}

page.mdx

import { ArticleLayout } from '@/app/shared/@JustLaunch/components/Blog/ArticleLayout'
import { getAllArticles } from '@/app/shared/@JustLaunch/services/blog/articles'
import { article } from './metadata.ts'

export default async function MDXPage(props) {
const allArticles = await getAllArticles()
return (
<ArticleLayout article={article} allArticles={allArticles} {...props} />
)
}

## Introdução

Neste artigo, vamos explorar como implementar autenticação em seu projeto JustLaunch...

## Pré-requisitos

Antes de começar, certifique-se de ter:

- Node.js instalado
- Projeto JustLaunch configurado
- Conhecimento básico de React

## Passo 1: Configuração Inicial

Primeiro, vamos instalar as dependências necessárias...

## Conclusão

Agora você tem um sistema de autenticação robusto...