chore: dry up media templates

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "16.2.0",
+  "version": "16.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "16.2.0",
+      "version": "16.3.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",

package.json

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

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,16 @@
+<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=80"{% 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/widgets/paginator.liquid

@@ -20,7 +20,7 @@
     </select>
     <noscript>
       <div class="text-centered">
-        <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
+        <span aria-current="page">{{ pagination.pageNumber }}</span> of {{ pagination.links.size }}
       </div>
     </noscript>
   </select-pagination>

src/links.html

@@ -4,7 +4,7 @@ layout: default
 pagination:
   data: collections.links
   size: 30
-permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 ---
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">Links</h2>

src/pages/main/books/want-to-read.html

@@ -5,7 +5,7 @@ pagination:
   data: collections.booksToRead
   alias: books
   size: 30
-permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: books
 ---
 {% if pagination.pageNumber == 0 %}

src/pages/main/books/years/2020.html

@@ -1,7 +1,7 @@
 ---
 title: 2020 • Books
 year: 2020
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2020.html"
 schema: books
 ---

src/pages/main/books/years/2021.html

@@ -1,7 +1,7 @@
 ---
 title: 2021 • Books
 year: 2021
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2021.html"
 schema: books
 ---

src/pages/main/books/years/2022.html

@@ -1,7 +1,7 @@
 ---
 title: 2022 • Books
 year: 2022
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2022.html"
 schema: books
 ---

src/pages/main/books/years/2023.html

@@ -1,7 +1,7 @@
 ---
 title: 2023 • Books
 year: 2023
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2023.html"
 schema: books
 ---

src/pages/main/books/years/2024.html

@@ -1,7 +1,7 @@
 ---
 title: 2024 • Books
 year: 2024
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2024.html"
 schema: books
 ---

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.albums
   size: 24
-permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.allTime.albums
   size: 24
-permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.month.albums
   size: 24
-permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.week.albums
   size: 24
-permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.artists
   size: 24
-permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.allTime.artists
   size: 24
-permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.month.artists
   size: 24
-permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

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

@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.week.artists
   size: 24
-permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
-<div class="media-grid square">
-  {% for item in pagination.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=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}

src/pages/main/music/index.html

@@ -76,20 +76,20 @@ schema: music
   </div>
 </div>
 <div id="tracks-recent">
-  {% render "partials/media/tracks-recent.liquid", data:music.recent.tracksChronological %}
+  {% render "partials/media/music/tracks/recent", data:music.recent.tracksChronological %}
 </div>
 <div class="hidden" id="tracks-window">
-  {% render "partials/media/track-chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-month">
-  {% render "partials/media/track-chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-three-months">
-  {% render "partials/media/track-chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-all-time">
-  {% render "partials/media/track-chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
+  {% render "partials/media/music/tracks/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/media/album-releases.liquid", albumReleases:albumReleases %}
+{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
 <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 once an hour.</em></p>

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

@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.tracks
   size: 50
-permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}
-<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">{{ 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:pagination %}

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

@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.allTime.tracks
   size: 50
-permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.allTime.tracks[0].plays %}
-<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">{{ 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:pagination %}

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

@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.month.tracks
   size: 50
-permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}
-<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">{{ 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:pagination %}

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

@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.week.tracks
   size: 50
-permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <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" />
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}
-<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">{{ 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:pagination %}

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

@@ -8,4 +8,4 @@ schema: watching
 <h2 class="watching page-header">{{ title }}</h2>
 <p>These are my favorite movies. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
-{% render "partials/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}

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

@@ -8,4 +8,4 @@ schema: watching
 <h2 class="watching page-header">{{ title }}</h2>
 <p>These are my favorite shows. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
-{% render "partials/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}

src/pages/main/watching/index.html

@@ -6,7 +6,7 @@ schema: watching
 ---
 {% assign featuredMovie = movies.favorites | featuredWatching: 1 | first %}
 <h2 class="watching page-header">{{ title }}</h2>
-{% render "partials/watching/hero.liquid" movie:featuredMovie %}
+{% render "partials/media/watching/hero.liquid" movie:featuredMovie %}
 <p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
 <h2 id="movies" class="section-header flex-centered">
@@ -26,7 +26,7 @@ schema: watching
   </h2>
 </a>
 {% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
-{% render "partials/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
 <a class="link-icon flex-centered" href="/watching/favorite-shows">
   <h2 class="section-header flex-centered">
     {% tablericon "star" "Favorite shows" %}
@@ -34,5 +34,5 @@ schema: watching
   </h2>
 </a>
 {% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
-{% render "partials/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
+{% render "partials/media/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 once an hour.</em></p>

src/pages/main/watching/to-watch/movies.html

@@ -5,7 +5,7 @@ pagination:
   data: movies.toWatch
   alias: movies
   size: 30
-permalink: "/watching/movies-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/watching/movies-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>

src/pages/main/watching/to-watch/shows.html

@@ -5,7 +5,7 @@ pagination:
   data: tv.toWatch
   alias: shows
   size: 30
-permalink: "/watching/shows-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/watching/shows-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>

src/posts.html

@@ -6,7 +6,7 @@ pagination:
   size: 8
   reverse: true
   alias: posts
-permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 ---
 <div class="posts-wrapper">
   {% for post in pagination.items %}

src/posts/2023/drying-up-now-page-templates-eleventy.md

@@ -136,7 +136,7 @@ layout: main
 {{ content }}
 {% render "partials/media/grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
 {% render "partials/media/grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8, loading: 'lazy' %}
-{% render "partials/media/album-releases.liquid", albumReleases:albumReleases %}
+{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
 {% render "partials/media/grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6, loading: 'lazy' %}
 {% render "partials/now/links.liquid", links:links %}
 {% render "partials/media/grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}

src/tag-list.html

@@ -4,7 +4,7 @@ pagination:
   data: collections
   size: 1
   alias: tag
-permalink: "/tags/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/tags/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 eleventyComputed:
   title: '{{ tag }}'
 ---