Anchor links, comments explainer translated in the article’s language, and comments that are topologically ordered 🥳

Hello, folks! Today I’ve managed to update the Zola blog engine binary version in my CI, and I took a bit of time to also improve the blog itself, with some tiny new features. Who doesn’t love a self-indulging meta blog post, sometimes?

🔗automatic anchor insertion!

You might have noticed it: headers now have a small anchor icon and link, to their left! This is a new (?) feature of Zola, it’s being auto-inserted thanks to the following configuration option, in the [markdown] section:

insert_anchor_links = "left"

A bit of CSS to customize this anchor’s looks:

/* Put some margin next to the anchor */
a.zola-anchor {
    margin-right: 5px;
}

/* On hover, display a dotted square around the link, and avoid motion of the heading by lowering the right margin */
a.zola-anchor:hover {
    text-decoration: none;
    border: 1px dotted white;
    margin-right: 4px;
}

I like this, as it makes it possible to link to a specific section of a blog post now 🥳 I’ve missed that when moving from Pelican to Zola, before.

🔗comment section translation!

Before tonight’s changes, the comment section explainer would be translated using your browser’s favorite language, as defined by the navigator.language DOM property. This was convenient, but led to some inconsistencies: if your browser is configured to receives pages in English, and you’re reading a French article, the content would be in French, but the comment explainer would be in English.

You might say I’ve got too much time on my hands, but that’s fine: I’ve decided that articles in French would now have the explainer in French, while articles without a language (likely in English) would have the explainer in, well, English.

Interestingly, Zola has the notion of language for a section, or for a page (based on the file’s name, that must be suffixed with the language, before the markdown extension). That is, if the site is indeed configured to support multiple languages — i.e. having each page’s content translated in multiple languages! I really didn’t want to go down that path, so I’ve had to resort to a user-defined lang property in the extra section of individual pages (falling back to en, if the property isn’t defined in the page’s frontmatter). By rendering this property with Tera (the template engine) in the JS code, I can use it later to decide what to display¹:

{{ page.extra.lang | default(value='en') }}

🔗topological ordering of mastodon comments!

The ordering of comments could be confusing: comments were not sorted client-side, so they were likely ordered by their creation date, as received by the server endpoint. This caused some weirdness, for instance in the following case:

• account A comments, that’s reply 1
• account B comments, that’s reply 2
• account B comments in reply to 1, that’s reply 3

Since the replies would be rendered in the creation order, it seemed that message 3 was a reply to message 2. This is wrong, so I’ve decided to instead use a topological ordering, implemented by a tiny depth-first search, such that:

• top-level comments are now ordered by time
• then their replies are topologically ordered (by their parent/child reply relationship).

This should make the rendering more consistent with what you’d see on any Fediverse client, by putting the replies just below the post they replied to! Some day, I may add indent levels and guides, based on the reply’s depth, but not today, it’s late already 😌 See ya!