daneden / Daneden.me
Programming Languages
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
yarnto 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
function
that runs at build time to generate OG images using node-canvas.
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.