Secular Solstice Songbook Update

November 17th, 2024
music, solstice, tech
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.)

Comment via: facebook, lesswrong, mastodon, bluesky, substack

Recent posts on blogs I like:

Ozy and Vasili Review Lilo and Stitch

Sometimes my seven-year-old, Vasili, wants to see some godawful movie that makes me want to melt my eyeballs out of my head.

via Thing of Things June 27, 2025

Elixir's Last Dance

On May 18th, the contra dance band Elixir had their last gig ever. The dance was packed: there were three hundred people. It was the only dance BIDA has ever done where they sold tickets. People flew from across the country just to hear Elixir play one la…

via Lily Wise's Blog Posts June 5, 2025

Workshop House case study

Lauren Hoffman interviewed me about Workshop House and wrote this post about a community I’m working on building in DC.

via Home April 30, 2025

more     (via openring)