What do you do when you realize your #blogging habit has gotten out of control and it's difficult for folks to find things now? Do you step back and take a break? You do not. Instead, you implement collections...
I tend to write several posts exploring distinct aspects of topic X, so I decided to build an alternate view into my site that organizes posts by themes, like #Nextjs, #Security, Career advice, Comics, Pinecone, Rants, Hacks, and Flights of Fancy. As one does.
The schema driving this feature is simple - just a title ( the key ), image, description to render under the link on the index page, and an array of slugs that map to the articles that are members of that collection. This means adding or editing collections is quick.
The build script has two main functions:
1. Build the collections pages (Next.js, Security, Databases)
2. Build the collections index page that shows all the collections
One of the things I love about this is the number of components I can reuse from other parts of my site.
That's why the template literals are so minimal. Each collections page is made up of three things:
First, A minimal layout file.
Second, a BlogPostCard component that knows how to render an article in an index view like this one.
Third, a #TypeScript loader that reads collections directories and /page.jsx from disk using a glob pattern, dynamically imports each page and extracts its metadata to get its title and description, and its hero image filepath, and then uses these to render the index view.
Et Voila: This is hopefully an easier way to get a high-level overview of what you can read about on my site, and, even more importantly, something I enjoyed #hacking this morning. Light mode version:
As usual, you can hook this into your npm build scripts via your package.json, so that collections are built programmatically when your site is built. This works very well both locally and on @vercel. The one minor pain is needing to regenerate pages locally when developing.
If you're curious, you can check out the build script here as my site is completely #opensource
github.com/zackproser/portfolio/blob/main/scripts/generate-collections.js
I run a free newsletter for developers who want to skill up. Be sure to follow me for more #developer and #productivity content zackproser.com/subscribe
Zack Proser
@zackproser
Developer Education at WorkOS. Full-stack open-source hacker and technical writer. I love building tools and sharing knowledge.