Add song quotes to home page

Since we're pre-rendering the page now, we can't select a song quote on
the server side.  Instead, we'll use JavaScript to fetch the song quotes
as a JSON document and choose a random song from there.  The JSON
document is converted from the YAML source at build time with a simple
Python script.

ci/Containerfile

@@ -6,6 +6,8 @@ RUN apk update && \
   apk add zola --repository http://dl-cdn.alpinelinux.org/alpine/edge/community/ && \
   apk add \
     openssh-client-default \
+    python3 \
+    py3-ruamel.yaml \
     rsync \
     && \
   rm -rf /var/cache/apk/*

ci/build.sh

@@ -1 +1,8 @@
 zola build --base-url /
+
+python3 /dev/fd/3 < songquotes.yml > public/songquotes.json 3<<EOF
+from ruamel.yaml import safe_load as load
+from json import dump
+import sys
+dump(load(sys.stdin), sys.stdout)
+EOF

sass/style.scss

@@ -189,6 +189,30 @@ main.main-content div.main-content {
   content: " • ";
 }
 
+#songquote {
+  display: none;
+  font-size: 120%;
+  text-align: center;
+}
+
+#songquote::after {
+  content: "♪";
+  padding-left: .75em;
+}
+
+#songquote::before {
+  content: "♪";
+  padding-right: .75em;
+}
+
+#songquote .citation .title {
+  font-style: italic;
+}
+
+#songquote .citation .artist {
+  font-variant: small-caps;
+}
+
 .recent-posts h2 {
   margin-top: 3em;
 }

songquotes.yml

@@ -0,0 +1,45 @@
+- quote: I was given the seal and the key, and I will keep it until I die
+  title: A Prophecy of Worlds to Fall
+  artist: Xandria
+  album: Neverworld's End
+  year: 2012
+- quote: From ashes we were born, in silence we unite
+  title: Wander
+  artist: Kamelot
+  album: Epica
+  year: 2003
+- quote: It's hard to light a candle, easy to curse the dark instead
+  title: Last Ride of the Day
+  artist: Nightwish
+  album: Imaginaerum
+  year: 2012
+- quote: The truth will appear, forever I'm there for you and sing…
+  title: Sacrimony
+  artist: Kamelot
+  album: Silverthorn
+  year: 2012
+- quote: …The end of all they scare us with will be a million empty brains…
+  title: The Seven Angels
+  artist: Avantasia
+  album: The Metal Opera Part II
+  year: 2002
+- quote: Wide open minds will divine without reason
+  title: Spectres
+  artist: Avantasia
+  album: The Mystery of Time
+  year: 2013
+- quote: How come I want you, like the soil yearns for the rain
+  title: EdenEcho
+  artist: Kamelot
+  album: Ghost Opera
+  year: 2007
+- quote: Grant me just one look into the mystery behind
+  title: The Great Mystery
+  artist: Avantasia
+  album: The Mystery of Time
+  year: 2013
+- quote: I'm singing this song!
+  title: Them Thar Chanterelles
+  artist: Auri
+  album: Auri
+  year: 2018

templates/base.html

@@ -42,7 +42,7 @@
       {% block content %}{% endblock %}
       </div>
     </main>
-  
+{% block after_content %}{% endblock %}
     <footer class="page-footer">
       <hr />
       <span class="copyright">Copyright © 2010–2021 Dustin C. Hatch</span>

templates/index.html

@@ -35,3 +35,41 @@
 </div>
 </section>
 {% endblock %}
+{% block after_content %}
+<div id="songquote"></div>
+<script>
+(function() {
+window.addEventListener('DOMContentLoaded', (event) => {
+    var xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', () => {
+        var songs = JSON.parse(xhr.responseText);
+        var idx = Math.floor(Math.random() * (songs.length - 1));
+        var song = songs[idx];
+
+        var elm = document.querySelector('#songquote');
+        var elm_quote = document.createElement('span');
+        elm_quote.className = 'quote';
+        elm_quote.appendChild(document.createTextNode("“" + song.quote + "”"));
+        elm.appendChild(elm_quote);
+        elm.appendChild(document.createTextNode(" — "));
+        var elm_citation = document.createElement('span');
+        elm_citation.className = 'citation';
+        elm_citation.title = song.album + " (" + song.year + ")";
+        var elm_title = document.createElement('span');
+        elm_title.className = 'title';
+        elm_title.appendChild(document.createTextNode(song.title));
+        elm_citation.appendChild(elm_title);
+        elm_citation.appendChild(document.createTextNode(" by "));
+        var elm_artist = document.createElement('span');
+        elm_artist.className = 'artist';
+        elm_artist.appendChild(document.createTextNode(song.artist));
+        elm_citation.appendChild(elm_artist);
+        elm.appendChild(elm_citation);
+        elm.style.display = 'block';
+    });
+    xhr.open('GET', 'songquotes.json');
+    xhr.send();
+})
+})();
+</script>
+{% endblock %}