Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

CitationTracker

Keep bibliography back-links associated with the last visited citation.

MDX@gaudi/design-system/mdx/CitationTrackerView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import CitationTracker from '@gaudi/design-system/mdx/CitationTracker';

Usage

import { CitationTracker } from '@gaudi/design-system/mdx';
// Mount once alongside the host's generated article markup.<CitationTracker />

Examples

Playground

Storybook

API

1 prop

Accessibility

Use real citation and bibliography links with unique IDs. Back-links must return to a valid citation.

Notes

  • The consuming markdown pipeline creates citation markup. Gaudi handles its runtime behavior; do not author generated attributes by hand.
AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.DetailsExpandable article details with an explicit summary.