the scrobblerrr

src/components/Card.astro

@@ -21,7 +21,6 @@ const { title } = Astro.props;
     }
 
     .card {
-        width: fit-content;
         /* the golden rule i think */
         /* max-width: 800px is my everything */
         max-width: 800px;

src/components/LastFm.astro

@@ -0,0 +1,66 @@
+---
+---
+
+<div class="lastfm">
+    <img class="cover" src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg">
+    <div class="info">
+        <h3 class="title">loading...</h3>
+        on <span class="album"><strong>loading...</strong></span><br>
+        by <span class="artist"><strong>loading...</strong></span><br>
+        at <time class="time"><strong>loading...</strong></time>
+    </div>
+</div>
+<script>
+    // load bearing noelle
+    const json = await fetch("https://lastfm.nkko.workers.dev/?method=user.getRecentTracks&user=reidlab")
+        .then(res => res.json())
+        .catch(err => console.error("last.fm fail:", err));
+    type LastFmResource<T> = { "#text": T }
+    const track = json.recenttracks.track[0] as {
+        album: LastFmResource<string>,
+        artist: LastFmResource<string>,
+        date: LastFmResource<string>,
+        image: LastFmResource<string>[],
+        name: string,
+        url: string,
+    };
+
+    const title = document.querySelector(".title") as HTMLHeadingElement;
+    const album = document.querySelector(".album strong") as HTMLElement;
+    const artist = document.querySelector(".artist strong") as HTMLElement;
+    const time = document.querySelector(".time strong") as HTMLTimeElement;
+    const cover = document.querySelector(".cover") as HTMLImageElement;
+    title.innerText = track.name;
+    album.innerText = track.album["#text"];
+    artist.innerText = track.artist["#text"];
+    time.innerText = new Date(track.date["#text"]).toLocaleString(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short"
+    });
+
+    // i chose a random thing from my library missing an album cover for this
+    // but apparently this goes for any missing track? cuz everyone else is doing it
+    // https://github.com/search?q=c6f59c1e5e7240a4c0d427abd71f3dbb&type=code
+    cover.src = track.image.at(-1)?.["#text"] ?? "https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg";
+    cover.alt = track.name;
+</script>
+<style>
+    .lastfm {
+        display: flex;
+        gap: 1em;
+    }
+
+    .cover {
+        display: block;
+        width: 8em;
+        height: min-content;
+        float: left;
+    }
+
+    .info {
+        word-break: break-all;
+    }
+    .title {
+        size: 1.2em;
+    }
+</style>

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
 
 import Card from "../components/Card.astro";
 import Badges from "../components/Badges.astro";
+import LastFm from "../components/LastFm.astro";
 ---
 
 <Layout title="landing">
@@ -11,6 +12,9 @@ import Badges from "../components/Badges.astro";
         <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress</p>
         <p>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p>
     </Card>
+    <Card title="lastfm">
+        <LastFm/>
+    </Card>
     <Card title="buttons">
         <Badges/>
     </Card>