chore: remove code duplication and clean up

config/data/author-map.js

@@ -1,4 +1,5 @@
 export default {
+  "https://keithjgrant.com": "Keith J. Grant",
   "https://mxb.dev": "Max Böck",
   "https://niclake.me": "Nic Lake",
   "https://www.anildash.com": "Anil Dash",

package-lock.json

@@ -9,9 +9,9 @@
       "version": "17.4.11",
       "license": "MIT",
       "dependencies": {
-        "@cdransf/api-text": "^1.2.3",
-        "@cdransf/select-pagination": "^1.1.1",
-        "@cdransf/theme-toggle": "^1.2.4",
+        "@cdransf/api-text": "^1.3.1",
+        "@cdransf/select-pagination": "^1.3.1",
+        "@cdransf/theme-toggle": "^1.3.1",
         "@daviddarnes/mastodon-post": "^1.3.0",
         "@zachleat/webcare-webshare": "^1.0.3",
         "minisearch": "^6.3.0",
@@ -1109,9 +1109,9 @@
       }
     },
     "node_modules/@cdransf/api-text": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@cdransf/api-text/-/api-text-1.2.3.tgz",
-      "integrity": "sha512-yojV+sVvWR6ZXtHx/i9RXmJ5NtxSMYWnAg8y9S7djEEjT4QYA29lF8p+cmZqJHv9KIIhfhS+qOZ5u3R2icdFlg=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@cdransf/api-text/-/api-text-1.3.1.tgz",
+      "integrity": "sha512-Je7TpwpxcmV4H+ApKpX7pOaXFWPF9yPUUHluMXZTOgoKD61pYC4zq7Te/dd6rJyC2tFrVQ8i1XdazSBH+ACP7w=="
     },
     "node_modules/@cdransf/eleventy-plugin-tabler-icons": {
       "version": "1.5.0",
@@ -1120,14 +1120,14 @@
       "dev": true
     },
     "node_modules/@cdransf/select-pagination": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@cdransf/select-pagination/-/select-pagination-1.1.1.tgz",
-      "integrity": "sha512-2GUQSQ++chkKgQYRAIYnj1ugLswMWTzjdDwRh/SsfX7PJpyI8Th9GjDEm0sKS1SyLCjkfj6Bl31f66AlD0cEKw=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@cdransf/select-pagination/-/select-pagination-1.3.1.tgz",
+      "integrity": "sha512-zwBWlX7V6SXlUe9TkJblZF44+2agHRCaCnG/v+Q2Bcgf2DhOQI4qiMOoNBsr09TpkKvQENOqwT2kOycszBcJtA=="
     },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.4.tgz",
-      "integrity": "sha512-t86sAxzbQI7A9LxKndkRVVH14Z+3Cwk2Rl3CclOjmk0xEwwDYa+yG4A4di5mboGoWJ7RMRYtiEiTgsK5QtYSew=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.3.1.tgz",
+      "integrity": "sha512-GmL7sDTiReW0CygnG5sJOW0hx9+yic2WRiWvWSNa7buTOskZ9zCG/lrtuMUxIQCDd5DIE2KR/xX8F6BSHIsCFA=="
     },
     "node_modules/@daviddarnes/mastodon-post": {
       "version": "1.3.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "17.4.11",
+  "version": "17.5.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
@@ -21,9 +21,9 @@
   "author": "Cory Dransfeldt",
   "license": "MIT",
   "dependencies": {
-    "@cdransf/api-text": "^1.2.3",
-    "@cdransf/select-pagination": "^1.1.1",
-    "@cdransf/theme-toggle": "^1.2.4",
+    "@cdransf/api-text": "^1.3.1",
+    "@cdransf/select-pagination": "^1.3.1",
+    "@cdransf/theme-toggle": "^1.3.1",
     "@daviddarnes/mastodon-post": "^1.3.0",
     "@zachleat/webcare-webshare": "^1.0.3",
     "minisearch": "^6.3.0",

src/_includes/base.liquid

@@ -1,68 +1,68 @@
-{%- capture fullUrl -%}{{ meta.url }}{{ page.url }}{%- endcapture -%}
-{%- capture pageTitle -%}
-  {%- if schema == 'blog' -%}
-    {{ title }}
-  {% elsif title %}
-    {{ title }} • {{ meta.siteName }}
-  {% elsif artist.name_string %}
-    Artists • {{ artist.name_string }} • {{ meta.siteName }}
-  {% elsif book.title %}
-    Books • {{ book.title }} • {{ meta.siteName }}
-  {% elsif movie.title %}
-    Movies • {{ movie.title }}{% if movie.rating %} ({{ movie.rating }}){% endif %} • {{ meta.siteName }}
-  {% elsif show.title %}
-    Shows • {{ show.title }} • {{ meta.siteName }}
-  {% elsif genre.name %}
-    Music • {{ genre.name }} • {{ meta.siteName }}
-  {% else %}
-    {{ meta.siteName }}
+{%- assign fullUrl = meta.url | append: page.url -%}
+
+{%- assign pageTitle = meta.siteName -%}
+{%- if schema == 'blog' -%}
+  {%- assign pageTitle = title -%}
+{%- elsif title -%}
+  {%- assign pageTitle = title | append: ' • ' | append: meta.siteName -%}
+{%- elsif artist.name_string -%}
+  {%- assign pageTitle = 'Artists • ' | append: artist.name_string | append: ' • ' | append: meta.siteName -%}
+{%- elsif book.title -%}
+  {%- assign pageTitle = 'Books • ' | append: book.title | append: ' • ' | append: meta.siteName -%}
+{%- elsif movie.title -%}
+  {%- assign pageTitle = 'Movies • ' | append: movie.title -%}
+  {%- if movie.rating -%}
+    {%- assign pageTitle = pageTitle | append: ' (' | append: movie.rating | append: ')' -%}
   {%- endif -%}
-{%- endcapture -%}
-{%- capture pageDescription -%}
-  {%- if schema == 'blog' -%}
-    {{ post_excerpt | markdown | strip_html }}
-  {% elsif artist.description %}
-    {{ artist.description | truncate: 300 }}
-  {% elsif book.description %}
-    {{ book.description }}
-  {% elsif movie.description %}
-    {% if movie.review %}{{ movie.review | truncate: 300 }}{% else %}{{ movie.description }}{% endif %}
-  {% elsif show.description %}
-    {% if show.review %}{{ show.review | truncate: 300 }}{% else %}{{ show.description }}{% endif %}
-  {% elsif genre.description %}
-    {{ genre.description | markdown | strip_html | truncate: 300 }}
-  {% elsif description %}
-    {{ description }}
-  {% else %}
-    {{ meta.siteDescription }}
-  {%- endif -%}
-{%- endcapture -%}
-{%- capture ogImage -%}
-  {%- if schema == 'blog' -%}
-    {{ meta.url }}/assets/img/ogi/{{ title | slugifyString }}-preview.png
-  {%- elsif schema == 'music' -%}
-    {{ music.recent.artists[0].image }}
-  {%- elsif schema == 'artist' -%}
-    {{ artist.image }}
-  {%- elsif schema == 'watching' -%}
+  {%- assign pageTitle = pageTitle | append: ' • ' | append: meta.siteName -%}
+{%- elsif show.title -%}
+  {%- assign pageTitle = 'Shows • ' | append: show.title | append: ' • ' | append: meta.siteName -%}
+{%- elsif genre.name -%}
+  {%- assign pageTitle = 'Music • ' | append: genre.name | append: ' • ' | append: meta.siteName -%}
+{%- endif -%}
+
+{%- assign pageDescription = meta.siteDescription -%}
+{%- if schema == 'blog' -%}
+  {%- assign pageDescription = post_excerpt | markdown | strip_html -%}
+{%- elsif artist.description -%}
+  {%- assign pageDescription = artist.description | truncate: 300 -%}
+{%- elsif book.description -%}
+  {%- assign pageDescription = book.description -%}
+{%- elsif movie.description -%}
+  {%- assign pageDescription = movie.review | default: movie.description | truncate: 300 -%}
+{%- elsif show.description -%}
+  {%- assign pageDescription = show.review | default: show.description | truncate: 300 -%}
+{%- elsif genre.description -%}
+  {%- assign pageDescription = genre.description | markdown | strip_html | truncate: 300 -%}
+{%- elsif description -%}
+  {%- assign pageDescription = description -%}
+{%- endif -%}
+
+{%- assign ogImage = meta.meta_data.opengraph_default -%}
+{%- case schema -%}
+  {%- when 'blog' -%}
+    {%- assign ogImage = meta.url | append: '/assets/img/ogi/' | append: title | slugifyString | append: '-preview.png' -%}
+  {%- when 'music' -%}
+    {%- assign ogImage = music.recent.artists[0].image -%}
+  {%- when 'artist' -%}
+    {%- assign ogImage = artist.image -%}
+  {%- when 'watching' -%}
     {%- assign featuredMovie = movies.recentlyWatched | first -%}
-    {{ featuredMovie.backdrop }}
-  {%- elsif schema == 'books' -%}
+    {%- assign ogImage = featuredMovie.backdrop -%}
+  {%- when 'books' -%}
     {%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%}
-    {{ featuredBook.image }}
-  {%- elsif schema == 'book' -%}
-    {{ book.image }}
-  {%- elsif schema == 'movie' -%}
-    {{ movie.backdrop }}
-  {%- elsif schema == 'show' -%}
-    {{ meta.url }}/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg
-  {%- elsif schema == 'genre' -%}
+    {%- assign ogImage = featuredBook.image -%}
+  {%- when 'book' -%}
+    {%- assign ogImage = book.image -%}
+  {%- when 'movie' -%}
+    {%- assign ogImage = movie.backdrop -%}
+  {%- when 'show' -%}
+    {%- assign ogImage = meta.url | append: '/media/shows/backdrops/backdrop-' | append: show.tmdb_id | append: '.jpg' -%}
+  {%- when 'genre' -%}
     {%- assign genreArtist = genre.artists | shuffleArray | first -%}
-    {{ genreArtist.image }}
-  {%- else -%}
-    {{ meta.meta_data.opengraph_default }}
-  {%- endif -%}
-{%- endcapture -%}
+    {%- assign ogImage = genreArtist.image -%}
+{%- endcase -%}
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -95,51 +95,36 @@
     <link rel="alternate" href="https://feedpress.me/coryd-artist-charts" title="{{ meta.siteName }}'s artist charts feed" type="application/rss+xml">
     <link rel="alternate" href="https://feedpress.me/coryd-all" title="{{ meta.siteName }}'s activity feed" type="application/rss+xml">
     <link type="text/plain" rel="author" href="/humans.txt" />
-      {% if schema == 'blog' %}
-      <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@type": "BlogPosting",
-          "mainEntityOfPage": {
-            "@type": "WebPage"
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@graph": [
+          {
+            "@type": "WebSite",
+            "@id": "{{ meta.url }}#website",
+            "url": "{{ meta.url }}",
+            "name": "{{ pageTitle }}",
+            "description": "{{ pageDescription }}",
+            "inLanguage": "{{ meta.locale }}"
           },
-          "isPartOf": {
-            "@id": "{{ meta.url }}#website"
-          },
-          "@id": "{{ fullUrl }}",
-          "headline": "{{ pageTitle }}",
-          "description": "{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}",
-          "image": "{% if image %}{{ image }}{% else %}{{ meta.meta_data.opengraph_default }}{% endif %}",
-          "inLanguage": "{{ meta.locale }}",
-          "publisher": {
-            "@type": "{{ meta.siteType }}",
-            "name": "{{ meta.author }}",
-            "url": "{{ meta.url }}"
-          },
-          "author": {
-            "@type": "Person",
-            "name": "{{ meta.author }}"
-          },
-          "datePublished": "{{ page.date | isoDateOnly: '.' }}"
-        }
-      </script>
-      {% else %}
-      <script type="application/ld+json">
-        {
-          "@context": "https://schema.org",
-          "@graph": [
+          {%- if schema == 'blog' -%}
             {
-              "@type": "WebSite",
-              "@id": "{{ meta.url }}#website",
-              "url": "{{ meta.url }}",
-              "name": "{{ pageTitle }}",
-              "description": "{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}",
-              "inLanguage": "{{ meta.locale }}"
+              "@type": "BlogPosting",
+              "mainEntityOfPage": { "@type": "WebPage" },
+              "isPartOf": { "@id": "{{ meta.url }}#website" },
+              "@id": "{{ fullUrl }}",
+              "headline": "{{ pageTitle }}",
+              "description": "{{ pageDescription }}",
+              "image": "{{ image | default: meta.meta_data.opengraph_default }}",
+              "inLanguage": "{{ meta.locale }}",
+              "publisher": { "@type": "{{ meta.siteType }}", "name": "{{ meta.author }}", "url": "{{ meta.url }}" },
+              "author": { "@type": "Person", "name": "{{ meta.author }}" },
+              "datePublished": "{{ page.date | isoDateOnly: '.' }}"
             }
-          ]
-        }
-      </script>
-      {% endif %}
+          {%- endif -%}
+        ]
+      }
+    </script>
     <noscript>
       <style>.client-side {display:none}</style>
       <p><img width="1" height="1" src="/7afb285ad050d" /></p>
@@ -148,20 +133,12 @@
   <body>
     <script>
       (() => {
-        const currentTheme = sessionStorage?.getItem('theme');
-        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const root = document.getElementsByTagName('html')[0];
+        const currentTheme = sessionStorage?.getItem('theme')
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        const root = document.getElementsByTagName('html')[0]
         if (!currentTheme) sessionStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
-        if (currentTheme === 'dark') {
-          root.classList.add('theme__dark')
-        } else if (currentTheme === 'light') {
-          root.classList.add('theme__light')
-        } else if (prefersDarkScheme) {
-          root.classList.add('theme__dark')
-        } else if (!prefersDarkScheme) {
-          root.classList.add('theme__light')
-        }
-      })();
+        root.classList.add(`theme__${currentTheme || (prefersDarkScheme ? 'dark' : 'light')}`)
+      })()
     </script>
     {{ content }}
   </body>

src/_includes/partials/media/grid.liquid

@@ -1,6 +1,6 @@
-{% assign media = data | normalizeMedia %}
+{% assign media = data.items | default: data | normalizeMedia %}
 <div class="media-grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
-  {% for item in media limit: count %}
+  {% for item in media limit: count | default: media.size %}
     {% assign alt = item.alt | strip | escape %}
     <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
       <div class="item-wrapper shadow">
@@ -8,21 +8,22 @@
           {% if item.title %}
             <div class="header">{{ item.title }}</div>
           {% endif %}
-          {% if item.subtext %}
-            <div class="subheader">
-              {{ item.subtext }}
-            </div>
+          {% if item.plays %}
+            <div class="subheader">{{ item.plays }} plays</div>
+          {% elsif item.subtext %}
+            <div class="subheader">{{ item.subtext }}</div>
           {% endif %}
         </div>
-        {%- capture loadingStrategy -%}
-          {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
-        {%- endcapture -%}
+        {% assign loadingStrategy = loading | default: 'lazy' %}
         {% if shape == 'square' %}
-          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
         {% else %}
-          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
         {% endif %}
       </div>
     </a>
   {% endfor %}
-</div>
+</div>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

src/_includes/partials/media/music/chart.liquid

@@ -0,0 +1,22 @@
+<div class="music-chart">
+  {% assign items = data.items | default: data %}
+  {% for item in items limit: count | default: items.size %}
+    {%- assign playTotal = playTotal | default: mostPlayed -%}
+    {%- assign percentage = item.plays | calculatePlayPercentage: playTotal -%}
+    <div class="item">
+      <div class="presentation">
+        <div class="count">{{ item.rank | formatNumber }}.</div>
+        <div class="info">
+          <div class="title">
+            <a href="{{ item.url }}">{{ item.title }}</a>
+          </div>
+          <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+        </div>
+      </div>
+      {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+    </div>
+  {% endfor %}
+</div>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

src/_includes/partials/media/music/period/chart.liquid

@@ -1,19 +0,0 @@
-<hr class="large-spacing" />
-<div class="music-chart">
-  {% for item in data.items %}
-  {%- assign percentage = item.plays | calculatePlayPercentage:playTotal -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:data %}

src/_includes/partials/media/music/period/grid.liquid

@@ -1,16 +0,0 @@
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in data.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=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:data %}

src/_includes/partials/media/music/recent.liquid

@@ -1,4 +1,3 @@
-{% if data.size > 0 %}
 <div class="music-chart">
   {% for item in data limit: 10 %}
   {% capture alt %}{{ item.title | escape }} by {{ item.artist }}{% endcapture %}
@@ -17,5 +16,4 @@
       </div>
     </div>
   {% endfor %}
-</div>
-{% endif %}
+</div>

src/_includes/partials/media/music/releases.liquid

@@ -1,21 +1,19 @@
-{% if albumReleases.size > 0 %}
-  <h2 id="album-releases" class="section-header flex-centered">
-    {% tablericon "calendar-time" "Anticipated albums" %}
-    Anticipated albums
-  </h2>
-  <ul class="link-list">
-    {% for album in albumReleases %}
-      <li>
-        <strong>{{ album.date }}: </strong>
-        <a href="{{ album.url}}" title="{{ album.title | escape}} by {{ album.artist | escape}}">
-          {{ album.title }}
-        </a>
-        <span> by </span>
-        <a href="{{ album.artist_url }}">
-          {{ album.artist }}
-        </a>
-        <span> • <a href="https://coryd.dev/music/genres/{{ album.genre | slugify | downcase }}">{{ album.genre }}</a></span>
-      </li>
-    {% endfor %}
-  </ul>
-{% endif %}
+<h2 id="album-releases" class="section-header flex-centered">
+  {% tablericon "calendar-time" "Anticipated albums" %}
+  Anticipated albums
+</h2>
+<ul class="link-list">
+  {% for album in albumReleases %}
+    <li>
+      <strong>{{ album.date }}: </strong>
+      <a href="{{ album.url}}" title="{{ album.title | escape}} by {{ album.artist | escape}}">
+        {{ album.title }}
+      </a>
+      <span> by </span>
+      <a href="{{ album.artist_url }}">
+        {{ album.artist }}
+      </a>
+      <span> • <a href="https://coryd.dev/music/genres/{{ album.genre | slugify | downcase }}">{{ album.genre }}</a></span>
+    </li>
+  {% endfor %}
+</ul>

src/_includes/partials/media/music/tracks/chart.liquid

@@ -1,19 +0,0 @@
-{% if data.size > 0 %}
-<div class="music-chart">
-  {% for item in data limit: 10 %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% endif %}

src/_includes/partials/media/progress-bar.liquid

@@ -1,5 +1,5 @@
 {% if percentage %}
-<div class="progress-bar__wrapper">
+<div class="progress-bar-wrapper">
   <div style="width:{{ percentage }}" class="progress-bar"></div>
 </div>
 {% endif %}

src/_includes/partials/media/watching/backdrop-grid-paginated.liquid

@@ -1,27 +0,0 @@
-<div class="watching grid">
-  {% for item in data.items %}
-    {% capture alt %}{{ item.title | escape }} ({{ item.year }}){% endcapture %}
-    <a href="{{ item.url }}">
-      <div class="watching item shadow">
-        <div class="meta-text">
-          {% if item.type == 'movie' %}
-            <div class="header">{{ item.title }}</div>
-            <div class="subheader flex-centered gap-xs">
-              {{ item.year }}
-              {% if rating and item.rating %}
-                <span class="rating"> ({{ item.rating }})</span>
-              {% endif %}
-            </div>
-          {% else %}
-            <div class="header">{{ item.name }}</div>
-          {% endif %}
-        </div>
-        {%- capture loadingStrategy -%}
-          {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
-        {%- endcapture -%}
-        <img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
-      </div>
-    </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:data %}

src/_includes/partials/media/watching/backdrop-grid.liquid

@@ -1,26 +1,30 @@
 <div class="watching grid">
-  {% for media in mediaItems limit: count %}
-    {% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %}
-    <a href="{{ media.url }}">
+  {% assign items = data.items | default: mediaItems %}
+  {% for item in items limit: count %}
+    {% capture alt %}{{ item.title | escape }} ({{ item.year }}){% endcapture %}
+    <a href="{{ item.url }}">
       <div class="watching item shadow">
         <div class="meta-text">
-          {% if media.type == 'movie' %}
-            <div class="header">{{ media.title }}</div>
+          {% if item.type == 'movie' %}
+            <div class="header">{{ item.title }}</div>
             <div class="subheader flex-centered gap-xs">
-              {{ media.year }}
-              {% if rating and media.rating %}
-                <span class="rating"> ({{ media.rating }})</span>
+              {{ item.year }}
+              {% if rating and item.rating %}
+                <span class="rating"> ({{ item.rating }})</span>
               {% endif %}
             </div>
           {% else %}
-            <div class="header">{{ media.name }}</div>
+            <div class="header">{{ item.name }}</div>
           {% endif %}
         </div>
         {%- capture loadingStrategy -%}
           {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
         {%- endcapture -%}
-        <img src="https://coryd.dev/.netlify/images/?url={{ media.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
+        <img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
       </div>
     </a>
   {% endfor %}
-</div>
+</div>
+{% unless count %}
+  {% render "partials/widgets/paginator.liquid", pagination:data %}
+{% endunless %}

src/_includes/partials/nav/link.liquid

@@ -1,4 +1,4 @@
-{%- capture categoryUrl %}/{{ link | downcase }}/{% endcapture -%}
+{%- assign categoryUrl = "/" | append: link | downcase -%}
 {% if categoryUrl | isLinkActive: page.url %}
   <span class="active {{ class }}" aria-current="page">
     {% if icon %}
@@ -9,14 +9,12 @@
     {% endif %}
   </span>
 {% else %}
-  {% if icon %}
-    <a class="{{ icon | downcase }} icon {{ class }}" href="/{{ link | downcase }}">
+  <a class="{% if icon %}{{ icon | downcase }} icon {% endif %}{{ class }}" href="{{ categoryUrl }}">
+    {% if icon %}
       {% tablericon icon link %}
       <span>{{ link }}</span>
-    </a>
-  {% else %}
-    <a href="/{{ link | downcase }}">
+    {% else %}
       {{ link }}
-    </a>
-  {% endif %}
+    {% endif %}
+  </a>
 {% endif %}

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

@@ -8,7 +8,7 @@
       margin-bottom: var(--sizing-md);
     }
 
-    & .progress-bar__wrapper {
+    & .progress-bar-wrapper {
       max-width: 40%;
       margin-left: var(--sizing-lg);
     }

src/assets/styles/components/progress-bar.css

@@ -1,4 +1,4 @@
-.progress-bar__wrapper {
+.progress-bar-wrapper {
   display: flex;
   background-color: rgba(217, 222, 228, .6);
   border-radius: var(--rounded-lg);

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

@@ -9,7 +9,10 @@ permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ paginati
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.allTime.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pag
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ paginat
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.allTime.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagin
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

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

@@ -9,7 +9,10 @@ permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagina
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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 {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</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>
-{% render "partials/media/music/period/grid.liquid" data:pagination %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/grid.liquid" data:pagination, shape: "square" %}

src/pages/main/music/index.html

@@ -78,19 +78,19 @@ schema: music
   </div>
 </div>
 <div id="tracks-recent">
-  {% render "partials/media/music/tracks/recent", data:music.recent.tracksChronological %}
+  {% render "partials/media/music/recent", data:music.recent.tracksChronological %}
 </div>
 <div class="hidden" id="tracks-window">
-  {% render "partials/media/music/tracks/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
+  {% render "partials/media/music/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays, count: 10 %}
 </div>
 <div class="hidden" id="tracks-month">
-  {% render "partials/media/music/tracks/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
+  {% render "partials/media/music/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays, count: 10 %}
 </div>
 <div class="hidden" id="tracks-three-months">
-  {% render "partials/media/music/tracks/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
+  {% render "partials/media/music/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays, count: 10 %}
 </div>
 <div class="hidden" id="tracks-all-time">
-  {% render "partials/media/music/tracks/chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
+  {% render "partials/media/music/chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays, count: 10 %}
 </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/media/music/releases.liquid", albumReleases:albumReleases %}

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

@@ -9,7 +9,10 @@ permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagi
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | listToString: "genre", 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>
-{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}

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

@@ -9,7 +9,10 @@ permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ paginati
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.allTime.totalTracks }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | listToString: "genre", 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>
-{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.allTime.tracks[0].plays %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.allTime.tracks[0].plays %}

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

@@ -9,7 +9,10 @@ permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagina
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | listToString: "genre", 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>
-{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}

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

@@ -9,7 +9,10 @@ permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ paginat
 schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | listToString: "genre", 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>
-{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}
+<hr class="large-spacing" />
+{% endif %}
+{% render "partials/media/music/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}

src/pages/main/watching/favorites/movies.html

@@ -14,4 +14,4 @@ schema: watching
 <p>These are my favorite movies. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
 {% endif %}
-{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}
+{% render "partials/media/watching/backdrop-grid.liquid", data:pagination %}

src/pages/main/watching/favorites/shows.html

@@ -14,4 +14,4 @@ schema: watching
 <p>These are my favorite shows. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
 {% endif %}
-{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}
+{% render "partials/media/watching/backdrop-grid.liquid", data:pagination %}

src/pages/main/watching/recent/movies.html

@@ -14,4 +14,4 @@ schema: watching
 <p>These are the movies I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>
 <hr class="large-spacing" />
 {% endif %}
-{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}
+{% render "partials/media/watching/backdrop-grid.liquid", data:pagination %}

src/pages/main/watching/recent/shows.html

@@ -14,4 +14,4 @@ schema: watching
 <p>These are the shows I've watched recently. There are many like them, but these are mine. (Or well, all the movies I've watched — they're ordered latest watched, descending, hence the recent part).</p>
 <hr class="large-spacing" />
 {% endif %}
-{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}
+{% render "partials/media/watching/backdrop-grid.liquid", data:pagination %}