Long-form writing

Notes, explainers, and blog posts: the post header, sidenotes, margin figures, footnotes, theorem environments, and collapsible detail.

Experimental May change in any minor version before 1.0.

In this chapter 14 pages

Post header

Example note: the Hodge Laplacian, drawn

A worked example on one triangle.

14 September 20266 minute read

Topology

astro

<PostHeader
  title="Example note: the Hodge Laplacian, drawn"
  lede="A worked example on one triangle."
  date="2026-09-14"
  minutes={6}
  tags={["Topology"]}
/>

The title is set like a paper's, so a site's posts and papers read as one series. The date prints in full, as "14 September 2026"; pass locale for another language. In an <Article>, give it slot="header" and it lines up with the text. The blog post pattern shows the whole page.

Theorem environments

Definition 2.1 (Simplicial complex). A simplicial complex

K

on a vertex set

V

is a set of nonempty finite subsets of

V

such that every nonempty subset of a member is also a member.

Theorem 2.2. The kernel of the Hodge Laplacian

L_k

is isomorphic to the

k

-th homology group of

K

over the reals.

Proof. The kernel of

L_k

is the intersection of the kernels of

B_k

and

B_{k+1}^{\top}

, which are the harmonic

k

-chains, and these represent homology classes one to one.

astro

<Env kind="definition" num="2.1" name="Simplicial complex">...</Env>
<Env kind="theorem" num="2.2">...</Env>
<Env kind="proof">...</Env>

Kinds: definition, theorem, lemma, proposition, corollary, remark, example, proof. Theorems and lemmas set their body in italics, as print does; definitions sit on the wall gray; proofs end with a tomato box.

Sidenotes

A sidenote keeps a remark next to the sentence it belongs to.¹When the page has room after the text, the note sits there, in the margin. On a narrow screen it drops below the line. Use them for asides a curious reader wants and a hurried one can skip.

astro

<p>A sentence.<Sidenote n={1}>The aside.</Sidenote> More text.</p>

In the margin

Figure 1.A 2-cell and its three oriented edges.

A small figure, table, or code block can sit in the same margin as the sidenotes, beside the paragraph after it. Place it before that paragraph and give it .ply-margin, or pass margin to <Figure>. Where the margin is closed, it stays in the text, above that paragraph.

astro

<Figure margin num={1}>
  <img src={sketch.src} alt="A filled triangle with oriented edges." />
  <Fragment slot="caption">A 2-cell and its three oriented edges.</Fragment>
</Figure>
<p>The paragraph it sits beside.</p>

Keep margin blocks small: 14rem wide is room for a sketch, a short table, or a few lines of code. Anything larger belongs in the text.

Collapsible detail

Derivation of the update rule

Long derivations, extra tables, and setup details go here, closed by default, so the main argument reads straight through.

html

<details class="ply-details">
  <summary>Derivation of the update rule</summary>
  <p>...</p>
</details>

Quotes

Quotes keep a thin rule and a larger size, and the source goes underneath.Source, year

Footnotes

For references that should not interrupt the line, use a numbered list in .ply-footnotes at the end of the article.