new image size

backend/main.go

@@ -35,9 +35,9 @@ func main() {
 	clientSecret := os.Getenv("SPOTIFY_CLIENT_SECRET")
 	spotifyConfig := services.SpotifyConfig{AuthState: authState, RedirectURL: redirectURL, ClientID: clientID, ClientSecret: clientSecret}
 
-	auth := services.InitSpotifyAuth(spotifyConfig)
+	auth, client := services.InitSpotifyAuth(spotifyConfig)
 
-	store := handlers.Store{DB: db, SpotifyAuth: auth, SpotifyClient: nil, SpotifyToken: nil}
+	store := handlers.Store{DB: db, SpotifyAuth: auth, SpotifyClient: client}
 
 	r.GET("/posts", store.GetPosts)
 	r.POST("/posts", store.CreatePost)

html/css/styles.css

@@ -32,3 +32,8 @@ h4 {
     width: 100%;
     background-color: beige;
 }
+
+.album-img {
+    width: 10vw;
+    height: 10vw;
+}

html/index.html

@@ -9,23 +9,25 @@
         <script>
             function spotifyPlayer() {
                 return {
-            album_image: '',
-            artist_name: '',
-            song_name: '',
+                    album_image: "",
+                    artist_name: "",
+                    song_name: "",
                     playing: false,
                     async fetchNowPlaying() {
                         try {
-                const res = await fetch('https://www.adam-french.co.uk/api/spotify');
+                            const res = await fetch(
+                                "https://www.adam-french.co.uk/api/spotify",
+                            );
                             const data = await res.json();
                             this.album_image = data.album_image;
                             this.artist_name = data.artist_name;
                             this.song_name = data.song_name;
                             this.playing = data.playing;
                         } catch (err) {
-                console.error('Failed to fetch Spotify data', err);
-              }
-            }
+                            console.error("Failed to fetch Spotify data", err);
                         }
+                    },
+                };
             }
         </script>
 
@@ -66,12 +68,19 @@
             <h2>cv</h2>
             <a href="./cv/index.html">CV</a>
 
-            <div x-data="spotifyPlayer()" x-init="fetchNowPlaying()" class="spotify-card">
-               <img :src="album_image" alt="Album Art">
+            <div
+                x-data="spotifyPlayer()"
+                x-init="fetchNowPlaying()"
+                class="spotify-card"
+            >
+                <img :src="album_image" class="album-img" alt="Album Art" />
                 <div class="spotify-info">
-                 <span x-text="song_name || 'No song playing'"></span>
-                 <span x-text="artist_name"></span>
-                 <span x-text="playing ? 'Playing' : 'Paused'" :class="{'playing': playing}"></span>
+                    <div x-text="song_name || 'No song playing'"></div>
+                    <div x-text="artist_name"></div>
+                    <div
+                        x-text="playing ? 'Playing' : 'Paused'"
+                        :class="{'playing': playing}"
+                    ></div>
                 </div>
             </div>
 
@@ -82,12 +91,11 @@
             </p>
             -->
 
-            <h2>Shrines</h1>
+            <!--<h2>Shrines</h1>
             <a href="shrines/evangelion.html">Evangelion</a>
             <a href="shrines/skipskipbenben.html">Skip skip ben ben</a>
-            <a href="shrines/demoman.html">demoman</a>
+            <a href="shrines/demoman.html">demoman</a>-->
             <!--<a href="shrines/gto.html">GTO</a>-->
-
         </div>
     </body>
 </html>