daneden.me

Welcome to the innards of my website. It’s built using Next.js and deployed on Vercel.

Installation

If you want to run this site locally:

• Make sure you have Yarn installed
• git clone https://github.com/daneden/daneden.me
• Run yarn to install dependencies
• Run yarn dev
• Party.

To build for production, run yarn build.

Interesting Things

atoms.ts

atoms.ts defines the atomic style values for the site's design system. This approach to defining design system styles is documented in my blog post, Subatomic Design Systems.

Many of the atoms are mirrored in CSS variables declared in Layout.tsx, but occasionally (such as in the open graph image generator) need direct reference in JavaScript.

Open Graph Image Generation

I wanted to be able to generate images for blog posts based on their titles. To achieve this, I have a serverless function which uses node-canvas to generate an image using the same fonts and colors that are used on the site itself.

The OG Image function is one of the few things that ought to be protected against regressions, so I have a Cypress end-to-end test set up to prevent regressions.

Category Pages

Next.js allows dynamic path static generation via getStaticPaths. I'm using this in [category].tsx to generate pages for blog post categories.

mdxUtils.ts

mdxUtils.ts has some handy functions to co-locate things I want to do with my blog posts, including:

• Getting all the blog posts and their front matter/metadata
• Sorting by date and filtering out "hidden" posts
• Keeping track of post categories
• Getting posts by category

widont.ts

A personal favourite, widont.ts is a tiny function that replaces the last space in a string with a non-breaking space. Great for preventing widows on post titles.