<script>
  // 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.style.fontSize = "0.8em";
    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}`)

    // 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>aside</a>"; // or `<a>${fnNumber}</a>` to retain enumeration
    // 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>