A Field Note on Building Things

This is an introductory paragraph. It exists to test the relationship between the page header and the actual body of the document.

Writing about software is strange. Sometimes the interesting part isn't the finished thing at all, but the sequence of decisions that eventually led there. This sentence contains strong emphasis, while this one contains emphasis. You can also combine them: strong emphasis and emphasis together.

Here's a normal link to Google, followed by an inline piece of code like getCollection("writing").

The Problem

A good content renderer should make ordinary writing feel effortless.

It should handle paragraphs, headings, lists, quotations, links, images, code, tables, and all the little things that eventually appear in a real document without requiring the author to think about the HTML underneath.

A Smaller Heading

This paragraph exists mainly to test the spacing between a third-level heading and the content that follows it.

Another paragraph gives us a chance to see how consecutive paragraphs behave.
Why not have this one be a bit longer than the previous one? It might help us see how the spacing between paragraphs behaves when the content is of different lengths.

Lists

Unordered List

• First item
• Second item
• Third item with bold text
• Fourth item containing inline code
• Fifth item containing a link

Ordered List

1. Define the problem.
2. Build the smallest useful version.
3. Test the assumptions.
4. Learn something unexpected.
5. Change the plan.

Nested Lists

• Software
  • Frontend
  • Backend
  • Tooling
• Music
  • Singing
  • Recording
  • Audio analysis
• Japanese
  • Reading
  • Listening
  • Conversation

Quotes

The interesting part of building something is often the part that didn't go according to plan.

And a second paragraph after the quote, so the spacing around blockquotes can be judged properly.

Code

Sometimes I want to mention a small piece of code inline:

const posts = await getCollection("writing");

A larger example should preserve whitespace and remain horizontally scrollable when necessary:

export async function getCollection(type: ContentType) {
  const directory = getCollectionPath(type);
  const fileNames = await fs.readdir(directory);

  const items: ContentItem[] = [];

  for (const fileName of fileNames) {
    if (!fileName.endsWith(".mdx")) continue;

    const filePath = path.join(directory, fileName);
    const rawContent = await fs.readFile(filePath, "utf8");

    const { data } = matter(rawContent);

    items.push({
      ...(data as ContentFrontmatter),
      slug: fileName.replace(/\.mdx$/, ""),
      type,
    });
  }

  return items;
}