feat: genre pages

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, {