From d1e9d6af1572be5270b90c9583a81c55d5bb3751 Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Mon, 23 Mar 2026 13:51:10 -0600
Subject: [PATCH] feat: now playing and local time

---
 package-lock.json          |  18 +++++-
 package.json               |   3 +-
 public/no-cover-art.svg    |  10 ++++
 src/layouts/layout.astro   |   7 +--
 src/pages/about.astro      |   2 +-
 src/pages/index.astro      |  15 ++++-
 src/scripts/LocalTime.tsx  |  17 ++++++
 src/scripts/NowPlaying.tsx | 116 +++++++++++++++++++++++++++++++++++++
 src/styles/_font.scss      |   6 +-
 src/styles/_var.scss       |  10 ++--
 src/styles/about.scss      |   4 +-
 src/styles/main.scss       |  63 ++++++++++++++------
 12 files changed, 235 insertions(+), 36 deletions(-)
 create mode 100644 public/no-cover-art.svg
 create mode 100644 src/scripts/LocalTime.tsx
 create mode 100644 src/scripts/NowPlaying.tsx

diff --git a/package-lock.json b/package-lock.json
index 5f61033..55bd29d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "@types/react-dom": "^19.2.3",
         "astro": "^5.3.0",
         "react": "^19.2.4",
-        "react-dom": "^19.2.4"
+        "react-dom": "^19.2.4",
+        "temporal-polyfill": "^0.3.2"
       },
       "devDependencies": {
         "sass-embedded": "^1.83.4"
@@ -6782,6 +6783,21 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/temporal-polyfill": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.3.2.tgz",
+      "integrity": "sha512-TzHthD/heRK947GNiSu3Y5gSPpeUDH34+LESnfsq8bqpFhsB79HFBX8+Z834IVX68P3EUyRPZK5bL/1fh437Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "temporal-spec": "0.3.1"
+      }
+    },
+    "node_modules/temporal-spec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.3.1.tgz",
+      "integrity": "sha512-B4TUhezh9knfSIMwt7RVggApDRJZo73uZdj8AacL2mZ8RP5KtLianh2MXxL06GN9ESYiIsiuoLQhgVfwe55Yhw==",
+      "license": "ISC"
+    },
     "node_modules/tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
diff --git a/package.json b/package.json
index 3b39ceb..fc00b97 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "@types/react-dom": "^19.2.3",
     "astro": "^5.3.0",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "temporal-polyfill": "^0.3.2"
   },
   "devDependencies": {
     "sass-embedded": "^1.83.4"
diff --git a/public/no-cover-art.svg b/public/no-cover-art.svg
new file mode 100644
index 0000000..35a4105
--- /dev/null
+++ b/public/no-cover-art.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="no-cover-art">
+    <style>
+        svg {
+            color: light-dark(#242424, #dcdcdc);
+        }
+    </style>
+    <circle cx="16" cy="16" r="10" />
+    <circle cx="16" cy="16" r="4" />
+    <path d="M16 16h.01" />
+</svg>
\ No newline at end of file
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 2dfaf31..e583976 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -1,5 +1,6 @@
 ---
 import Header from '../components/header.astro'
+import Footer from "../components/footer.astro"
 const { title } = Astro.props
 ---
 
@@ -27,9 +28,6 @@ const { title } = Astro.props
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 		<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">
 
-		<!-- JavaScript -->
-		<!-- <script src="../scripts/index.js" /> -->
-
 		<!-- Schema -->
 		<script type="application/ld+json">
 			{
@@ -42,9 +40,10 @@ const { title } = Astro.props
 	</head>
 
 	<body>
-		<Header title={title}/>
 		<main>
+			<Header title={title}/>
 			<slot />
 		</main>
+		<Footer />
 	</body>
 </html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 08005d5..ff6fa3c 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -8,7 +8,7 @@ import "../styles/about.scss";
         <div class="column left">
             <p class="big">
                 My name is Angel Wang. I'm a queer Chinese tinkergirl living in Alberta, Canada. I write code and music to
-                stop myself from going insane.
+                stop myself from going insane, with the goal of creating → computer [for] human.
             </p>
             <p class="big">
                 The songs and software I never wrote end up in the garbage can that is my Tumblr. Check it out if you
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 901f43f..26b3423 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,19 @@
 ---
 import Layout from "../layouts/layout.astro";
 import "../styles/main.scss";
+import NowPlaying from "../scripts/NowPlaying";
+import LocalTime from "../scripts/LocalTime";
 ---
-
 <Layout title="Hi, I'm angelcube">
-
+    <div class="columns">
+        <div class="column left">
+            <p class="big">
+                I'm a computer human living in Alberta, Canada. I write code and music to stop myself from going insane.
+            </p>
+        </div>
+        <div class="column right">
+            <LocalTime client:only="react"/>
+            <NowPlaying client:only="react" />
+        </div>
+    </div>
 </Layout>
\ No newline at end of file
diff --git a/src/scripts/LocalTime.tsx b/src/scripts/LocalTime.tsx
new file mode 100644
index 0000000..b24c257
--- /dev/null
+++ b/src/scripts/LocalTime.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react"
+import { Temporal } from "temporal-polyfill"
+
+export default function LocalTime() {
+    const [time, setTime] = useState("")
+
+    useEffect(() => {
+        setInterval(() => {
+            setTime(Temporal.Now.zonedDateTimeISO("America/Edmonton").toLocaleString())
+        }, 1000)
+    })
+
+    return (
+        <p className="local-time">{time}</p>
+    )
+    
+}
\ No newline at end of file
diff --git a/src/scripts/NowPlaying.tsx b/src/scripts/NowPlaying.tsx
new file mode 100644
index 0000000..ecd9e4b
--- /dev/null
+++ b/src/scripts/NowPlaying.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+
+interface TrackData {
+    name: string;
+    album: string;
+    artist: string;
+    url: string;
+    coverArtURL: string;
+}
+
+async function fetchTrackData() {
+    let trackData : TrackData = {
+        name: "Unknown",
+        album: "Unknown",
+        artist: "Unknown",
+        url: "",
+        coverArtURL: "/no-cover-art.svg"
+    }
+
+    const listenResponse = await fetch("https://api.listenbrainz.org/1/user/angelcube/playing-now")
+    if (!listenResponse.ok) throw `${listenResponse.status} ${listenResponse.statusText}`
+
+    const listenJSON = await listenResponse.json()
+    if (listenJSON.payload.count == 0) return
+    const rawListenData = listenJSON.payload.listens[0].track_metadata
+
+    trackData.name = rawListenData.track_name
+    trackData.artist = rawListenData.artist_name
+    trackData.album = rawListenData.release_name
+
+    // this needs to be encoded separately—URLSearchParams encodes spaces as "+"
+    let query = encodeURIComponent(`artist:"${rawListenData.artist_name}" AND recording:"${rawListenData.track_name}" ${rawListenData.release_name == undefined ? "" : `AND release:"${rawListenData.release_name}"`}`)
+
+    const metadataLookupParams = new URLSearchParams({
+        fmt: "json",
+        limit: "1"
+    })
+    const metadataLookupResponse = await fetch("https://musicbrainz.org/ws/2/recording/?" + metadataLookupParams + "&query=" + query, {
+        headers: {"User-Agent": "angelcube's ListenBrainz widget/0.0.0 (https://angelcube.dev/)"}
+    })
+    const metadataLookupJSON = await metadataLookupResponse.json()
+
+    if (metadataLookupJSON.recordings.length == 0) {
+        return trackData
+    }
+
+    const metadataLookup = metadataLookupJSON.recordings[0]
+
+    trackData.name = metadataLookup.title
+    trackData.url = "https://listenbrainz.org/track/" + metadataLookup.id
+
+    trackData.artist = "" // reset this, we set it to Unknown before
+    metadataLookup["artist-credit"].forEach((artistCredit) => {
+        trackData.artist += artistCredit.name
+        if (artistCredit.joinphrase != undefined) trackData.artist += artistCredit.joinphrase
+    });
+
+    // preemptively set this to the first release found
+    trackData.album = metadataLookup.releases[0].title
+    let releaseGroupMBID = metadataLookup.releases[0]["release-group"].id
+
+    // then do a lookup
+    metadataLookup.releases.forEach(release => {
+        if (rawListenData.release_name == release.title) {
+            trackData.album = release.title
+            releaseGroupMBID = release["release-group"].id
+        }
+    });
+
+    const coverArtResponse = await fetch(`https://coverartarchive.org/release-group/${releaseGroupMBID}`);
+    if (coverArtResponse.ok) {
+        const coverArtJSON = await coverArtResponse.json();
+        trackData.coverArtURL = coverArtJSON?.images[0].thumbnails.small;
+    }
+
+    return trackData;
+}
+
+export default function NowPlaying() {
+    const [data, setData] = useState({} as TrackData)
+    const [loading, setLoading] = useState(true)
+
+    useEffect(() => {
+        const handleFetch = async () => {
+            const result = await fetchTrackData()
+            setData(result)
+            setLoading(false);
+        }
+        handleFetch()
+    }, [])
+
+    if (loading) {
+        return (
+            <div id="now-playing">
+                <p><i>Loading...</i></p>
+            </div>
+        )
+    }
+    
+    if (!data) { // listening to nothing
+        return
+    } else {
+        return (
+            <div id="now-playing">
+                <p>
+                    <span>Currently listening to </span>
+                    <img src={data.coverArtURL} />
+                    <span> {data.name} by {data.artist} on {data.album}. </span>
+                    <a href={data.url} target="_blank">↗</a>
+                </p>
+            </div>
+        )
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/styles/_font.scss b/src/styles/_font.scss
index 7de64a8..d2e421c 100644
--- a/src/styles/_font.scss
+++ b/src/styles/_font.scss
@@ -33,9 +33,9 @@
 }
 
 @font-face {
-  font-family: 'PP Neue Machina Inktrap';
-  font-style: normal;
-  font-weight: 400;
+  font-family: 'PP Neue Machina Inktrap Variable';
+  font-style: normal italic;
+  font-weight: 100 900;
   font-display: swap;
   font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss05' 1, 'ss09' 1, 'ss10' 1;
   // alt a, alt r, alt g, loopy braces, high contrast y
diff --git a/src/styles/_var.scss b/src/styles/_var.scss
index e513a2a..f971e58 100644
--- a/src/styles/_var.scss
+++ b/src/styles/_var.scss
@@ -4,7 +4,7 @@
     color-scheme: light dark;
     
     --width: 1125px;
-    --font-main: 'PP Neue Machina Inktrap';
+    --font-main: 'PP Neue Machina Inktrap Variable';
     --font-secondary: 'Inter Variable';
     --font-scale: 1em;
     --background-color: light-dark(#eff1f5, #171717);
@@ -21,11 +21,9 @@
 }
 
 body {
+    margin: 0;
     font-family: var(--font-secondary);
     font-size: var(--font-scale);
-    margin: auto;
-    max-width: var(--width);
-    padding: 20px;
     text-align: left;
     background-color: var(--background-color);
     word-wrap: break-word;
@@ -50,7 +48,9 @@ a {
 }
 
 main {
-    margin-bottom: 100px;
+    margin: auto;
+    max-width: var(--width);
+    margin-bottom: 20vh;
 	line-height: 1.6;
 }
 
diff --git a/src/styles/about.scss b/src/styles/about.scss
index e5397d5..06df2a5 100644
--- a/src/styles/about.scss
+++ b/src/styles/about.scss
@@ -6,7 +6,7 @@ header a:nth-child(2) {
 }
 
 p.big {
-    font-size: 1.4em;
+    font-size: 1.5rem;
 }
 
 p.big:first-child {
@@ -16,7 +16,7 @@ p.big:first-child {
 a.big {
     font-family: var(--font-main);
     display: block;
-    font-size: 1.4em;
+    font-size: 1.5rem;
     text-decoration: none;
 }
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 08b3a28..8c15d85 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -7,28 +7,57 @@ header a:nth-child(1) {
 
 p.big {
     font-family: var(--font-secondary);
-    font-size: 1.4em;
+    font-size: 1.5rem;
 }
 
-h4 {
-    font-size: 14px;
-}
+.columns {
+    display: flex;
+    
+    .column.left {
+        margin-right: 10%;
+        flex: auto;
+    }
 
-strong,
-b {
-    color: var(--heading-color);
-}
+    .column.right {
+        width: calc(100% / 3);
+        flex: none;
 
-hr {
-    border: 0;
-    border-top: 1px dashed;
-	color: var(--text-color)
+        p.local-time {
+            font-size: 1.5rem
+        }
+    }
 }
 
-img {
-    max-width: 100%;
+#now-playing {
+    // display: flex;
+    // flex-direction: row;
+    p {
+        font-family: var(--font-main);
+        font-size: 1.5rem
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+    }
+
+    img {
+        vertical-align: baseline;
+        display: inline;
+        width: 0.72em;
+    }
+
+    .metadata {
+        display: flex;
+        flex-direction: column;
+    }
+
 }
 
-ul {
-	list-style-type: "– ";
-}
\ No newline at end of file
+
+
+
-- 
2.51.2