Migrate blog posts from Markdown to MDX

[MaxGhenis]

Summary

Migrate the blog system from plain Markdown (rendered via ReactMarkdown) to MDX to enable embedding React components directly in blog posts.

Current State

• Blog posts are .md files in app/src/data/posts/articles/
• Rendered using ReactMarkdown with rehype-raw in MarkdownFormatter.tsx
• ~100+ existing markdown posts
• Some posts are Jupyter notebooks (.ipynb)
• Currently using iframe workarounds to embed React components (e.g., OrgLogos)

Benefits of MDX

1. Embed React components directly - <OrgLogos />, <PolicyChart />, custom calculators
2. Interactive blog posts - live code examples, toggleable sections
3. Reusable components - consistent styling across posts
4. Better DX - TypeScript support, props validation
5. Backward compatible - plain markdown still works

Implementation Steps

1. Add MDX dependencies:

   • @mdx-js/react
   • @mdx-js/rollup (for Vite) or @mdx-js/loader

2. Configure Vite to handle .mdx files

3. Create MDX component provider with allowed components

4. Update MarkdownFormatter.tsx to use MDX renderer for .mdx files (keep ReactMarkdown for legacy .md files)

5. Update posts.json or post loading logic to handle both .md and .mdx

6. Document component usage for blog authors

7. Gradually migrate posts that would benefit from components

Considerations

• Keep backward compatibility with existing .md posts
• Jupyter notebooks (.ipynb) need separate handling
• Consider build performance with many MDX files
• Document available components for non-technical contributors

Related

• Current iframe workaround: /embed/org-logos route added for blog embedding