feat: update now page to use lastfm data

package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
+        "@11ty/eleventy-fetch": "^4.0.0",
         "@11ty/eleventy-img": "^3.1.8",
         "@11ty/eleventy-plugin-rss": "^1.2.0",
         "autoprefixer": "^10.4.17",

package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-fetch": "^4.0.0",
     "@11ty/eleventy-img": "^3.1.8",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "autoprefixer": "^10.4.17",

src/_data/lastfm.js

@@ -0,0 +1,32 @@
+require("dotenv").config();
+
+const EleventyFetch = require("@11ty/eleventy-fetch");
+const dayjs = require("dayjs");
+const utc = require("dayjs/plugin/utc");
+const relativeTime = require("dayjs/plugin/relativeTime");
+
+dayjs.extend(utc);
+dayjs.extend(relativeTime);
+
+const lastFmApiKey = process.env.LAST_FM_API_KEY;
+
+const fetchRecentTracks = async () => {
+  const url = `http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=wonderfulfrog&api_key=${lastFmApiKey}&format=json`;
+
+  const response = await EleventyFetch(url, { duration: "1m", type: "json" });
+  const tracks = response.recenttracks.track.slice(0, 5);
+
+  const recentTracks = tracks.map((track) => {
+    const timestamp = dayjs(track.date["#text"]).utc(true).fromNow();
+    return {
+      artist: track.artist["#text"],
+      track: track.name,
+      url: track.url,
+      timestamp,
+    };
+  });
+
+  return recentTracks;
+};
+
+module.exports = fetchRecentTracks;

src/now.html

@@ -0,0 +1,22 @@
+---
+layout: "layouts/base"
+permalink: /now/index.html
+title: /now
+---
+
+<h1>/now</h1>
+<p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
+<p>
+    What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com.</a>
+</p>
+<h2>🎶 Listening</h2>
+<ul class="[ p-0 flow ]" role="list">
+    {% for track in lastfm %}
+        <li class="[ flex flex-wrap gap-0.5 line-height-m ]">
+            <a href="{{ track.url }}"
+               target="_blank"
+               rel="external noreferrer noopener">{{ track.artist }} - {{ track.track }}</a>
+            <p class="[ text-fadeText font-size-s ]">{{ track.timestamp }}</p>
+        </li>
+    {% endfor %}
+</ul>

src/now.md

@@ -1,27 +0,0 @@
----
-layout: "layouts/base"
-permalink: /now/index.html
-title: /now
----
-
-# Now
-
-Last updated on **February 25th, 2024**.
-
-What is a `/now` page? Check out [nownownow.com][nownownow].
-
-## What am I doing right now?
-
-By day, working at [Metalab][metalab] makin' interfaces.
-
-## Currently into
-
-- Learning about [Eleventy][11ty]. And making stuff with it! Like this site!
-- Getting my daily puzzle on at [Puzzmo][puzzmo].
-
-
-[nownownow]: https://nownownow.com/about
-[metalab]: https://metalab.com
-[11ty]: https://https://www.11ty.dev
-[puzzmo]: https://www.puzzmo.com
-