Version 2

That's a lot of lines!
That's a lot of lines!

Welcome to version 2.0! I've been working away at the site for a few weeks now. There have been plenty of changes under the hood, and the front-facing side of things look similar.

I took the time to do a visual refresh, taking inspiration (and sometimes copying) from my favourite sites from other developers. I'm happy with how things look now (and there is dark mode). There will be undoubtedly more tweaks as time goes on.

What's new?

The catalogue

The flagship feature of this version is my catalogue feature. As the page describes, I wanted a repository to keep track of my favourite (and not) stuff. A nebulous descriptor, but what I'm trying to say is that it's anything and everything I had something to say.

Right now it's capturing books, podcasts, and comics. It's something that I will refine and add onto over time. I have plans to add music, video games, and even choice YouTube videos.

Under the hood everything is a Markdown file with front matter to help give additional information. Ratings, authors, URLs, and so on.

I dabbled with using Airtable to power everything, and that did indeed work… but I really like the idea of building everything myself. I opted to use flat files instead. Super portable and easy to work with.


This won't be evident from the site itself, but I switched (back) to using MDX to power my content. I had it for a while but eventually switched to plain Markdown. From myself in my commit logs:

I had initially planned to start using .mdx files more liberally in my writing, but have decided to keep things as plain Markdown for maintainability. I prefer to write my posts in an external editor and not everything supports .mdx files.

That time has come.

At the time, using MDX with NextJS was a complicated process. Now there are a multiple libraries to choose from. I went with next-mdx-remote for the simple reason that I was able to get it working quickly. I think mdx-bundler is more powerful (and is going to be the new beau for NextJS developers), though.

I like being able to define my own custom components, like this YouTube on I made:

export default function Youtube({ id, title }: Props) {
  return (
      allow="fullscreen; picture-in-picture"
        width: "100%",
        height: "325px",
        maxWidth: "100%",
        maxHeight: "calc((100vw - 40px) / (16/9))",

It means I can embed a YouTube video in a post like this:

<Youtube id="vEvlWyb29ik" />

I don't have any grand plans at the moment to build anything more intense than that, but I'm happy with the ability to do so.

Netlify CMS

I've loved Netlify CMS since I discovered it, but when I opted to move my deployments to Vercel I lost the ability to use it. Fast forward a year or two and other developers have come to my rescue with other identification methods. Now I can use Netlify CMS while hosting on Vercel.

Having Netlify CMS was essential for me because I wanted a way to manage my site content without being near my home computer with all my development tools set up.

I had hoped by now there'd be other options but it seems they've carved out their niche. Everyone else wants you to use their headless CMS service. Bleh.

I may end up making my own competitor to Netlify CMS one day…


I spent a lot of time making sure the developer experience (read: me) was enjoyable while working on it. I'm hoping now though that I won't have to make too many changes and can focus on building out the content.

Some favourite packages of mine in no particular order:

  • eslint-plugin-jsx-a11y Accessibility is important, and this will catch the easiest errors before it leaves the editor!
  • eslint-plugin-simple-sort I like things being in alphabetical order. This took some extra configuration to get it just right. I'll share my config below.
  • rehype-img-size Adds the width and height of any (local) image that is processed by rehype.
  • rehype-slug Adds id tags to all Markdown headers.

Simple sort eslintrc config:

"simple-import-sort/imports": [
        "groups": [
          // Packages. `react` related packages come first.
          ["^react", "^@?\\w"],
          // Aliases and absolute paths.
          // Relative paths.
          // SCSS/CSS.

What this does is sorts all packages first (and bumps "react" to the top), then local dependencies (that I have aliased to components, types, etc), and then finally relative path imports and CSS files.

That's all for now! Hope you like the new site. ✌️