From bbdea40f7e195ffe4690907be76e325cb7b92fc7 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Tue, 16 Apr 2024 15:02:28 -0700
Subject: [PATCH] feat: artist and album pages

---
 package.json                                 |  2 +-
 src/_includes/now.liquid                     | 20 +++++----
 src/albums.html                              | 37 +++++++++++++++
 src/artists.html                             | 36 +++++++++++++++
 src/assets/styles/base/index.css             |  8 ++++
 src/assets/styles/components/music-chart.css | 47 +++++++++++++++++---
 6 files changed, 136 insertions(+), 14 deletions(-)
 create mode 100644 src/albums.html
 create mode 100644 src/artists.html

diff --git a/package.json b/package.json
index 68dd9484..af307b1b 100644
--- a/package.json
+++ b/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": {
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 6aba5357..50069848 100644
--- a/src/_includes/now.liquid
+++ b/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">
-    {% tablericon "microphone-2" "Artists" %}
-    Artists
-  </h2>
+  <a class="linked-header" href="/artists">
+    <h2 id="artists" class="now-header flex-centered">
+      {% tablericon "microphone-2" "Artists" %}
+      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">
-    {% tablericon "vinyl" "Albums" %}
-    Albums
-  </h2>
+  <a class="linked-header" href="/albums">
+    <h2 id="albums" class="now-header flex-centered">
+      {% tablericon "vinyl" "Albums" %}
+      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>
diff --git a/src/albums.html b/src/albums.html
new file mode 100644
index 00000000..b7ea3887
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/artists.html b/src/artists.html
new file mode 100644
index 00000000..4f4c46cc
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 49acaacb..456b341a 100644
--- a/src/assets/styles/base/index.css
+++ b/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);
 }
diff --git a/src/assets/styles/components/music-chart.css b/src/assets/styles/components/music-chart.css
index f59f344c..53584659 100644
--- a/src/assets/styles/components/music-chart.css
+++ b/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);
-      line-height: var(--line-height-sm);
+      font-size: var(--font-size-xs);
+      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 {
-    max-width: 85%;
+  .music-chart {
+    & .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);
+        }
+      }
+    }
   }
 }
\ No newline at end of file