feat: dedicated music page(s); pagination fixes; nav + color updates; assorted updates

config/filters/index.js

@@ -31,6 +31,7 @@ export default {
       lower: true,
     })
   },
+  formatNumber: (number) => number.toLocaleString('en-US'),
 
   // navigation
   isLinkActive: (category, page) => {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "15.4.3",
+  "version": "16.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "15.4.3",
+      "version": "16.0.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",
@@ -25,7 +25,7 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
         "@aws-sdk/client-s3": "^3.577.0",
-        "@cdransf/eleventy-plugin-tabler-icons": "^1.3.0",
+        "@cdransf/eleventy-plugin-tabler-icons": "^1.4.0",
         "@supabase/supabase-js": "^2.43.2",
         "dotenv-flow": "^4.1.0",
         "gray-matter": "^4.0.3",
@@ -1132,9 +1132,9 @@
       "integrity": "sha512-3yzlvCsAwqrHjNHsgalT9HfuHac37hX80Nff0Pfw2RH9XsfCLoVJABfKeXA1BBr6/wSdOHUgOQyEYTubIiTGfg=="
     },
     "node_modules/@cdransf/eleventy-plugin-tabler-icons": {
-      "version": "1.3.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@cdransf/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@cdransf/eleventy-plugin-tabler-icons/-/eleventy-plugin-tabler-icons-1.4.0.tgz",
-      "integrity": "sha512-ZElMETHfifRklc0FiYplX2rnU4vQosbCje78WO1FN5Zjuh3olK88mWEwue370zndiSpU7jFobYCNQDrTFIR5CA==",
+      "integrity": "sha512-W6PhrBggErZ6PRXOAgqSwLRMB5/LqmPDEt2qecrbIuou0Yb3z08v8c69HC9aJVIFTGfs7IaZ1yyP7ZEp5/rLjg==",
       "dev": true
     },
     "node_modules/@cdransf/select-pagination": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "15.4.3",
+  "version": "16.0.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
@@ -37,7 +37,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-lightningcss": "^1.4.0",
     "@aws-sdk/client-s3": "^3.577.0",
-    "@cdransf/eleventy-plugin-tabler-icons": "^1.3.0",
+    "@cdransf/eleventy-plugin-tabler-icons": "^1.4.0",
     "@supabase/supabase-js": "^2.43.2",
     "dotenv-flow": "^4.1.0",
     "gray-matter": "^4.0.3",

src/_data/json/read.json

@@ -5246,7 +5246,7 @@
     "categories": [
       "Biography & Autobiography"
     ],
-    "thumbnail": "https://coryd.dev/media/books/9780062295897-girl-in-a-band.jpg",
+    "thumbnail": "https://coryd.dev/media/books/9780062295897-kim-gordon-girl-in-a-band.jpg",
     "language": "en",
     "link": "https://books.google.com/books/about/Girl_in_a_Band.html?hl=&id=gK6SrgEACAAJ"
   },

src/_data/json/roundups/2023.js

@@ -1,44 +1,44 @@
 export default {
   books: [
     {
-      alt: 'Stay True',
+      title: 'Stay True',
-      author: 'Hua Hsu',
+      authors: 'Hua Hsu',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DXJ-OEAAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/9780385547772-stay-true.jpg',
       url: 'https://openlibrary.org/isbn/9780593663660',
       type: 'book',
     },
     {
-      alt: 'Where Are Your Boys Tonight?',
+      title: 'Where Are Your Boys Tonight?',
-      author: 'Chris Payne',
+      authors: 'Chris Payne',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DsQtcEAAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/9780063251281-where-are-your-boys-tonight.jpg',
       url: 'https://openlibrary.org/isbn/9780063161573',
       type: 'book',
     },
     {
       title: 'Trouble Boys',
-      author: 'Bob Mehr',
+      authors: 'Bob Mehr',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DxQ9SCwAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/0306818795-trouble-boys.jpg',
       url: 'https://openlibrary.org/isbn/9780306818790',
       type: 'book',
     },
     {
-      alt: 'Corporate Rock Sucks',
+      title: 'Corporate Rock Sucks',
-      author: 'Jim Ruland',
+      authors: 'Jim Ruland',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DPEU7EAAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/9780306925481-corporate-rock-sucks.jpg',
       url: 'https://openlibrary.org/isbn/9780306925474',
       type: 'book',
     },
     {
-      alt: 'Tracers in the Dark',
+      title: 'Tracers in the Dark',
-      author: 'Andy Greenberg',
+      authors: 'Andy Greenberg',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DuytfEAAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/0593315618-tracers-in-the-dark.jpg',
       url: 'http://openlibrary.org/isbn/9780385548106',
       type: 'book',
     },
     {
-      alt: 'Girl in a Band',
+      title: 'Girl in a Band',
-      author: 'Kim Gordon',
+      authors: 'Kim Gordon',
-      image: 'https://coryd.dev/.netlify/images/?url=https%3A%2F%2Fbooks.google.com%2Fbooks%2Fcontent%3Fid%3DJNOIBAAAQBAJ%26printsec%3Dfrontcover%26img%3D1%26zoom%3D1%26source%3Dgbs_api%26w%3D512',
+      image: 'https://coryd.dev/media/books/9780062295897-kim-gordon-girl-in-a-band.jpg',
       url: 'https://openlibrary.org/isbn/9780062295910',
       type: 'book',
     }

src/_data/music.js

@@ -93,6 +93,11 @@ const aggregateData = (data, groupByField, groupByType, sort = true) => {
     aggregation[key].plays++
   })
   const aggregatedData = sort ? Object.values(aggregation).sort((a, b) => b.plays - a.plays) : Object.values(aggregation)
+
+  aggregatedData.forEach((item, index) => {
+    item.rank = index + 1
+  })
+
   return aggregatedData.filter(item => item.plays > 0)
 }
 

src/_data/nav.js

@@ -1,18 +1,19 @@
 export default async function () {
   return {
     footer: [
+      { name: 'Now' },
       { name: 'Uses' },
       { name: 'Referrals' },
       { name: 'Blogroll' },
       { name: 'Speedlify' },
     ],
     menu: [
-      { name: 'Now' },
+      { name: 'Music', url: '/music', icon: 'headphones' },
-      { name: 'About' },
-      { name: 'Links', icon: 'link' },
-      { name: 'Search', icon: 'search' },
       { name: 'Watching', url: '/watching', icon: 'device-tv' },
       { name: 'Books', url: '/books', icon: 'books' },
+      { name: 'Links', icon: 'link' },
+      { name: 'About', url: '/about', icon: 'info-square' },
+      { name: 'Search', icon: 'search' },
       { name: 'Feeds', icon: 'rss' },
       { name: 'Mastodon', icon: 'brand-mastodon' },
     ],

src/_includes/now.liquid

@@ -1,29 +0,0 @@
----
-layout: default
----
-{{ content }}
-<a class="link-icon flex-centered" href="/books">
-  <h2 id="books" class="section-header flex-centered">
-    {% tablericon "books" "Books" %}
-    Books
-  </h2>
-</a>
-{% assign bookData = books | bookStatus: 'started' | reverse %}
-{% render "partials/now/media-grid.liquid", data:bookData, shape: "vertical", count: 6 %}
-{% render "partials/widgets/recent-links.liquid", links:collections.links %}
-<a class="link-icon flex-centered" href="/watching#movies">
-  <h2 id="movies" class="section-header flex-centered">
-    {% tablericon "movie" "Movies" %}
-    Movies
-  </h2>
-</a>
-{% render "partials/now/media-grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
-<a class="link-icon flex-centered" href="/watching#tv">
-  <h2 id="tv" class="section-header flex-centered">
-    {% tablericon "device-tv" "TV" %}
-    TV
-  </h2>
-</a>
-{% render "partials/now/media-grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
-<p class="now-explainer text-small text-centered">This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
-<p class="text-small text-centered"><em>This page was last updated on {{ "now"  | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>

src/_includes/partials/now/track-chart.liquid

@@ -4,7 +4,7 @@
   {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>

src/assets/styles/base/index.css

@@ -147,6 +147,7 @@ a:active,
 /* headers */
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--font-weight-bold);
+  margin: var(--sizing-base) 0;
 }
 
 h1 { font-size: var(--font-size-xl) }
@@ -321,7 +322,7 @@ nav .active {
 
 .menu-primary .active svg,
 nav .active svg {
-  stroke: var(--accent-color) !important;
+  stroke: var(--accent-color-hover) !important;
 }
 
 /* social icons */
@@ -332,8 +333,11 @@ nav .active svg {
 .brain svg { stroke: var(--brand-listenbrainz) !important; }
 .headphones svg { stroke: var(--brand-music) !important; }
 .device-tv svg { stroke: var(--brand-tv) !important; }
-.news svg { stroke: var(--brand-instapaper) !important; }
 .books svg { stroke: var(--brand-books) !important; }
+.link svg { stroke: var(--brand-links) !important; }
+.info-square svg { stroke: var(--brand-about) !important }
+.search svg { stroke: var(--brand-search) !important }
+.news svg { stroke: var(--brand-instapaper) !important; }
 .coffee svg { stroke: var(--brand-buy-me-a-coffee) !important; }
 .heart-handshake svg { stroke: var(--webrings) !important; }
 .rss svg { stroke: var(--brand-rss) !important; }
@@ -399,6 +403,11 @@ article {
   }
 }
 
+.explainer {
+  padding-top: var(--sizing-lg);
+  margin-block: 0;
+}
+
 footer nav:first-child {
   gap: var(--sizing-sm);
   margin-top: var(--sizing-3xl);

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

@@ -1,4 +1,6 @@
 .music-chart {
+  margin-bottom: var(--sizing-base);
+
   & .item {
     justify-content: space-between;
 

src/assets/styles/defaults/vars.css

@@ -48,15 +48,18 @@
   --brand-npm: #cc3534;
   --brand-mastodon: #6364ff;
   --brand-listenbrainz: #e97941;
-  --brand-music: #00bcd4;
+  --brand-music: #1e90ff;
-  --brand-tv: #d63031;
+  --brand-tv: #ff4500;
+  --brand-books: #32cd32;
+  --brand-links: #9370db;
+  --brand-about: #ff6347;
+  --brand-search: #4682b4;
   --brand-instapaper: var(--text-color);
-  --brand-books: #10b582;
   --brand-buy-me-a-coffee: #40dca5;
   --brand-rss: #f26522;
-  --webrings: #e68abb;
+  --webrings: #da70d6;
-  --moon: #5a4ac4;
+  --moon: #6a5acd;
-  --sun: #ffb200;
+  --sun: #ffa500;
 
   /* fonts */
   --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;

src/assets/styles/index.css

@@ -21,7 +21,6 @@
 @import url('./pages/blogroll.css') layer(page);
 @import url('./pages/contact.css') layer(page);
 @import url('./pages/links.css') layer(page);
-@import url('./pages/now.css') layer(page);
 @import url('./pages/post.css') layer(page);
 @import url('./pages/watching.css') layer(page);
 @import url('./pages/webrings.css') layer(page);

src/assets/styles/pages/links.css

@@ -4,13 +4,16 @@
   grid-template-columns: repeat(1,minmax(0,1fr));
   margin-bottom: var(--sizing-base);
 
-  & .link {
+  & .link-box {
     border: 1px solid var(--gray-light);
     padding: var(--sizing-xs) var(--sizing-sm);
+    position: relative;
   }
 
   & button {
-    margin-left: var(--sizing-sm);
+    position: absolute;
+    bottom: var(--sizing-sm);
+    right: var(--sizing-sm);
   }
 }
 

src/assets/styles/pages/now.css

@@ -1,23 +0,0 @@
-/* now */
-.now-text {
-  padding-left: var(--sizing-base);
-
-  & p {
-    margin: var(--sizing-sm) 0;
-
-    & > svg {
-      display: inline;
-      vertical-align: middle;
-      height: var(--sizing-base);
-      width: var(--sizing-base);
-    }
-  }
-}
-
-.link-list {
-  margin-top: 0;
-}
-
-.now-explainer {
-  padding-top: var(--sizing-lg);
-}

src/links.html

@@ -15,15 +15,13 @@ permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber |
 <div class="link-grid">
   {% for link in pagination.items %}
   {% assign author = link.data.link | stripUtm | authorLookup %}
-  <div class="link">
+  <div class="link-box">
     <a href="{{ link.data.link }}" title="{{ link.data.title | escape }}">
       <strong>{{ link.data.title }}</strong>
     </a>
     {% if author %} via {{ author }}{% endif %}
-    <div class="flex-between">
+    {% render "partials/widgets/tags.liquid", tags:link.data.tags %}
-      {% render "partials/widgets/tags.liquid", tags:link.data.tags %}
+    {% render "partials/widgets/share-button.liquid", url:link.data.link, title:link.data.title, tagMap:collections.tagMap %}
-      {% render "partials/widgets/share-button.liquid", url:link.data.link, title:link.data.title, tagMap:collections.tagMap %}
-    </div>
   </div>
   {% endfor %}
 </div>

src/pages/main/books/index.html

@@ -27,4 +27,5 @@ permalink: "/books/index.html"
     {% if book.description %}<blockquote class="description">{{ book.description }}</blockquote>{% endif %}
   </div>
 </article>
-{% endfor %}
+{% endfor %}
+<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>

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

@@ -9,6 +9,7 @@ permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 <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>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/albums/all-time.html

@@ -9,6 +9,7 @@ permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ paginati
 <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.allTime.albums.size }} albums</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/all-time/">artists</a> or <a href="/music/tracks/all-time/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/albums/this-month.html

@@ -9,6 +9,7 @@ permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 <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.month.albums.size }} albums</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/albums/this-week.html

@@ -9,6 +9,7 @@ permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 <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.week.albums.size }} albums</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

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

@@ -9,6 +9,7 @@ permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pag
 <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.artists.size }} artists</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>
+<p><strong class="highlight-text">See my</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/artists/all-time.html

@@ -9,6 +9,7 @@ permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ paginat
 <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.allTime.artists.size }} artists</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/albums/all-time/">albums</a> or <a href="/music/tracks/all-time/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/artists/this-month.html

@@ -9,6 +9,7 @@ permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagin
 <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.month.artists.size }} artists</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/artists/this-week.html

@@ -9,6 +9,7 @@ permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagina
 <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.week.artists.size }} artists</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="media-grid square">
   {% for item in pagination.items %}

src/pages/main/music/index.html

@@ -10,6 +10,7 @@ permalink: "/music/index.html"
 <h2 class="page-header">{{ title }}</h2>
 <p>This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. <a href="https://coryd.dev/posts/2024/improving-my-self-hosted-scrobbling-implementation/">You can read more about the technical details, if you'd like.</a></p>
 <p>I mostly listen to <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>. This week I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.tracks.size }} tracks</strong>.</p>
+{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-artist-charts", text: "I also have a feed of weekly artist charts I generate from this data" %}
 <div class="section-header-wrapper">
   <h2 id="artists" class="section-header reduced-margin flex-centered">
     {% tablericon "microphone-2" "Artists" %}
@@ -70,6 +71,7 @@ permalink: "/music/index.html"
     <button class="small secondary" data-toggle="tracks-window">This week</button>
     <button class="small secondary" data-toggle="tracks-month">This month</button>
     <button class="small secondary" data-toggle="tracks-three-months">3 months</button>
+    <button class="small secondary" data-toggle="tracks-all-time">All time</button>
   </div>
 </div>
 <div id="tracks-recent">
@@ -84,5 +86,9 @@ permalink: "/music/index.html"
 <div class="hidden" id="tracks-three-months">
   {% render "partials/now/track-chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
 </div>
+<div class="hidden" id="tracks-all-time">
+  {% render "partials/now/track-chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
+</div>
+<p><strong class="highlight-text">More:</strong> <a href="/music/tracks/this-week/">This week</a> • <a href="/music/tracks/this-month/">This month</a> • <a href="/music/tracks/three-months/">3 months</a> • <a href="/music/tracks/all-time/">All time</a></p>
 {% render "partials/now/album-releases.liquid", albumReleases:albumReleases %}
-<p class="text-small text-centered"><em>This page was last updated on {{ "now"  | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>
+<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>

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

@@ -9,13 +9,14 @@ permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 <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.tracks.size }} tracks</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>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="music-chart">
   {% for item in pagination.items %}
   {%- assign percentage = item.plays | calculatePlayPercentage: music.threeMonth.tracks[0].plays -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>

src/pages/main/music/tracks/all-time.html

@@ -9,13 +9,14 @@ permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ paginati
 <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.allTime.tracks.size }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/all-time/">artists</a> or <a href="/music/albums/all-time/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="music-chart">
   {% for item in pagination.items %}
   {%- assign percentage = item.plays | calculatePlayPercentage: music.allTime.tracks[0].plays -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>

src/pages/main/music/tracks/this-month.html

@@ -9,13 +9,14 @@ permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 <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.month.tracks.size }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="music-chart">
   {% for item in pagination.items %}
   {%- assign percentage = item.plays | calculatePlayPercentage: music.month.tracks[0].plays -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>

src/pages/main/music/tracks/this-week.html

@@ -9,13 +9,14 @@ permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 <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.week.tracks.size }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
+<p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 <div class="music-chart">
   {% for item in pagination.items %}
   {%- assign percentage = item.plays | calculatePlayPercentage: music.week.tracks[0].plays -%}
   <div class="item">
     <div class="presentation">
-      <div class="count">{{ forloop.index }}.</div>
+      <div class="count">{{ item.rank | formatNumber }}.</div>
       <div class="info">
         <div class="title">
           <a href="{{ item.url }}">{{ item.title }}</a>

src/pages/main/now.html

@@ -1,47 +1,21 @@
 ---
 title: Now
-layout: now
+layout: default
 permalink: /now.html
 description: "See what I'm doing now."
+updated: 2024-05-18T15:49:00Z
 ---
-<h2 class="section-header flex-centered">
+<h2 class="page-header">{{ title }}</h2>
-  {% tablericon "clock-heart" "Currently" %}
+<h3>Family</h3>
-  Currently
+<p>Hanging out with and spending as much time as possible with my <strong class="highlight-text">lovely wife, kids and rescue dogs (we've got a guinea pig too).</strong></p>
-</h2>
+<h3><a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a></h3>
-<div class="now-text">
+<p>It's been an ongoing process of recovering from sessions, resuming my exercising routine and returning for the next session. I have two chest pieces, a new piece above my left knee and we've been working away on my right arm.</p>
-    {% render "partials/now/status.liquid", status:status %}
+<h3><a href="https://github.com/cdransf">Making</a></h3>
-  <p>
+<p><strong class="highlight-text">Scrobbling and data ownership:</strong> <a href="https://coryd.dev/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage/">I've been building</a> and <a href="https://coryd.dev/posts/2024/improving-my-self-hosted-scrobbling-implementation/">improving</a> my self-hosted scrobbling solution. <a href="https://coryd.dev/posts/2024/adventures-in-self-hosting-data/">I've been working to bring my movie, TV and reading data in-house too.</a></p>
-    {% tablericon "map-2" "Map" %}
+<p><strong class="highlight-text">Ad and tracker-blocking:</strong> I've been updating and maintaining a list of ad and tracker-blocking tools <a href="https://github.com/cdransf/awesome-adblock">that I'm happy to take contributions to.</a> Modern advertising is awful and intrusive. <a href="https://coryd.dev/posts/2023/i-block-ads/">Do what you can to block it.</a></p>
-    Living in Camarillo, California with <strong class="highlight-text">my beautiful family, 3 rescue dogs and a guinea pig</strong>.
+<p><strong class="highlight-text">Fiddling with simple web components:</strong> I've been working on and incorporating some web components into this site. I've built a <a href="https://github.com/cdransf/theme-toggle">theme toggle</a>, <a href="https://github.com/cdransf/select-pagination">select-based pagination</a> and <a href="https://github.com/cdransf/api-text">one that loads text from an API</a> (used on my home page).</p>
-  </p>
+<p><strong class="highlight-text">Encouraging folks to block AI web crawlers:</strong> <a href="https://coryd.dev/posts/2024/go-ahead-and-block-ai-web-crawlers/">they're insidious, abusive and should be blocked.</a> <a href="https://github.com/ai-robots-txt/ai.robots.txt">I'm happy to take contributions, once again,</a> as we encourage folks to block them as best they can.</p>
-  <p>
+<h3>Mentoring</h3>
-    {% tablericon "headphones" "Listening to" %}
+<p>I've been mentoring through <a href="https://www.underdogdevs.org">Underdog Devs</a> on and off for a few years now and find it incredibly rewarding.</p>
-    Listening to tracks like <strong class="highlight-text">{{ music.nowPlaying.title }}</strong> by <strong class="highlight-text">{{ music.nowPlaying.artist }}</strong>.
+<p class="explainer text-small text-centered">This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.</p>
-  </p>
+<p class="explainer text-small text-centered"><em>This page was last updated on {{ updated | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}.</em></p>
-  <p>
-    {% tablericon "needle" "Getting tattooed" %}
-    <a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a>.
-  </p>
-</div>
-<h2 class="section-header flex-centered">
-  {% tablericon "terminal-2" "Making" %}
-  Making
-</h2>
-<div class="now-text">
-  <p>
-    {% tablericon "code" "Hacking" %}
-    Hacking away on projects like this page, my <a href="/">blog</a>, and whatever else I can find time for.
-  </p>
-  <p>
-    {% tablericon "hand-stop" "Ad and tracker-blocking" %}
-    Assembling lists of <a href="https://github.com/cdransf/awesome-adblock">ad and tracker-blocking tools</a>.
-  </p>
-  <p>
-    {% tablericon "brand-javascript" "JavaScript" %}
-    <a href="https://www.npmjs.com/~cdransf">Fiddling with simple web components</a>.
-  </p>
-  <p>
-    {% tablericon "robot-off" "AI crawlers" %}
-    <a href="https://github.com/ai-robots-txt/ai.robots.txt">Encouraging folks to block AI web crawlers</a>.
-  </p>
-</div>

src/pages/main/watching/index.html

@@ -33,4 +33,5 @@ permalink: "/watching/index.html"
   </h2>
 </a>
 {% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
-{% render "partials/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
+{% render "partials/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
+<p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates about once an hour.</em></p>