feat: dedicated music page

src/pages/main/music/albums/3-months.html

@@ -0,0 +1,27 @@
+---
+title: Albums • 3 months
+layout: default
+pagination:
+  data: music.threeMonth.albums
+  size: 24
+permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+---
+<p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
+<h2 class="page-header">{{ title }}</h2>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in pagination.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:pagination %}