From 0d926fd844591bc2f3598d2f8293f623875f26a2 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sun, 26 May 2024 15:18:17 -0700 Subject: [PATCH] feat: paginate watching pages + music updates --- config/filters/index.js | 23 +++++--- config/utilities/index.js | 17 ++++++ package-lock.json | 4 +- package.json | 2 +- src/_data/artists.js | 2 +- src/_data/genres.js | 2 +- src/_data/music.js | 2 +- src/_data/tv.js | 2 +- src/_data/utilities/index.js | 29 ----------- .../watching/backdrop-grid-paginated.liquid | 27 ++++++++++ .../media/watching/backdrop-grid.liquid | 52 +++++++++---------- src/pages/main/music/albums/3-months.html | 2 +- src/pages/main/music/albums/all-time.html | 2 +- src/pages/main/music/albums/this-month.html | 2 +- src/pages/main/music/albums/this-week.html | 2 +- src/pages/main/music/artists/3-months.html | 2 +- src/pages/main/music/artists/all-time.html | 2 +- src/pages/main/music/artists/this-month.html | 2 +- src/pages/main/music/artists/this-week.html | 2 +- src/pages/main/music/genre.html | 11 +++- src/pages/main/music/index.html | 2 +- src/pages/main/watching/favorites/movies.html | 9 +++- src/pages/main/watching/favorites/shows.html | 9 +++- src/pages/main/watching/recent/movies.html | 11 ++-- src/pages/main/watching/recent/shows.html | 11 ++-- 25 files changed, 141 insertions(+), 90 deletions(-) delete mode 100644 src/_data/utilities/index.js create mode 100644 src/_includes/partials/media/watching/backdrop-grid-paginated.liquid diff --git a/config/filters/index.js b/config/filters/index.js index 855082cc..7ae8f105 100644 --- a/config/filters/index.js +++ b/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) => { - const genreData = genres.slice(0, count) - if (genreData.length === 0) return '' - if (genreData.length === 1) return genreData[0] - const allButLast = genreData.slice(0, -1).map(genre => `${genre}`).join(', ') - const last = `${genreData[genreData.length - 1]}` + mediaLinks: (data, type, count = 10) => { + const dataSlice = data.slice(0, count) + if (dataSlice.length === 0) return '' + if (dataSlice.length === 1) return type === 'genre' ? dataSlice[0] : dataSlice[0]['artist_name'] + + const allButLast = dataSlice.slice(0, -1).map(item => { + if (type === 'genre') { + return `${item}` + } else if (type === 'artist') { + return `${item['name_string']}` + } + }).join(', ') + + const last = type === 'genre' + ? `${dataSlice[dataSlice.length - 1]}` + : `${dataSlice[dataSlice.length - 1]['name_string']}` + return `${allButLast} and ${last}` }, diff --git a/config/utilities/index.js b/config/utilities/index.js index e11f6c56..197d8bfd 100644 --- a/config/utilities/index.js +++ b/config/utilities/index.js @@ -19,4 +19,21 @@ export const sanitizeMediaString = (str) => { 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(', ') } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 276c61d4..9e2899b8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 82ef794d..b896ec9e 100644 --- a/package.json +++ b/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": { diff --git a/src/_data/artists.js b/src/_data/artists.js index 237b1a23..753a2a55 100644 --- a/src/_data/artists.js +++ b/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' diff --git a/src/_data/genres.js b/src/_data/genres.js index 154114fe..e519e6bd 100644 --- a/src/_data/genres.js +++ b/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' diff --git a/src/_data/music.js b/src/_data/music.js index 0acb5ea6..eab4750c 100644 --- a/src/_data/music.js +++ b/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 diff --git a/src/_data/tv.js b/src/_data/tv.js index a2fe765d..2bca2a14 100644 --- a/src/_data/tv.js +++ b/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 = [] diff --git a/src/_data/utilities/index.js b/src/_data/utilities/index.js deleted file mode 100644 index 9afb5f1c..00000000 --- a/src/_data/utilities/index.js +++ /dev/null @@ -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(', ') -} \ No newline at end of file diff --git a/src/_includes/partials/media/watching/backdrop-grid-paginated.liquid b/src/_includes/partials/media/watching/backdrop-grid-paginated.liquid new file mode 100644 index 00000000..86c2fefd --- /dev/null +++ b/src/_includes/partials/media/watching/backdrop-grid-paginated.liquid @@ -0,0 +1,27 @@ +
+ {% for item in data.items %} + {% capture alt %}{{ item.title | escape }} ({{ item.year }}){% endcapture %} + +
+
+ {% if item.type == 'movie' %} +
{{ item.title }}
+
+ {{ item.year }} + {% if rating and item.rating %} + ({{ item.rating }}) + {% endif %} +
+ {% else %} +
{{ item.name }}
+ {% endif %} +
+ {%- capture loadingStrategy -%} + {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%} + {%- endcapture -%} + {{ alt }} +
+
+ {% endfor %} +
+{% render "partials/widgets/paginator.liquid", pagination:data %} \ No newline at end of file diff --git a/src/_includes/partials/media/watching/backdrop-grid.liquid b/src/_includes/partials/media/watching/backdrop-grid.liquid index b791d7e0..017525a2 100644 --- a/src/_includes/partials/media/watching/backdrop-grid.liquid +++ b/src/_includes/partials/media/watching/backdrop-grid.liquid @@ -1,28 +1,26 @@ -{% if mediaItems.size > 0 %} -
- {% for media in mediaItems limit: count %} - {% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %} - - \ No newline at end of file diff --git a/src/pages/main/music/albums/3-months.html b/src/pages/main/music/albums/3-months.html index f4f6df0e..98094fd5 100644 --- a/src/pages/main/music/albums/3-months.html +++ b/src/pages/main/music/albums/3-months.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.threeMonth.albums.size }} albums over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.threeMonth.albums.size }} albums over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my artists or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/albums/all-time.html b/src/pages/main/music/albums/all-time.html index 82d05a49..9f81067f 100644 --- a/src/pages/main/music/albums/all-time.html +++ b/src/pages/main/music/albums/all-time.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.allTime.albums.size }} albums and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.allTime.albums.size }} albums and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my artists or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/albums/this-month.html b/src/pages/main/music/albums/this-month.html index fe0f7284..a188d537 100644 --- a/src/pages/main/music/albums/this-month.html +++ b/src/pages/main/music/albums/this-month.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.month.albums.size }} albums this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.month.albums.size }} albums this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my artists or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/albums/this-week.html b/src/pages/main/music/albums/this-week.html index f696fa30..7050b2d2 100644 --- a/src/pages/main/music/albums/this-week.html +++ b/src/pages/main/music/albums/this-week.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.week.albums.size }} albums this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.week.albums.size }} albums this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my artists or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/artists/3-months.html b/src/pages/main/music/artists/3-months.html index b99d18bf..3cf846d4 100644 --- a/src/pages/main/music/artists/3-months.html +++ b/src/pages/main/music/artists/3-months.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.threeMonth.artists.size }} artists over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.threeMonth.artists.size }} artists over the last 3 months and most of what I've listened to has been {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my albums or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/artists/all-time.html b/src/pages/main/music/artists/all-time.html index c3e84d64..1c5a9f2a 100644 --- a/src/pages/main/music/artists/all-time.html +++ b/src/pages/main/music/artists/all-time.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.allTime.artists.size }} artists and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.allTime.artists.size }} artists and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my albums or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/artists/this-month.html b/src/pages/main/music/artists/this-month.html index 5d7ad732..012839ce 100644 --- a/src/pages/main/music/artists/this-month.html +++ b/src/pages/main/music/artists/this-month.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.month.artists.size }} artists this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.month.artists.size }} artists this month and most of what I've listened to has been {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my albums or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/artists/this-week.html b/src/pages/main/music/artists/this-week.html index 3e1c14a2..2befdca2 100644 --- a/src/pages/main/music/artists/this-week.html +++ b/src/pages/main/music/artists/this-week.html @@ -10,6 +10,6 @@ schema: music --- {% tablericon "arrow-left" "Go back" %} Go back -

I've listened to {{ music.week.artists.size }} artists this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.

+

I've listened to {{ music.week.artists.size }} artists this week and most of what I've listened to has been {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | mediaLinks: "genre", 5 }}.

See my albums or tracks for this period.

{% render "partials/media/music/period/grid.liquid" data:pagination %} \ No newline at end of file diff --git a/src/pages/main/music/genre.html b/src/pages/main/music/genre.html index 761d7a8a..b62a5104 100644 --- a/src/pages/main/music/genre.html +++ b/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 {% tablericon "arrow-left" "Go back" %} Go back
-

My top {{ genre.name }} artists are {{ genre.artists | sortByPlaysDescending | listToString: "name_string", 5 }}. I've listened to {{ genre.name }} tracks {{ genre.total_plays | formatNumber }} times.

+

My top {{ genre.name }} artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending | mediaLinks: "artist", 5 }}. I've listened to {{ genre.total_plays | formatNumber }} tracks form this genre.


{%- if genre.description -%}
diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html index 37ad63db..89b54e83 100644 --- a/src/pages/main/music/index.html +++ b/src/pages/main/music/index.html @@ -11,7 +11,7 @@ schema: music

This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. You can read more about the technical details, if you'd like.

-

I mostly listen to {{ genres | sortByPlaysDescending | genreStrings: "name" | genreLinks: 5 }}. This week I've listened to {{ music.week.artists.size }} artists, {{ music.week.albums.size }} albums and {{ music.week.totalTracks }} tracks.

+

I mostly listen to {{ genres | sortByPlaysDescending | genreStrings: "name" | mediaLinks: "genre", 5 }}. This week I've listened to {{ music.week.artists.size }} artists, {{ music.week.albums.size }} albums and {{ music.week.totalTracks }} tracks.

{% 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" %}
diff --git a/src/pages/main/watching/favorites/movies.html b/src/pages/main/watching/favorites/movies.html index 28468762..558a0b7a 100644 --- a/src/pages/main/watching/favorites/movies.html +++ b/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 --- {% tablericon "arrow-left" "Go back" %} Go back +{% if pagination.pageNumber == 0 %}

These are my favorite movies. There are many like them, but these are mine.


-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.favorites, count: 99 %} \ No newline at end of file +{% endif %} +{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %} \ No newline at end of file diff --git a/src/pages/main/watching/favorites/shows.html b/src/pages/main/watching/favorites/shows.html index 559f64a7..590131bf 100644 --- a/src/pages/main/watching/favorites/shows.html +++ b/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 --- {% tablericon "arrow-left" "Go back" %} Go back +{% if pagination.pageNumber == 0 %}

These are my favorite shows. There are many like them, but these are mine.


-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.favorites, count: 99 %} \ No newline at end of file +{% endif %} +{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %} \ No newline at end of file diff --git a/src/pages/main/watching/recent/movies.html b/src/pages/main/watching/recent/movies.html index 8330f069..5a026dd5 100644 --- a/src/pages/main/watching/recent/movies.html +++ b/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 --- {% tablericon "arrow-left" "Go back" %} Go back +{% if pagination.pageNumber == 0 %} -

These are the movies I've watched recently. There are many like them, but these are mine.

+

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).


-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.recentlyWatched, count: 99, rating: true %} \ No newline at end of file +{% endif %} +{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %} \ No newline at end of file diff --git a/src/pages/main/watching/recent/shows.html b/src/pages/main/watching/recent/shows.html index 45ad12ac..92dcb45f 100644 --- a/src/pages/main/watching/recent/shows.html +++ b/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 --- {% tablericon "arrow-left" "Go back" %} Go back +{% if pagination.pageNumber == 0 %} -

These are the shows I've watched recently. There are many like them, but these are mine.

+

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).


-{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.recentlyWatched, count: 99 %} \ No newline at end of file +{% endif %} +{% render "partials/media/watching/backdrop-grid-paginated.liquid", data:pagination %} \ No newline at end of file