fix: sort + og

config/filters/index.js

@@ -32,6 +32,7 @@ export default {
     })
   },
   formatNumber: (number) => number.toLocaleString('en-US'),
+  shuffleArray,
 
   // navigation
   isLinkActive: (category, page) => {
@@ -249,7 +250,7 @@ export default {
     }).length
   },
   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'])),
+  sortByPlaysDescending: (data, key) => data.sort((a, b) => b[key] - a[key]),
   genreStrings: (genres, key) => genres.map(genre => genre[key]),
   mediaLinks: (data, type, count = 10) => {
     const dataSlice = data.slice(0, count)

src/_includes/base.liquid

@@ -12,6 +12,8 @@
     Movies • {{ movie.title }}{% if movie.rating %} ({{ movie.rating }}){% endif %} • {{ meta.siteName }}
   {% elsif show.title %}
     Shows • {{ show.title }} • {{ meta.siteName }}
+  {% elsif genre.title %}
+    Music • {{ genre.title }} • {{ meta.siteName }}
   {% else %}
     {{ meta.siteName }}
   {%- endif -%}
@@ -27,6 +29,8 @@
     {% 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 %}
@@ -52,6 +56,9 @@
     {{ movie.backdrop }}
   {%- elsif schema == 'show' -%}
     {{ meta.url }}/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg
+  {%- elsif schema == 'genre' -%}
+    {%- assign genreArtist = genre.artists | shuffleArray | first -%}
+    {{ genreArtist.image }}
   {%- else -%}
     {{ meta.meta_data.opengraph_default }}
   {%- 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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

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" | mediaLinks: "genre", 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: "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 %}

src/pages/main/music/genre.html

@@ -24,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 {{ 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>
+  <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ genre.artists | sortByPlaysDescending: "total_plays" | 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" | 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>
+<p>I mostly listen to {{ genres | sortByPlaysDescending: "total_plays" | 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" />