Ars Lucidum Light modeDark mode


The kitchen sink: a specimen of everything

This paragraph tests the prose fundamentals: italics for emphasis, bold for weight, both at once, and an inline link to elsewhere sitting mid-sentence. Smart punctuation should render “curly quotes,” an apostrophe in don’t, an en-dash in pages 12–34, and an em-dash — like this — as proper typographic marks. Old-style numerals should make 1726 and 2026 sit low in the line, and the ellipsis… should be a single glyph.

A second-level heading

Some body text under an h2, long enough to wrap at least once so line-height and the ragged right edge can be judged against the heading above it.

A third-level heading

And one more level down, since h3 is realistically the deepest a blog post goes.

Quotation, two kinds

First, an excerpt quote — plain markdown >, for quoting external content you’re responding to (a post, a statement, documentation):

We are pleased to announce that, effective next quarter, the service you rely on will be reimagined as part of our commitment to innovation, with exciting changes to pricing.

— Some Company, Inc., a statement worth responding to

A reply paragraph follows naturally at full measure, in your own voice.

Second, a flavor quote — the shortcode, for epigraphs and quotations kept for their own sake:

The first principle is that you must not fool yourself — and you are the easiest person to fool. So you have to be very careful about that.
— Richard Feynman, *Cargo Cult Science*, 1974

A short paragraph after both, to check spacing.

Lists

Unordered, with some nesting:

Ordered:

  1. First step
  2. Second step
  3. Third step, referencing version 0.21.0 to test numerals in lists

Code

Inline code spans inside a sentence, plus fenced blocks:

fn main() {
    let greeting = "Hello, correspondence";
    println!("{greeting}");
}
zola serve --drafts
git add -A && git commit -m "post: kitchen sink" && git push

A paragraph after the code to confirm block spacing.

A table

ElementStatusNotes
HeadingsStyledh1 through h3 in use
Code blocksStyledSyntax classes from Zola
TablesUnstyledThe theme defines no table CSS

An image

A placeholder image — drop any photo.jpg into this post’s folder

A horizontal rule (the fleuron)

The next element is a markdown ---, which should render as the centered green fleuron rather than a line:


Text continues after the section rest, as if the letter resumed on a new thought.

A footnote

Some claims deserve a small annotation at the bottom of the page1.

1

Like this one, which should render as a footnote if footnotes are enabled in the markdown settings.

A diagram

graph LR
    A[Write markdown] --> B[git push]
    B --> C[Cloudflare builds]
    C --> D[Letter published]

The block above renders as a diagram only on pages that declare mermaid = true in their [extra] front matter — the script loads from a CDN solely on those pages, so ordinary letters stay free of third-party JavaScript.

A sequence diagram, taller and dialogue-shaped:

sequenceDiagram
    participant R as Reader
    participant C as CDN
    participant B as Blog
    R->>C: GET /posts/kitchen-sink/
    C-->>R: cached HTML
    R->>C: GET fonts, icons
    C-->>R: assets
    Note over R,B: no server involved at all

A state diagram, for the lifecycle of a letter:

stateDiagram-v2
    [*] --> Draft
    Draft --> Draft: edit
    Draft --> Published: remove draft flag, push
    Published --> Revised: amend
    Revised --> Published: push again
    Published --> [*]

A wide flowchart, to test horizontal overflow on narrow screens:

graph LR
    A[Idea] --> B[Outline] --> C[Draft] --> D[Edit] --> E[Proof] --> F[Publish] --> G[Share] --> H[Regret nothing]

A pie chart, the roundest thing this site will ever contain:

pie title Time spent on this blog
    "Writing" : 20
    "Theming" : 65
    "Debugging Zola" : 15

And a bar chart via xychart, for when a letter needs numbers:

xychart-beta
    title "Letters per month"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Letters posted" 0 --> 6
    bar [1, 3, 2, 5, 4, 6]

And a git graph, on brand for the workflow:

gitGraph
    commit id: "init"
    commit id: "theme"
    branch dark-mode
    commit id: "palette"
    checkout main
    commit id: "kitchen sink"
    merge dark-mode
    commit id: "first letter"