A demo of every visual component

Headings, emphasis, and size

Normal Markdown works everywhere: bold, italic, inline code, links, and lists.

A large centered heading

fine print, smaller and muted

Blockquotes, pull-quotes, and callouts

A normal Markdown blockquote:

Boring infrastructure is underrated.

A larger editorial pull-quote:

“The fastest code is the code you never wrote.”

Asides for notes, warnings, and tips:

Code blocks

Fenced code blocks work as usual:

def idempotent(handler):
    def wrapped(event):
        if already_processed(event.id):
            return "ok"
        handler(event)
        mark_processed(event.id)
        return "ok"
    return wrapped

Terminal

A faux terminal window — static, no JS:

$git push –forceEverything is fine.$echo “probably fine”probably fine$git status –shortworking tree clean

HTTP Requests

Demonstrate API interactions with various methods. Compact mode shows method and route only; full mode includes request body and mocked response.

{
  "title": "A new thought",
  "tags": [
    "api",
    "demo"
  ],
  "published": true
}

Images and figures

Drop images under public/thoughts/<slug>/ and reference them with /thoughts/<slug>/file.png.

Animated canvas

A tiny inline canvas animation. Paused when offscreen, and rendered as a single static frame when the user prefers reduced motion.

GIFs

GIFs are just images. Drop a .gif in public/thoughts/<slug>/ and use <Figure> or plain Markdown:

![alt text](/thoughts/my-post/animation.gif)

Thumbnails (optional)

A thought can carry a thumbnail that shows up on the thoughts index and homepage latest list. Add thumbnail (and optional thumbnailAlt) to the frontmatter:

---
title: "My thought"
date: 2026-08-13
tags: [software]
thumbnail: "/thoughts/my-thought/cover.png"
thumbnailAlt: "A diagram of the system described below."
---

Drop the image under public/thoughts/<slug>/. If thumbnail is absent, the list renders as a plain row. This post has one set, so the index shows it.

That's it

If you need richer state or interaction than the canvas helper allows, write a Svelte component in src/components/ and import it here with client:visible:

import InteractiveTimeline from "../../components/InteractiveTimeline.svelte";

<InteractiveTimeline client:visible />

Citations and references

Inline citations link to the reference list at the bottom of the post. Use [?] for academic-style links[?].

Multiple references work too[?], and they all jump to the matching entry below.

Math and equations

Inline math like E = mc² fits in the sentence. Block equations center on their own line:

Labeled equations can be referenced by their label, rendered as (energy) next to the equation. Superscripts use <sup>, subscripts use <sub>: