live fetch for now playing track

README.md

@@ -2,7 +2,7 @@
 
 # coryd.dev
 
-[![vercel-scheduled-build](https://github.com/cdransf/coryd.dev/actions/workflows/vercel-scheduled-build.yaml/badge.svg)](https://github.com/cdransf/coryd.dev/actions/workflows/vercel-scheduled-build.yaml) [![scheduled-syndication](https://github.com/cdransf/social-utils/actions/workflows/scheduled.yaml/badge.svg)](https://github.com/cdransf/social-utils/actions/workflows/scheduled.yaml)
+[![scheduled-build](https://github.com/cdransf/coryd.dev/actions/workflows/scheduled-build.yaml/badge.svg)](https://github.com/cdransf/coryd.dev/actions/workflows/scheduled-build.yaml) [![scheduled-syndication](https://github.com/cdransf/social-utils/actions/workflows/scheduled.yaml/badge.svg)](https://github.com/cdransf/social-utils/actions/workflows/scheduled.yaml)
 
 Hi! I'm Cory. 👋🏻
 

src/_includes/base.liquid

@@ -42,6 +42,43 @@
         document.documentElement.classList.add('dark')
       }
     });
+
+    ;(function () {
+      const nowPlayingWrapper = document.getElementById("now-playing");
+      if (nowPlayingWrapper) {
+        try {
+          const localStorageKey = "CD_NOW_PLAYING";
+          const cachedTemplate = localStorage.getItem(localStorageKey);
+
+          if (window.localStorage && cachedTemplate) {
+            nowPlayingWrapper.innerHTML = "";
+            nowPlayingWrapper.insertAdjacentHTML("beforeEnd", cachedTemplate);
+          }
+
+          fetch("https://utils.coryd.dev/api/music?limit=1&period=7day")
+            .then((response) => response.json())
+            .then((data) => {
+              const track = data.recenttracks.track[0];
+              const artistName = track.artist["#text"];
+              const template = `<a href="${
+                track.url
+              }" class="no-underline dark:text-white text-gray-800 font-normal">${
+                track.name
+              }</a> by <a href="https://ddg.gg?q=!rym ${encodeURIComponent(
+                artistName
+              )}" class="no-underline dark:text-white text-gray-800 font-normal">${artistName}</a>`;
+
+              if (window.localStorage)
+                localStorage.setItem(localStorageKey, template);
+
+              nowPlayingWrapper.innerHTML = "";
+              nowPlayingWrapper.insertAdjacentHTML("beforeEnd", template);
+            });
+        } catch (e) {
+          nowPlayingWrapper.innerHTML = "";
+        }
+      }
+    })();
   </script>
   </body>
 </html>

src/_includes/now-topper.liquid

@@ -2,4 +2,12 @@
     <a class="no-underline" href="/now"><h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-primary-500 hover:text-primary-400 mb-4">Now</h2></a>
     <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
     <p>{{ status.emoji }} {{ status.content }}</p>
+    <p class="mb-0">
+        <span class="icon-inline">
+            {% heroicon "solid" "music-note" "Now playing" "width=20 height=20" %}
+        </span>
+        <span id="now-playing">
+            <span class="blur-md">Loading track</span>
+        </span>
+    </p>
 </div>