Welcome to the new blog

This site now uses an MDX-based blog system. Every post lives in content/blog/*.mdx, and the rendering pipeline is wired up through @next/mdx + rehype-pretty-code. The result: zero client-side JavaScript for syntax highlighting, perfect dark/light theming, and full Markdown + Github-flavored Markdown support — including tables, footnotes, and task lists.

Why MDX

MDX lets me mix prose and React components in the same file. So I can drop in an interactive widget mid-article without leaving Markdown behind.

import { useState } from "react";
 
export function Counter({ start = 0 }: { start?: number }) {
  const [count, setCount] = useState(start);
  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      className="rounded bg-stone-900 px-3 py-1 text-white"
    >
      Clicked {count} times
    </button>
  );
}

Highlighted lines and inline code

You can call out specific lines by appending {1,3-4} to the language hint, mention a token like useEffect inline, or highlight a phrase with /useState/:

import { useEffect, useState } from "react";
const [value, setValue] = useState("");
useEffect(() => console.log(value), [value]);

Tables and task lists work too

• Set up MDX
• Add syntax highlighting
• Write the next post

Good engineering writing is just code review with more context.

That's it for now — more soon.