From 93bb8f78d2b6cf56e7c8ed954971c36c86fd30cf Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
Date: Fri, 30 May 2025 14:22:32 -0700
Subject: [PATCH] Add ListenBrainz data to now page (#6)

Reviewed-on: https://git.cloud.haska.me/wonderfulfrog/wonderfulfrog.com/pulls/6
Co-authored-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
Co-committed-by: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
---
 README.md                |  3 +--
 src/data/listenbrainz.js | 27 +++++++++++++++++++++++++++
 src/pages/now.html       | 12 +++++++++++-
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/data/listenbrainz.js

diff --git a/README.md b/README.md
index b1147b6..f412eec 100644
--- a/README.md
+++ b/README.md
@@ -22,5 +22,4 @@ That's it. You'll have a dev server on http://localhost:8080. Have fun!
 The following tokens need to be defined inside `.env`:
 
 - `DARK_VISITORS_ACCESS_TOKEN`
-- `LAST_FM_API_KEY`
-
+- `LISTENBRAINZ_API_KEY`
diff --git a/src/data/listenbrainz.js b/src/data/listenbrainz.js
new file mode 100644
index 0000000..e2a81dd
--- /dev/null
+++ b/src/data/listenbrainz.js
@@ -0,0 +1,27 @@
+import "dotenv/config";
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const API_KEY = process.env.LISTENBRAINZ_API_KEY;
+const BASE_URL = "https://api.listenbrainz.org";
+
+async function fetchListenBrainz() {
+  try {
+    const url = `${BASE_URL}/1/user/wonderfulfrog/listens`;
+    const response = await EleventyFetch(url, {
+      duration: "1h",
+      type: "json",
+      fetchOptions: {
+        headers: {
+          Authorization: `Bearer ${API_KEY}`,
+        },
+      },
+    });
+    return response.payload.listens;
+  } catch (e) {
+    console.error("Error fetching data from ListenBrainz", e);
+    return undefined;
+  }
+}
+
+export default fetchListenBrainz;
diff --git a/src/pages/now.html b/src/pages/now.html
index a62027c..f0a5cdd 100644
--- a/src/pages/now.html
+++ b/src/pages/now.html
@@ -6,8 +6,18 @@ description: What's going on now and all the latest with myself.
 {% set recentTrack = lastfm.recentTracks[0] %}
 <h1>/now</h1>
 <p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
+{% if listenbrainz.length > 0 %}
+<section class="flow">
+    <h2>🎶 <a href="https://listenbrainz.org/user/wonderfulfrog/" target="_blank">Listening</a></h2>
+    <ol>
+        {% for listen in listenbrainz | limit(5) %}
+        <li><a href="https://listenbrainz.org/artist/{{ listen.track_metadata.additional_info.artist_mbids[0] }}" target="_blank">{{listen.track_metadata.artist_name}}</a> - <a href="https://musicbrainz.org/recording/{{ listen.track_metadata.additional_info.recording_mbid }}" target="_blank">{{ listen.track_metadata.track_name }}</a></li>
+        {% endfor %}
+    </ol>
+</section>
+{% endif %}
 {% if letterboxd.length > 0 %}
-    <h2>🍿 Movies</h2>
+    <h2>🍿 <a href="https://letterboxd.com/wonderfulfrog/" target="_blank">Movies</a></h2>
     <ul class="media-grid p-0" role="list">
         {% for movie in letterboxd %}
             <li class="radius-0.5">