P3 — MDX Pipeline Demo
This page exists to verify P3 of the astrofu migration plan:
the Markdown pipeline has been upgraded to MDX, headings get clickable #
anchors via rehype-autolink-headings (behavior: 'append'), code blocks
carry the .shiki class so the antfu.me markdown.css rules light up,
and MDX components hydrate as Vue islands.
Magic links
Inline tech name with a logo:
Code with notation transformers
function greet(name: string) {
console.log('hello', name)
return `hi, ${name}`
}
greet('astrofu')
- const old = 'antfu.me on Vite-SSG'
+ const next = 'astrofu on Astro'
GitHub-style alert
Note
If you can read this in a tinted box with an i icon and a colored left
border, then remark-github-alerts is wired up correctly.
Tip
The ## Magic links heading above should have a small # to its right
on hover — that is rehype-autolink-headings in append mode.
Inline code and a link
This paragraph contains inline code and an external link to
the Astro docs — which should open in a new tab.