Note to Self Footnotes Using Littlefoot.js

feedback@janusworx.com (Mario Jason Braganza) — Wed, 28 Feb 2024 08:10:36 +0530

Courtesy dothegreenthing, CC BY-NC 2.0, on Flickr

I have this amazing urge never to leave well enough alone.¹
The blog uses an amazing theme, called PaperMod.
And ofcourse, like I said, because I can’t leave well enough alone, I’ve customised it heavily.²
The fonts are different, there are various kinds of slight colour changes, I bullied Aditya into showing me how to build a Menu, there are lots of custom Hugo shortcodes and there were footnotes powered by a nifty little Javascript library called littlefoot.js.

Now everything was fine and dandy.
There are folks who do leave well enough alone. Their blogs stay up and running for years on end, held together with nothing more than spit and baling wire.
Those folks aren’t me, sadly. Aditya keeps improving the theme and I really wanted the new shiny. So I went and got it.
And everything broke!
I got weird artifacts. RSS broke. Fonts broke. Footnotes broke.³

I’ve managed to put everything back together, over the past week, and I just got footnotes working again yesterday.
So a few notes to myself, on what to do, when I break it again.⁴
Footnotes today, and the rest later …

So here goes,

The litlefoot.js repo has excellent documentation. That’s where you pulled everything from (for when you wonder, just how you figured all the CSS out)
You download a static copy with a npm install --save littlefoot and then stick it into Hugo’s static folder
Copy the extend_head.html from the theme’s layout/partials into your own. You should already have an extend_footer.html since you put in PaperMod’s hamburger stuff in there.
Adapt the Usage from a CDN step to directly access it from /littlefoot/dist/… instead of UNPKG. Put the CSS link into your extend_head.html and the JS into extend_footer.html
We want the footnotes to be numbers, rather than floating ellipses. So modify the default (blank) script call in extend_footer.html, to the stuff below. This is verbatim from the docs.

<script type="application/javascript">
 littlefoot.littlefoot(
 {
 buttonTemplate: `
 <button
 aria-label="Footnote <% number %>"
 class="littlefoot__button"
 id="<% reference %>"
 title="See Footnote <% number %>"
 />
 <% number %>
 </button>
 `
 }
 )
</script>

We want to style it a teensy bit, so those styles go into extend_head.html. For some reason, it does not pick the footnote styling correctly when you put stuff into your normal assets/css/extended/ folder.

<!--Custom littlefoot styles-->
<style>
 .littlefoot {
		/*the --attributes come from the littlefoot.js docs*/
		/*Change button background to something that works in both modes*/
 --button-background-color: #666; 
		/*Change padding to make the button rounder*/
 --button-padding: 0 0.35rem;
		/*The footnote ought to be italicised*/
 --popover-font-style: italic;
		/*Make the popover work with my theme’s colour scheme*/
 --popover-background-color: var(--theme);
 --popover-text-color: var(--primary);
 /*the oldstyle numerals used everywhere else, don’t look good here
		Neither do they align properly in the box.
		So switch them to normal*/
		font-variant-numeric: normal;
		/*Italic numerals for the footnotes*/
 font-style: italic;
 }

 .littlefoot__button {
		/*very subjective. 
		try to get the numerals centred as much as I can.*/
 line-height: 1;
 vertical-align: middle!important;
 }
</style>

Et voilà! Footnotes galore!

It looks a little weird, a little like a billie goat walked across my post, pooping pellets across the page.⁵
But it is my kind of weird now.
And I love it :)

Feedback on this post? Mail me at feedback at this domain

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.

what we in the Mumbaiyya vulgar, would call, “Gaand mein keeda”.
Please for the love of God, don’t look that up. Very not safe. ↩︎
Heavily, as in heavily for a guy who doesn’t quite know what he’s doing. ↩︎
All my fault obviously, with all the custom stuff. Nothing to do with the theme proper. ↩︎
in the far, far, far, future; future Jason! Not any time soon, you hear! ↩︎
“Pooping pellets on the posted page”, Now there’s a tongue twister 😂 ↩︎

Footnotes on Janusworx

Note to Self Footnotes Using Littlefoot.js