Introduction

Last year, I spent a lot of time learning, prototyping, and building things that seemed interesting to me. I learned a lot, but not many of the things I built made it off my laptop. This year, I want to ship.

I’m going to try to ship something every week. It might be a prototype for a game, a tool, a video, a piece of procedural art, or something else entirely. The goal is to get something out there, to learn from the process, and to get back in the swing of shipping to production.

I’ll also be writing about that process here. Each Sunday, I’ll publish a new post, sharing what I built that week and how I did it.

This week, I’ve started the process of rewriting my personal site, where I’ll be posting these updates. I’ve used Next.js, React, Tailwind, ContentLayer, and MDX to put this together. That’s the stack that I’m most familiar with and I only had a couple of days this week, so I went with it. It’s a simple app for now, but It’ll get features and be refactored as I go.

Most of the time that went into this project was spent on the post format.

The posts are written in MDX, which is an extension of the markdown format that allows you to import and use React components inline, run code, and even import other .mdx files.

At the core of MDX is markdown, which is a simple markup language that allows you to write HTML in a more human-readable format. This means that, for the most part, the posts can be written in plain text, without much markup.

MDX supports custom components, so I've also added a few those, and expect the library to grow. For example, if a post needs a specific type of configurable visualization to explain a concept, a custom component can help.

I've created a simple layout system that supports columnar layouts with some control over the size of sections. For example:

<Cols cols={7} size="sm">
  <Col className="bg-red-500 rounded h-8" />
  <Col className="bg-orange-500 rounded h-8" />
  <Col className="bg-yellow-500 rounded h-8" />
  <Col className="bg-green-500 rounded h-8" />
  <Col className="bg-blue-500 rounded h-8" />
  <Col className="bg-indigo-500 rounded h-8" />
  <Col className="bg-purple-500 rounded h-8" />
</Cols>

gives the following result:

and:

<Cols cols={7} size="lg">
  <Col span={2} className="rounded h-8 bg-red-500" />
  <Col span={2} className="rounded h-8 bg-orange-500" />
  <Col span={2} className="rounded h-8 bg-yellow-500" />
  <Col span={1} className="rounded h-8 bg-green-500" />
  <Col span={3} className="rounded h-8 bg-blue-500" />
  <Col span={2} className="rounded h-8 bg-indigo-500" />
  <Col span={2} className="rounded h-8 bg-purple-500" />
</Cols>

gives us:

The support for tailwild classes here allows for custom styling to be applied. For example, if you want the columns to be responsive, you can use tailwind classes to specify how the columns should stack. In fact, you could use tailwind classes to style up any sort of layout or visualization you want to include in a post, right there in the content.

I'm happy enough with this setup. It should provide a good amount of flexibility when writing posts, with some sensible defaults. In the future I'd to extend code block functionality to support syntax highlighting and a copy button. I'd also like to add a few more custom components, like a video player, a code editor, and a few more layout options. I know that MDX has plugins for some of these things, so I'll be looking into those.

This is also my new personal site, so I'll be adding a few more pages to it and looking into speeding up page loads, improving accessibility, etc. Next.js is great for getting set up quickly, but it's not the most performant out of the box.

That's all for this week. I'll be back next week with another update!