feat: aggregate albums from recent tracks too

src/_data/recentTracks.js

@@ -1,6 +1,6 @@
 const { AssetCache } = require('@11ty/eleventy-fetch')
 
-const sortTrim = (array, length = 5) =>
+const sortTrim = (array, length = 8) =>
   Object.values(array)
     .sort((a, b) => b.plays - a.plays)
     .splice(0, length)
@@ -10,9 +10,10 @@ module.exports = async function () {
   const APPLE_TOKEN = process.env.API_TOKEN_APPLE_MUSIC
   const asset = new AssetCache('recent_tracks_data')
   const PAGE_SIZE = 30
-  const PAGES = 4
+  const PAGES = 8
   const response = {
     artists: {},
+    albums: {},
     tracks: {},
   }
 
@@ -49,6 +50,18 @@ module.exports = async function () {
       response.artists[track.attributes.artistName].plays++
     }
 
+    // aggregate albums
+    if (!response.albums[track.attributes.albumName]) {
+      response.albums[track.attributes.albumName] = {
+        name: track.attributes.albumName,
+        artist: track.attributes.artistName,
+        art: track.attributes.artwork.url.replace('{w}', '300').replace('{h}', '300'),
+        plays: 1,
+      }
+    } else {
+      response.albums[track.attributes.albumName].plays++
+    }
+
     // aggregate tracks
     if (!response.tracks[track.attributes.name]) {
       response.tracks[track.attributes.name] = {
@@ -59,8 +72,9 @@ module.exports = async function () {
       response.tracks[track.attributes.name].plays++
     }
   })
-  response.artists = sortTrim(response.artists, 4)
+  response.artists = sortTrim(response.artists)
-  response.tracks = sortTrim(response.tracks)
+  response.albums = sortTrim(response.albums)
+  response.tracks = sortTrim(response.tracks, 5)
   await asset.save(response, 'json')
   return response
 }

src/_includes/now.liquid

@@ -52,6 +52,9 @@ layout: main
           <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
           <div class="absolute left-1 bottom-2 drop-shadow-md">
             <div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
+            <div class="px-1 text-xs text-white">
+              {{ artist.plays }} plays
+            </div>
           </div>
           {%- capture artistImg %}{{ artist.name | artist }}{% endcapture -%}
           {%- capture artistName %}{{ artist.name | escape }}{% endcapture -%}
@@ -61,24 +64,24 @@ layout: main
     {% endfor %}
   </div>
 {% endif %}
-{% if heavyRotation.size > 0 %}
+{% if recentTracks.size > 0 %}
   <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
     {% heroicon "solid" "music-note" "Albums" "height=28" %}
     <div class="ml-1">Albums</div>
   </h2>
   <div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
-    {% for album in heavyRotation %}
+    {% for album in recentTracks.albums %}
-      <a href="https://rateyourmusic.com/search?searchtype=l&searchterm={{album.attributes.name | escape}}" title="{{album.attributes.name | escape}}">
+      <a href="https://rateyourmusic.com/search?searchtype=l&searchterm={{album.name | escape}}" title="{{album.name | escape}}">
         <div class="relative block">
           <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
           <div class="absolute left-1 bottom-2 drop-shadow-md">
-            <div class="px-1 text-xs font-bold text-white">{{ album.attributes.name }}</div>
+            <div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
             <div class="px-1 text-xs text-white">
-              {{ album.attributes.artistName }}
+              {{ album.artist }}
             </div>
           </div>
-          {%- capture albumName %}{{ album.attributes.name | escape }}{% endcapture -%}
+          {%- capture albumName %}{{ album.name | escape }}{% endcapture -%}
-          {% image album.attributes.artwork.url, albumName, 'rounded-lg', '225px' %}
+          {% image album.art, albumName, 'rounded-lg', '225px' %}
         </div>
       </a>
     {% endfor %}