retrieve recent pinned track from musicthread

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)
+    })
+}

config/_default/params.toml

@@ -14,6 +14,9 @@ darkVisitors = [
   "AI Search Crawler"
 ]
 
+omgUser = "jbowdre"
+musicThreadId = "2aVjZUocjk96LELFbV5JvJjm14v"
+
 # Comments
 analytics = true
 reply = true

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 }}
 

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 */