Skip to content
main
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

daneden.me

Gitpod Ready-to-Code Check lint results

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 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.

About

🏑 This is my website. There are many like it, but this one is mine.

Resources

License