fix: genre display

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "18.11.12",
+  "version": "18.11.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "18.11.12",
+      "version": "18.11.13",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",
@@ -3366,9 +3366,9 @@
       "license": "MIT"
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
+      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
       "dev": true,
       "license": "0BSD"
     },

package.json

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

src/_data/music.js

@@ -42,16 +42,15 @@ const fetchGenreMapping = async () => {
     console.error('Error fetching genres:', error)
     return {}
   }
-
   return data.reduce((acc, genre) => {
     acc[genre.id] = genre.name
     return acc
   }, {})
 }
 
-const aggregateData = (data, groupByField, groupByType) => {
+const aggregateData = async (data, groupByField, groupByType) => {
   const aggregation = {}
-  const genreMapping = fetchGenreMapping()
+  const genreMapping = await fetchGenreMapping()
 
   data.forEach(item => {
     const key = item[groupByField]
@@ -65,7 +64,7 @@ const aggregateData = (data, groupByField, groupByType) => {
           image: item['albums']?.['image'] || '',
           timestamp: item['listened_at'],
           type: groupByType,
-          genre: genreMapping[item['artists']['genre']] || ''
+          genre: genreMapping[item['artists']['genres']] || ''
         }
       } else {
         aggregation[key] = {
@@ -75,13 +74,10 @@ const aggregateData = (data, groupByField, groupByType) => {
           url: `/music/artists/${sanitizeMediaString(item['artist_name'])}-${sanitizeMediaString(parseCountryField(item['artists']['country']))}`,
           image: item[groupByType]?.image || '',
           type: groupByType,
-          genre: genreMapping[item['artists']['genre']] || ''
+          genre: genreMapping[item['artists']['genres']] || ''
         }
       }
-      if (
+      if (groupByType === 'track' || groupByType === 'albums') aggregation[key]['artist'] = item['artist_name']
-        groupByType === 'track' ||
-        groupByType === 'albums'
-      ) aggregation[key]['artist'] = item['artist_name']
     }
     aggregation[key].plays++
   })
@@ -95,12 +91,13 @@ const aggregateData = (data, groupByField, groupByType) => {
   return aggregatedData.filter(item => item.plays > 0)
 }
 
-const aggregateGenres = (data) => {
+const aggregateGenres = async (data) => {
   const genreAggregation = {}
-  const genreMapping = fetchGenreMapping()
+  const genreMapping = await fetchGenreMapping()
 
   data.forEach(item => {
-    const genre = genreMapping[item['artists']['genre']] || ''
+    const genre = genreMapping[item['artists']['genres']] || ''
+
     if (!genreAggregation[genre]) genreAggregation[genre] = { genre, plays: 0 }
     genreAggregation[genre]['plays']++
   })
@@ -128,10 +125,10 @@ export default async function() {
   for (const [period, startPeriod] of Object.entries(periods)) {
     const periodData = await fetchDataForPeriod(startPeriod, selectFields, 'listens')
     results[period] = {
-      artists: aggregateData(periodData, 'artist_name', 'artists'),
+      artists: await aggregateData(periodData, 'artist_name', 'artists'),
-      albums: aggregateData(periodData, 'album_name', 'albums'),
+      albums: await aggregateData(periodData, 'album_name', 'albums'),
-      tracks: aggregateData(periodData, 'track_name', 'track'),
+      tracks: await aggregateData(periodData, 'track_name', 'track'),
-      genres: aggregateGenres(periodData),
+      genres: await aggregateGenres(periodData),
       totalTracks: periodData?.length?.toLocaleString('en-US')
     }
   }
@@ -139,11 +136,11 @@ export default async function() {
   const recentData = await fetchDataForPeriod(DateTime.now().minus({ days: 7 }), selectFields, 'listens')
 
   results['recent'] = {
-    artists: aggregateData(recentData, 'artist_name', 'artists'),
+    artists: await aggregateData(recentData, 'artist_name', 'artists'),
-    albums: aggregateData(recentData, 'album_name', 'albums'),
+    albums: await aggregateData(recentData, 'album_name', 'albums'),
-    tracks: aggregateData(recentData, 'track_name', 'track'),
+    tracks: await aggregateData(recentData, 'track_name', 'track'),
-    tracksChronological: aggregateData(recentData, 'track_name', 'track').sort((a, b) => b.timestamp - a.timestamp),
+    tracksChronological: (await aggregateData(recentData, 'track_name', 'track')).sort((a, b) => b.timestamp - a.timestamp),
-    genres: aggregateGenres(recentData),
+    genres: await aggregateGenres(recentData),
     totalTracks: recentData?.length?.toLocaleString('en-US')
   }
   results['nowPlaying'] = results['recent']['tracksChronological'][0]

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

@@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <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 | listToString: "genre", 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 {{ 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/albums/three-months/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}

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

@@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <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 | listToString: "genre", 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 {{ 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/albums/this-month/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}

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

@@ -11,7 +11,7 @@ schema: music
 <a class="back-link-header link-icon flex-centered" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back" %} Go back</a>
 {% if pagination.pageNumber == 0 %}
 <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 | listToString: "genre", 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 {{ 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/albums/this-week/">albums</a> for this period.</p>
 <hr class="large-spacing" />
 {% endif %}