Merge branch 'album-gallery-nav' into preview

11 files changed, 253 insertions, 122 deletions

diff --git a/src/content/dependencies/generateAlbumGalleryNoTrackArtworksLine.js b/src/content/dependencies/generateAlbumGalleryNoTrackArtworksLine.js
new file mode 100644
index 00000000..ad99cb87
--- /dev/null
+++ b/src/content/dependencies/generateAlbumGalleryNoTrackArtworksLine.js
@@ -0,0 +1,7 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  generate: ({html, language}) =>
+    html.tag('p', {class: 'quick-info'},
+      language.$('albumGalleryPage.noTrackArtworksLine')),
+};
diff --git a/src/content/dependencies/generateAlbumGalleryPage.js b/src/content/dependencies/generateAlbumGalleryPage.js
index b98abc46..f61b1983 100644
--- a/src/content/dependencies/generateAlbumGalleryPage.js
+++ b/src/content/dependencies/generateAlbumGalleryPage.js
@@ -3,8 +3,10 @@ import {compareArrays, stitchArrays} from '#sugar';
 export default {
   contentDependencies: [
     'generateAlbumGalleryCoverArtistsLine',
+    'generateAlbumGalleryNoTrackArtworksLine',
     'generateAlbumGalleryStatsLine',
     'generateAlbumNavAccent',
+    'generateAlbumSecondaryNav',
     'generateAlbumStyleRules',
     'generateCoverGrid',
     'generatePageLayout',
@@ -59,9 +61,17 @@ export default {
     relations.albumNavAccent =
       relation('generateAlbumNavAccent', album, null);
 
+    relations.secondaryNav =
+      relation('generateAlbumSecondaryNav', album);
+
     relations.statsLine =
       relation('generateAlbumGalleryStatsLine', album);
 
+    if (album.tracks.every(track => !track.hasUniqueCoverArt)) {
+      relations.noTrackArtworksLine =
+        relation('generateAlbumGalleryNoTrackArtworksLine');
+    }
+
     if (query.coverArtistsForAllTracks) {
       relations.coverArtistsLine =
         relation('generateAlbumGalleryCoverArtistsLine', query.coverArtistsForAllTracks);
@@ -70,15 +80,25 @@ export default {
     relations.coverGrid =
       relation('generateCoverGrid');
 
-    relations.links =
-      album.tracks.map(track =>
-        relation('linkTrack', track));
+    relations.links = [
+      relation('linkAlbum', album),
 
-    relations.images =
-      album.tracks.map(track =>
-        (track.hasUniqueCoverArt
-          ? relation('image', track.artTags)
-          : relation('image')));
+      ...
+        album.tracks
+          .map(track => relation('linkTrack', track)),
+    ];
+
+    relations.images = [
+      (album.hasCoverArt
+        ? relation('image', album.artTags)
+        : relation('image')),
+
+      ...
+        album.tracks.map(track =>
+          (track.hasUniqueCoverArt
+            ? relation('image', track.artTags)
+            : relation('image'))),
+    ];
 
     return relations;
   },
@@ -89,27 +109,41 @@ export default {
     data.name = album.name;
     data.color = album.color;
 
-    data.names =
-      album.tracks.map(track => track.name);
+    data.names = [
+      album.name,
+      ...album.tracks.map(track => track.name),
+    ];
 
-    data.coverArtists =
-      album.tracks.map(track => {
-        if (query.coverArtistsForAllTracks) {
-          return null;
-        }
+    data.coverArtists = [
+      (album.hasCoverArt
+        ? album.coverArtistContribs.map(({who: artist}) => artist.name)
+        : null),
 
-        if (track.hasUniqueCoverArt) {
-          return track.coverArtistContribs.map(({who: artist}) => artist.name);
-        }
+      ...
+        album.tracks.map(track => {
+          if (query.coverArtistsForAllTracks) {
+            return null;
+          }
 
-        return null;
-      });
+          if (track.hasUniqueCoverArt) {
+            return track.coverArtistContribs.map(({who: artist}) => artist.name);
+          }
+
+          return null;
+        }),
+    ];
 
-    data.paths =
-      album.tracks.map(track =>
-        (track.hasUniqueCoverArt
-          ? ['media.trackCover', track.album.directory, track.directory, track.coverArtFileExtension]
-          : null));
+    data.paths = [
+      (album.hasCoverArt
+        ? ['media.albumCover', album.directory, album.coverArtFileExtension]
+        : null),
+
+      ...
+        album.tracks.map(track =>
+          (track.hasUniqueCoverArt
+            ? ['media.trackCover', track.album.directory, track.directory, track.coverArtFileExtension]
+            : null)),
+    ];
 
     return data;
   },
@@ -131,6 +165,7 @@ export default {
         mainContent: [
           relations.statsLine,
           relations.coverArtistsLine,
+          relations.noTrackArtworksLine,
 
           relations.coverGrid
             .slots({
@@ -172,6 +207,8 @@ export default {
               }),
           },
         ],
+
+        secondaryNav: relations.secondaryNav,
       });
   },
 };
diff --git a/src/content/dependencies/generateAlbumNavAccent.js b/src/content/dependencies/generateAlbumNavAccent.js
index c79219bb..7eb1dac0 100644
--- a/src/content/dependencies/generateAlbumNavAccent.js
+++ b/src/content/dependencies/generateAlbumNavAccent.js
@@ -33,10 +33,8 @@ export default {
       }
     }
 
-    if (album.tracks.some(t => t.hasUniqueCoverArt)) {
-      relations.albumGalleryLink =
-        relation('linkAlbumGallery', album);
-    }
+    relations.albumGalleryLink =
+      relation('linkAlbumGallery', album);
 
     if (album.commentary || album.tracks.some(t => t.commentary)) {
       relations.albumCommentaryLink =
@@ -49,6 +47,7 @@ export default {
   data(album, track) {
     return {
       hasMultipleTracks: album.tracks.length > 1,
+      galleryIsStub: album.tracks.every(t => !t.hasUniqueCoverArt),
       isTrackPage: !!track,
     };
   },
@@ -66,10 +65,11 @@ export default {
     const {content: extraLinks = []} =
       slots.showExtraLinks &&
         {content: [
-          relations.albumGalleryLink?.slots({
-            attributes: {class: slots.currentExtra === 'gallery' && 'current'},
-            content: language.$('albumPage.nav.gallery'),
-          }),
+          (!data.galleryIsStub || slots.currentExtra === 'gallery') &&
+            relations.albumGalleryLink?.slots({
+              attributes: {class: slots.currentExtra === 'gallery' && 'current'},
+              content: language.$('albumPage.nav.gallery'),
+            }),
 
           relations.albumCommentaryLink?.slots({
             attributes: {class: slots.currentExtra === 'commentary' && 'current'},
diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
index 705dec51..8cf36fa4 100644
--- a/src/content/dependencies/generateAlbumSecondaryNav.js
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -5,7 +5,7 @@ export default {
     'generateColorStyleVariables',
     'generatePreviousNextLinks',
     'generateSecondaryNav',
-    'linkAlbum',
+    'linkAlbumDynamically',
     'linkGroup',
     'linkTrack',
   ],
@@ -64,14 +64,14 @@ export default {
         query.adjacentGroupInfo
           .map(({previousAlbum}) =>
             (previousAlbum
-              ? relation('linkAlbum', previousAlbum)
+              ? relation('linkAlbumDynamically', previousAlbum)
               : null));
 
       relations.nextAlbumLinks =
         query.adjacentGroupInfo
           .map(({nextAlbum}) =>
             (nextAlbum
-              ? relation('linkAlbum', nextAlbum)
+              ? relation('linkAlbumDynamically', nextAlbum)
               : null));
     }
 
diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js
index 47239f55..259f5dce 100644
--- a/src/content/dependencies/generateGroupGalleryPage.js
+++ b/src/content/dependencies/generateGroupGalleryPage.js
@@ -11,6 +11,7 @@ export default {
     'generateCoverCarousel',
     'generateCoverGrid',
     'generateGroupNavLinks',
+    'generateGroupSecondaryNav',
     'generateGroupSidebar',
     'generatePageLayout',
     'image',
@@ -20,18 +21,8 @@ export default {
 
   extraDependencies: ['html', 'language', 'wikiData'],
 
-  sprawl({listingSpec, wikiInfo}) {
-    const sprawl = {};
-    sprawl.enableGroupUI = wikiInfo.enableGroupUI;
-
-    if (wikiInfo.enableListings && wikiInfo.enableGroupUI) {
-      sprawl.groupsByCategoryListing =
-        listingSpec
-          .find(l => l.directory === 'groups/by-category');
-    }
-
-    return sprawl;
-  },
+  sprawl: ({wikiInfo}) =>
+    ({enableGroupUI: wikiInfo.enableGroupUI}),
 
   relations(relation, sprawl, group) {
     const relations = {};
@@ -46,15 +37,13 @@ export default {
       relation('generateGroupNavLinks', group);
 
     if (sprawl.enableGroupUI) {
+      relations.secondaryNav =
+        relation('generateGroupSecondaryNav', group);
+
       relations.sidebar =
         relation('generateGroupSidebar', group);
     }
 
-    if (sprawl.groupsByCategoryListing) {
-      relations.groupListingLink =
-        relation('linkListing', sprawl.groupsByCategoryListing);
-    }
-
     const carouselAlbums = filterItemsForCarousel(group.featuredAlbums);
 
     if (!empty(carouselAlbums)) {
@@ -160,15 +149,6 @@ export default {
                 })),
             })),
 
-          relations.groupListingLink &&
-            html.tag('p',
-              {class: 'quick-info'},
-              language.$('groupGalleryPage.anotherGroupLine', {
-                link:
-                  relations.groupListingLink
-                    .slot('content', language.$('groupGalleryPage.anotherGroupLine.link')),
-              })),
-
           relations.coverGrid
             .slots({
               links: relations.gridLinks,
@@ -208,6 +188,9 @@ export default {
           relations.navLinks
             .slot('currentExtra', 'gallery')
             .content,
+
+        secondaryNav:
+          relations.secondaryNav ?? null,
       });
   },
 };
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js
index e162a26a..0583755e 100644
--- a/src/content/dependencies/generateGroupInfoPage.js
+++ b/src/content/dependencies/generateGroupInfoPage.js
@@ -4,6 +4,7 @@ export default {
   contentDependencies: [
     'generateContentHeading',
     'generateGroupNavLinks',
+    'generateGroupSecondaryNav',
     'generateGroupSidebar',
     'generatePageLayout',
     'linkAlbum',
@@ -32,6 +33,9 @@ export default {
       relation('generateGroupNavLinks', group);
 
     if (sprawl.enableGroupUI) {
+      relations.secondaryNav =
+        relation('generateGroupSecondaryNav', group);
+
       relations.sidebar =
         relation('generateGroupSidebar', group);
     }
@@ -161,6 +165,8 @@ export default {
 
         navLinkStyle: 'hierarchical',
         navLinks: relations.navLinks.content,
+
+        secondaryNav: relations.secondaryNav ?? null,
       });
   },
 };
diff --git a/src/content/dependencies/generateGroupNavLinks.js b/src/content/dependencies/generateGroupNavLinks.js
index 68341e0a..5cde2ab4 100644
--- a/src/content/dependencies/generateGroupNavLinks.js
+++ b/src/content/dependencies/generateGroupNavLinks.js
@@ -2,10 +2,8 @@ import {empty} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generatePreviousNextLinks',
     'linkGroup',
     'linkGroupGallery',
-    'linkGroupExtra',
   ],
 
   extraDependencies: ['html', 'language', 'wikiData'],
@@ -28,24 +26,6 @@ export default {
     relations.mainLink =
       relation('linkGroup', group);
 
-    relations.previousNextLinks =
-      relation('generatePreviousNextLinks');
-
-    const groups = sprawl.groupCategoryData
-      .flatMap(category => category.groups);
-
-    const index = groups.indexOf(group);
-
-    if (index > 0) {
-      relations.previousLink =
-        relation('linkGroupExtra', groups[index - 1]);
-    }
-
-    if (index < groups.length - 1) {
-      relations.nextLink =
-        relation('linkGroupExtra', groups[index + 1]);
-    }
-
     relations.infoLink =
       relation('linkGroup', group);
 
@@ -80,26 +60,6 @@ export default {
       ];
     }
 
-    const previousNextLinks =
-      (relations.previousLink || relations.nextLink) &&
-        relations.previousNextLinks.slots({
-          previousLink:
-            relations.previousLink
-              ?.slot('extra', slots.currentExtra)
-              ?.content
-            ?? null,
-          nextLink:
-            relations.nextLink
-              ?.slot('extra', slots.currentExtra)
-              ?.content
-            ?? null,
-        });
-
-    const previousNextPart =
-      previousNextLinks &&
-        language.formatUnitList(
-          previousNextLinks.content.filter(Boolean));
-
     const infoLink =
       relations.infoLink.slots({
         attributes: {class: slots.currentExtra === null && 'current'},
@@ -119,7 +79,9 @@ export default {
         : language.formatUnitList([infoLink, ...extraLinks]));
 
     const accent =
-      `(${[extrasPart, previousNextPart].filter(Boolean).join('; ')})`;
+      (extrasPart
+        ? `(${extrasPart})`
+        : null);
 
     return [
       {auto: 'home'},
diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js
new file mode 100644
index 00000000..e3b28099
--- /dev/null
+++ b/src/content/dependencies/generateGroupSecondaryNav.js
@@ -0,0 +1,99 @@
+export default {
+  contentDependencies: [
+    'generateColorStyleVariables',
+    'generatePreviousNextLinks',
+    'generateSecondaryNav',
+    'linkGroupDynamically',
+    'linkListing',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl: ({listingSpec, wikiInfo}) => ({
+    groupsByCategoryListing:
+      (wikiInfo.enableListings
+        ? listingSpec
+            .find(l => l.directory === 'groups/by-category')
+        : null),
+  }),
+
+  query(sprawl, group) {
+    const groups = group.category.groups;
+    const index = groups.indexOf(group);
+
+    return {
+      previousGroup:
+        (index > 0
+          ? groups[index - 1]
+          : null),
+
+      nextGroup:
+        (index < groups.length - 1
+          ? groups[index + 1]
+          : null),
+    };
+  },
+
+  relations(relation, query, sprawl, _group) {
+    const relations = {};
+
+    relations.secondaryNav =
+      relation('generateSecondaryNav');
+
+    if (sprawl.groupsByCategoryListing) {
+      relations.categoryLink =
+        relation('linkListing', sprawl.groupsByCategoryListing);
+    }
+
+    relations.colorVariables =
+      relation('generateColorStyleVariables');
+
+    if (query.previousGroup || query.nextGroup) {
+      relations.previousNextLinks =
+        relation('generatePreviousNextLinks');
+    }
+
+    relations.previousGroupLink =
+      (query.previousGroup
+        ? relation('linkGroupDynamically', query.previousGroup)
+        : null);
+
+    relations.nextGroupLink =
+      (query.nextGroup
+        ? relation('linkGroupDynamically', query.nextGroup)
+        : null);
+
+    return relations;
+  },
+
+  data: (query, sprawl, group) => ({
+    categoryName: group.category.name,
+    categoryColor: group.category.color,
+  }),
+
+  generate(data, relations, {html, language}) {
+    const {content: previousNextPart} =
+      relations.previousNextLinks.slots({
+        previousLink: relations.previousGroupLink,
+        nextLink: relations.nextGroupLink,
+        id: true,
+      });
+
+    const {categoryLink} = relations;
+
+    categoryLink?.setSlot('content', data.categoryName);
+
+    return relations.secondaryNav.slots({
+      class: 'nav-links-groups',
+      content:
+        (!relations.previousGroupLink && !relations.nextGroupLink
+          ? categoryLink
+          : html.tag('span',
+              {style: relations.colorVariables.slot('color', data.categoryColor).content},
+              [
+                categoryLink.slot('color', false),
+                `(${language.formatUnitList(previousNextPart)})`,
+              ])),
+    });
+  },
+};
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 5377f80d..cd831ba7 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -394,6 +394,10 @@ export default {
 
     const sidebarLeftHTML = generateSidebarHTML('leftSidebar', 'sidebar-left');
     const sidebarRightHTML = generateSidebarHTML('rightSidebar', 'sidebar-right');
+
+    const hasSidebarLeft = !html.isBlank(sidebarLeftHTML);
+    const hasSidebarRight = !html.isBlank(sidebarRightHTML);
+
     const collapseSidebars = slots.leftSidebarCollapse && slots.rightSidebarCollapse;
 
     const hasID = (() => {
@@ -422,20 +426,20 @@ export default {
             processSkippers([
               {condition: true, id: 'content', string: 'content'},
               {
-                condition: !html.isBlank(sidebarLeftHTML),
+                condition: hasSidebarLeft,
                 id: 'sidebar-left',
                 string:
-                  (html.isBlank(sidebarRightHTML)
-                    ? 'sidebar'
-                    : 'sidebar.left'),
+                  (hasSidebarRight
+                    ? 'sidebar.left'
+                    : 'sidebar'),
               },
               {
-                condition: !html.isBlank(sidebarRightHTML),
+                condition: hasSidebarRight,
                 id: 'sidebar-right',
                 string:
-                  (html.isBlank(sidebarLeftHTML)
-                    ? 'sidebar'
-                    : 'sidebar.right'),
+                  (hasSidebarLeft
+                    ? 'sidebar.right'
+                    : 'sidebar'),
               },
               {condition: navHTML, id: 'header', string: 'header'},
               {condition: footerHTML, id: 'footer', string: 'footer'},
@@ -507,11 +511,6 @@ export default {
           class: [
             'layout-columns',
             !collapseSidebars && 'vertical-when-thin',
-            (sidebarLeftHTML || sidebarRightHTML) && 'has-one-sidebar',
-            (sidebarLeftHTML && sidebarRightHTML) && 'has-two-sidebars',
-            !(sidebarLeftHTML || sidebarRightHTML) && 'has-zero-sidebars',
-            sidebarLeftHTML && 'has-sidebar-left',
-            sidebarRightHTML && 'has-sidebar-right',
           ],
         },
         [
@@ -609,7 +608,7 @@ export default {
 
             html.tag('link', {
               rel: 'stylesheet',
-              href: to('shared.staticFile', 'site4.css', cachebust),
+              href: to('shared.staticFile', 'site5.css', cachebust),
             }),
 
             html.tag('style', [
@@ -624,12 +623,22 @@ export default {
           ]),
 
           html.tag('body',
-            // {style: body.style || ''},
             [
-              html.tag('div', {id: 'page-container'}, [
-                skippersHTML,
-                layoutHTML,
-              ]),
+              html.tag('div',
+                {
+                  id: 'page-container',
+                  class: [
+                    (hasSidebarLeft || hasSidebarRight) && 'has-one-sidebar',
+                    (hasSidebarLeft && hasSidebarRight) && 'has-two-sidebars',
+                    !(hasSidebarLeft || hasSidebarRight) && 'has-zero-sidebars',
+                    hasSidebarLeft && 'has-sidebar-left',
+                    hasSidebarRight && 'has-sidebar-right',
+                  ],
+                },
+                [
+                  skippersHTML,
+                  layoutHTML,
+                ]),
 
               // infoCardHTML,
               imageOverlayHTML,
diff --git a/src/content/dependencies/linkAlbumDynamically.js b/src/content/dependencies/linkAlbumDynamically.js
new file mode 100644
index 00000000..3adc64df
--- /dev/null
+++ b/src/content/dependencies/linkAlbumDynamically.js
@@ -0,0 +1,14 @@
+export default {
+  contentDependencies: ['linkAlbumGallery', 'linkAlbum'],
+  extraDependencies: ['pagePath'],
+
+  relations: (relation, album) => ({
+    galleryLink: relation('linkAlbumGallery', album),
+    infoLink: relation('linkAlbum', album),
+  }),
+
+  generate: (relations, {pagePath}) =>
+    (pagePath[0] === 'albumGallery'
+      ? relations.galleryLink
+      : relations.infoLink),
+};
diff --git a/src/content/dependencies/linkGroupDynamically.js b/src/content/dependencies/linkGroupDynamically.js
new file mode 100644
index 00000000..90303ed1
--- /dev/null
+++ b/src/content/dependencies/linkGroupDynamically.js
@@ -0,0 +1,14 @@
+export default {
+  contentDependencies: ['linkGroupGallery', 'linkGroup'],
+  extraDependencies: ['pagePath'],
+
+  relations: (relation, group) => ({
+    galleryLink: relation('linkGroupGallery', group),
+    infoLink: relation('linkGroup', group),
+  }),
+
+  generate: (relations, {pagePath}) =>
+    (pagePath[0] === 'groupGallery'
+      ? relations.galleryLink
+      : relations.infoLink),
+};