Changelogs
In a move to bring more transparency and engagement to my website, I've added a new section for changelogs. This addition is more than just an update; it's a narrative of my site's growth and evolution. I document each change, big or small, providing insights into why and how I implement them.
The changelogs are available at oesterkilde.dk/changelogs, but if you're reading this paragraph, you likely already know. 😄
As part of this release, I've also taken the opportunity to clean up my codebase a bit. It's a necessary behind-the-scenes task that ensures the site remains fast and efficient. Additionally, I reorganized the navigation bar for better user flow by merging the content from the /uses page into the /about page. This change is about streamlining the site, making it easier for visitors to find the information they care about.
How It Works
To go into a bit more depth about how I implemented my changelogs, it really was quite simple.
Data
Currently, all the content on my website is written in MDX and resides within the repository together with the rest of the code for my site. In the future I might move this to a CMS instead in order to more easily make changes to my content without needing to redeploy the entire website.
For turning these MDX files into pages, I rely on Next.js to do the heavy-lifting by using dynamic routes. All I have to do is is set up the intial layout and from there, it's all automatic so when I create a new MDX file in my /data/changelogs folder, it will magically appear as a new entry in my app. ✨
Learn more about working with MDX in Next.js here.
Additionally if I respected Semver for this site, I could take steps to automate some of all of this using a tool such as Changesets for example and then parsing the CHANGELOG.md file created. I did this for the "What's new" section of the Satellite Design System documentation when I was working on that.
For now I'm manually writing out the entries instead.
Cover Images
Another step which I could probably automate is the cover images accompanying each changelog entry. Right now I design these in Figma on a per-need basis, but I could pre-generate a bunch of variations of the backgrounds and other elements I might need, and dynamically combine them based on each changelog entry. I already do something similar for the OG images of my projects.