Apr 23, 2024

Adding shorts to the blog

This is a short 🩳; a note that doesn’t merit a full post. See all shorts here.

So, I’m sick. Strep. Missed the Seder, as well.

Skeletor is sick

Taking a few days off to recover, time to play around with the blog.

Why add shorts if you already have posts?

Shorts are more than a tweet, less than a post.

Stream of consciousness notes that don’t merit a more dedicated write-up.

Inspired by Brandur Leach’s fragments in his beautiful corner of the web.

My hope is that this short-form, more than a tweet, less than a post format will help me publish more often. And as I really try to stay off Twitter and other social media as much as possible, this should be a way to post more often without worrying too much about quality.

Why “Shorts” and not “Fragments” like Brandur? Better emoji 🩳

What did you do to add shorts?

This part will mostly nerd out on the technical details of how I added shorts to the blog. I like messing around with Hugo a lot and this time was no different.

How to implement

I deliberated with the wife whether to add another section to the homepage (like Brandur) or just to add an emoji next to each short. I went with the latter, mostly for discoverability.

Front matter

I added a short parameter to the front matter of the post. If it’s set, the post will be rendered as a short. If not, it’ll be rendered as a regular post. To use it in a template, I can just use the isset function in Hugo. I opted for isset just in case I accidentally use something like short: "yes". I just want it to work :)

In-post disclaimer

I wanted each short to start with a disclaimer that it’s a short instead of a proper post, so I added this simple if to theme/hermit-fork/layouts/posts/single.html:

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 04db74e..11cbd2e 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -54,6 +54,10 @@
+{{ if isset .Params "short" }}
+<div class="short-disclaimer">
+        <p>{{ "> This is a [short 🩳](/posts/shorts/); a note that doesn't merit a full post. [See all shorts here](/tags/short)." | markdownify | safeHTML }}</p>
+{{ end }}

But how will I promise that each short has the short tag? 🤔

Enforcing the short tag

To make sure I remember to tag shorts as such, I added a short validation function in the single.html template, that causes this error if a post ( in this case: /posts/shorts) is marked as a short but doesn’t have the short tag in the tag list.

With this front matter:

title: "Adding shorts to the blog"
date: 2024-04-23T19:31:13+03:00
draft: false
toc: false
short: true  # <-- Note that short is set to true
tags:        # <-- But the tag list doesn't contain "short"
  - meta
  - hugo

I’m getting this error:

❯ hugo -D server
ERROR Post /posts/shorts is marked as short, but is lacking the tag 'short'.
The tags I'm seeing are [meta hugo].
Add it to the tags, please.
Built in 124 ms
Error: error building site: logged 1 error(s)

This is how it looks like when you try to view the page:

tag-missing-error

By adding this to the single.html template:

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 04db74e..32574ac 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -64,6 +68,10 @@
+<!-- Validate that if the post is a short, the .Params.Tags list contains the word "short". If it doesn't, raise an error. -->
+{{- if and (isset .Params "short") (not (in .Params.tags "short" )) }}
+{{ errorf "Post %s is marked as short, but is lacking the tag 'short'.\nThe tags I'm seeing are %v.\nAdd it to the tags, please." .Page.Path .Params.tags }}
+{{- end }}

The reason that there’s documentation there, is because I hoped GitHub Copilot will just write the thing out for me. But, as usual, it did with a shitty bug I had to fix. It reversed the order of parameters in the in function. 🤦‍♂️

Mark shorts in the list of posts

To mark shorts as shorts in the post list, I added a 🩳 emoji next to the short’s title, like so:

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index b12a955..c02a498 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -25,7 +25,11 @@
+{{ if isset .Params "short" }}
+<span class="post-title">🩳 {{.Title}}</span>
+{{ else }}
 <span class="post-title">{{.Title}}</span>
+{{ end }}

It looks like this now:

shorts-in-list

Now what?

I’m going to publish this short + another short that’s been lying around in my notes about a cool bluetooth alias. This blog got me quite a few great emails and responses recently, so I’m very motivated to keep writing. I hope this short format will help me do that more often.

Now, back to bed. 🤒

See Also