A tour of the editor, written in the editor

This post is a reference sheet of how I create every pieces and posts in the studio that powers the content you see.

Code, in three styles

Every code block has a language, an optional file name and a style. Paper follows the site theme.

src/lib/content.tsTypeScript

export async function listEntries(collection: Collection) {
  const files = await fs.readdir(dirFor(collection));
  return files
    .filter((f) => f.endsWith(".json"))
    .map((f) => readEntry(collection, f));
}

Terminal is always dark, for commands and output.

Shell

pnpm install
pnpm dev
# open http://localhost:3000/studio

Grid sits on a dotted ground. Use it for specs, configs and anything architectural.

tokens.jsonJSON

{
  "canvas": "#ffffff",
  "fg": "#000000",
  "line": "#ebebeb"
}

Emphasis and marks

Text can be bold, italic, underlined, ~~struck through~~, highlighted, inline code, H₂O or E = mc². Links look like this.

A pull quote lifts one sentence out of the piece and gives it room.

Callouts

A note callout, for context the reader shouldn't miss.

A warning callout, for things that can go wrong.

Lists and tasks

Bulleted lists
for loose collections

Numbered lists
for steps in order

Set up the design system
Write the first real post

Tables

Typeface	Used for
Geist Sans	Headlines, body text, poems and interface
Geist Mono	Code, labels and data

Quotes and verse

A blockquote, for words that belong to someone else.

A stanza keeps its line breaks, so a poem can live inside an essay without losing its shape.

That's everything.