The Sun and The Air

My Perfect Footnotes - Solved!

So I posted a few weeks ago that I was frustrated with the format of footnotes available to me, specifically how being taken to the bottom of a (potentially) very long page felt like a huge break in focus, and that I'd like to have something that sits more inline with the page. Something that still serves as an interruption, but more of an Aside than a Reference.

I received a few really nice recommendations for this, including putting them off to the side (which works really nicely with how columnar the Bear format naturally is), but the one that aligned best with my idea came from theTangent.space, first as an outline, then a handy pastebin. That's the version you can see running now,1 with only a change to the styling in the first .map - namely, I was able to make formatting changes in the CSS editor Bear provides rather than inlining all of it here, which was nice. Below you can see the full, slightly tweaked script block you'd need to add to get the same effect.

<script>
  // Script to move footnotes to togglable inline asides.
  // If you want to use this on your own site, you'll need to
  // adapt the elements and classes based on how you (or your SSG)
  // renders markdown footnotes

  // create array containing content and ID of footnotes
  const footnotes = document.querySelectorAll("section.footnotes ol li")
  const inlineNotes = Array.from(footnotes)
  .map((footnote) => {
    const inlineNote = document.createElement("span");
    inlineNote.id = footnote.id;
    inlineNote.innerHTML = footnote.innerHTML;
    inlineNote.querySelector(".footnote").remove() // remove the link back to the main text
    // style the footnote text
    inlineNote.classList.add("inline-aside");
    return inlineNote;
  })

  inlineNotes.forEach((note) => {
    // find the footnote's reference in the text
    const fnNumber = note.id.split("-")[1]; // as bearblog renders as fn-1 fn-2 etc
    const fnRef = document.querySelector(`#fnref-${fnNumber}`)
    fnRef.classList.add("inline-footnote-ref");

    // move footnote to reference and then hide
    fnRef.insertAdjacentElement("afterend", note);
    note.style.display = "none";
  
    // change the reference from being a link to the bottom of the page into
    // a clickable toggle
    fnRef.innerHTML = `<a>${fnNumber}</a>`; // or "aside" to replace with a static string.
    // style to appear link-like
    fnRef.style.cursor = "pointer";
    fnRef.style.textDecoration = "underline #1a8fe3"; // magic number -- ideally move this styling into the CSS and use the --color-primary variable
    fnRef.addEventListener("click", () => {
      if (note.style.display === "block") {
        note.style.display = "none";
      } else {
        note.style.display = "block";
      }
      })

    })
    // remove footnotes from end of post
    document.querySelector("section.footnotes").remove()
</script>

And my current (horrificly blunt-object) CSS to get a rough style in place - extremely subject to change - added in the Themes section:

/* 
  In Bear, colours are set in near the top of the CSS in the :root definition
  To do the highlighting I wanted, I added the following lines:
  
  --color-light-highlight: #dadada;
  --color-dark-highlight: #3a3a3a;
  
  The latter isn't actually used, and is just reference for the "prefers dark mode" toggle where I added:
  --color-light-highlight: #3a3a3a
*/

.inline-aside {
  /* width: 80%; */
  padding: 10px 5%;
  /* text-align: center; */
  margin-top: 10px;
  margin-bottom: 10px;
}

.inline-aside p {
  padding: 0px 0;
  /* text-align: center; */
  margin: 0px;
  padding: 0 5%;
  background: var(--color-light-highlight);
  font-size: 1.2rem;
}

All of this is extremely cool to me, and was a real eye-opener for how little JS you actually need to do really neat things, even on a blogging platform as light on JS as Bear is. Additionally, in looking at Bear's documentation I found Herman's repo of plugins which can be added in a similar way. Some of those will probably find their way into my footer before too long.

There's also Robert Birming's really wide array of resources and external tool he's made and collected on his page. His themes demonstrate how little CSS you need to mess with to really change the feel of a Bear Blog, and a lot of the external tools are things I'd just never have thought to look for, but are undeniably handy.

Learning how to do this stuff is super enjoyable if you can get a good starting point to work from, and these are great resources for that.

✉️ Reply via email

Comments

  1. Being extremely bad at correspondence as a general practice, I didn't actually see the email with the pastebin link until I got in touch with them separately after spotting they'd implemented it on their own site - and I thought it looked great. So I hacked theirs a bit, adapting their JS to Bearblog and... it wasn't half as clean. But it did work!↩

#blog #meta