This is the first post on vignesh.ai. If you're reading this, the blog pipeline works — MDX files committed to the repo, compiled at build time, served as static pages.
How it works
Posts are .mdx files in a content/blog/ directory. Each file has frontmatter (title, date, tags) and a body written in markdown with support for custom React components. The filename becomes the URL slug.
At build time, the content utility reads all posts, parses frontmatter with gray-matter, calculates read time with reading-time, and sorts everything reverse-chronologically. Individual posts get compiled with next-mdx-remote on the server — no client-side MDX runtime.
The content utility exposes three functions:
getAllPosts()— reads every.mdxfile, parses frontmatter withgray-matter, calculates read time, returns a sorted array. No MDX compilation happens here — fast enough for the index page.getPostBySlug(slug)— reads a single file and compiles it withcompileMDXfromnext-mdx-remote/rsc. Returns the rendered React element plus frontmatter.getAllSlugs()— returns all valid slugs forgenerateStaticParams, so Next.js can statically generate every post at build time.
const post = await getPostBySlug("hello-world");
// { title, tagline, date, readTime, content: <ReactElement> }
The MDX components map is where custom components like RabbitHole get registered. When the compiler encounters <RabbitHole> in a post, it renders the actual React component instead of treating it as an HTML tag.
Rabbit holes
The signature feature of this blog is rabbit holes — expandable inline sections that let you go deeper on specific points without cluttering the main reading flow. Collapsed by default, they expand in-place with momentum animation matching the rest of the site.
If you never click one, you read a clean, complete post. If you click everything, you get a substantially richer experience — almost a different document.
Footnotes break reading flow — you jump to the bottom of the page and lose your place. Sidebars compete for attention and don't work on mobile. Modals are disruptive.
Rabbit holes are inline and contextual. They expand right where you are, preserving your position in the post. The content stays collapsed until you actively choose to explore it, so the default reading experience is clean and focused.
The animation uses the same momentum easing (cubic-bezier(0.16, 1, 0.3, 1)) as the rest of the site — things don't just appear, they arrive.
What this post proves
This post exists to verify the plumbing:
- MDX compiles and renders with proper typography
- Headings, lists, code blocks, and blockquotes are styled
<RabbitHole>sections expand and collapse inline- Read time is calculated from the main body
- Slugs route correctly, invalid slugs return 404
The best infrastructure is the kind you forget exists. It just works.
The stack
The blog sits on the same Next.js 16 App Router setup as the rest of the site. No new infrastructure, no CMS, no database. Just markdown files and a build step. The way it should be.