LAST.FM INTEGRATION (because of course)

.env

@@ -1 +1,2 @@
-PORT=3000
+PORT=3000
+LFM_API_KEY=8f9b0255cc55a19f82d37c22600aff1a

assets/elements.css

@@ -51,6 +51,7 @@ div {
 
 img {
   vertical-align: middle;
+  background-color: #fff8;
 }
 
 a {
@@ -94,4 +95,14 @@ button, input[type=submit] {
 button:active, input[type=submit]:active {
   background-color: transparent;
   color: var(--color-accent);
+}
+
+marquee {
+  vertical-align: top;
+}
+
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
 }

index.js

@@ -95,13 +95,38 @@ app.get('/servers', async (req, res) => {
   });
 });
 
+var units = {
+  year: 24 * 60 * 60 * 1000 * 365,
+  month: 24 * 60 * 60 * 1000 * 365 / 12,
+  day: 24 * 60 * 60 * 1000,
+  hour: 60 * 60 * 1000,
+  minute: 60 * 1000,
+  second: 1000
+}
+
+var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+var getRelativeTime = (d1, d2 = new Date()) => {
+  var elapsed = d1 - d2
+
+  // "Math.abs" accounts for both "past" & "future" scenarios
+  for (var u in units)
+    if (Math.abs(elapsed) > units[u] || u == 'second')
+      return rtf.format(Math.round(elapsed / units[u]), u)
+}
+
 app.get('/about', async (req, res) => {
   const linksJson = await fetch("https://cdn.abtmtr.link/site_content/v13/links.json")
     .catch(() => res.status(500).send())
     .then((res) => res.json());
+  const currentlyListeningJson = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=MeowcaTheoRange&api_key=${process.env.LFM_API_KEY}&format=json&limit=2&extended=1`)
+    .catch(() => res.status(500).send())
+    .then((res) => res.json());
 
   res.render('about', {
-    links: linksJson
+    links: linksJson,
+    cl: currentlyListeningJson.recenttracks.track[0],
+    getRelativeTime
   });
 });
 

views/pages/about.ejs

@@ -17,7 +17,7 @@
           <span class="p-gender-identity">Non-binary</span>,
           <span class="p-pronouns">they/them</span>
         </p>
-        <p><img class="u-photo" src="https://abtmtr.link/favicon.ico" height="72"></p>
+        <p><img class="u-photo" src="https://abtmtr.link/favicon.ico" height="72" width="72"></p>
         <p class="nomargin">
           <a class="u-url" href="https://abtmtr.link/">website</a>,
           <a class="u-email" href="mailto:me@abtmtr.link">email</a>
@@ -30,6 +30,18 @@
           <span class="p-country-name">USA</span>
         </p>
       </div>
+      <% if (cl["@attr"] != null && cl["@attr"].nowplaying) { %>
+        <h2>MeowcaTheoRange is currently listening to</h2>
+      <% } else { %>
+        <h2>MeowcaTheoRange last listened to (<%= getRelativeTime(cl.date.uts * 1000) %>)</h2>
+      <% } %>
+      <p style="float: inline-start; margin-block: 0; margin-inline-end: 2ch;"><img class="u-photo" src="<%= cl.image[2]["#text"] %>" height="72" width="72"></p>
+      <p class="clearfix">
+        <%= cl.name %><br />
+        <%= cl.album["#text"] %><br />
+        <%= cl.artist.name %><br />
+        <a href="<%= cl.url %>" target="_blank">See on Last.fm</a>
+      </p>
       <h2>MeowcaTheoRange's links</h2>
       <p>where else is MeowcaTheoRange?</p>
       <ul>