What's Changed: Bilberry Theme Version 4
|
This article has narration: (Press the 'p' key to toggle playback) |
Yeah, I know, I was away for a while and some things broke.
In apology, take this: breaks fixes, and some improvements!
No really, these might actually be useful to anyone reading this, and not just me.
Well, some of them.
If you’re not aware, I use a modified fork of the Bilberry theme for Hugo (it’s on the “site-local” branch). Recently, major version 4 was released, which is effectively a separate theme in the v4 subdirectory, which changes a few fundamental parts. For example…
No More Asset Compiling
Okay, sure, this one is a complete me change. 99% of the theming comes from two locations, assets/js/theme.js and the assets/sass folder. Previously, there weren’t used for the actual served content, they were packed up into a static theme.css and theme.js bundle that was served.
Well, they still are, but now that’s done automatically through Hugo itself, meaning I don’t have the fun time of forgetting to run npm run prod before committing changes and then have to make the commit of shame.
If I make a theme change, it just builds it.
Goodbye medium-zoom, Hello dimbox
Now when I first added the medium-zoom library, this theme didn’t have a modal zoom, though that was later added (I forget the library). Version 4 replaced that with dimbox, a slightly more flexible (and better looking) alternative, and as such I’m now using the intended method instead of rolling my own. This does remove support for separate large images when zoomed in, though I’ll live with that, because it does give me one other feature: galleries. I can specify a “gallery” attribute on images, such that all images with the same attribute are grouped together for you to scroll through while zoomed in. Plus, native support for captioning images, and displaying image alt-text / description text when zoomed in (without the weird issues I had with layer stacking and some elements not dimming correctly, if you know you know), means I’ll be working with this (and probably dropping my CDN storage space usage in half by removing the detailed images).
Wait, But How?
As I discussed last time when I talked about putting extra data into what few fields I have for a Markdown image, there’s only a few fields you have for a Markdown image.
The general recipe is  which doesn’t leave a lot. I put sizing information into the URL fragment, the part after the # character, that tells your browser where to scroll to, because that has no use server-side.
Well wouldn’t you believe it, I’ve done it again.
Dimbox uses the title for the image caption if you put one in, so I can’t exactly use that.
What I can do is add yet another component to the fragment, like this: https://example.com/testimage#1000x500.d7000, and that makes the gallery of this image d7000.
Amazing. Further abusing URLs, what else would you expect from me.
Return to Home
If you scroll down, there’s now an arrow in the bottom-right corner, a handy jump-to-top button. Not a major change, but still a nice one for people that like that sort of thing.
Easier Theme Customization
All of the CSS variables got moved out of _variables.scss (which doesn’t exist) and now integrate with Hugo since they’re using Hugo’s processing pipeline, meaning most of the variables (like colors, widths, and fonts) can be set in the site-wide config.toml instead of messing around inside your theme.
Additionally, the JS for handling keyboard shortcuts was completely revamped to block the shortcut keys if you’re in any form of text input box, instead of doing a bunch of boolean variable-based toggling of handling depending on which items have focus. If it’s a text box or text area, the entire shortcut handler bails out early. Neat!
Links Got Greenlit
Reminder: the original theme used to distinguish hyperlinks with… italics (but hey, they turned your highlight color when you hovered over them!), which isn’t the best. The standard has always been blue (or any other contrasting color) and underlined, to make sure it’s distinct enough that you don’t have to guess. Well, here, now it’s kinda backwards from that. At least with my color palette, links appear green, and the underline appears when you hover, showing without a doubt that they’re links. We’ll see how much I like it, I might change the specific color it’s using depending on how well I think it’ll go for accessibility.
Two Cosmetic Fixes
So if you’re been here recently, you probably noticed two things:
- Code formatting is weird if the lines are longer than the text area here
- The Littlefoot footnotes had their CSS kinda… broken.
One of them is incompatible CSS, and that was because I was actually hosting my own littlefoot.css copy with some color changes to fit my theming.
Well, as much as I liked that touch, I think it’s time to go, and now I’m using the CDN served version, which should stop that from happening.
I, personally, don’t exactly like the newer (smaller) look, but if it works it works, I’ll have to find some way of automating changes if I really want to go messing with it again.
The other was because, for some reason, the correct overflow attributes weren’t set on code, so the actual code itself was escaping it’s bounding box and going way off into the shadow realm.
Well that’s been fixed, now there’s a proper scroll bar.
This also, until I pick through fixing this one, means that the “copy code” button that shows up requires you to scroll all the way to the right to see it.
But hey, at least I did give one overall improvement here, now the line numbers (if I choose to show them) are anchors, meaning that it’s possible to link to a particular line if need be.
Probably not going to be that useful but I’ll take it on the off chance I somehow find it useful.
Okay, so maybe it is mostly me changes, at least for now. I’m working on a few things in the background here, so things like dimbox galleries may take some time to make it to the posts that could use them the most, but I’m trying to get everything done, while fitting it around a 10-hour-a-day work schedule.