Trechos

Trechos são blocos de conteúdo reutilizáveis armazenados em um diretório /snippets. Importe-os em qualquer página MDX para evitar duplicar conteúdo.

Criar trechos

Crie um diretório /snippets na raiz da documentação:

my-docs/
├── docs.json
├── introduction.mdx
└── snippets/
    ├── prerequisites.mdx
    ├── installation.mdx
    └── support-cta.mdx

Escreva o conteúdo do trecho como em qualquer arquivo MDX, mas sem frontmatter:

Before you begin, make sure you have:

- Node.js 20 or higher
- A GitHub account
- A text editor (VS Code recommended)

Usar trechos

Importe e use trechos nas suas páginas:

---
title: Getting Started
---

## Prerequisites

import Prerequisites from '/snippets/prerequisites.mdx';

<Prerequisites />

## Installation

Continue with your page content...

Componentes de trechos

Os trechos podem conter componentes do Jamdesk:

<Columns cols={2}>
  <Card title="Documentation" icon="book" href="/docs">

    Browse our guides

</Card>
  <Card title="Contact Support" icon="headset" href="/support">

    Get help from our team

</Card>
</Columns>

Use-os em várias páginas:

import SupportCTA from '/snippets/support-cta.mdx';

## Need Help?

<SupportCTA />

Trechos interativos

Para trechos que precisam de hooks do React (useState, useEffect etc.), use arquivos .tsx com a diretiva 'use client':

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Importe no MDX:

import { Counter } from '/snippets/counter';

<Counter />

Trechos parametrizados

Passe props para tornar os trechos dinâmicos:

export const ApiKeyWarning = ({ service }) => (
  <Warning>

    Never commit your {service} API key to version control. Use environment variables instead.

</Warning>
);

Use com props:

import { ApiKeyWarning } from '/snippets/api-key-warning.mdx';

<ApiKeyWarning service="Stripe" />

Organizar trechos

Para projetos maiores, organize os trechos em subdiretórios:

snippets/
├── components/
│   ├── cta-cards.mdx
│   └── feature-table.mdx
├── warnings/
│   ├── api-key.mdx
│   └── deprecation.mdx
└── shared/
    ├── prerequisites.mdx
    └── support-links.mdx

Importe usando o caminho completo:

import CtaCards from '/snippets/components/cta-cards.mdx';
import ApiKeyWarning from '/snippets/warnings/api-key.mdx';

Casos de uso comuns

Trecho vs. componente inline

Use trechos para conteúdo que aparece em várias páginas. Use componentes inline para componentes de apresentação pontuais em uma única página.

Próximos passos?