My Hugo TODO list

Me, last week:

I have been preparing another blog post, and rather than finish it, of course I’ll take this small detour into adding some TODOs I’d eventually like to pursue.

Ok, now that I have finished that long post, I’ll update this one.

Add Last Edited (updated!)

I would like to regularly update some posts. Like this one. I saw a bit how that works, but I yet have to try it. After that, I will mark this as DONE. I am guessing it would add a “Last edited” timestamp but more importantly sort it first?

This was added to Hugo back in April 2022.

You can either manually set the date manually in the content:

---
title: "My Hugo TODO list"
date: 2023-05-26T20:50:30-03:00
lastmod: 2023-05-29T20:50:30-03:00  <=== HERE
tags:
  - blogging
  - hugo
  - html
---

Or just add enableGitInfo = true to your config.toml file. I opted for the second one. You can use both, the ordering is configured in frontmatter (which I yet have to read more about): Configure Dates

Best practices when customizing third party themes (new!)

Now I have copied&pasted two templates:

• single.html:
  • I added the mermaid rendering (see below)
  • I added the reading time
  • I added the “last modified” text
• list.html:
  • I prefer to sort by last modified

If the Theme Paper gets updated, I’ll have to redo my edits.

Should I make a private clone? Hmmm.

Serve static rendered mermaid diagrams

At work, I used to add PlantUML diagrams, coupled with an IDE plugin, and a browser plugin, you could see the rendered diagram rather than the text source code in your IDE and on GitHub’s rendered Markdown.

Lately, we’ve switched to Mermaid. I am not a great fan, but sometimes, the ease of tooling wins. In this case, GitHub renders Mermaid diagrams with no browser plugins, so it is essentially frictionless.

In this new post I was writing, I wanted to add a Mermaid diagram, and though it is not integrated into the tool, Hugo’s documentation for getting it to work is quite straight forward. You add a partial that handles the mermaid codeblock, and a <script/> that loads Mermaid’s JavaScript library. Even as a second-day Hugo user, I got it working quickly. This works, but:

• It seems wasteful to render the diagram each time. When the browser loads the page, the diagram is rendered via JavaScript. This happens in the browser. If you inspect the network calls, it downloads mermaid.js and a companion erDiagram.js (in this case) - no SVG is downloaded from an external server.
• I’d like to offer the reader an option to see the source code. At least I like to see how other people create diagrams.

Maybe in the future I can do something that:

• In development mode, sure, use the JavaScript which coupled with live-reload, lets you edit the diagram in real-time.
• But for the production build, it saves the rendered diagram, and have it be a normal <img /> HTML tag. I can do this manually at first.
• Add a link to https://mermaid.live for the reader to inspect the source code and/or use this <summary> HTML tag I always wanted to try out.

Customize HTMLs

After my first post, I noticed I like going off on tangents that are not always very relevant to the topic at hand. Maybe not all readers would like to read them. When reading books, I like when these sort of things are in some “aside” or “side note” block - rendered in a box, different style, or whatever. I am sure this makes it stand out more but it is also a clear indication to the reader that “Hey, you can skip this if you want”.

I would also like to try some HTML/CSS things. For example, I do like when the first letter is HUGE, and the other day I saw this blog on Greater styling control over type with initial-letter where the author talks about the CSS initial-letter property to achieve this. This particular property is not yet supported in Firefox (my primary browser) so… I have some time :)

And those are enough sidetracks for today!