adding recently played and restructured spotify components

nginx/vue/src/components/Navbar.vue

@@ -1,12 +1,19 @@
 <template>
     <nav class="no-print flex-row">
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/cv">CV</RouterLink>
+        <RouterLink to="/"><h1>HOME</h1></RouterLink>
+        <RouterLink to="/cv"><h1>CV</h1></RouterLink>
     </nav>
 </template>
 
-<style>
+<style scoped>
 nav {
     height: 10vh;
 }
+a {
+    rotate: -50deg;
+    height: 100%;
+    background: white;
+    padding: 4px;
+    border: 2px solid black;
+}
 </style>

nginx/vue/src/components/spotify/Listening.vue

@@ -1,8 +1,8 @@
 <template>
-    <div v-if="playing" class="spotify-now-playing">
-        <img :src="albumImage" />
-        <p><strong>Song:</strong> {{ songName }}</p>
-        <p><strong>Artist:</strong> {{ artistName }}</p>
+    <div v-if="song.is_playing" class="spotify-now-playing">
+        <img :src="song.item.album.images[0].url" />
+        <p><strong>Song:</strong> {{ song.item.name }}</p>
+        <p><strong>Artist:</strong> {{ song.item.artists[0].name }}</p>
         <p>Is what im currently listening to rnrnrn ^_^</p>
     </div>
     <div v-else class="spotify-not-playing">
@@ -15,29 +15,16 @@
 import { ref, onMounted } from "vue";
 
 export default {
-    name: "SpotifyNowPlaying",
+    name: "spotify-listening",
     setup() {
-        const albumImage = ref("");
-        const artistName = ref("");
-        const songName = ref("");
-        const songUrl = ref("");
-        const playing = ref(false);
+        const song = ref({});
 
         async function fetchSpotify() {
             try {
-                const res = await fetch("/api/spotify");
+                const res = await fetch("/api/spotify/listening");
                 if (!res.ok) throw new Error("Failed to fetch Spotify data");
-                const data = await res.json();
-                if (playing.value == false) {
-                    return;
-                } else {
-                    albumImage.value = data.album_image;
-                    artistName.value = data.artist_name;
-                    songUrl.value = data.song_url;
-                    songName.value = data.song_name;
-                    playing.value = data.playing;
-                    return;
-                }
+                song.value = await res.json();
+                console.log(data);
             } catch (err) {
                 console.error(err);
             }

nginx/vue/src/components/spotify/Recent.vue

@@ -0,0 +1,63 @@
+<template>
+    <div
+        v-for="(song, idx) in played"
+        :key="song.item.id || idx"
+        class="spotify-now-playing"
+    >
+        <img :src="song.item.album.images[0].url" />
+        <p><strong>Song:</strong> {{ song.item.name }}</p>
+        <p><strong>Artist:</strong> {{ song.item.artists[0].name }}</p>
+        <p>Is what im currently listening to rnrnrn ^_^</p>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+
+export default {
+    name: "spotify-recent",
+    setup() {
+        const played = ref([]);
+
+        async function fetchRecent() {
+            try {
+                const res = await fetch("/api/spotify/recent");
+                if (!res.ok) throw new Error("Failed to fetch Spotify data");
+                played.value = await res.json();
+            } catch (err) {
+                console.error(err);
+            }
+        }
+
+        onMounted(() => {
+            fetchRecent();
+            setInterval(fetchRecent, 120000);
+        });
+
+        return {
+            albumImage,
+            artistName,
+            songName,
+            playing,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.spotify-now-playing {
+    width: fit-content;
+    height: fit-content;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    box-shadow: 3px;
+}
+
+.spotify-not-playing {
+    border: 2px solid black;
+    align-items: center;
+    text-align: center;
+    background: white;
+}
+</style>

nginx/vue/src/views/Home.vue

@@ -1,5 +1,6 @@
 <script setup>
-import Spotify from "@/components/Spotify.vue";
+import SpotifyListening from "@/components/spotify/Listening.vue";
+import SpotifyRecent from "@/components/spotify/Recent.vue";
 import Radio from "@/components/Radio.vue";
 </script>
 
@@ -49,8 +50,13 @@ import Radio from "@/components/Radio.vue";
         </div> -->
 
         <div class="bordered-1">
-            <Spotify class="border" />
+            <SpotifyListening class="border" />
         </div>
+
+        <div class="bordered-1">
+            <SpotifyRecent class="border" />
+        </div>
+
         <div class="bordered-1">
             <Radio />
         </div>