I hosted another post- EAG music party, and we ended up singing a lot of things out of my secular solstice songbook ( making of).

This prompted me to make a few fixes: ~~break

• Previously I only showed the chords for each section the first time they appeared, which meant that (a) a small screen the chords would scroll out of sight, and (b) if you don't know the songs well it's not obvious when to play which chords. I've now manually duplicated them, fixing both of these.

• But this then makes the chords take up a lot more of the screen, so I've added a checkbox that lets people hide the chords.

• I've added a few songs: Bold Orion, For the Longest Term, You've Got A Friend in Me, Give My Children Wings.

• As you can see from the previous bullet, now you can link to specific songs via URL fragments. This also simplifies my JS: for some reason I'd written code that called scrollIntoView when people clicked links. Now the JS annotates each header with id=name-of-song and inserts links that take you to #name-of-song, and the browser does the rest.

• I'm still liking the combination of simple HTML for the authoring format combined with a little bit of JS for navigation. Each song is:

  <h2>Title</h2>
  <h3>By Author</h3>
  <div class=song>
  <pre>
  chords go here
  </pre>
  lyrics
  with linebreaks
  preserved
  </div>
  

  And then at the end a bit of JS:

  for (const h2 of document.getElementsByTagName("h2")) {
    const btt = document.createElement("a");
    btt.href = "#top";
    btt.innerText = "return to top";
    h2.parentNode.insertBefore(document.createElement("p"), h2);
    h2.parentNode.insertBefore(btt, h2);
    h2.id=h2.innerText.toLowerCase().trim().replace(
        /[^\w\s-]/g, '').replace(/\s+/g, '-');
    const li = document.createElement("li");
    const a = document.createElement("a");
    a.innerText = h2.innerText;
    a.href = "#" + h2.id;
    li.appendChild(a);
    toc.appendChild(li);
  }
  show_chords.onclick = function() {
    for (const pre of document.getElementsByTagName("pre")) {
      pre.style.display = show_chords.checked ? "block" : "none";
    }
  };
  

Happy to take suggestions on how to make it more useful!

(This is an example of a post where I'm glad I can author with the xmp tag.)