feat: album releases grid

src/_data/albumReleases.js

@@ -31,9 +31,11 @@ export default async function () {
       title: album['name'],
       date: DateTime.fromISO(album['release_date']).toLocaleString(DateTime.DATE_FULL),
       url: album['release_link'],
+      image: album['image'],
       artist_url: `/music/artists/${sanitizeMediaString(album['artists']['name_string'])}-${sanitizeMediaString(parseCountryField(album['artists']['country']))}`,
       mbid: album['artists']['mbid'],
-      timestamp: DateTime.fromISO(album['release_date']).toSeconds()
+      timestamp: DateTime.fromISO(album['release_date']).toSeconds(),
+      type: 'album-release'
     }
   }).sort((a, b) => a.timestamp - b.timestamp)
 }

src/_includes/partials/media/music/releases.liquid

@@ -1,18 +0,0 @@
-<h2 id="album-releases" class="section-header flex-centered">
-  {% tablericon "calendar-time" "Anticipated albums" %}
-  Anticipated albums
-</h2>
-<ul class="link-list">
-  {% for album in albumReleases %}
-    <li>
-      <strong>{{ album.date }}: </strong>
-      <a href="{{ album.url}}" title="Learn more about {{ album.title | escape}} by {{ album.artist | escape}}">
-        {{ album.title }}
-      </a>
-      <span> by </span>
-      <a href="{{ album.artist_url }}" title="Learn more about {{ album.artist | escape }}">
-        {{ album.artist }}
-      </a>
-    </li>
-  {% endfor %}
-</ul>

src/pages/main/music/index.html

@@ -82,4 +82,10 @@ schema: music-index
   {% render "partials/media/music/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays, count: 10 %}
 </div>
 <p><strong class="highlight-text">More:</strong> <a href="/music/tracks/this-week/" title="Tracks listened to this week">This week</a> • <a href="/music/tracks/this-month/" title="Tracks listened to this month">This month</a> • <a href="/music/tracks/three-months/" title="Tracks listened to in the last 3 months">3 months</a></p>
-{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
+{% if albumReleases.size > 0 %}
+<h2 id="album-releases" class="section-header flex-centered">
+  {% tablericon "calendar-time" "Anticipated albums" %}
+  Anticipated albums
+</h2>
+{% render "partials/media/grid.liquid", data:albumReleases, shape: "square", count: 8 %}
+{% endif %}