From 838247fc2e2b0f594d92f2e9b871aa84826cec0a Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Mon, 23 Aug 2021 21:49:04 -0500
Subject: [PATCH] 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     |  2 ++
 ci/build.sh          |  7 +++++++
 sass/style.scss      | 24 +++++++++++++++++++++++
 songquotes.yml       | 45 ++++++++++++++++++++++++++++++++++++++++++++
 templates/base.html  |  2 +-
 templates/index.html | 38 +++++++++++++++++++++++++++++++++++++
 6 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 songquotes.yml

diff --git a/ci/Containerfile b/ci/Containerfile
index 9431b75..f7a735b 100644
--- a/ci/Containerfile
+++ b/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/*
diff --git a/ci/build.sh b/ci/build.sh
index df66631..df57139 100644
--- a/ci/build.sh
+++ b/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
diff --git a/sass/style.scss b/sass/style.scss
index c048794..1a34818 100644
--- a/sass/style.scss
+++ b/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;
 }
diff --git a/songquotes.yml b/songquotes.yml
new file mode 100644
index 0000000..4783948
--- /dev/null
+++ b/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
diff --git a/templates/base.html b/templates/base.html
index a5ff552..c90951c 100644
--- a/templates/base.html
+++ b/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>
diff --git a/templates/index.html b/templates/index.html
index 80e1c7c..cd33396 100644
--- a/templates/index.html
+++ b/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 %}