Astro + MDX Project
This project is configured for .mdx files with plugins for internal linking, callouts, diagrams, code highlighting, SEO, search, and RSS.
- Read the sample MDX post
- View all 27 callout types & anchor links
- Mermaid diagrams & Expressive Code
- Search the site with Pagefind
Configured Plugins
Internal Linking
- rehype-slug — Adds
idattributes to all headings - rehype-autolink-headings — Adds clickable anchor links to headings
Callouts
- remark-directive — Enables
:::typecontainer directive syntax - remark-callout — Custom plugin for 27 callout types
Diagrams & Code
- astro-mermaid — Renders Mermaid diagrams client-side
- astro-expressive-code — Beautiful code blocks with VS Code themes, frames, markers
SEO
- @astrojs/sitemap — Auto-generated XML sitemap with changefreq, priority, i18n
- @jdevalk/astro-seo-graph — Full SEO: JSON-LD schema.org graph, OG/Twitter, IndexNow, llms.txt, build-time checks
- astro-capo — Optimizes <head> element order for performance (capo.js)
- astro-compressor — Post-build gzip + brotli + zstd compression
Search
- astro-pagefind — Client-side full-text search with Component UI, filtering, ranking
RSS
- @astrojs/rss — RSS 2.0 feed for blog posts with XSLT styling
Styling
- Tailwind CSS v4 — Utility-first CSS via
@tailwindcss/vite