From 7e42d1789d2b4afa7e8ef06e904ab78832ede78a Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Sun, 25 Feb 2024 23:47:31 -0800
Subject: [PATCH] feat: update now page to use lastfm data

---
 package-lock.json   |  1 +
 package.json        |  1 +
 src/_data/lastfm.js | 32 ++++++++++++++++++++++++++++++++
 src/now.html        | 22 ++++++++++++++++++++++
 src/now.md          | 27 ---------------------------
 5 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 src/_data/lastfm.js
 create mode 100644 src/now.html
 delete mode 100644 src/now.md

diff --git a/package-lock.json b/package-lock.json
index ff5ecf2..c9e93d5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ceec785..0df8000 100644
--- a/package.json
+++ b/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",
diff --git a/src/_data/lastfm.js b/src/_data/lastfm.js
new file mode 100644
index 0000000..97671f3
--- /dev/null
+++ b/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;
diff --git a/src/now.html b/src/now.html
new file mode 100644
index 0000000..accfc39
--- /dev/null
+++ b/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>
diff --git a/src/now.md b/src/now.md
deleted file mode 100644
index b6283ef..0000000
--- a/src/now.md
+++ /dev/null
@@ -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
-