live fetch for now playing track

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>