A Test Article

This article exists so the markdown pipeline, the typography and the page chrome have something real to render while the site is being built. Replace it — or delete it — once there is a first genuine piece of writing here.

Reading like a book

The measure is held near sixty-five characters, the line height is generous, and the body is set in a serif that was drawn for print. Paragraphs after the first are indented rather than separated by a blank line, the way a typeset book does it, so the column reads as one continuous block of text instead of a stack of cards.

The point of all of this is that an argument made over several thousand words should be as easy to follow on the tenth page as it was on the first.

Emphasis and inline marks

Ordinary emphasis and strong emphasis carry the weight they normally do, inline code is set in a monospace face at a size that does not tower over the surrounding text, and a link is underlined rather than recoloured.

Block elements

A blockquote is set slightly smaller, indented, and marked with a rule rather than a coloured background — again, the print convention.

A list, because every article eventually needs one:

• the first item,
• the second item, which runs long enough to wrap onto a second line so the hanging indent is visible,
• and the third.

And a numbered one:

1. compile the markdown at build time,
2. emit a route per article,
3. serve it as static HTML.

Code

Code blocks are the one place the page stops pretending to be a book:

// The file name is the URL, so an article is renamed by renaming its file.
export function slugify(name) {
  return name.replace(/\.md$/, "").toLowerCase(); // trailing ".md" and case
}

TypeScript is highlighted the same way:

/**
 * What the build hands the page: everything the template needs about an
 * article, with the prose itself kept out of it.
 */
export interface Article {
  slug: string;
  title: string;
  // Flat, not nested — a table of contents can rebuild the tree from `level`.
  headings: { id: string; level: number }[];
}

// Declaring `Article` names it; using it as an annotation does not.
const article: Article = articles[0];

And so is Marko, which is rather the point of all this:

<!-- State is declared where it is used, not hoisted into a component. -->
<let/count=0>
<button onClick() { count++ }>
  Clicked ${count} times
</button>

Footnote-ish asides

A horizontal rule separates a coda from the body:

---

That is the whole of the test article.