Everything a post can render

This post exercises everything the site can generate. Use it as a reference when you write, and as a visual test when you change the styles.

## Headings

The post title at the top of this page is the only heading level 1. Each page keeps one h1, so a post body starts at level 2. The table of contents lists level 2 headings only.

## Heading level 3

Level 3 starts a subsection.

## Heading level 4

Level 4 divides a subsection.

## Heading level 5

Level 5 is for short labelled groups.

## Heading level 6

Level 6 is the smallest heading.

## Text formats

A paragraph can mix bold, italic, bold italic, strikethrough, underline, inline code, and a link to the writing page. External links, such as Zola, open in a new tab.

Smart punctuation converts “straight quotes”, dashes – like this – and ellipses… as you type.

A footnote keeps a side comment out of the sentence.^[1] It also works with a named label.^[2]

## Lists

An unordered list can nest:

• Linux hosts
• OpenStack control planes
  • Nova
  • Neutron
• Ceph storage clusters

An ordered list is a numbered checklist:

1. Map the system.
2. Define done.
3. Keep a rollback path.

A task list tracks state:

• Write the post
• Render the diagrams
• Replace the demo content

A definition list pairs a term with its meaning:

Failure domain

A set of components that can fail together.

Placement group

A Ceph unit that maps objects to OSDs.

## Special blocks

## Markdown alerts

Five alert types use standard Markdown syntax, for example > [!NOTE].

A note adds useful context that a reader can skip.

A tip shows an easier way to do something.

An important block states what a reader must know to succeed.

A warning flags a risk that needs attention now.

A caution flags an action with negative consequences.

## Notice blocks

Four more types use the notice component. Their body accepts Markdown.

## Blockquote

A plain blockquote carries a key statement:

A boring upgrade is built in advance: map the system, write down what success means, and rehearse the failures.

## Code

A code block sets its language for syntax highlighting:

fn main() {
    println!("Calm infrastructure is designed.");
}

nodes:
  - id: client
    label: Client
    tone: blue

cargo run -- diagrams check

A code block can also show line numbers and highlight lines:

1[extra]
2demo = true
3highlight = "a post"

A long line scrolls inside the code box, and the language label and Copy button stay in place:

openstack --os-cloud production-region-one compute service set --disable --disable-reason "planned-maintenance-window" compute-node-0042.example.internal nova-compute

## Tables and media

Table columns can align left, centre, or right. Wide tables scroll inside their own box.

An image can sit on its own or in a figure with a caption:

A horizontal rule separates two parts of a post:

## Diagrams

Each diagram compiles from a YAML file in diagrams/. Every diagram has a toolbar to zoom, fit, reset, and copy as PNG. Animated diagrams also have play, speed, and direction controls.

## Detailed style

The detailed style is the default. This is the smallest useful diagram:

Edges have three line styles, three routes, and three arrow options:

Edges have four animation types, and flow has three directions:

Manual layout places each node at explicit coordinates. This diagram also shows all eight tones and both node shapes:

Automatic layout can also run top to bottom, with rank overrides and groups:

## Architecture detailed style

The architecture-detailed style draws physical infrastructure with switch, server, and VM nodes, NIC and switch port grids, port-to-port links, and named bonds. Hover a node to trace its links.

## Architecture simple style

The architecture-simple style draws logical network membership. Networks are rails and nodes attach to them. Hover a legend entry to highlight its network.