Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Citation

Citation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.

MDX@gaudi/design-system/mdx/CitationPopoverView 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 Citation from '@gaudi/design-system/mdx/CitationPopover';

Usage

---title: 'An Introduction to Knowledge Graphs'bibliography: ['meta/bibliography/references.bib', 'meta/bibliography/kg.bib']---
A heterogeneous graph [@HusseinYC18; @WangJSWYCY19; @YangXJWHW20] assigns types to nodes and edges.
The same source can be cited again later [@HusseinYC18].
<!-- Do not hand-write citation anchors, popover data attributes, or references markup. -->

Examples

Playground

Storybook

Accessibility

Generated citation links are real anchors with readable labels. Popovers open on hover or focus, grouped references remain individually reachable, and CitationTracker keeps bibliography back-links pointed at the most recent citation instance.

Notes

  • The authoring API is markdown citation syntax, not a React component API.
  • rehypeSimpleCitations is the blog rehype plugin. It loads BibTeX through citation-js, assigns first-use numbers, supports grouped citations, emits citation anchors, and appends the References list.
  • CitationPopover binds to generated anchors marked with data-citation-popover and reads the generated citation keys, numbers, and reference text from data attributes.
  • CitationTracker updates bibliography back-links so a reference points back to the most recent citation instance the reader used.
CitationTrackerKeep bibliography back-links associated with the last visited citation.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.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.