add spotify component

components/SpotifyCurrentlyListening.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+interface Artist {
+  name: string,
+  type: string
+}
+
+interface Image {
+  width: number,
+  height: number,
+  url: string
+}
+
+interface Album {
+  album_type: string,
+  artists: Artist[],
+  images: Image[]
+  name: string,
+}
+
+interface Item {
+  album: Album,
+  artists: Artist[],
+  duration_ms: number,
+  name: string
+}
+
+interface NowPlayingResponse {
+  progress_ms: number,
+  is_playing: boolean,
+  item: Item
+}
+
+function fetchCurrentlyListening(): Promise<NowPlayingResponse> {
+  return $fetch<NowPlayingResponse>("https://spotify-now-playing.algorithmjunkie.workers.dev")
+}
+
+function msToMinutesSeconds(ms: number): string {
+  const minutes = (Math.floor(ms/60/1000) % 60).toString()
+  const seconds = (Math.floor(ms/1000) % 60).toString()
+  return `${minutes.padStart(2, '0')}:${seconds.padStart(2, '0')}`
+}
+
+let now = ref(await fetchCurrentlyListening())
+let paused = computed(() => !now.value.is_playing)
+
+const classList = "font-light text-sm"
+
+onMounted(async () => {
+  setInterval(async () => {
+    now.value = await fetchCurrentlyListening()
+  }, 1000)
+})
+</script>
+
+<template>
+  <p :class="classList" v-if="!now">
+    Not currently listening to anything.
+  </p>
+  <p :class="classList" v-else>{{ paused ? "(paused) " : "" }}{{ now.item.name }} by {{ now.item.artists[0].name }} ({{ msToMinutesSeconds(now.progress_ms) }} / {{ msToMinutesSeconds(now.item.duration_ms) }})</p>
+</template>

pages/index.vue

@@ -22,7 +22,7 @@ useHead({
           <h1 class="font-semibold text-2xl">The Shelf</h1>
           <p class="font-light text-sm">This section is a shelf. Indeed, a splendid little shelf chock full of trinkets and widgets and gadgets and all manner of other whimsical oddities. Here you can find your way around my dwelling, until you've seen it all. Welcome one, welcome all. Please clean up as you go.</p>
         </div>
-        <div class="font-light text-xl grid grid-cols-2 gap-4">
+        <div class="font-light text-xl grid grid-cols-2 gap-4 mb-4">
           <BodyLink to="/blog" linkText="Blog" class="block sm:hidden">
             Penny for <span class="font-bold">my</span> thoughts? Why, don't mind if I do...
           </BodyLink>
@@ -42,6 +42,10 @@ useHead({
             I like to take photos. After I organize them, I put some of my favorites in this album.
           </BodyLink>
         </div>
+        <div class="font-light text-xl">
+          <h1 class="font-semibold text-2xl">My Music</h1>
+          <SpotifyCurrentlyListening />
+        </div>
     </section>
     <section class="hidden lg:block lg:col-span-2">
       <BodyLink to="/projects" container-class="text-2xl mb-4" link-class="font-semibold" link-text="Projects">