Adding Tags to My Projects Page

I’ve wanted to change up my projects page for a while, but wasn’t quite sure what to do. I didn’t want to use any JavaScript, but I did want to organize projects in multiple different ways, rather than just a single set of categories like I’ve had for a long time.

Ultimately what I settled on is a tag system. The tags look like this:

• Project Name author library rust is a project!

These tags are just text with some styling applied, and they’re inserted with a Hugo shortcode. I originally thought to use individual shortcodes for each kind of tag, like {{< t-rust >}} or {{< t-author >}}, but after making a few shortcode files that looked like this:

<span class="tag t-author">author</span>

I decided to automate the whole thing. Hugo has a very powerful template syntax, and iterating over the arguments to a shortcode is easy, so I ended up with a shortcode like {{< t-all author library rust >}} implemented using a loop:

{{- range (seq 0 (sub (len .Params) 1) ) }}
    {{- $arg := $.Get . }}
    <span class="tag t-{{ printf `%s` $arg}}">
        <span class="tag-text">{{ printf `%s` $arg}}</span>
    </span>
{{- end }}

This means there’s a span around the whole element, on which I can put the background styling, and an internal span to style the text itself. This is easy enough to do in CSS:

/* Tags for project items */
.tag {
  display: inline-block;
  color: var(--bg-color);
  background-color: var(--fg-color);
  opacity: 60%;
  padding-left: 0.25em;
  padding-right: 0.25em;
  border-radius: 8px;
}

.tag-text {
  opacity: 100%;
  font-weight: bold;
  font-size: 75%;
}

--bg-color and --fg-color are defined elsewhere; they’re the background and text of the blog, respectively, so flipping them like this makes tags very much stand out, by default. You might notice that, except for one-off tags like this , these tags are actually colored. That’s accomplished with a little more CSS:

.t-rust,.t-python,.t-javascript,.t-bash,.t-cpp {
  background-color: #cc3300;
}

.t-author,.t-contributor {
  background-color: #11aa00;
}
/* ... and so forth */

This is the most manual part of the setup, but it’s no big deal; I did consider giving tags a “class” so they could automatically pick a color, but it was much too complicated to be worth it. When I learn a new language, I’ll add to my CSS.

I’m really happy with how this came out, but I’d love to hear feedback from you all on whether you find this useful and/or readable!