This Blog

Motivation

I wanted a place to write about the mathematics and programming topics I find beautiful — Fourier analysis, category theory, compilers, algorithms. The existing platforms either couldn't render $\LaTeX$, lacked good syntax highlighting, or didn't let me embed interactive visualizations.

So I built my own.

Technical Stack

The blog is a Next.js App Router application, styled with Tailwind v4, and authored entirely in MDX.

MDX Pipeline

Content lives in content/{articles,slides,projects,snippets}/*.mdx. Each file has YAML frontmatter with title, date, description, banner, and tags.

The MDX pipeline is powered by next-mdx-remote/rsc — React Server Components render the content, so there's no client-side overhead for static prose. Interactive components are loaded with next/dynamic (no SSR) and injected via a central component map.

const Counter  = dynamic(() => import('@/components/interactive/Counter'),   { ssr: false })
const SineWave = dynamic(() => import('@/components/interactive/SineWave'),  { ssr: false })
const FourierViz = dynamic(() => import('@/components/interactive/FourierViz'), { ssr: false })
 
export const mdxComponents = { Counter, SineWave, FourierViz, Callout, ...htmlOverrides }

MDX files can then use <Counter /> or <SineWave /> directly without any imports — the components map handles everything.

Syntax Highlighting

Code blocks use rehype-pretty-code with the Shiki engine and the github-dark theme. This gives VS Code-quality highlighting with zero client-side JavaScript.

```python title="example.py"
def fib(n): return n if n < 2 else fib(n-1) + fib(n-2)
```

Mathematics

Math is rendered server-side with KaTeX via remark-math + rehype-katex. Both inline ($E = mc^2$) and display mode are supported:

Content Layout System

Different content types use different layouts:

Adding New Interactive Components

1. Create components/interactive/MyComponent.tsx (must be a Client Component)
2. Add a dynamic import to lib/mdx-components.tsx
3. Use <MyComponent /> in any MDX file — no per-file imports needed

That's the whole workflow.