Making a Secular Solstice Songbook

Link post

After this year’s secular solstice several people were saying they’d be interested in getting together to sing some of these songs casually. This is a big part of what we sang at the post-EAG music party, but one issue was logistical: how do you get everyone on the same words and chords?

I have slides (2023, 2022, 2019, 2018) with the chords and lyrics to the songs we’ve done at the past few events, but they have some issues:

They were intended only for my use, so they’re a bit hard to make sense of.
The text is too small for phones.
They horizontally oriented, when for a phone you want something vertical.
There’s no index.
Google docs is slow on phones.

Another option is Daniel Speyer’s list from his secular solstice resources, but this includes a lot of songs we’ve never done in Boston and doesn’t have the chords easily accessible.

Instead I put together a web page: jefftk.com/solsong. It’s intentionally one long page, trying to mimic the experience of a paper songbook where you can flip through looking for interesting things. [1] I went through the sides copying lyrics over, and then added a few other songs I like from earlier years.

I’ve planned a singing party for Saturday 2024-02-17, 7pm at our house (fb). Let me know if you’d like to come!

[1] At a technical level the page is just HTML, as is my authoring preference. Since line breaks aren’t significant in HTML but are in lyrics, I used a little command line trick in copying them over:

pbpaste | sed ‘s/$/<br>/’ | pbcopy

I would copy the lyrics, run that command to transform my clipboard, and then paste into the editor.

EDIT: on Daniel’s suggestion I’ve switched to white-space: pre-line;, which means I don’t need this. It’s a little fussy needing to think about my line breaks in what looks like plain html, but not too bad.

To include an index without needing to duplicate titles I have a little progressive-enhancement JS:

<ul id=toc></ul>
…
<script>
for (const h2 of document.getElementsByTagName(“h2”)) {
  const li = document.createElement(“li”);
  const a = document.createElement(“a”);
  a.innerText = h2.innerText;
  a.href = “#”;
  a.onclick = function() {
    h2.scrollIntoView(/*alignToTop=*/true);
    return false;
  };
  li.appendChild(a);
  toc.appendChild(li);
}
</script>

Comment via: facebook, lesswrong, mastodon