From a318d91ed24568491baf24b03b286201bc8ea435 Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Fri, 2 Aug 2024 16:20:36 -0500
Subject: [PATCH] retrieve recent pinned track from musicthread

---
 assets/js/theme-song.js     | 20 ++++++++++++++++++++
 config/_default/params.toml |  3 +++
 layouts/partials/aside.html | 11 ++++++++---
 static/css/custom.css       | 26 +++++++++++++++++++-------
 4 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 assets/js/theme-song.js

diff --git a/assets/js/theme-song.js b/assets/js/theme-song.js
new file mode 100644
index 0000000..ae1c2a4
--- /dev/null
+++ b/assets/js/theme-song.js
@@ -0,0 +1,20 @@
+// retreives the latest link from a musicthread thread and displays it on the page
+const themeSongScript = document.currentScript
+const urlParams = new URLSearchParams(themeSongScript.src.split('.js')[1])
+const params = Object.fromEntries(urlParams.entries())
+
+if (params.id)
+{
+    const musicthread = `https://musicthread.app/api/v0/thread/${params.id}`
+    fetch(musicthread)
+    .then((response) => response.json())
+    .then((thread) => {
+        let themeSong = thread.links[0]
+        console.log(themeSong)
+        themeSongContainer = document.createElement('div')
+        themeSongContainer.className = 'theme-song'
+        themeSongContainer.style
+        themeSongContainer.innerHTML = `<a href="${themeSong.page_url}"><img src="${themeSong.thumbnail_url}"></a><br><a href="${themeSong.page_url}">${themeSong.title}</a><br><i>${themeSong.artist}</i>`
+        themeSongScript.parentNode.insertBefore(themeSongContainer, themeSongScript)
+    })
+}
\ No newline at end of file
diff --git a/config/_default/params.toml b/config/_default/params.toml
index e0f5d42..54b31c3 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -14,6 +14,9 @@ darkVisitors = [
   "AI Search Crawler"
 ]
 
+omgUser = "jbowdre"
+musicThreadId = "2aVjZUocjk96LELFbV5JvJjm14v"
+
 # Comments
 analytics = true
 reply = true
diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html
index fb1f687..334cd32 100644
--- a/layouts/partials/aside.html
+++ b/layouts/partials/aside.html
@@ -51,10 +51,15 @@
   {{- end }}
 </ul>
 {{- end }}
+{{ with .Site.Params.omgUser }}
 <hr>
 <h3>status.lol</h3>
-<script src="https://status.lol/jbowdre.js?time&link&fluent&pretty"></script>
+<script src="https://status.lol/{{ . }}.js?time&link&fluent&pretty"></script>
+{{ end }}
+{{ with .Site.Params.musicThreadId }}
 <hr>
-<h3>latest track</h3>
-<script src="https://recentfm.rknight.me/now.js?u=pushpianotire&e=🎶"></script>
+<h3>current theme song</h3>
+{{ $jsThemeSong := resources.Get "js/theme-song.js" | minify }}
+<script src="{{ $jsThemeSong.RelPermalink }}?id={{ . }}"></script>
+{{ end }}
 
diff --git a/static/css/custom.css b/static/css/custom.css
index 957eb3d..95717b2 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -238,16 +238,28 @@ small[style^="opacity: .5"] {
   opacity: 1 !important;
 }
 
-/* recentfm styling */
-.recent-played {
+/* theme song styling */
+.theme-song {
   background: var(--off-bg) !important;
-  flex-direction:column;
-  border-radius: 0.5em;
-  padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  padding: 0.7rem;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
 }
 
-.recent-played-track {
-  margin: 0.5em 0;
+.theme-song img {
+  width: 14rem;
+  height: auto;
+  object-fit: cover;
+}
+
+@media (min-width: 45rem) {
+  .theme-song img {
+    max-width: 100%;
+    margin: 0 auto;
+  }
 }
 
 /* code overrides */