Adding local search to Hugo with Pagefind

At this point, I have very nearly 2500 posts going back almost 20 years (… whoa). In a lot of ways, it’s a second brain for me. I actually find myself (from time to time) going back and looking up my various old posts.

Sometimes, I wanted to know how I solved a particular programming problem, sometimes I wanted to know when I went somewhere (by pictures!), and sometimes I wanted to know what a particular book or movie was about.

So for the longest time, I’ve had (up in the corner there) a nice search box. Powered by Google: Don’t Be Evil. Well, today, let’s see if we can do better!


Crosslinks by Title in Hugo--But Better!

Once upon a time, I solved Crosslinks by Title in Hugo. Back then, I added a shortcode so that I could link to any post by title like this:

{{< crosslink "Title goes here" >}}

It worked pretty well, but … it never really felt ‘Markdown’y. Which I suppose was the point.

But more recently, I came across Markdown render hooks.

What’s that you say? I can write code that will take the parameters to any Markdown link (or image/heading/codeblock) and generate the HTML with a custom template?



Local JS/CSS with Hugo Pipe

I recently stumbled across a post that reminded me that Hugo has pipes. You can use them to automatically download files and include them as local. This seems like a pretty good idea for JS/CSS (you can argue caching versus security/locality all you want), but I’m going to give it a try.


Crosslinks by Title in Hugo

Another quick Hugo post. One thing I miss about my previous blogging platform(s) was the ability to generate quick links between posts just by using the title of the post. So rather than this:

a cool post

This is [a cool post]({{< ref "2021-07-15-crosslinks-by-title-in-hugo" >}}), go read it.

You could do this:

This is {{< crosslink title="Crosslinks by Title in Hugo" text="a cool post" >}}.

Or shorter: {{< crosslink "Crosslinks by Title in Hugo" >}}.

And it should just work.


A Tabbed View for Hugo

One thing I’ve been using for a lot of my recent posts (such as Backtracking Worms) is a tabbed view of code that can show arbitrarily tabs full of code or other content and render them wonderfully! For example, we can turn: {{</*tabs*/>}} {{</*sourcetab ruby "examples/art-station.rune"*/>}} {{</*tab "art-station.svg"*/>}} {{</*include "output/art-station.svg"*/>}} {{</*/tab*/>}} {{</*sourcetab ruby "examples/astrology-and-moons.rune"*/>}} {{</*tab "astrology-and-moons.svg"*/>}} {{</*include "output/astrology-and-moons.svg"*/>}} {{</*/tab*/>}} {{</*sourcetab ruby "examples/text-circle.rune"*/>}} {{</*tab "text-circle.svg"*/>}} {{</*include "output/text-circle.svg"*/>}} {{</*/tab*/>}} {{</*/tabs*/>}} Into the tabbed example view at the end of yesterday’s post!