Sample Post 2 · unemployed.foo

This post exists to be copied. Every component below is styled by site.css and follows both themes automatically, because it uses the same tokens as the rest of the site rather than defining its own.

Body copy

Paragraphs sit in a 68-character measure, which is where reading speed peaks — longer lines cost you the start of the next line on the return sweep. Links look like this, and inline code like struct node *next uses a subtle surface background so it reads distinctly without clashing.

Code & Syntax Highlighting

Add data-lang="c" (or sh, python, sql, json) to any <pre> element. At build time, Shiki syntax-highlights the code block automatically for both dark and light mode, and the build tool injects the 1-to-1 prompt icon copy button (.copy-cmd) matching /comp/.

int list_length(struct node *head) {
    int count = 0;
    while (head != NULL) {
        count++;
        head = head->next;
    }
    return count;
}

JSON configuration example:

JSON

{ "id": "blog", "path": "/blog/", "dir": "blog", "output": "blog",
  "footer": true, "fineprint": false, "sitemap": "0.8", "strip": true }

Code Blocks & Copy Buttons

Every code block uses the exact 1-to-1 structure and copy button from /comp/. Clicking the prompt icon button copies the code and triggers the sliding COPIED animation.

Diagrams

Draw them as inline SVG with no colours of its own. Use stroke="currentColor" and let the CSS supply the palette; the diagram then flips with the theme for free. A PNG cannot do that — it stays a light rectangle in dark mode.

Every request passes through the Worker. Without run_worker_first, the edge would answer from cache and nothing would ever be logged.

Accessibility

A diagram needs role="img" and an aria-label that says what it shows, not what it is. Screen readers announce nothing useful for a bare <svg> full of rectangles.

For a screenshot, use a normal figure — raster images are the right tool there, and width/height attributes stop the page reflowing as it loads:

CODE

<figure>
  <img src="/blog/img/shot.png" width="1200" height="720" alt="…">
  <figcaption>What the dashboard shows after a week.</figcaption>
</figure>

Tables

Wrapped in .table-wrap. Tables use natural spacing (width: max-content) and white-space: nowrap so text does not awkwardly wrap into narrow columns, allowing clean horizontal scrolling when needed.

Component	Markup	Notes
Code block	`<pre tabindex="0" data-lang="c"><code>`	Shiki build-time highlighting
Header code block	`.codeblock` + `.code-head > .lang`	Language tag & copy button
Diagram	`figure > .diagram > svg`	`currentColor` only
Callout	`.callout`, `.callout.warn`	Label carries meaning

Colour is never the only cue. That rule is why the callout has a written label and the dashboard's status badges spell the kind out underneath.