Lorem

Escaping this flatland is the essential task of envisioning information — for all the interesting worlds (physical, biological, imaginary, human) that we seek to understand are inevitably and happily multivariate in nature.

Good design is as little design as possible.

Any sufficiently advanced technology is indistinguishable from magic.

Headings #

Tests all heading levels below the post title (h1).

Third-level heading #

Fourth-level heading #

Fifth-level heading #

Sixth-level heading #

Inline formatting #

Tests inline text styles and link treatments.

This paragraph has bold text, italic text, bold italic text, strikethrough text, and inline code. Here is an internal link and an external link (opens in new tab).

This paragraph tests HTML inline elements: underlined text, bold via HTML, italic via HTML, strikethrough via HTML, the variable x, a date like 22 March 2026, a definition term which introduces new vocabulary, and the CSS abbreviation should show a tooltip on hover.

Lists #

Tests unordered, ordered, and task list rendering with nesting.

Unordered #

• First item
• Second item with sub-items
  • Nested item alpha
  • Nested item beta
    • Deeply nested item
• Third item

Ordered #

1. First step
2. Second step with sub-steps
   1. Sub-step one
   2. Sub-step two
      1. Deeply nested step
3. Third step

Task list #

• Completed task
• Incomplete task
• Another incomplete task

Definition list #

Sidenote

A numbered annotation in the margin column, toggled on narrow screens.

Margin note

An unnumbered annotation in the margin, used for brief asides.

Epigraph

A quotation set before or at the opening of a piece, attributing author and source.

Blockquotes #

Tests standard and nested blockquotes (distinct from epigraphs).

A blockquote is for inline quotations within the body text. It uses the default block styling with a left border.

Outer blockquote level.

Nested blockquote — used for quoting within a quote or for layered attribution.

Inline quotations and asides #

Tests HTML inline quotation, small text, and aside elements.

The W3C specification states that the q element represents some phrasing content quoted from another source, and the browser should add quotation marks automatically.

Sidenotes #

Tests numbered sidenotes, margin notes, and rich content within notes.

This paragraph demonstrates a numbered sidenote. This is a numbered sidenote. On wide screens it appears in the margin column. On narrow screens it collapses behind a toggle button. The superscript reference marker links to the note and vice versa.

Here is a margin note (unnumbered sidenote) for brief asides. This is a margin note — no number, just a quiet annotation in the margin. It works identically but without the superscript marker.

This sidenote contains rich formatting. A sidenote with emphasis, inline code, and a link to the homepage. Rich content like emphasis, code, and links should render correctly inside notes.

This sidenote contains an image. A small figure inside a margin note. Images in sidenotes should scale to the margin column width on wide screens.

Footnotes #

Tests GFM footnote syntax, rendered at the bottom of the post.

This sentence has a footnote¹. And here is another².

Figures #

Tests all four figure sizes and the dithered prop.

A paragraph of body text alongside the margin figure. The margin figure should float to the right on wide screens and sit inline on narrow screens. This text wraps around it when there is enough horizontal space.

Media #

Tests native HTML audio and video elements with public domain sources.

Audio #

A short public domain audio clip using the native <audio> element:

Video #

A short public domain video clip using the native <video> element:

Tables #

Tests GFM table with left, center, and right alignment.

Embeds #

Tests third-party embed rendering. The X and Bluesky embeds use external scripts that will likely be blocked by the site’s CSP policy — this is intentional and documents current behavior.

YouTube #

X (Twitter) #

just setting up my twttr

— jack (@jack) March 21, 2006

Bluesky #

👋 Bluesky is an open social network that gives creators independence from platforms, developers the freedom to build, and users a choice in their experience.

— Bluesky (@bsky.app) Sep 17, 2024

Code blocks #

Tests syntax highlighting across ten languages.

HTML #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
  </head>
  <body>
    <main id="content">
      <h1>Hello, world</h1>
    </main>
  </body>
</html>

CSS #

:root {
  --color-bg: #f4f1eb;
  --color-text: #1a1a1a;
  --font-body: "IBM Plex Serif", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141318;
    --color-text: #e8e4df;
  }
}

JSON #

{
  "name": "zharr.is",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "astro check && astro build"
  }
}

JavaScript #

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

TypeScript #

interface Post {
  title: string;
  slug: string;
  pubDate: Date;
  tags: string[];
  draft: boolean;
}

function getPublishedPosts(posts: Post[]): Post[] {
  return posts
    .filter((p) => !p.draft)
    .sort((a, b) => b.pubDate.getTime() - a.pubDate.getTime());
}

Go #

package main

import (
  "fmt"
  "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
  fmt.Fprintf(w, "Hello, %s", r.URL.Path[1:])
}

func main() {
  http.HandleFunc("/", handler)
  http.ListenAndServe(":8080", nil)
}

Python #

from pathlib import Path
from collections import Counter


def word_frequencies(path: Path) -> Counter[str]:
    text = path.read_text(encoding="utf-8")
    words = text.lower().split()
    return Counter(words)


if __name__ == "__main__":
    counts = word_frequencies(Path("input.txt"))
    for word, n in counts.most_common(10):
        print(f"{word:>15} {n}")

Bash #

#!/usr/bin/env bash
set -euo pipefail

for file in *.md; do
  wc -w "$file"
done | sort -rn | head -5

Lisp #

(defun fibonacci (n)
  "Return the Nth Fibonacci number."
  (cond
    ((= n 0) 0)
    ((= n 1) 1)
    (t (+ (fibonacci (- n 1))
           (fibonacci (- n 2))))))

(mapcar #'fibonacci '(0 1 2 3 4 5 6 7 8 9))

SQL #

SELECT
  p.title,
  p.pub_date,
  COUNT(c.id) AS comment_count
FROM posts p
LEFT JOIN comments c ON c.post_id = p.id
WHERE p.draft = false
GROUP BY p.id, p.title, p.pub_date
ORDER BY p.pub_date DESC
LIMIT 10;

That covers every design element. Each section above should degrade gracefully — sidenotes collapse on narrow screens, figures scale responsively, and code blocks wrap without horizontal overflow.