Changing and updating the brhfl dot com template

It’s been a while since we had a good meta post here, which makes for a good excuse to perform a major overhaul on my template. In seriousness, this has been a long time coming. For starters, my site wouldn’t render on versions of Hugo past 0.47.1. While not a huge deal to keep old copies around, it only becomes more work as the versions roll by. None of the changes that I’ve made to support Hugo should have any visible effect on the site. But I’ve also been meaning to play around with revamping the navigation at the top. I was using this hacked-together ‘drawer’ type system to hide and reveal the categories, archive, and et cetera sections. I have preserved an archived copy of the home page with the old template intact for demonstration purposes. But I’m not doing that anymore, and let’s start there.

Site updates, supporting open source software, &c.

Haven’t done a meta post since August, so now seems like as good of a time as any to discuss a few things going on behind the scenes at brhfl dot com. For starters, back in November, I updated my About page. It was something I forced myself to write when I launched this pink blog, and it was… pretty strained writing. I think it reads a bit more naturally and in my voice now, and also better reflects what I’m actually writing about in this space. I also published my (p)review of Americana in November, which was an important thing to write. Unfortunately, it coincided with Font Library, the host of the fonts I use here, being down. This made me realize that I rely on quite a few free and/or open source products, and that I should probably round up ways to support them all. I’ll get to that at the end of this post, it’s a thought process that started in November, though.

Template updates

I’ve made a handful of updates to my Hugo template over the past few weeks. Hopefully the next step is to confirm compatibility with Hugo v0.19, genericize the template, and then release it — it’s at a point where it does enough of the things I want it to do right that I’m proud of it.

A while back (I suppose when I started working on wo), I added a new sort of Hugo taxonomy – series. Very tightly connected posts, hopefully only a large handful of posts to a given series, and any given post can only potentially belong to a single series (most won’t). This taxonomic declaration does a few things – namely adding the series name to the beginning of the post’s title wherever it shows up, and adding information about the series to the bottom of the post. Since I added this taxonomy, that information was just a link to the series page, listing its posts. Now, it’s an ordered list of all the items in the series, each one a link except for the current post. I’m pretty happy with it.

A minor update is that dates in post bylines now link to the respective month in the ‘archive’. Now, Hugo doesn’t really support pagination by date. There are a few hacked-together solutions out there for an archive page, and I won’t pretend mine is great. Really it’s always a full list of posts that hides everything but the month identified by the fragment specified in the URL. Some other changes related to this came out of the third recent change, regarding my drawers.

My panties drawers are how I refer to the little slide in/out menus in my top-level menu — categories, archive, and et cetera. The problem with these things is that I need to render each one in full to grab its unfolded height, but I obviously can’t do this in view of the user or else all sorts of nasty flickering will go on. I was hiding the entire body in CSS, doing these calculations, and then showing the body afterward via JS, falling back with a <noscript> to reveal anything. There’s no way to do this that isn’t a hack, but a hack that involves not having a page unless JS or <noscript> works is a pretty weak hack, and I’ve been meaning to bite the bullet and replace it with some CSS that shoves it way off screen (I already do this with my ‘Skip to main content’ link, hit tab).

In doing this, I tidied up a few classes and such that should make other drawers simpler — I had considered making the series list below the post a drawer, which I don’t think I’m still considering, but it’s nice that the drawer solution is more portable. Back to the archive page, I used to be able to do all of that while the body was already invisible and the drawers were doing their thing. I can’t do that now, so I’m using the same basic hack just on that page. It’s not ideal, but it’ll be fine until (hint, hint, dev team) Hugo can generate real date-based archive pages.

Game-in-a-post: Yz (or, on post-specific JS/CSS requirements in Hugo)