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

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">
-  {% tablericon "clock-heart" "Currently" %}
-  Currently
-</h2>
-<div class="now-text">
-    {% render "partials/now/status.liquid", status:status %}
-  <p>
-    {% tablericon "map-2" "Map" %}
-    Living in Camarillo, California with <strong class="highlight-text">my beautiful family, 3 rescue dogs and a guinea pig</strong>.
-  </p>
-  <p>
-    {% tablericon "headphones" "Listening to" %}
-    Listening to tracks like <strong class="highlight-text">{{ music.nowPlaying.title }}</strong> by <strong class="highlight-text">{{ music.nowPlaying.artist }}</strong>.
-  </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>
+<h2 class="page-header">{{ title }}</h2>
+<h3>Family</h3>
+<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>
+<h3><a href="https://coryd.dev/posts/2024/on-getting-tattooed/">Getting tattooed</a></h3>
+<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>
+<h3><a href="https://github.com/cdransf">Making</a></h3>
+<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>
+<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>
+<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><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>
+<h3>Mentoring</h3>
+<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>
+<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 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>

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>