feat: add ListenBrainz data to now page

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

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;

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