chore: refactoring

.eleventy.js

@@ -34,18 +34,21 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('src/assets')
   eleventyConfig.addPassthroughCopy('_redirects')
   eleventyConfig.addPassthroughCopy('_headers')
-  eleventyConfig.addPassthroughCopy({
-    'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js',
-  })
   eleventyConfig.addPassthroughCopy({
     'node_modules/@cdransf/api-text/api-text.js': 'assets/scripts/components/api-text.js',
   })
   eleventyConfig.addPassthroughCopy({
-    'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
+    'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/components/mastodon-post.js'
+  })
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js',
   })
   eleventyConfig.addPassthroughCopy({
     'node_modules/@cdransf/select-pagination/select-pagination.js': 'assets/scripts/components/select-pagination.js',
   })
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
+  })
   eleventyConfig.addPassthroughCopy({
     'node_modules/youtube-video-element/youtube-video-element.js': 'assets/scripts/components/youtube-video-element.js'
   })

config/filters/general.js

@@ -1,5 +1,5 @@
 import sanitizeHtml from 'sanitize-html'
-import { shuffleArray, sanitizeMediaString } from '../utilities/index.js'
+import { shuffleArray } from '../utilities/index.js'
 
 const BASE_URL = 'https://coryd.dev'
 
@@ -12,7 +12,6 @@ export default {
   },
   formatNumber: (number) => number.toLocaleString('en-US'),
   shuffleArray,
-  sanitizeMediaString,
   sanitizeHtml: (html) => sanitizeHtml(html, {
     textFilter: (text) => text.replace(/"/g, '')
   }),

config/filters/media.js

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import { shuffleArray, sanitizeMediaString } from '../utilities/index.js'
+import { shuffleArray } from '../utilities/index.js'
 
 export default {
   featuredWatching: (watching, count) => {
@@ -81,7 +81,6 @@ export default {
   },
   getLastWatched: (show) => show?.['episodes'][show['episodes']?.length - 1]?.['last_watched_at'],
   sortByPlaysDescending: (data, key) => data.sort((a, b) => b[key] - a[key]),
-  genreStrings: (genres, key) => genres.map(genre => genre[key]),
   mediaLinks: (data, type, count = 10) => {
     if (!data || !type) return ''
 
@@ -90,25 +89,17 @@ export default {
     if (dataSlice.length === 0) return null
     if (dataSlice.length === 1) {
       const item = dataSlice[0]
-      if (type === 'genre') {
-        return `<a href="/music/genres/${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>`
+      if (type === 'genre' || type === 'artist') {
+        return `<a href="${item['url']}">${item['name']}</a>`
       } else if (type === 'book') {
-        return `<a href="/books/${item['isbn']}">${item['title']}</a>`
-      } else if (type === 'movie') {
         return `<a href="${item['url']}">${item['title']}</a>`
       }
     }
 
     const allButLast = dataSlice.slice(0, -1).map(item => {
-      if (type === 'genre') {
-        return `<a href="/music/genres/${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>`
+      if (type === 'genre' || type === 'artist') {
+        return `<a href="${item['url']}">${item['name']}</a>`
       } else if (type === 'book') {
-        return `<a href="/books/${item['isbn']}">${item['title']}</a>`
-      } else if (type === 'movie') {
         return `<a href="${item['url']}">${item['title']}</a>`
       }
     }).join(', ')
@@ -116,15 +107,12 @@ export default {
     let last
     const lastItem = dataSlice[dataSlice.length - 1]
 
-    if (type === 'genre') {
-      last = `<a href="/music/genres/${sanitizeMediaString(lastItem)}">${lastItem}</a>`
-    } else if (type === 'artist') {
-      last = `<a href="/music/artists/${sanitizeMediaString(lastItem['name_string'])}-${sanitizeMediaString(lastItem['country'].toLowerCase())}">${lastItem['name_string']}</a>`
+    if (type === 'genre' || type === 'artist') {
+      last = `<a href="${lastItem['url']}">${lastItem['name']}</a>`
     } else if (type === 'book') {
-      last = `<a href="/books/${lastItem['isbn']}">${lastItem['title']}</a>`
-    } else if (type === 'movie') {
       last = `<a href="${lastItem['url']}">${lastItem['title']}</a>`
     }
+
     return `${allButLast} and ${last}`
   },
   formatVenue: (venue) => venue.split(',')[0].trim(),

config/utilities/index.js

@@ -1,5 +1,3 @@
-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))
@@ -10,17 +8,6 @@ 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,
-  })
-}
-
 export const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
 
 export const getCountryName = (countryCode) => regionNames.of(countryCode.trim()) || countryCode.trim()

package-lock.json

@@ -12,6 +12,7 @@
         "@cdransf/api-text": "^1.5.0",
         "@cdransf/select-pagination": "^1.3.1",
         "@cdransf/theme-toggle": "^2.0.0",
+        "@daviddarnes/mastodon-post": "^1.3.0",
         "minisearch": "^7.1.0",
         "youtube-video-element": "^1.1.6"
       },
@@ -393,6 +394,12 @@
       "integrity": "sha512-cB1/xUStNF3UzAL8E6DD5IDbegyLqncZUyiZkFfv/jkEU5OJquZnjLSg6zjHOQeMcCew3tapKfYDLTtEDkzHLA==",
       "license": "MIT"
     },
+    "node_modules/@daviddarnes/mastodon-post": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.3.0.tgz",
+      "integrity": "sha512-6AMQ/tl6uI3wXknv8exYJguym/bPHxIW5XOYg7aWCQtMbP4XUDAsWp2pv4o9wtesIF8K7CssNPR93qFOh7D8lw==",
+      "license": "MIT"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "@cdransf/api-text": "^1.5.0",
     "@cdransf/select-pagination": "^1.3.1",
     "@cdransf/theme-toggle": "^2.0.0",
+    "@daviddarnes/mastodon-post": "^1.3.0",
     "minisearch": "^7.1.0",
     "youtube-video-element": "^1.1.6"
   },

src/assets/styles/components/mastodon-post.css

@@ -0,0 +1,21 @@
+.mastodon-post-wrapper {
+  margin: var(--spacing-base) 0;
+  border-top: var(--border-gray);
+  padding-top: var(--sizing-base);
+
+  & dl, dt {
+    display: flex;
+  }
+
+  & dl {
+    align-items: center;
+
+    & dd {
+      margin-left:  var(--spacing-xs);;
+
+      &:not(:last-child) {
+        margin-right: var(--spacing-lg);
+      }
+    }
+  }
+}

src/assets/styles/index.css

@@ -30,6 +30,7 @@
 @import url('./components/banners.css') layer(components);
 @import url('./components/buttons.css') layer(components);
 @import url('./components/forms.css') layer(components);
+@import url('./components/mastodon-post.css') layer(components);
 @import url('./components/media-grid.css') layer(components);
 @import url('./components/menu.css') layer(components);
 @import url('./components/modal.css') layer(components);

src/assets/styles/pages/post.css

@@ -5,6 +5,7 @@ article.standalone .associated-media:last-of-type > hr {
 p + .associated-media,
 img + .associated-media,
 .banner + .associated-media,
+.client-side + .associated-media,
 youtube-video + .associated-media {
   margin-top: var(--spacing-base);
   border-top: var(--border-gray);
@@ -23,6 +24,10 @@ youtube-video + .associated-media {
     }
   }
 
+  &:has(+ .client-side > div) {
+    border-bottom: var(--border-gray);
+  }
+
   & ~ youtube-video {
     margin-top: var(--spacing-base);
   }

src/data/albumReleases.js

@@ -1,5 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 import { DateTime } from 'luxon'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
@@ -38,7 +37,7 @@ const fetchAlbumReleases = async () => {
         total_plays: album['artist_total_plays'],
         country: album['artist_country'],
         favorite: album['artist_favorite'],
-        url: `/music/artists/${sanitizeMediaString(album['artist_name'])}-${sanitizeMediaString(parseCountryField(album['artist_country']))}`,
+        url: album['artist_url'],
       },
       title: album['name'],
       date: releaseDate.toLocaleString(DateTime.DATE_FULL),

src/data/artists.js

@@ -1,5 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
+import { parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -15,8 +15,8 @@ const fetchAllArtists = async () => {
       .from('optimized_artists')
       .select(`
         id,
-        mbid,
         name_string,
+        url,
         tentative,
         total_plays,
         country,
@@ -51,57 +51,49 @@ const fetchAllArtists = async () => {
 
 const processArtists = (artists) => {
   return artists.map(artist => ({
-    id: artist['id'],
-    mbid: artist['mbid'],
     name: artist['name_string'],
     tentative: artist['tentative'],
     totalPlays: artist['total_plays'],
     country: parseCountryField(artist['country']),
     description: artist['description'],
     favorite: artist['favorite'],
-    genre: artist['genre'],
+    genre: {
+      name: artist['genre']['name'],
+      url: artist['genre']['url'],
+    },
     emoji: artist['emoji'],
     tattoo: artist['tattoo'],
     image: artist['art'] ? `/${artist['art']}` : '',
-    url: `/music/artists/${sanitizeMediaString(artist['name_string'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`,
+    url: artist['url'],
     albums: (artist['albums'] || []).map(album => ({
-      id: album['id'],
       name: album['name'],
       releaseYear: album['release_year'],
       totalPlays: album['total_plays'],
       art: album.art ? `/${album['art']}` : ''
     })).sort((a, b) => a['release_year'] - b['release_year']),
-    concerts: artist['concerts']?.[0]?.['id'] ? artist['concerts'].sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-    books: artist['books']?.[0]?.['id'] ? artist['books'].map(book => ({
+    concerts: artist['concerts'] ? artist['concerts'].sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
+    books: artist['books'] ? artist['books'].map(book => ({
       title: book['title'],
       author: book['author'],
-      isbn: book['isbn'],
       description: book['description'],
       url: `/books/${book['isbn']}`,
     })).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
-    movies: artist['movies']?.[0]?.['id'] ? artist['movies'].map(movie => ({
+    movies: artist['movies'] ? artist['movies'].map(movie => ({
       title: movie['title'],
       year: movie['year'],
-      tmdb_id: movie['tmdb_id'],
       url: `/watching/movies/${movie['tmdb_id']}`,
     })).sort((a, b) => b['year'] - a['year']) : null,
-    shows: artist['shows']?.[0]?.['id'] ? artist['shows'].map(show => ({
+    shows: artist['shows'] ? artist['shows'].map(show => ({
       title: show['title'],
       year: show['year'],
-      tmdb_id: show['tmdb_id'],
       url: `/watching/shows/${show['tmdb_id']}`,
     })).sort((a, b) => b['year'] - a['year']) : null,
-    posts: artist['posts']?.[0]?.['id'] ? artist['posts'].map(post => ({
-      id: post['id'],
+    posts: artist['posts'] ? artist['posts'].map(post => ({
       title: post['title'],
       date: post['date'],
-      slug: post['slug'],
-      url: post['slug'],
+      url: post['url'],
     })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-    relatedArtists: artist['related_artists']?.[0]?.['id'] ? artist['related_artists'].map(relatedArtist => {
-      relatedArtist['url'] = `/music/artists/${sanitizeMediaString(relatedArtist['name'])}-${sanitizeMediaString(parseCountryField(relatedArtist['country']))}`
-      return relatedArtist
-    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+    relatedArtists: artist['related_artists'] ? artist['related_artists'].sort((a, b) => a['name'].localeCompare(b['name'])) : null,
   }))
 }
 

src/data/books.js

@@ -1,6 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import slugify from 'slugify'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -71,35 +69,25 @@ const processBooks = (books) => {
       status: book['read_status'],
       progress: book['progress'],
       tags: Array.isArray(book['tags']) ? book['tags'] : book['tags']?.split(',') || [],
-      isbn: book['isbn'],
       type: 'book',
-      artists: book['artists']?.[0]?.['id'] ? book['artists'].map(artist => {
-        artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-        return artist
-      }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
-      movies: book['movies']?.[0]?.['id'] ? book['movies'].map(movie => {
+      artists: book['artists'] ? book['artists'].sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+      movies: book['movies'] ? book['movies'].map(movie => {
         movie['url'] = `/watching/movies/${movie['tmdb_id']}`
         return movie
       }).sort((a, b) => b['year'] - a['year']) : null,
-      genres: book['genres']?.[0]?.['id'] ? book['genres'].map(genre => {
-        genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
-        return genre
-      }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
-      shows: book['shows']?.[0]?.['id'] ? book['shows'].map(show => {
+      genres: book['genres'] ? book['genres'].sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+      shows: book['shows'] ? book['shows'].map(show => {
         show['url'] = `/watching/shows/${show['tmdb_id']}`
         return show
       }).sort((a, b) => b['year'] - a['year']) : null,
-      posts: book['posts']?.[0]?.['id'] ? book['posts'].map(post => ({
-        id: post['id'],
+      posts: book['posts'] ? book['posts'].map(post => ({
         title: post['title'],
         date: post['date'],
-        slug: post['slug'],
-        url: post['slug'],
+        url: post['url'],
       })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-      relatedBooks: book['related_books']?.[0]?.['id'] ? book['related_books'].map(relatedBook => ({
+      relatedBooks: book['related_books'] ? book['related_books'].map(relatedBook => ({
         title: relatedBook['title'],
         author: relatedBook['author'],
-        isbn: relatedBook['isbn'],
         description: relatedBook['description'],
         url: `/books/${relatedBook['isbn']}`,
       })).sort((a, b) => a['title'].localeCompare(b['title'])) : null, // Add related books processing

src/data/concerts.js

@@ -1,5 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
+import { parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -26,7 +26,6 @@ const fetchAllConcerts = async () => {
         bounding_box,
         venue_notes,
         artist_name,
-        artist_mbid,
         artist_country
       `)
       .range(rangeStart, rangeStart + PAGE_SIZE - 1)
@@ -61,11 +60,9 @@ const processConcerts = (concerts) => {
     notes: concert['concert_notes'],
     artist: concert['artist'] ? {
       name: concert['artist_name'],
-      mbid: concert['artist_mbid'],
-      country: parseCountryField(concert['artist_country'])
     } : null,
     url: `/music/concerts?id=${concert['id']}`,
-    artistUrl: concert['artist'] ? `/music/artists/${sanitizeMediaString(concert['artist_name'])}-${sanitizeMediaString(parseCountryField(concert['artist_country']))}` : null
+    artistUrl: concert['artist'] ? concert['artist_url'] : null
   })).sort((a, b) => new Date(b['date']) - new Date(a['date']))
 }
 

src/data/genres.js

@@ -1,6 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import slugify from 'slugify'
-import { parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -14,14 +12,8 @@ const fetchGenresWithArtists = async () => {
       description,
       total_plays,
       wiki_link,
-      artists (
-        mbid,
-        name_string,
-        total_plays,
-        country,
-        description,
-        favorite
-      ),
+      url,
+      artists,
       books,
       movies,
       posts
@@ -35,30 +27,23 @@ const fetchGenresWithArtists = async () => {
 
   return data.map(genre => ({
     ...genre,
-    artists: genre['artists'].map(artist => ({
-      ...artist,
-      country: parseCountryField(artist['country'])
-    })),
-    url: `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`,
-    books: genre['books']?.[0]?.['id'] ? genre['books'].map(book => ({
+    artists: genre['artists'],
+    url: genre['url'],
+    books: genre['books'] ? genre['books'].map(book => ({
       title: book['title'],
       author: book['author'],
-      isbn: book['isbn'],
       description: book['description'],
       url: `/books/${book['isbn']}`,
     })).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
-    movies: genre['movies']?.[0]?.['id'] ? genre['movies'].map(movie => ({
+    movies: genre['movies'] ? genre['movies'].map(movie => ({
       title: movie['title'],
       year: movie['year'],
-      tmdb_id: movie['tmdb_id'],
       url: `/watching/movies/${movie['tmdb_id']}`,
     })).sort((a, b) => b['year'] - a['year']) : null,
-    posts: genre['posts']?.[0]?.['id'] ? genre['posts'].map(post => ({
-      id: post['id'],
+    posts: genre['posts'] ? genre['posts'].map(post => ({
       title: post['title'],
       date: post['date'],
-      slug: post['slug'],
-      url: post['slug'],
+      url: post['url'],
     })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
   }))
 }

src/data/movies.js

@@ -1,7 +1,5 @@
 import { createClient } from '@supabase/supabase-js'
 import { DateTime } from 'luxon'
-import slugify from 'slugify'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -71,33 +69,24 @@ const processMovies = (movies) => {
     tattoo: item['tattoo'],
     rating: item['star_rating'],
     review: item['review'],
-    id: item['tmdb_id'],
     type: 'movie',
     tags: item['tags'] ? item['tags'].split(',') : [],
-    artists: item['artists']?.[0]?.['id'] ? item['artists'].map(artist => {
-      artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-      return artist
-    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null,
-    books: item['books']?.[0]?.['id'] ? item['books'].map(book => {
+    artists: item['artists'] ? item['artists'].sort((a, b) => a['name'].localeCompare(b['name'])) : null,
+    books: item['books'] ? item['books'].map(book => {
       book['url'] = `/books/${book['isbn']}`
       return book
     }).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
-    genres: item['genres']?.[0]?.['id'] ? item['genres'].map(genre => {
-      genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
-      return genre
-    }).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
-    shows: item['shows']?.[0]?.['id'] ? item['shows'].map(show => {
+    genres: item['genres'] ? item['genres'].sort((a, b) => a['title'].localeCompare(b['title'])) : null,
+    shows: item['shows'] ? item['shows'].map(show => {
       show['url'] = `/watching/shows/${show['tmdb_id']}`
       return show
     }).sort((a, b) => b['year'] - a['year']) : null,
-    posts: item['posts']?.[0]?.['id'] ? item['posts'].map(post => ({
-      id: post['id'],
+    posts: item['posts'] ? item['posts'].map(post => ({
       title: post['title'],
       date: post['date'],
-      slug: post['slug'],
-      url: post['slug'],
+      url: post['url'],
     })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-    relatedMovies: item['related_movies']?.[0]?.['id'] ? item['related_movies'].map(movie => {
+    relatedMovies: item['related_movies'] ? item['related_movies'].map(movie => {
       movie['url'] = `/watching/movies/${movie['tmdb_id']}`
       return movie
     }).sort((a, b) => b['year'] - a['year']) : null,

src/data/music.js

@@ -1,5 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -56,8 +55,7 @@ const aggregateData = (data, groupByField, groupByType, genreMapping) => {
       aggregation[key] = {
         title: item[groupByField],
         plays: 0,
-        mbid: item[groupByType]?.['mbid'] || '',
-        url: `/music/artists/${sanitizeMediaString(item['artist_name'])}-${sanitizeMediaString(parseCountryField(item['artist_country']))}`,
+        url: item['artist_url'],
         image: `/${item[groupByType]}`,
         type: groupByType === 'artist_art' ? 'artist' : groupByType === 'album_art' ? 'album' : groupByType,
         genre: genreMapping[item['artist_genres']] || ''
@@ -74,7 +72,7 @@ const buildRecents = (data) => {
   return data.map(listen => ({
     title: listen['track_name'],
     artist: listen['artist_name'],
-    url: `/music/artists/${sanitizeMediaString(listen['artist_name'])}-${sanitizeMediaString(parseCountryField(listen['artist_country']))}`,
+    url: listen['artist_url'],
     timestamp: listen['listened_at'],
     image: `/${listen['album_art']}`
   })).sort((a, b) => b.timestamp - a.timestamp)
@@ -85,8 +83,7 @@ const aggregateGenres = (data, genreMapping) => {
 
   data.forEach(item => {
     const genre = genreMapping[item['artist_genres']] || ''
-
-    if (!genreAggregation[genre]) genreAggregation[genre] = { genre, plays: 0 }
+    if (!genreAggregation[genre]) genreAggregation[genre] = { name: genre, url: item['genre_url'], plays: 0 }
     genreAggregation[genre]['plays']++
   })
   return Object.values(genreAggregation).sort((a, b) => b['plays'] - a['plays'])
@@ -99,12 +96,12 @@ export default async function () {
     artist_name,
     album_name,
     album_key,
-    artist_mbid,
     artist_art,
     artist_genres,
     artist_country,
-    album_mbid,
-    album_art
+    album_art,
+    artist_url,
+    genre_url
   `
 
   try {

src/data/posts.js

@@ -1,6 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import slugify from 'slugify'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env['SUPABASE_URL']
 const SUPABASE_KEY = process.env['SUPABASE_KEY']
@@ -110,34 +108,27 @@ const processPosts = async (posts, tagsByPostId, blocksByPostId) => {
     })).then(blocks => blocks.filter(block => block !== null))
 
     // artists
-    post['artists'] = post['artists']?.[0]?.['id'] ? post['artists'].map(artist => {
-      artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-      return artist
-    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null
+    post['artists'] = post['artists'] ? post['artists'].sort((a, b) => a['name'].localeCompare(b['name'])) : null
 
     // books
-    post['books'] = post['books']?.[0]?.['id'] ? post['books'].map(book => ({
+    post['books'] = post['books'] ? post['books'].map(book => ({
       title: book['title'],
       author: book['author'],
-      isbn: book['isbn'],
       description: book['description'],
       url: `/books/${book['isbn']}`,
     })).sort((a, b) => a['title'].localeCompare(b['title'])) : null
 
     // movies
-    post['movies'] = post['movies']?.[0]?.['id'] ? post['movies'].map(movie => {
+    post['movies'] = post['movies'] ? post['movies'].map(movie => {
       movie['url'] = `/watching/movies/${movie['tmdb_id']}`
       return movie
     }).sort((a, b) => b['year'] - a['year']) : null
 
     // genres
-    post['genres'] = post['genres']?.[0]?.['id'] ? post['genres'].map(genre => {
-      genre['url'] = `/music/genres/${slugify(genre['name'].replace('/', '-').toLowerCase())}`
-      return genre
-    }).sort((a, b) => a['name'].localeCompare(b['name'])) : null
+    post['genres'] = post['genres'] ? post['genres'].sort((a, b) => a['name'].localeCompare(b['name'])) : null
 
     // shows
-    post['shows'] = post['shows']?.[0]?.['id'] ? post['shows'].map(show => {
+    post['shows'] = post['shows'] ? post['shows'].map(show => {
       show['url'] = `/watching/shows/${show['tmdb_id']}`
       return show
     }).sort((a, b) => b['year'] - a['year']) : null

src/data/tv.js

@@ -1,5 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import { sanitizeMediaString, parseCountryField } from '../../config/utilities/index.js'
 
 const SUPABASE_URL = process.env.SUPABASE_URL
 const SUPABASE_KEY = process.env.SUPABASE_KEY
@@ -56,35 +55,27 @@ const prepareShowData = (show) => ({
   episodes: show['episodes'] || [],
   tattoo: show['tattoo'],
   tags: Array.isArray(show['tags']) ? show['tags'] : show['tags']?.split(',') || [],
-  movies: show['movies']?.[0]?.['id'] ? show['movies'].map(movie => {
+  movies: show['movies'] ? show['movies'].map(movie => {
     movie['url'] = `/watching/movies/${movie['tmdb_id']}`
     return movie
   }).sort((a, b) => b['year'] - a['year']) : null,
-  books: show['books']?.[0]?.['id'] ? show['books'].map(book => ({
+  books: show['books'] ? show['books'].map(book => ({
     title: book['title'],
     author: book['author'],
-    isbn: book['isbn'],
     description: book['description'],
     url: `/books/${book['isbn']}`,
   })).sort((a, b) => a['title'].localeCompare(b['title'])) : null,
-  posts: show['posts']?.[0]?.['id'] ? show['posts'].map(post => ({
-    id: post['id'],
+  posts: show['posts'] ? show['posts'].map(post => ({
     title: post['title'],
     date: post['date'],
-    slug: post['slug'],
-    url: post['slug'],
+    url: post['url'],
   })).sort((a, b) => new Date(b['date']) - new Date(a['date'])) : null,
-  relatedShows: show['related_shows']?.[0]?.['id'] ? show['related_shows'].map(relatedShow => ({
-    id: relatedShow['id'],
+  relatedShows: show['related_shows'] ? show['related_shows'].map(relatedShow => ({
     title: relatedShow['title'],
     year: relatedShow['year'],
-    tmdb_id: relatedShow['tmdb_id'],
     url: `/watching/shows/${relatedShow['tmdb_id']}`,
   })).sort((a, b) => b['year'] - a['year']) : null,
-  artists: show['artists']?.[0]?.['id'] ? show['artists'].map(artist => {
-    artist['url'] = `/music/artists/${sanitizeMediaString(artist['name'])}-${sanitizeMediaString(parseCountryField(artist['country']))}`
-    return artist
-  }).sort((a, b) => a['name'].localeCompare(b['name'])) : null, // Add artists processing
+  artists: show['artists'] ? show['artists'].sort((a, b) => a['name'].localeCompare(b['name'])) : null
 })
 
 const prepareEpisodeData = (show) => show['episodes'].map(episode => ({

src/includes/partials/blocks/avatar.liquid

@@ -1,22 +0,0 @@
-<div class="avatar-wrapper">
-  <div class="interior">
-    <img
-      srcset="
-        https://cdn.coryd.dev/{{ image }}?class=squaresm 200w,
-        https://cdn.coryd.dev/{{ image }}?class=squaremd 400w,
-        https://cdn.coryd.dev/{{ image }}?class=squarebase 800w,
-        https://cdn.coryd.dev/{{ image }}?class=squarelg 1200w
-      "
-      sizes="(max-width: 450px) 200px,
-        (max-width: 850px) 400px,
-        (max-width: 1000px) 800px,
-        1200px"
-      src="https://cdn.coryd.dev/{{ image }}?class=squarelg"
-      alt="{{ alt }}"
-      loading="eager"
-      decoding="async"
-      width="600"
-      height="600"
-    />
-  </div>
-</div>

src/includes/partials/blocks/mastodon-post.liquid

@@ -0,0 +1,23 @@
+{%- if post -%}
+<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
+<template id="mastodon-post-template">
+  <blockquote data-key="content"></blockquote>
+  <dl>
+    <dt>{% tablericon "refresh" %}</dt>
+    <dd data-key="reblogs_count"></dd>
+    <dt>{% tablericon "message-circle" %}</dt>
+    <dd data-key="replies_count"></dd>
+    <dt>{% tablericon "star" %}</dt>
+    <dd data-key="favourites_count"></dd>
+  </dl>
+</template>
+<span class="client-side">
+  <div class="mastodon-post-wrapper">
+    <mastodon-post>
+      <a href="{{ post }}">
+        Discuss on Mastodon
+      </a>
+    </mastodon-post>
+  </div>
+</span>
+{%- endif -%}

src/includes/partials/home/recent-posts.liquid

@@ -11,7 +11,7 @@
       </time>
     </div>
     <h3>
-      <a href="{{ post.slug }}">{{ post.title }}</a>
+      <a href="{{ post.url }}">{{ post.title }}</a>
     </h3>
     {{ post.description | normalize_whitespace | markdown | truncatewords: 50 }}
   </article>

src/pages/dynamic/books/book.html

@@ -5,7 +5,6 @@ pagination:
   size: 1
   alias: book
 permalink: "{{ book.url }}/index.html"
-isbn: {{ book.isbn }}
 schema: book
 ---
 {%- capture alt -%}

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

src/pages/dynamic/music/artists/artist.html

@@ -51,8 +51,8 @@ schema: artist
         <p class="sub-meta"><strong class="highlight-text">{{ artist.totalPlays | formatNumber }} {{ playLabel }}</strong></p>
       {%- endif -%}
       <p class="sub-meta">
-        <a href="/music/genres/{{ artist.genre | replace: '/', '-' | slugify | downcase }}" title="Learn more about {{ artist.genre | escape }}">
-          {{ artist.genre }}
+        <a href="{{ artist.genre.url }}" title="Learn more about {{ artist.genre.name | escape }}">
+          {{ artist.genre.name }}
         </a>
       </p>
     </div>

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

src/pages/dynamic/music/index.html

@@ -7,7 +7,7 @@ updated: "now"
 schema: music-index
 ---
 <h2>{{ title }}</h2>
-<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 {% render "partials/blocks/now-playing.liquid", music:music %}

src/pages/dynamic/music/periods/3-months.html

@@ -8,7 +8,7 @@ image: music.threeMonth.artists[0].image
 schema: music-period
 ---
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/three-months/">artists</a>, <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

src/pages/dynamic/music/periods/this-month.html

@@ -8,7 +8,7 @@ image: music.month.artists[0].image
 schema: music-period
 ---
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-month/">artists</a>, <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> I've listened to this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months. Most of that has been {{ music.threeMonth.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> I've listened to over the last 3 months. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/this-month">this month</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month. Most of that has been {{ music.month.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> this month. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music">this week</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

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

@@ -12,7 +12,7 @@ schema: music
 <a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
 {% if pagination.pageNumber == 0 %}
 <h2>{{ title }}</h2>
-<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
+<p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See the</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
 <hr />

src/pages/dynamic/posts/index.html

@@ -16,7 +16,7 @@ permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}
     </time>
   </div>
   <h3>
-    <a href="{{ post.slug }}">{{ post.title }}</a>
+    <a href="{{ post.url }}">{{ post.title }}</a>
   </h3>
   <p>{{ post.description | markdown }}</p>
 </article>

src/pages/dynamic/posts/post.html

@@ -4,7 +4,7 @@ pagination:
   data: posts
   size: 1
   alias: post
-permalink: "{{ post.slug }}/index.html"
+permalink: "{{ post.url }}/index.html"
 schema: blog
 ---
 <article class="standalone">
@@ -41,6 +41,7 @@ schema: blog
     />
     {%- endif -%}
     {{ post.content | markdown }}
+    {% render "partials/blocks/mastodon-post.liquid", post:post.mastodon_url %}
     {% render "partials/blocks/index.liquid", blocks:post.blocks %}
     {% render "partials/blocks/associated-media.liquid", artists:post.artists %}
     {% render "partials/blocks/associated-media.liquid", books:post.books %}

workers/mastodon/index.js

@@ -1,5 +1,8 @@
 import { XMLParser } from 'fast-xml-parser'
 import { convert } from 'html-to-text'
+import { createClient } from '@supabase/supabase-js'
+
+const BASE_URL = 'https://coryd.dev'
 
 export default {
   async scheduled(event, env, ctx) {
@@ -20,6 +23,9 @@ async function handleMastodonPost(env) {
   const mastodonApiUrl = 'https://follow.coryd.dev/api/v1/statuses'
   const accessToken = env.MASTODON_ACCESS_TOKEN
   const rssFeedUrl = 'https://coryd.dev/feeds/all'
+  const supabaseUrl = env.SUPABASE_URL
+  const supabaseKey = env.SUPABASE_KEY
+  const supabase = createClient(supabaseUrl, supabaseKey)
 
   try {
     const latestItems = await fetchRSSFeed(rssFeedUrl)
@@ -47,13 +53,18 @@ async function handleMastodonPost(env) {
       const cleanedDescription = plainTextDescription.replace(/\s+/g, ' ').trim()
       const content = truncateContent(title, cleanedDescription, link, maxLength)
 
-      await postToMastodon(mastodonApiUrl, accessToken, content)
+      const mastodonPostUrl = await postToMastodon(mastodonApiUrl, accessToken, content)
 
       const timestamp = new Date().toISOString()
 
-      await env.RSS_TO_MASTODON_NAMESPACE.put(item.link, timestamp)
+      await env.RSS_TO_MASTODON_NAMESPACE.put(link, timestamp)
 
-      console.log(`Posted stored URL: ${item.link}`)
+      if (link.includes('coryd.dev/posts')) {
+        const slug = link.replace(BASE_URL, '')
+        await addMastodonUrlToPost(supabase, slug, mastodonPostUrl)
+      }
+
+      console.log(`Posted stored URL: ${link}`)
     }
 
     console.log('RSS processed successfully')
@@ -62,6 +73,19 @@ async function handleMastodonPost(env) {
   }
 }
 
+async function addMastodonUrlToPost(supabase, slug, mastodonPostUrl) {
+  const { data, error } = await supabase
+    .from('posts')
+    .update({ mastodon_url: mastodonPostUrl })
+    .eq('slug', slug)
+
+  if (error) {
+    console.error('Error updating post:', error)
+  } else {
+    console.log(`Updated post with Mastodon URL: ${mastodonPostUrl}`)
+  }
+}
+
 function truncateContent(title, description, link, maxLength) {
   const baseLength = `${title}\n\n${link}`.length
   const availableSpace = maxLength - baseLength - 4
@@ -106,5 +130,9 @@ async function postToMastodon(apiUrl, accessToken, content) {
     throw new Error(`Error posting to Mastodon: ${response.statusText} - ${errorText}`)
   }
 
+  const responseData = await response.json()
+
   console.log('Posted to Mastodon successfully.')
+
+  return responseData.url
 }

workers/playing/index.js

@@ -1,26 +1,4 @@
 import { createClient } from '@supabase/supabase-js'
-import slugify from 'slugify'
-
-const sanitizeMediaString = (str) => {
-  const sanitizedString = str.normalize('NFD').replace(/[\u0300-\u036f\u2010—\.\?\(\)\[\]\{\}]/g, '').replace(/\.{3}/g, '')
-
-  return slugify(sanitizedString, {
-    replacement: '-',
-    remove: /[#,&,+()$~%.'":*?<>{}]/g,
-    lower: true,
-  })
-}
-
-const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
-const getCountryName = (countryCode) => regionNames.of(countryCode.trim()) || countryCode.trim()
-const parseCountryField = (countryField) => {
-  if (!countryField) return null
-
-  const delimiters = /[,\/&and]+/
-  const countries = countryField.split(delimiters)
-
-  return countries.map(getCountryName).join(', ')
-}
 
 export default {
   async fetch(request, env) {
@@ -49,7 +27,7 @@ export default {
     const emoji = data.artist_emoji || genreEmoji
 
     return new Response(JSON.stringify({
-      content: `${emoji || '🎧'} ${data.track_name} by <a href="https://coryd.dev/music/artists/${sanitizeMediaString(data.artist_name)}-${sanitizeMediaString(parseCountryField(data.artist_country))}">${data.artist_name}</a>`,
+      content: `${emoji || '🎧'} ${data.track_name} by <a href="https://coryd.dev${data.url}">${data.artist_name}</a>`,
     }), { headers })
   }
 }

workers/scrobble/index.js

@@ -114,6 +114,7 @@ export default {
                 mbid: null,
                 art: '4cef75db-831f-4f5d-9333-79eaa5bb55ee',
                 name: artistName,
+                slug: '/music',
                 tentative: true,
                 total_plays: 0,
               },