Welcome to the innards of my website. It’s built using Next.js and deployed on Vercel.
If you want to run this site locally:
- Make sure you have Yarn installed
git clone https://github.com/daneden/daneden.me- Run
yarnto install dependencies - Run
yarn dev - Party.
To build for production, run yarn build.
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.
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.
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
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
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.