feat: genre pages

config/filters/index.js

@@ -3,7 +3,7 @@ import { URL } from 'url'
 import slugify from 'slugify'
 import sanitizeHtml from 'sanitize-html';
 import authors from '../data/author-map.js'
-import { shuffleArray } from '../utilities/index.js'
+import { shuffleArray, sanitizeMediaString } from '../utilities/index.js'
 
 const utmPattern = /[?&](utm_[^&=]+=[^&#]*)/gi
 const BASE_URL = 'https://coryd.dev'
@@ -223,12 +223,12 @@ export default {
       return normalized
     }),
   calculatePlayPercentage: (plays, mostPlayed) => `${plays/mostPlayed * 100}%`,
-  genresToString: (genres, count = 10) => {
+  listToString: (items, key, count = 10) => {
-    const genreData = genres.slice(0, count)
+    const itemData = items.slice(0, count)
-    if (genreData.length === 0) return ''
+    if (itemData.length === 0) return ''
-    if (genreData.length === 1) return genreData[0].genre
+    if (itemData.length === 1) return itemData[0][key]
-    const allButLast = genreData.slice(0, -1).map(g => g.genre).join(', ')
+    const allButLast = itemData.slice(0, -1).map(item => item[key]).join(', ')
-    const last = genreData[genreData.length - 1].genre
+    const last = itemData[itemData.length - 1][key]
     return `${allButLast} and ${last}`
   },
   bookStatus: (books, status) => books.filter(book => book.status === status),
@@ -249,11 +249,19 @@ 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'])),
+  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 => `<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>`
+    return `${allButLast} and ${last}`
+  },
 
     // tags
-  filterTags: (tags) => {
+  filterTags: (tags) => tags.filter((tag) => tag.toLowerCase() !== 'posts'),
-    return tags.filter((tag) => tag.toLowerCase() !== 'posts')
-  },
   formatTag: (string) => {
     const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1)
     const normalizedString = string.toLowerCase()

config/utilities/index.js

@@ -1,3 +1,5 @@
+import slugify from 'slugify'
+
 export const shuffleArray = array => {
   for (let i = array.length - 1; i > 0; i--) {
     let j = Math.floor(Math.random() * (i + 1));
@@ -7,3 +9,14 @@ export const shuffleArray = array => {
   }
   return array
 }
+
+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,
+  })
+}

package-lock.json

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

package.json

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

src/_data/genres.js

@@ -0,0 +1,41 @@
+import { createClient } from '@supabase/supabase-js'
+import { parseCountryField } from './utilities/index.js'
+
+const SUPABASE_URL = process.env.SUPABASE_URL || 'YOUR_SUPABASE_URL'
+const SUPABASE_KEY = process.env.SUPABASE_KEY || 'YOUR_SUPABASE_KEY'
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
+
+export default async function fetchGenresWithArtists() {
+  const { data, error } = await supabase
+    .from('genres')
+    .select(`
+      name,
+      description,
+      total_plays,
+      wiki_link,
+      artists (
+        mbid,
+        name_string,
+        image,
+        total_plays,
+        country,
+        description,
+        favorite
+      )
+    `)
+    .order('id', { ascending: true })
+
+  if (error) {
+    console.error('Error fetching genres with artists:', error)
+    return []
+  }
+
+  data.forEach(genre => {
+    genre.artists = genre.artists.map(artist => ({
+      ...artist,
+      country: parseCountryField(artist.country)
+    }))
+  })
+
+  return data
+}

src/_data/music.js

@@ -111,9 +111,9 @@ const aggregateGenres = (data) => {
     if (!genreAggregation[genre]) {
       genreAggregation[genre] = { genre, plays: 0 }
     }
-    genreAggregation[genre].plays++
+    genreAggregation[genre]['plays']++
   })
-  return Object.values(genreAggregation).sort((a, b) => b.plays - a.plays)
+  return Object.values(genreAggregation).sort((a, b) => b['plays'] - a['plays'])
 }
 
 export default async function() {

src/_data/utilities/index.js

@@ -1,6 +1,7 @@
 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, {

src/_includes/partials/media/grid.liquid

@@ -1,4 +1,3 @@
-{% if data.size > 0 %}
 {% assign media = data | normalizeMedia %}
 <div class="media-grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
   {% for item in media limit: count %}
@@ -27,4 +26,3 @@
     </a>
   {% endfor %}
 </div>
-{% endif %}

src/_includes/partials/widgets/tags.liquid

@@ -1,6 +1,6 @@
 {% assign filteredTags = tags | filterTags %}
 <div{% if hasSpace %} style="margin-bottom:var(--sizing-md)"{% endif %}>
   {% for tag in filteredTags limit: 10 %}
-  <a class="post-tag" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
+  <a class="tag-element" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
   {% endfor %}
 </div>

src/assets/styles/base/index.css

@@ -477,7 +477,7 @@ article {
   }
 }
 
-.post-tag {
+.tag-element {
   margin-bottom: var(--sizing-lg);
   display: inline-block;
 
@@ -639,7 +639,7 @@ li {
     }
   }
 
-  .post-tag {
+  .tag-element {
     margin-bottom: var(--sizing-sm);
 
     &:not(:last-child) {

src/assets/styles/pages/music.css

@@ -1,6 +1,4 @@
 .artist-focus {
-  border-bottom: 0;
-
   & img {
     border: 1px solid var(--accent-color);
   }
@@ -51,6 +49,11 @@
   }
 }
 
+.artist-focus,
+.genre-focus {
+  border-bottom: 0;
+}
+
 @media screen and (min-width: 768px) {
   .artist-focus {
     & .artist-display {

src/pages/main/books/book.html

@@ -4,7 +4,7 @@ pagination:
   data: books
   size: 1
   alias: book
-permalink: /books/{{ book.isbn }}/
+permalink: /books/{{ book.isbn }}/index.html
 isbn: {{ book.isbn }}
 schema: book
 ---

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 <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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/artist.html

@@ -4,7 +4,7 @@ pagination:
   data: artists
   size: 1
   alias: artist
-permalink: /music/artists/{{ artist.name_string | slugify | downcase }}-{{ artist.country | slugify | downcase}}/
+permalink: /music/artists/{{ artist.name_string | slugify | downcase }}-{{ artist.country | slugify | downcase}}/index.html
 updated: "now"
 schema: artist
 ---
@@ -28,14 +28,18 @@ schema: artist
       {%- if artist.total_plays > 0 -%}
         <p class="sub-meta"><strong class="highlight-text">{{ artist.total_plays }} plays</strong></p>
       {%- endif -%}
-      <p class="sub-meta">{{ artist.genre }}</p>
+      <p class="sub-meta">
+        <a href="https://coryd.dev/music/genre/{{ artist.genre | slugify | downcase }}">
+          {{ artist.genre }}
+        </a>
+      </p>
       <p class="sub-meta">
         <a class="brain" href="https://musicbrainz.org/artist/{{ artist.mbid }}">{% tablericon "brain" "MusicBrainz" %}</a>
       </p>
     </div>
   </div>
   {%- if artist.description -%}
-  <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
+  <div data-toggle-content class="text-toggle-hidden"><em>{{ artist.description | markdown }}</em></div>
   <button data-toggle-button>Show more</button>
   {%- endif -%}
   <table>

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 <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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 <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</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" | genreLinks: 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

@@ -0,0 +1,30 @@
+---
+layout: default
+pagination:
+  data: genres
+  size: 1
+  alias: genre
+permalink: /music/genre/{{ genre.name | slugify | downcase }}/index.html
+updated: "now"
+schema: genre
+---
+{% assign artists = pagination.artists %}
+{% capture js %}
+  {% render "../../../assets/scripts/text-toggle.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
+<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
+<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>
+  <hr class="large-spacing" />
+  {%- if genre.description -%}
+  <div data-toggle-content class="text-toggle-hidden">
+    <em>{{ genre.description | markdown }}</em>
+    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
+    <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+  </div>
+  <button data-toggle-button>Show more</button>
+  {%- endif -%}
+</article>

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 <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>. 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" | 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>
 {% 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/music/tracks/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.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 | genresToString: 5 }}</strong>.</p>
+<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 %}

src/pages/main/music/tracks/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.totalTracks }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<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 %}

src/pages/main/music/tracks/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.totalTracks }} 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>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 %}

src/pages/main/music/tracks/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.totalTracks }} 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>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 %}

src/pages/main/watching/movie.html

@@ -4,7 +4,7 @@ pagination:
   data: movies.movies
   size: 1
   alias: movie
-permalink: /watching/movies/{{ movie.id }}/
+permalink: /watching/movies/{{ movie.id }}/index.html
 schema: movie
 ---
 {%- capture alt -%}

src/pages/main/watching/show.html

@@ -4,7 +4,7 @@ pagination:
   data: tv.shows
   size: 1
   alias: show
-permalink: /watching/shows/{{ show.tmdb_id }}/
+permalink: /watching/shows/{{ show.tmdb_id }}/index.html
 schema: show
 ---
 {%- capture alt -%}