Sample MDX article with external links and a YouTube header

This sample article exists to exercise a few content features together: MDX authoring, package-backed external link icons, inline citations, and a YouTube-powered header.

Why this file exists

The current blog pipeline expects reference-style links instead of inline markdown links. That means external sources should look like the YouTube example [1] or the GitHub example [1], with optional matching citations like [2].

Example MDX content

You can still mix normal Markdown with lightweight MDX.

.typst-text { pointer-events: bounding-box; } .tsel span, .tsel { left: 0; position: fixed; text-align: justify; white-space: nowrap; width: 100%; height: 100%; text-align-last: justify; color: transparent; white-space: pre; } .tsel span::-moz-selection, .tsel::-moz-selection { color: transparent; background: #7db9dea0; } .tsel span::selection, .tsel::selection { color: transparent; background: #7db9dea0; } .pseudo-link { fill: transparent; cursor: pointer; pointer-events: all; } svg { fill: none; } .outline_glyph path, path.outline_glyph { fill: var(--glyph_fill); stroke: var(--glyph_stroke); } .outline_glyph path, path.outline_glyph { transition: 0.2s fill stroke; } .hover .typst-text { --glyph_fill: #66bab7; --glyph_stroke: #66bab7; } .typst-jump-ripple, .typst-debug-react-ripple { width: 0; height: 0; background-color: transparent; position: absolute; border-radius: 50%; } .typst-jump-ripple { border: 1px solid #66bab7; } .typst-debug-react-ripple { border: 1px solid #cb1b45; } @keyframes typst-jump-ripple-effect { to { width: 10vw; height: 10vw; opacity: 0.01; margin: -5vw; } } @keyframes typst-debug-react-ripple-effect { to { width: 3vw; height: 3vw; opacity: 0.01; margin: -1.5vw; } } ∑4𝑖=1𝑖=10

That keeps the file small while still proving the article parses as MDX instead of plain Markdown.

External links

A few external references for testing:

Closing note

If this article renders correctly, the page should show a video header from YouTube and preserve the linked bibliography entries in generated exports.