Pretty footnotes using Littlefoot

I’m a fan of footnotes, generally. They make a good way to explain yourself without resorting to a ton of hyphens or parentheses (both of which I am guilty of overusing).¹ The modern implementation of providing a superscript number to tap on which takes you to the footnote, then a unicode ↩ ² to bring you back where you were, is pretty great. But there are problems, namely:

a) the tap target is pretty tiny, and

b) there’s still some cognitive overhead in picking back up when you’re not resuming from where you were - the position on the page has shifted.

I like how kottke.org does them, as well as the way Unread (my current RSS reader) has implemented them: a simple popover that can be read and dismissed, without anything in the backdrop changing. I found two ways to implement these: the original was Bigfoot, which requires jQuery and hasn’t been updated in a while, or the newer Littlefoot. The latter has great documentation but didn’t include everything I needed to get it working on Astro, so I figured I’d make a note of it here for future me (and anyone else who finds themselves in the same position).

(Disclaimer: as an engineer I could be charitably described as “an enthusiast”, so this may well be a pretty inefficient way of doing things. I’m also using Astro Paper, so in your use case some of this might be unnecessary.)

1. Install via NPM:

   npm install --save littlefoot
   

2. In your main layout file (mine is Layout.astro, YMMV), import the CSS at the top of the page:

   import "@styles/littlefoot.css";
   

3. Lower on the page - it has to be in a <script> tag outside the frontmatter so Astro knows to load it client-side ³ - import the module and add an event listener to call it on page load:

   <script>
     import { littlefoot } from "littlefoot";
   
     document.addEventListener('astro:page-load', () => {
       littlefoot();
     });
   </script>
   

4. Done!

Hopefully this helps - drop me a line if you want to tell me how I messed it up 😆