feat: artist and album pages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "11.3.11",
+  "version": "11.4.11",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/now.liquid

@@ -7,10 +7,12 @@ layout: default
 <script>{{ js }}</script>
 {{ content }}
 <div class="now-header-wrapper">
-  <h2 id="artists" class="now-header flex-centered">
+  <a class="linked-header" href="/artists">
-    {% tablericon "microphone-2" "Artists" %}
+    <h2 id="artists" class="now-header flex-centered">
-    Artists
+      {% tablericon "microphone-2" "Artists" %}
-  </h2>
+      Artists
+    </h2>
+  </a>
   <div class="now-header-buttons client-side">
     <button class="small active" data-toggle="artists-window">This week</button>
     <button class="small secondary" data-toggle="artists-month">This month</button>
@@ -31,10 +33,12 @@ layout: default
   {% render "partials/now/media-grid.liquid", data:musicCharts.year.artists, shape: "square", count: 8 %}
 </div>
 <div class="now-header-wrapper">
-  <h2 id="albums" class="now-header flex-centered">
+  <a class="linked-header" href="/albums">
-    {% tablericon "vinyl" "Albums" %}
+    <h2 id="albums" class="now-header flex-centered">
-    Albums
+      {% tablericon "vinyl" "Albums" %}
-  </h2>
+      Albums
+    </h2>
+  </a>
   <div class="now-header-buttons client-side">
     <button class="small active" data-toggle="albums-window">This week</button>
     <button class="small secondary" data-toggle="albums-month">This month</button>

src/albums.html

@@ -0,0 +1,37 @@
+---
+title: Albums
+layout: default
+description: "See my top albums."
+pagination:
+  data: musicCharts.year.albums
+  size: 30
+---
+<a class="linked-header" href="/now#albums">
+  <h2 class="page-header flex-centered">
+    {% tablericon "vinyl" "Albums" %}
+    {{ title }}
+  </h2>
+</a>
+
+<p>These are my top albums for the past year or so — running backwards from when my site rebuilt itself (likely in the past hour or so).</p>
+
+<div class="music-chart grid">
+{% for item in pagination.items %}
+  {% capture alt %}{{ item.plays }} of {{ item.artist }}{% endcapture %}
+  <div class="item">
+    <div class="meta">
+      {% image item.image, alt, '', 'lazy' %}
+      <div class="meta-text">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">
+          <p>{{ item.artist }}</p>
+          <p>{{ item.plays }} plays</p>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+</div>
+{% render "partials/paginator.liquid", pagination:pagination %}

src/artists.html

@@ -0,0 +1,36 @@
+---
+title: Artists
+layout: default
+description: "See my top artists."
+pagination:
+  data: musicCharts.year.artists
+  size: 30
+---
+<a class="linked-header" href="/now#artists">
+  <h2 class="page-header flex-centered">
+    {% tablericon "microphone-2" "Artists" %}
+    {{ title }}
+  </h2>
+</a>
+
+<p>These are my top artists for the past year or so — running backwards from when my site rebuilt itself (likely in the past hour or so).</p>
+
+<div class="music-chart grid">
+{% for item in pagination.items %}
+  {% capture alt %}{{ item.plays }} of {{ item.artist }}{% endcapture %}
+  <div class="item">
+    <div class="meta">
+      {% image item.image, alt, '', 'lazy' %}
+      <div class="meta-text">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">
+          {{ item.plays }} plays
+        </div>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+</div>
+{% render "partials/paginator.liquid", pagination:pagination %}

src/assets/styles/base/index.css

@@ -72,6 +72,14 @@ blockquote {
   stroke-width: var(--stroke-width-bold) !important;
 }
 
+a.linked-header {
+  display: flex;
+
+  & svg {
+    stroke: var(--accent-color);
+  }
+}
+
 sup.footnote-ref {
   line-height: var(--line-height-xs);
 }

src/assets/styles/components/music-chart.css

@@ -40,7 +40,8 @@
     }
 
     & .title,
-    & .subtext {
+    & .subtext,
+    & .subtext p {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -48,8 +49,8 @@
 
     & .subtext,
     & .timestamp {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-xs);
-      line-height: var(--line-height-sm);
+      line-height: var(--line-height-xs);
     }
 
     & .timestamp {
@@ -79,10 +80,46 @@
     flex-direction: row;
     align-items: center;
   }
+
+  &.grid {
+    display: grid;
+    gap: var(--sizing-sm);
+    grid-template-columns: repeat(2,minmax(0,1fr));
+    margin-bottom: var(--sizing-base);
+
+    & .item {
+      & .meta {
+        max-width: 80%;
+
+        & .title {
+          line-height: var(--line-height-sm);
+        }
+
+        & .subtext p {
+          margin: 0;
+          line-height: var(--line-height-sm);
+        }
+      }
+    }
+  }
 }
 
 @media screen and (min-width: 768px) {
-  .music-chart .item .meta-text {
+  .music-chart {
-    max-width: 85%;
+    & .item .meta-text {
+      max-width: 85%;
+    }
+
+    &.grid {
+      grid-template-columns: repeat(3,minmax(0,1fr));
+
+      & .item {
+        & img,
+        & picture {
+          width: calc(var(--sizing-3xl) * 2);
+          height: calc(var(--sizing-3xl) * 2);
+        }
+      }
+    }
   }
 }