initial commit

src/components/blocks/NowPlaying.astro

@@ -0,0 +1,24 @@
+---
+import { fetchNowPlaying } from '../../utils/data/nowPlaying.js';
+
+const isProduction = import.meta.env.MODE === 'production';
+const nowPlayingData = await fetchNowPlaying();
+---
+
+<span class="loading client-side" id="now-playing-content" set:html={nowPlayingData.content}></span>
+<noscript>
+  <p>{nowPlayingData.content}</p>
+</noscript>
+
+{isProduction && (<script type="module">
+  async function updateNowPlaying() {
+    const response = await fetch('/api/now-playing');
+    if (response.ok) {
+      const data = await response.json();
+      document.getElementById('now-playing-content').innerHTML = data.content;
+    }
+  }
+
+  setInterval(updateNowPlaying, 180000);
+  updateNowPlaying();
+</script>)}