perf(index): remove music widget

src/components/Music.astro

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

src/js/index.ts

@@ -4,9 +4,8 @@ const links = document.querySelectorAll(".motion-links");
 const logo = document.querySelectorAll(".motion-logo");
 const text = document.querySelectorAll(".motion-text");
 const footer = document.querySelectorAll(".motion-footer");
-const music = document.querySelectorAll(".motion-music");
 
-const elements = [...text, ...logo, ...links, ...footer, ...music];
+const elements = [...text, ...logo, ...links, ...footer];
 
 animate(
   elements,

src/js/music.ts

@@ -1,158 +0,0 @@
-interface Track {
-  artists: string[];
-  title: string;
-  album: { albumtitle: string };
-}
-
-interface Scrobble {
-  time: number;
-  track: Track;
-}
-
-const SPOTIFY_ID = "7d152bfca7e545a5801cc2a0b5b9dcb0";
-const SPOTIFY_SECRET = "ff9db43e1ec7420bacd4e553f09ee555";
-
-async function getSpotifyToken(): Promise<string | null> {
-  const encoded = btoa(`${SPOTIFY_ID}:${SPOTIFY_SECRET}`);
-
-  try {
-    const response = await fetch("https://accounts.spotify.com/api/token", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-        Authorization: `Basic ${encoded}`,
-      },
-      body: "grant_type=client_credentials",
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-    return data.access_token;
-  } catch (error) {
-    console.error("Error getting Spotify token:", error);
-    return null;
-  }
-}
-
-async function fetchSpotifyCover(
-  artist: string,
-  track: string,
-): Promise<string | null> {
-  const token = await getSpotifyToken();
-  if (!token) {
-    return null;
-  }
-
-  const encodedArtist = encodeURIComponent(artist);
-  const encodedTrack = encodeURIComponent(track);
-  const query = `track:${encodedTrack} artist:${encodedArtist}`;
-
-  try {
-    const response = await fetch(
-      `https://api.spotify.com/v1/search?q=${query}&type=track&limit=1`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`Spotify API error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-
-    if (data?.tracks?.items?.length > 0) {
-      const imageUrl = data.tracks.items[0].album.images[0].url;
-      return imageUrl;
-    }
-
-    return null;
-  } catch (error) {
-    console.error("Error fetching Spotify cover:", error);
-    return null;
-  }
-}
-
-async function fetchAndDisplayLastTrack() {
-  const container = document.getElementById("last-track-widget");
-
-  if (!container) {
-    console.error("Container element not found!");
-    return;
-  }
-
-  try {
-    let res: Response;
-    try {
-      res = await fetch("https://z0x.ca/music");
-      if (!res.ok) throw new Error("WAN fetch failed");
-    } catch (e) {
-      res = await fetch("https://z0x.home.arpa/music");
-    }
-
-    if (!res.ok) {
-      throw new Error(`HTTP error! status: ${res.status}`);
-    }
-
-    const data: { status: string; list: Scrobble[] } = await res.json();
-
-    let lastTrack: Track | null = null;
-    if (data?.status === "ok" && data.list?.length) {
-      lastTrack = data.list.sort(
-        (a: Scrobble, b: Scrobble) => b.time - a.time,
-      )[0].track;
-    }
-
-    if (lastTrack) {
-      const albumCover = await fetchSpotifyCover(
-        lastTrack.artists[0],
-        lastTrack.title,
-      );
-
-      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 = "";
-      }
-
-      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">
-            Last played..
-          </span>
-        </span>
-        <span class="text-md mb-2 font-bold leading-none">
-          ${lastTrack.title}
-        </span>
-        <span class="text-xs text-muted-foreground">
-          <span class="font-semibold text-secondary-foreground">
-            by
-          </span>
-          ${lastTrack.artists[0]}
-        </span>
-        <span class="text-xs text-muted-foreground">
-          <span class="font-semibold text-secondary-foreground">
-            on
-          </span>
-          ${lastTrack.album.albumtitle}
-        </span>
-      `;
-    } else {
-      container.innerHTML = "<p>No tracks found.</p>";
-    }
-  } catch (e) {
-    console.error("Fetch error:", e);
-    container.innerHTML = "<p>Error loading tracks.</p>";
-  } finally {
-  }
-}
-
-fetchAndDisplayLastTrack();

src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 import Links from "@/components/Links.astro";
 import Logo from "@/components/Logo.astro";
-import Music from "@/components/Music.astro";
 import Text from "@/components/Text.astro";
 import Layout from "@/layouts/Layout.astro";
 ---
@@ -10,5 +9,4 @@ import Layout from "@/layouts/Layout.astro";
 	<Text text="z0x"/>
 	<Logo />
 	<Links />
-	<Music />
 </Layout>