Footnote

Footnote hydrates generated markdown footnote references with hover and focus popover previews.

Installation

pnpm add github:ahmadassaf/design-system

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

Usage

Inline prose can use a normal markdown footnote reference.[^model-note]
[^model-note]: This explanatory note can include links, emphasis, and short supporting context.
<!-- Runtime wiring lives outside the post:app layout/page shell: <MDXLayoutRenderer ... />article runtime: <Footnote />-->
<!-- The blog pipeline generates anchors with data-footnote-popover, data-footnote-number, and data-footnote-content. -->

Examples

Playground

Accessibility

Generated footnote references are real anchors, so readers can still jump to the notes list. Footnote adds hover and focus previews without replacing the underlying link or removing the accessible footnote relationship.

Notes

• Footnote listens for mouseenter, mouseleave, focusin, and focusout on generated links marked with data-footnote-popover="true".
• The popover body is read from generated data-footnote-content, so the plugin must sanitize and serialize the note content before runtime.
• The component positions the popover next to the reference and flips left when it would overflow the viewport.
• The visible footnotes list remains the source of truth; the popover is a reading convenience.

Related