This post is an MDX file. It renders with the same layout and prose styles as a plain markdown post, but it can also embed interactive React components as Astro islands.
How it works
The post lives in src/content/posts/ alongside regular .md files. Astro’s content collections treat .mdx and .md identically — same schema, same route, same layout. The only difference is that .mdx files can import React components.
Islands are hydrated selectively using Astro’s client:* directives. This site uses client:visible, which defers hydration until the component scrolls into view. The chart below is a React island — the rest of the page is static HTML.
Posts per month
The chart shows a fictional post-count dataset to demonstrate a LineChart from Recharts 3.x rendered as an Astro island:
Hovering over a data point shows the tooltip. The chart is wrapped with an error boundary — if Recharts throws, only this island shows the fallback, not the whole post.
Callout blocks
Blockquotes in MDX posts are automatically replaced by a styled callout component. No import needed — the mapping is defined once in the shared component barrel and applied to every .mdx post.
The callout component is a static Astro component — no JavaScript, no hydration.
What this proves
.mdxfiles work in the existing content collection with no schema changes (MDX-01)- React islands hydrate correctly on the CF Workers static deployment (MDX-02)
- Element overrides (
blockquote → Callout) apply without per-file imports (MDX-03) - MDX posts get full BlogLayout, prose typography, and reading time (MDX-04)
- A broken island shows an error fallback, not a white screen (MDX-05)