Preview

Preview renders inline link previews for markdown links transformed by the blog MDX pipeline.

MDX@gaudi/design-system/mdx/PreviewView in Storybook Source

It is the MDX adapter over the Core LinkPreview, which owns the rich, type-aware rendering.

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 Preview from '@gaudi/design-system/mdx/Preview';

Usage

[assaf.website](https://assaf.website)
[Unavailable link](https://this-link-will-not-work.invalid)
[Internal blog link](/blog/engineering/gaudi-my-bash-framework)
<!-- Generated by the blog pipeline:<Preview url='https://assaf.website' title='assaf.website' /><Preview url='https://this-link-will-not-work.invalid' title='Unavailable link' /><Preview internal url='/blog/engineering/gaudi-my-bash-framework' title='Internal blog link' />-->
<!-- Direct component usage is reserved for React pages and deterministic Storybook examples. -->

Examples

Playground

Storybook

States

Storybook

API

14 props

Accessibility

Preview renders a real link with a readable label. The hover card is supplemental; the target URL remains reachable without JavaScript, images, or preview metadata.

Notes

remarkLinks converts external http and https markdown links into Preview MDX text elements with url and optional title attributes.
rehypeInternalLinks converts matching internal blog anchors like /blog/category/slug into Preview internal elements after markdown has become HAST.
External previews call the configured endpoint; without one nothing is fetched. Unavailable URLs render a red fallback link instead of breaking article content.
Internal previews skip remote fetching and can use local metadata supplied by the app or generated pipeline.
What each link shows (repository stars and language, video channel and duration, article author and date, post author and counts, Wikipedia excerpts) is decided by normalizeLinkPreview in Core/LinkPreview; the adapter only keeps the pipeline props. Images the payload lacks come from the app's resolveImage.
The endpoint resolves from the endpoint prop, then SiteConfigProvider preview={{ endpoint }}; with neither, links render from previewData or as plain links without fetching.

LinkPreviewA link enriched with what the destination is. One normaliser, normalizeLinkPreview, turns the app's preview payload into a kind (repository, video, article, social post, docs, Wikipedia, package, image, file, internal post or website) and the rich fields that kind earns; three variants present it.ImageImage renders editorial MDX images with caption, dark-mode source, fallback source, and click-to-open modal behavior.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.