Note to Self Footnotes Using 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 …

• 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!