feat: update now page to use latest albums

src/_data/lastfm.js

@@ -10,6 +10,35 @@ dayjs.extend(relativeTime);
 
 const lastFmApiKey = process.env.LAST_FM_API_KEY;
 
+const baseUrl = "http://ws.audioscrobbler.com";
+const username = "wonderfulfrog";
+
+const fetchRecentAlbums = async (period = "7day") => {
+  const path = `/2.0/?method=user.gettopalbums&user=${username}&api_key=${lastFmApiKey}&format=json`;
+  const url = `${baseUrl}${path}&period=${period}`;
+
+  const response = await EleventyFetch(url, { duration: "7d", type: "json" });
+  const albums = response.topalbums.album.slice(0, 8);
+
+  const recentAlbums = albums.map((album) => {
+    const extraLargeImage = album.image.find(
+      (img) => img.size === "extralarge",
+    );
+    const imageUrl = extraLargeImage ? extraLargeImage["#text"] : "";
+    return {
+      artist: album.artist.name,
+      artistMbid: album.artist.mbid,
+      album: album.name,
+      albumMbid: album.mbid,
+      playcount: album.playcount,
+      url: album.url,
+      imageUrl,
+    };
+  });
+
+  return recentAlbums;
+};
+
 const fetchRecentTracks = async () => {
   const url = `http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=wonderfulfrog&api_key=${lastFmApiKey}&format=json`;
 
@@ -31,4 +60,12 @@ const fetchRecentTracks = async () => {
   return recentTracks;
 };
 
-module.exports = fetchRecentTracks;
+module.exports = async function () {
+  const recentTracks = await fetchRecentTracks();
+  const recentAlbums = await fetchRecentAlbums();
+
+  return {
+    recentTracks,
+    recentAlbums,
+  };
+};

src/css/blocks/now.css

@@ -9,8 +9,10 @@
   grid-gap: var(--spacing-0\.5);
 }
 
-@supports (width: min(100px, 100%)) {
+.media-grid.square {
-  .media-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
-    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
+}
-  }
+
+.media-grid.poster {
+  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
 }

src/now.html

@@ -4,32 +4,40 @@ permalink: /now/index.html
 title: /now
 ---
 
+{% 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>
 <p>
-    What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
+    🎶 <a href="{{ recentTrack.url }}"
+    target="_blank"
+    rel="external noreferrer noopener">{{ recentTrack.artist }} - {{ recentTrack.track }}</a>
 </p>
-<h2>🎶 Listening</h2>
+<h2>💿 Albums</h2>
-<ul class="[ p-0 flow ]" role="list">
+<ul class="[ media-grid square ][ p-0 ]" role="list">
-    {% for track in lastfm %}
+    {% for album in lastfm.recentAlbums %}
-        <li class="[ flex flex-wrap gap-0.5 line-height-m ]">
+        <li>
-            <a href="{{ track.url }}"
+            <a href="{{ album.url }}"
                target="_blank"
-               rel="external noreferrer noopener">{{ track.artist }} - {{ track.track }}</a>
+               rel="external noreferrer noopener">
-            <p class="[ text-fadeText font-size-s ]">{{ track.timestamp }}</p>
+                <p class="[ visually-hidden ]">{{ album.artist }} - {{ album.album }}</p>
+                {% image album.imageUrl, "" %}
+            </a>
         </li>
     {% endfor %}
 </ul>
 <h2>🍿 Movies</h2>
-<ul class="[ media-grid p-0 ]" role="list">
+<ul class="[ media-grid poster ][ p-0 ]" role="list">
     {% for movie in letterboxd %}
         <li>
             <a href="{{ movie.url }}"
                target="_blank"
                rel="external noreferrer noopener">
                 <p class="[ visually-hidden ]">{{ movie.title }}</p>
-                {% image movie.imgSrc, "", "", "[ movie-poster ]" %}
+                {% image movie.imgSrc, "" %}
             </a>
         </li>
     {% endfor %}
 </ul>
+<p class="[ font-size-s mt-2 ]">
+    What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
+</p>