Reusable snippets

Reusable snippets keep repeated definitions, warnings, and setup fragments consistent. Use the inline Snippet component for one literal value, and use imported MDX fragments when the same explanation appears on multiple pages.

Inline value

Set PLANDALF_PUBLIC_KEY in the browser environment and keep PLANDALF_API_KEY on the server.

Set <Snippet text="PLANDALF_PUBLIC_KEY" icon="key" /> in the browser environment and keep <Snippet text="PLANDALF_API_KEY" icon="lock" /> on the server.

Imported MDX fragment

import OfferTermSnippet, { offerSnippetDefaults } from "../../../src/components/docs/snippets/OfferTermSnippet.mdx";

<OfferTermSnippet term="offer" href={offerSnippetDefaults.href} />

Fragment file

Store reusable MDX fragments outside content/docs so they do not become public docs routes.

import Tooltip from '../v2/Tooltip.astro';
import Snippet from '../v2/Snippet.astro';

export const offerSnippetDefaults = {
  term: 'offer',
  href: '/docs/offers/overview',
};

export default function OfferTermSnippet({ term = offerSnippetDefaults.term, href = offerSnippetDefaults.href }) {
  return (
    <span>
      A Plandalf <Tooltip headline="Offer" tip="A sale configuration that can include products, prices, checkout layout, coupons, bumps, upsells, and completion behavior." href={href} cta="Open the Offers guide">{term}</Tooltip> is the root object behind checkout. Use <Snippet text="offer_founder_launch" icon="package" /> as the reusable example slug.
    </span>
  );
}

Authoring rules

Reusable snippet rules

Use Snippet for one valueinline

Use the component for API keys, package names, IDs, headers, paths, and command fragments.

Use imported MDX for repeated prosefragment

Import a fragment for reusable definitions, warnings, setup steps, or product explanations.

Keep fragments outside content/docsroute safety

Files under content/docs become public pages. Put reusable fragments under src/components/docs/snippets.

Pass variables as propscustomizable

Make repeated snippets adaptable with props such as term, href, or label.

Properties

Related