A tour of the editor, written in the editor

This post is a reference sheet. Open it in the studio to see how each block is made, then delete it when you have your own writing to put here. Type / on an empty line in the studio to open the block menu.

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. Replace this post with something of your own.