---
---

<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>