Snippets

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

Creando 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)

Usando Snippets

Importa y usa snippets en tus páginas:

---
title: Getting Started
---

## Prerequisites

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

<Prerequisites />

## Installation

Continue with your page content...

Componentes de Snippet

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 varias páginas:

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

## Need Help?

<SupportCTA />

Snippets Interactivos

Para snippets que necesiten hooks de React (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:

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

<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:

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

<ApiKeyWarning service="Stripe" />

Organizando 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:

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

Casos de Uso Comunes

Snippet vs Componente en Línea

Usa snippets para contenido que aparece en varias páginas. Usa componentes en línea para componentes de presentación puntuales dentro de una sola página.

¿Qué sigue?