content: generateGroupGalleryPage: fresh style, query, etc

2 files changed, 68 insertions, 57 deletions

diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js
index 430f651e..0705d93e 100644
--- a/src/content/dependencies/generateCoverCarousel.js
+++ b/src/content/dependencies/generateCoverCarousel.js
@@ -19,7 +19,7 @@ export default {
       });
 
     if (empty(stitched)) {
-      return;
+      return html.blank();
     }
 
     const layout = getCarouselLayoutForNumberOfItems(stitched.length);
diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js
index d51366ca..2eefd305 100644
--- a/src/content/dependencies/generateGroupGalleryPage.js
+++ b/src/content/dependencies/generateGroupGalleryPage.js
@@ -1,5 +1,5 @@
 import {sortChronologically} from '#sort';
-import {empty, stitchArrays} from '#sugar';
+import {stitchArrays} from '#sugar';
 import {filterItemsForCarousel, getTotalDuration} from '#wiki-data';
 
 export default {
@@ -21,79 +21,91 @@ export default {
   sprawl: ({wikiInfo}) =>
     ({enableGroupUI: wikiInfo.enableGroupUI}),
 
-  relations(relation, sprawl, group) {
-    const relations = {};
+  query(_sprawl, group) {
+    const query = {};
 
-    const albums =
+    query.allAlbums =
       sortChronologically(group.albums.slice(), {latestFirst: true});
 
-    relations.layout =
-      relation('generatePageLayout');
+    query.allTracks =
+      query.allAlbums.flatMap((album) => album.tracks);
 
-    relations.navLinks =
-      relation('generateGroupNavLinks', group);
+    query.carouselAlbums =
+      filterItemsForCarousel(group.featuredAlbums);
 
-    if (sprawl.enableGroupUI) {
-      relations.secondaryNav =
-        relation('generateGroupSecondaryNav', group);
+    return query;
+  },
+
+  relations: (relation, query, sprawl, group) => ({
+    layout:
+      relation('generatePageLayout'),
 
-      relations.sidebar =
-        relation('generateGroupSidebar', group);
-    }
+    navLinks:
+      relation('generateGroupNavLinks', group),
 
-    const carouselAlbums = filterItemsForCarousel(group.featuredAlbums);
+    secondaryNav:
+      (sprawl.enableGroupUI
+        ? relation('generateGroupSecondaryNav', group)
+        : null),
 
-    if (!empty(carouselAlbums)) {
-      relations.coverCarousel =
-        relation('generateCoverCarousel');
+    sidebar:
+      (sprawl.enableGroupUI
+        ? relation('generateGroupSidebar', group)
+        : null),
 
-      relations.carouselLinks =
-        carouselAlbums
-          .map(album => relation('linkAlbum', album));
+    coverCarousel:
+      relation('generateCoverCarousel'),
 
-      relations.carouselImages =
-        carouselAlbums
-          .map(album => relation('image', album.coverArtworks[0]));
-    }
+    carouselLinks:
+      query.carouselAlbums
+        .map(album => relation('linkAlbum', album)),
 
-    relations.quickDescription =
-      relation('generateQuickDescription', group);
+    carouselImages:
+      query.carouselAlbums
+        .map(album => relation('image', album.coverArtworks[0])),
 
-    relations.coverGrid =
-      relation('generateCoverGrid');
+    quickDescription:
+      relation('generateQuickDescription', group),
 
-    relations.gridLinks =
-      albums
-        .map(album => relation('linkAlbum', album));
+    coverGrid:
+      relation('generateCoverGrid'),
 
-    relations.gridImages =
-      albums.map(album =>
+    gridLinks:
+      query.allAlbums
+        .map(album => relation('linkAlbum', album)),
+
+    gridImages:
+      query.allAlbums.map(album =>
         (album.hasCoverArt
           ? relation('image', album.coverArtworks[0])
-          : relation('image')));
+          : relation('image'))),
+  }),
 
-    return relations;
-  },
+  data: (query, _sprawl, group) => ({
+    name:
+      group.name,
 
-  data(sprawl, group) {
-    const data = {};
+    color:
+      group.color,
 
-    data.name = group.name;
-    data.color = group.color;
+    numAlbums:
+      query.allAlbums.length,
 
-    const albums = sortChronologically(group.albums.slice(), {latestFirst: true});
-    const tracks = albums.flatMap((album) => album.tracks);
+    numTracks:
+      query.allTracks.length,
 
-    data.numAlbums = albums.length;
-    data.numTracks = tracks.length;
-    data.totalDuration = getTotalDuration(tracks, {mainReleasesOnly: true});
+    totalDuration:
+      getTotalDuration(query.allTracks, {mainReleasesOnly: true}),
 
-    data.gridNames = albums.map(album => album.name);
-    data.gridDurations = albums.map(album => getTotalDuration(album.tracks));
-    data.gridNumTracks = albums.map(album => album.tracks.length);
+    gridNames:
+      query.allAlbums.map(album => album.name),
 
-    return data;
-  },
+    gridDurations:
+      query.allAlbums.map(album => getTotalDuration(album.tracks)),
+
+    gridNumTracks:
+      query.allAlbums.map(album => album.tracks.length),
+  }),
 
   generate: (data, relations, {html, language}) =>
     language.encapsulate('groupGalleryPage', pageCapsule =>
@@ -105,11 +117,10 @@ export default {
 
         mainClasses: ['top-index'],
         mainContent: [
-          relations.coverCarousel
-            ?.slots({
-              links: relations.carouselLinks,
-              images: relations.carouselImages,
-            }),
+          relations.coverCarousel.slots({
+            links: relations.carouselLinks,
+            images: relations.carouselImages,
+          }),
 
           relations.quickDescription,