Snippets

Los snippets son bloques de contenido reutilizables almacenados en un directorio /snippets. Impórtalos en cualquier página MDX para evitar duplicar contenido.

Crear Snippets

Crea un directorio /snippets en la raíz de tu documentación:

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

Escribe el contenido del snippet como cualquier archivo MDX, pero sin frontmatter:

Before you begin, make sure you have:

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

Usar Snippets

Importa y usa snippets en tus páginas:

---
title: Getting Started
---

## Prerequisites


<Prerequisites />

## Installation

Continue with your page content...

Componentes en Snippets

Los snippets pueden contener componentes de 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>

Úsalo en múltiples páginas:

## Need Help?

<SupportCTA />

Snippets Interactivos

Para snippets que necesitan React hooks (useState, useEffect, etc.), usa archivos .tsx con la directiva '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>
  );
}

Importa en MDX:

<Counter />

Snippets Parametrizados

Pasa props para hacer los snippets dinámicos:

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

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

</Warning>
);

Úsalo con props:

<ApiKeyWarning service="Stripe" />

Organizar Snippets

Para proyectos más grandes, organiza los snippets en subdirectorios:

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

Importa con la ruta completa:

Casos de Uso Comunes

Snippet vs Componente Inline

Usa snippets para contenido que aparece en múltiples páginas. Usa componentes inline para componentes de presentación únicos dentro de una sola página.

¿Qué sigue?