feat: paginate watching pages + music updates

config/filters/index.js

@@ -251,12 +251,23 @@ export default {
   getLastWatched: (show) => show?.['episodes'][show['episodes']?.length - 1]?.['last_watched_at'],
   sortByPlaysDescending: (data) => data.sort((a, b) => (b['total_plays'] || b['plays']) - (a['total_plays'] || a['plays'])),
   genreStrings: (genres, key) => genres.map(genre => genre[key]),
-  genreLinks: (genres, count = 10) => {
+  mediaLinks: (data, type, count = 10) => {
-    const genreData = genres.slice(0, count)
+    const dataSlice = data.slice(0, count)
-    if (genreData.length === 0) return ''
+    if (dataSlice.length === 0) return ''
-    if (genreData.length === 1) return genreData[0]
+    if (dataSlice.length === 1) return type === 'genre' ? dataSlice[0] : dataSlice[0]['artist_name']
-    const allButLast = genreData.slice(0, -1).map(genre => `<a href="/music/genre/${sanitizeMediaString(genre)}">${genre}</a>`).join(', ')
+
-    const last = `<a href="/music/genre/${sanitizeMediaString(genreData[genreData.length - 1])}">${genreData[genreData.length - 1]}</a>`
+    const allButLast = dataSlice.slice(0, -1).map(item => {
+      if (type === 'genre') {
+        return `<a href="/music/genre/${sanitizeMediaString(item)}">${item}</a>`
+      } else if (type === 'artist') {
+        return `<a href="/music/artists/${sanitizeMediaString(item['name_string'])}-${sanitizeMediaString(item['country'].toLowerCase())}">${item['name_string']}</a>`
+      }
+    }).join(', ')
+
+    const last = type === 'genre'
+      ? `<a href="/music/genre/${sanitizeMediaString(dataSlice[dataSlice.length - 1])}">${dataSlice[dataSlice.length - 1]}</a>`
+      : `<a href="/music/artists/${sanitizeMediaString(dataSlice[dataSlice.length - 1]['name_string'])}-${sanitizeMediaString(dataSlice[dataSlice.length - 1]['country'].toLowerCase())}">${dataSlice[dataSlice.length - 1]['name_string']}</a>`
+
     return `${allButLast} and ${last}`
   },
 

config/utilities/index.js

@@ -20,3 +20,20 @@ export const sanitizeMediaString = (str) => {
     lower: true,
   })
 }
+
+export const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
+
+export const getCountryName = (countryCode) => regionNames.of(countryCode.trim()) || countryCode.trim()
+
+export const parseCountryField = (countryField) => {
+  if (!countryField) return null
+
+  const delimiters = [',', '/', '&', 'and']
+  let countries = [countryField]
+
+  delimiters.forEach(delimiter => {
+    countries = countries.flatMap(country => country.split(delimiter))
+  })
+
+  return countries.map(getCountryName).join(', ')
+}

package-lock.json

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

package.json

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

src/_data/artists.js

@@ -1,5 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
-import { parseCountryField } from './utilities/index.js'
+import { parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL || 'YOUR_SUPABASE_URL'
 const SUPABASE_KEY = process.env.SUPABASE_KEY || 'YOUR_SUPABASE_KEY'

src/_data/genres.js

@@ -1,5 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
-import { parseCountryField } from './utilities/index.js'
+import { parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL || 'YOUR_SUPABASE_URL'
 const SUPABASE_KEY = process.env.SUPABASE_KEY || 'YOUR_SUPABASE_KEY'

src/_data/music.js

@@ -1,6 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 import { DateTime } from 'luxon'
-import { sanitizeMediaString, parseCountryField } from './utilities/index.js'
+import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY

src/_data/tv.js

@@ -61,7 +61,7 @@ export default async function () {
 
   episodes.sort((a, b) => new Date(b['last_watched_at']) - new Date(a['last_watched_at']))
   const allEpisodes = episodes
-  const recentlyWatchedEpisodes = episodes.slice(0, 75)
+  const recentlyWatchedEpisodes = episodes.slice(0, 150)
 
   const formatEpisodeData = (episodes) => {
     const episodeData = []

src/_data/utilities/index.js

@@ -1,29 +0,0 @@
-import slugify from 'slugify'
-
-export const sanitizeMediaString = (str) => {
-  if (!str) return null
-  const sanitizedString = str.normalize('NFD').replace(/[\u0300-\u036f\u2010—\.\?\(\)\[\]\{\}]/g, '').replace(/\.{3}/g, '')
-
-  return slugify(sanitizedString, {
-    replacement: '-',
-    remove: /[#,&,+()$~%.'":*?<>{}]/g,
-    lower: true,
-  })
-}
-
-export const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
-
-export const getCountryName = (countryCode) => regionNames.of(countryCode.trim()) || countryCode.trim()
-
-export const parseCountryField = (countryField) => {
-  if (!countryField) return null
-
-  const delimiters = [',', '/', '&', 'and']
-  let countries = [countryField]
-
-  delimiters.forEach(delimiter => {
-    countries = countries.flatMap(country => country.split(delimiter))
-  })
-
-  return countries.map(getCountryName).join(', ')
-}

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

@@ -0,0 +1,27 @@
+<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,4 +1,3 @@
-{% if mediaItems.size > 0 %}
 <div class="watching grid">
   {% for media in mediaItems limit: count %}
     {% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %}
@@ -25,4 +24,3 @@
     </a>
   {% endfor %}
 </div>
-{% endif %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

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

@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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 | genreStrings: "genre" | genreLinks: 5 }}.</p>
+<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 | 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 %}

src/pages/main/music/genre.html

@@ -8,7 +8,14 @@ permalink: /music/genre/{{ genre.name | slugify | downcase }}/index.html
 updated: "now"
 schema: genre
 ---
-{% assign artists = pagination.artists %}
+{% assign artistCount = genre.artists.size %}
+{%- capture connectingWord -%}
+  {% if artistCount > 1 %}
+    are
+  {% else %}
+    is
+  {% endif %}
+{%- endcapture -%}
 {% capture js %}
   {% render "../../../assets/scripts/text-toggle.js" %}
 {% endcapture %}
@@ -17,7 +24,7 @@ schema: genre
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <h2 class="page-header">{{ genre.name }}</h2>
 <article class="genre-focus">
-  <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists are <strong class="highlight-text">{{ genre.artists | sortByPlaysDescending | listToString: "name_string", 5 }}</strong>. I've listened to <strong class="highlight-text">{{ genre.name }}</strong> tracks <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> times.</p>
+  <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending | mediaLinks: "artist", 5 }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
   <hr class="large-spacing" />
   {%- if genre.description -%}
   <div data-toggle-content class="text-toggle-hidden">

src/pages/main/music/index.html

@@ -11,7 +11,7 @@ schema: music
 <script>{{ js }}</script>
 <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 {{ genres | sortByPlaysDescending | genreStrings: "name" | genreLinks: 5 }}. 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.totalTracks }} tracks</strong>.</p>
+<p>I mostly listen to {{ genres | sortByPlaysDescending | genreStrings: "name" | mediaLinks: "genre", 5 }}. 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.totalTracks }} tracks</strong>.</p>
 {% render "partials/widgets/now-playing.liquid" %}
 {% 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" %}
 <hr class="large-spacing" />

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

@@ -2,11 +2,16 @@
 title: Favorite movies
 description: These are my favorite movies. There are many like them, but these are mine.
 layout: default
-permalink: "/watching/favorite-movies/index.html"
+pagination:
+  data: movies.favorites
+  size: 24
+permalink: "/watching/favorite-movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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/media/watching/backdrop-grid.liquid", mediaItems:movies.favorites, count: 99 %}
+{% endif %}
+{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}

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

@@ -2,11 +2,16 @@
 title: Favorite shows
 description: These are my favorite shows. There are many like them, but these are mine.
 layout: default
-permalink: "/watching/favorite-shows/index.html"
+pagination:
+  data: tv.favorites
+  size: 24
+permalink: "/watching/favorite-shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <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/media/watching/backdrop-grid.liquid", mediaItems:tv.favorites, count: 99 %}
+{% endif %}
+{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}

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

@@ -2,11 +2,16 @@
 title: Recent movies
 description: These are the movies I've watched recently. There are many like them, but these are mine.
 layout: default
-permalink: "/watching/recent/movies/index.html"
+pagination:
+  data: movies.recentlyWatched
+  size: 24
+permalink: "/watching/recent/movies/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="watching page-header">{{ title }}</h2>
-<p>These are the movies I've watched recently. There are many like them, but these are mine.</p>
+<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" />
-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.recentlyWatched, count: 99, rating: true %}
+{% endif %}
+{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}

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

@@ -2,11 +2,16 @@
 title: Recent shows
 description: These are the shows I've watched recently. There are many like them, but these are mine.
 layout: default
-permalink: "/watching/recent/shows/index.html"
+pagination:
+  data: tv.recentlyWatched
+  size: 24
+permalink: "/watching/recent/shows/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
+{% if pagination.pageNumber == 0 %}
 <h2 class="watching page-header">{{ title }}</h2>
-<p>These are the shows I've watched recently. There are many like them, but these are mine.</p>
+<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" />
-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.recentlyWatched, count: 99 %}
+{% endif %}
+{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %}