Snippet

I snippet sono blocchi di contenuto riutilizzabili memorizzati in una directory /snippets. Importali in qualsiasi pagina MDX per evitare di duplicare il contenuto.

Creazione dei frammenti

Crea una directory /snippets nella radice della documentazione:

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

Scrivi il contenuto dello snippet come qualsiasi file MDX, ma senza frontmatter:

Before you begin, make sure you have:

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

Utilizzo dei frammenti

Importa e usa gli snippet nelle tue pagine:

---
title: Getting Started
---

## Prerequisites

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

<Prerequisites />

## Installation

Continue with your page content...

Componenti dei frammenti

Gli snippet possono contenere componenti 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>

Usalo in qualsiasi pagina:

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

## Need Help?

<SupportCTA />

Frammenti interattivi

Usa file .tsx con la direttiva 'use client' per gli snippet che richiedono hook di React (useState, useEffect, ecc.):

'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 in MDX:

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

<Counter />

Frammenti parametrizzati

Passa props per rendere dinamici gli snippet:

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

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

</Warning>
);

Usalo con props:

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

<ApiKeyWarning service="Stripe" />

Organizzazione dei frammenti

Nei progetti più grandi, organizza gli snippet in sottodirectory:

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

Importa con il percorso completo:

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

Casi d'uso comuni

Frammento o componente inline

Usa gli snippet per contenuti che appaiono in più pagine. Usa i componenti inline per componenti di presentazione una tantum su una singola pagina.

Qual è il prossimo passo?