fix 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,72 @@
+---
+---
+
+<div class="lastfm">
+    <img class="cover" src="https://lastfm.freetls.fastly.net/i/u/300x300/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg">
+    <div class="info">
+        <h3 class="title"><a target="_blank">loading...</a></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));
+    console.log(json);
+    type LastFmResource<T> = { "#text": T }
+    const track = json.recenttracks.track[0] as {
+        "@attr"?: { nowplaying: boolean },
+        album: LastFmResource<string>,
+        artist: LastFmResource<string>,
+        date?: LastFmResource<string>,
+        image: LastFmResource<string>[],
+        name: string,
+        url: string,
+    };
+
+    // i think it's okay to have this be an anchor element
+    // the aria role is link if href is present, otherwise generic (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#technical_summary)
+    // also briefly stated in the html spec (https://html.spec.whatwg.org/#the-a-element)
+    const title = document.querySelector(".title a") as HTMLAnchorElement;
+    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;
+    title.href = track.url;
+    album.innerText = track.album["#text"];
+    artist.innerText = track.artist["#text"];
+    time.innerText = (track.date && new Date(track.date["#text"]).toLocaleString(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short"
+    })) || (track["@attr"]?.nowplaying && "NOW!!!") || "epic error getting play time..";
+
+    // 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/content/badges/badges.yml

@@ -91,3 +91,7 @@
   path: "./img/spax.gif"
   alt: "spax dot zone"
   href: "https://spax.zone"
+- slug: "mini"
+  path: "./img/mini.png"
+  alt: "miniaturity"
+  href: "https://minipa.ws/"

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>