Hugo on somethingSTRANGE

Commenting with Giscus

Michael Ryan — Wed, 01 Jan 2025 00:00:00 +0000

For a while now, this website has been powered by Hugo, a fantastic static site generator that ensures the site content is compiled into static files, making it swift and efficient. As a static website, there is no backend server running scripts, which means fewer points of failure and faster load times.

I’ve been having fun experimenting with CSS and JavaScript to add some dynamic flair, interactive elements, and sleek transitions to bring a modern touch to the site. At its core, however, it’s all still a beautifully simple static site.

Using with Font Awesome SVGs

Michael Ryan — Sat, 14 Dec 2024 00:00:00 +0000

Throughout this site, I use SVG icons by inlining them directly into the page, ensuring immediate availability without unnecessary network calls. Basic inlining would embed data for each SVG separately, even if the same icon is used multiple times, quickly bloating the page with duplicate data. But there’s a solution!

SVGs support the <use> element, which references and duplicates content from another SVG document. This process effectively clones nodes into a hidden DOM and pastes them where the <use> element is, similar to how template elements are cloned.

Natural Sorting of SemVer Strings in Hugo

Michael Ryan — Thu, 13 Oct 2022 13:25:41 +0700

Earlier today, I saw a post on Hugo’s Discourse site where someone was asking for a way to sort version numbers with a natural sort order where multi-digit numbers are treated atomically.

The accepted solution seemed somewhat complicated with the way the versions were split into separate version components (i.e., Major, Minor, Patch, PreRelease), sorted into nested maps, and then merged together again afterward.

I believe the solution I came up with is a bit more straightforward, and it should be able to sort all SemVer strings. Also, since it doesn’t assume the MAJOR.MINOR.PATCH format, it can also handle version strings with pre-release suffixes, such as “beta” and “rc”.

Hugo with Font Awesome

Michael Ryan — Thu, 17 Mar 2022 15:01:43 -0700

Font Awesome is an icon font widely used across various websites, applications, and projects. I’ve been utilizing it for years to develop editor tools for my Unity projects. It’s truly awesome.

One of the first decisions I made as I started building this site with Hugo, a popular open-source static site generator, was to integrate Font Awesome to handle my icon needs. I specifically wanted to use SVGs due to their numerous advantages over traditional font icons. Many articles detail the advantages of SVG icons over font icons, so I won’t repeat those here.

An Indent Shortcode for Hugo

Michael Ryan — Wed, 27 Oct 2021 00:00:00 +0000

Indenting markdown usually isn’t difficult, however there could be a few gotchas. Skip down to the end for a quick little Hugo shortcode for inserting indents in markdown.

The Problem

Earlier today, I wanted to indent a markdown page element that included a link, but for some reason, the HTML that wrapped the markdown link was breaking the things.

Search the web for how to “indent without adding a bullet or number in markdown” and you’ll likely come across multiple suggestions that rely on a mix of HTML tags and CSS styles.