feat(index): add song cover art

src/components/Music.astro

@@ -2,7 +2,6 @@
   id="last-track-widget"
   class="motion-music opacity-0 flex flex-col absolute top-0 left-0 m-8"
 >
-  <p>Loading music data...</p>
 </div>
 
 <script src="/src/js/music.ts"></script>

src/js/music.ts

@@ -9,6 +9,44 @@ interface Scrobble {
   track: Track;
 }
 
+interface LastFMAlbumInfo {
+  album: {
+    image: { "#text": string; size: string }[];
+  };
+}
+
+const LASTFM_API_KEY = "0a210a4a6741f2ec8f27a791b9d5d971";
+
+async function fetchAlbumCover(
+  artist: string,
+  album: string,
+): Promise<string | null> {
+  const encodedArtist = encodeURIComponent(artist);
+  const encodedAlbum = encodeURIComponent(album);
+  const url = `https://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=${LASTFM_API_KEY}&artist=${encodedArtist}&album=${encodedAlbum}&format=json`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data: LastFMAlbumInfo = await response.json();
+
+    if (data?.album?.image) {
+      const largeImage = data.album.image.find(
+        (image) => image.size === "large",
+      );
+      return largeImage ? largeImage["#text"] : null;
+    }
+
+    return null;
+  } catch (error) {
+    console.error("Error fetching album cover:", error);
+    return null;
+  }
+}
+
 async function fetchAndDisplayLastTrack() {
   const container = document.getElementById("last-track-widget");
 
@@ -38,8 +76,22 @@ async function fetchAndDisplayLastTrack() {
         (a: Scrobble, b: Scrobble) => b.time - a.time,
       )[0].track;
     }
+
     if (lastTrack) {
+      const albumCover = await fetchAlbumCover(
+        lastTrack.artists[0],
+        lastTrack.album.albumtitle,
+      );
+
+      let imageElement = "";
+      if (albumCover) {
+        imageElement = `<img src="${albumCover}" alt="Album Cover" class="mb-2 rounded shadow-md w-32 h-32 object-cover">`;
+      } else {
+        imageElement = ""; // Do not display anything
+      }
+
       container.innerHTML = `
+        ${imageElement}
         <span class="mb-2 flex gap-2">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
           <span class="text-sm text-primary">