Hello, visualizations

This is a test post for the blog. Posts live in content/blog/ as MDX, so they're plain Markdown plus any React component I register. Everything below renders from that one file.

Math

Inline math works like $f(x) = \tfrac{1}{4}x^4 - x^2 + 0.35x$, and display math gets its own block:

The gradient descent update used in the playground further down is

Code

Code blocks are highlighted at build time with Shiki, follow the light/dark toggle, and support titles and highlighted lines:

export function descend(grad: (x: number) => number, x0: number, lr: number, steps = 50) {
  const path = [x0]
  for (let i = 0; i < steps; i++) {
    const x = path[path.length - 1]
    path.push(x - lr * grad(x))
  }
  return path
}

Charts

A line chart with hover crosshair, direct end labels, a legend, and a table view (try the Show table button):

A single-series area chart, which needs no legend because the title names the series:

A sorted bar chart with values at the bar tips and hover details:

Diagrams

Mermaid diagrams render client-side and re-theme with the toggle:

Interactive components

Any React component can be embedded. Here's a gradient descent playground. With a small learning rate it rolls into whichever valley it starts in. Push the rate up and it starts overshooting, and somewhere past 0.8 it diverges entirely:

Images

Images are plain Markdown. Put the file in public/blog/<post-slug>/ and link it from the root. The optional quoted title becomes the caption:

![The homepage on desktop](/blog/hello-visualizations/home-desktop.jpg "The homepage in dark mode, at 1440px")

They're resized for each screen, served as AVIF or WebP, and lazy-loaded. The size is read from the file at build time, so the page doesn't jump around as images load. A typo in the path fails the build rather than shipping a broken image.

Put images on consecutive lines, with no blank line between them, and they sit side by side:

For a caption with formatting, use the component:

Everything else

Standard Markdown and GFM still work: bold, italic, strikethrough, links, and tables:

To write a new post, drop an .mdx file in content/blog/ with title, date, summary, and tags frontmatter. Add draft: true to hide it in production.