hypertext, words and more

Refactored and Re-loaded

It’s a tough business to manage a website.

Between, the pandemic, looming anxiety, and a medically necessary surgery to repair my right knee (more on that later), it seems I’ve left my website in a sorry state for a few months now. I migrated my website to a static infrastructure thanks to Gatsby and Netlify earlier this year. I’ve largely been really happy with this setup of publishing in WordPress, and triggering Netlify page/post generations via a web hook. The pagespeed score alone was incredible. I could sing praises all day long, but what I want to write about today, is refactoring.

I let my v1 repo sit untouched for roughly 8 months. Yikes. I had plenty of errors and was hastily written. It was not typed at all, and was largely a mess. I decided to get serious, and wrote a list of must-haves for a v2:

  • Typescript baby
  • styled-components
  • Better support for more post types (such as bookmarks or projects)
  • More effective linting setup and better error handling
  • Client-side Apollo-powered GraphQL queries for bookmarks and dynamic content where possible (such as comments, coming later)
  • DRY out the code base, and remove unused dependencies
  • More effective theming approach

A tall order indeed. However, it was possible! I powered through it, and renamed my .js files to .ts and .tsx and largely followed Gatsby’s own provided typescript example, which was really helpful when it came time to debug build-time errors locally. As I was working on this refactor, I scoped out Brian Lovin’s website and just fell in love with the feed/timeline style he uses to organize his bookmarks. So, naturally, I took great inspiration from him to build something similar:

I’m pretty pleased with the results. I’ve wanted something like this for a very long time. So, I want to take a moment to thank Brian for open sourcing his site (although his site is powered with next.js, it was an inspiration none the less). It paved the road for me to investigate a path forward building a similar suite of components using Apollo Client and wp-graphql.

Ultimately, the list of changes and new features led to this nightmare diff (mostly configuration and newlines to get typescript working):


But it built successfully, and I was happy to finally have Typescript at the ready.

Up next, I will be finally adding back the commenting ability to my blog posts (and maybe setup a proper site search?). After that, I’ll probably add some portfolio and personal work. But, until then I will be resting comfortably sipping IPAs and mulled wine during this holiday, playing video games and pampering my two buds, Frank and Kevin:

Merry Christmas!