Building a Jekyll Plugin to Make Unique Footnotes 

One of the nice things about moving my site to Jekyll is how extensible it is. Everything related to Jekyll (and it’s ecosystem) is open source, so as I’ve come across things that don’t work the way I want, I can change them.

Recently, I noticed that when I used footnotes, they would work on the first post on the home page, and they would work on the individual post pages, but when multiple posts with footnotes were on the home page, the nice footnote popup ¹ didn’t work.

I use Littlefoot from Octopress, a plugin that does the nice javascript-ness to pop in the little image and make the popup. There were a couple of issues. The first issue was that if I had named multiple footnotes the same thing (a common practice, when you might just name a footnote something like:

[^1] ²

The javascript gets loaded, loops through the text on the page, and pulls in the content associated with the footnote. However, now you’ve got two footnotes with the same id, so the javascript always pulls from the first. There was a brute force fix to that: just name the footnotes uniquely for the home page and assume that it’s probably not an issue on any other pages.

The second issue was that, on the home page (or any collection page), the Littlefoot plugin would find all the footnotes, but only hide the first set of plugins. That was something I could actually fix in the plugin. Again, what’s nice about the Ruby/Jekyll ecosystem is that I could fix it, put it up on Github, and then use my fixed version until the fix is taken into the mainline. The code change was pretty simple:

From this:

document.querySelector('div.footnotes').remove()

to this:

document.querySelectorAll('div.footnotes').forEach(function(note) { note.remove(); } )

That loops over all the footnote divs, rather than just hiding the first one.

So I made those code changes and put it up on Github.

After this was done, it stuck in my craw that I was going to have to remember to be smart about naming my footnote references. I spent a bit of time looking at how to build a jekyll plugin—I figured I could write some code that would loop through the page, find the footnotes, rename them (using some seed data; I chose the filename), and then write them out.

It took me a couple of hours, but I got it working (well, I think). When this post goes up, we’ll see if it all went swimmingly.

Assuming it works as expected, I’ll likely put the plugin up on Github and maybe make it a gem (just for the practice).