Merge branch 'commentary-sidebar' into preview

3 files changed, 74 insertions, 4 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index 5979ed3f..5c057b80 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -2,10 +2,13 @@ import {stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
+    'generateAlbumSidebarTrackSection',
     'generateAlbumStyleRules',
     'generateColorStyleVariables',
     'generateContentHeading',
+    'generateTrackCoverArtwork',
     'generatePageLayout',
     'linkAlbum',
     'linkTrack',
@@ -30,6 +33,9 @@ export default {
       relation('generateAlbumNavAccent', album, null);
 
     if (album.commentary) {
+      relations.albumCommentaryCover =
+        relation('generateAlbumCoverArtwork', album);
+
       relations.albumCommentaryContent =
         relation('transformContent', album.commentary);
     }
@@ -46,6 +52,13 @@ export default {
       tracksWithCommentary
         .map(track => relation('linkTrack', track));
 
+    relations.trackCommentaryCovers =
+      tracksWithCommentary
+        .map(track =>
+          (track.hasUniqueCoverArt
+            ? relation('generateTrackCoverArtwork', track)
+            : null));
+
     relations.trackCommentaryContent =
       tracksWithCommentary
         .map(track => relation('transformContent', track.commentary));
@@ -57,6 +70,13 @@ export default {
             ? null
             : relation('generateColorStyleVariables')));
 
+    relations.sidebarAlbumLink =
+      relation('linkAlbum', album);
+
+    relations.sidebarTrackSections =
+      album.trackSections.map(trackSection =>
+        relation('generateAlbumSidebarTrackSection', album, null, trackSection));
+
     return relations;
   },
 
@@ -129,6 +149,9 @@ export default {
               {class: ['content-heading']},
               language.$('albumCommentaryPage.entry.title.albumCommentary')),
 
+            relations.albumCommentaryCover
+              ?.slots({mode: 'commentary'}),
+
             html.tag('blockquote',
               relations.albumCommentaryContent),
           ],
@@ -137,15 +160,19 @@ export default {
             heading: relations.trackCommentaryHeadings,
             link: relations.trackCommentaryLinks,
             directory: data.trackCommentaryDirectories,
+            cover: relations.trackCommentaryCovers,
             content: relations.trackCommentaryContent,
             colorVariables: relations.trackCommentaryColorVariables,
             color: data.trackCommentaryColors,
-          }).map(({heading, link, directory, content, colorVariables, color}) => [
+          }).map(({heading, link, directory, cover, content, colorVariables, color}) => [
               heading.slots({
                 tag: 'h3',
                 id: directory,
                 title: link,
               }),
+
+              cover?.slots({mode: 'commentary'}),
+
               html.tag('blockquote',
                 (color
                   ? {style: colorVariables.slot('color', color).content}
@@ -170,6 +197,16 @@ export default {
               }),
           },
         ],
+
+        leftSidebarStickyMode: 'column',
+        leftSidebarContent: [
+          html.tag('h1', relations.sidebarAlbumLink),
+          relations.sidebarTrackSections.map(section =>
+            section.slots({
+              anchor: true,
+              open: true,
+            })),
+        ],
       });
   },
 };
diff --git a/src/content/dependencies/generateAlbumSidebarTrackSection.js b/src/content/dependencies/generateAlbumSidebarTrackSection.js
index d71b0bdb..00e9b621 100644
--- a/src/content/dependencies/generateAlbumSidebarTrackSection.js
+++ b/src/content/dependencies/generateAlbumSidebarTrackSection.js
@@ -33,10 +33,19 @@ export default {
       }
     }
 
+    data.trackDirectories =
+      trackSection.tracks
+        .map(track => track.directory);
+
     return data;
   },
 
-  generate(data, relations, {getColors, html, language}) {
+  slots: {
+    anchor: {type: 'boolean'},
+    open: {type: 'boolean'},
+  },
+
+  generate(data, relations, slots, {getColors, html, language}) {
     const sectionName =
       html.tag('span', {class: 'group-name'},
         (data.isDefaultTrackSection
@@ -59,7 +68,13 @@ export default {
               'current',
           },
           language.$('albumSidebar.trackList.item', {
-            track: trackLink,
+            track:
+              (slots.anchor
+                ? trackLink.slots({
+                    anchor: true,
+                    hash: data.trackDirectories[index],
+                  })
+                : trackLink),
           })));
 
     return html.tag('details',
@@ -67,6 +82,11 @@ export default {
         class: data.includesCurrentTrack && 'current',
 
         open: (
+          // Allow forcing open via a template slot.
+          // This isn't exactly janky, but the rest of this function
+          // kind of is when you contextualize it in a template...
+          slots.open ||
+
           // Leave sidebar track sections collapsed on album info page,
           // since there's already a view of the full track listing
           // in the main content area.
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 4060c6b0..aeba97de 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -32,7 +32,7 @@ export default {
     },
 
     mode: {
-      validate: v => v.is('primary', 'thumbnail'),
+      validate: v => v.is('primary', 'thumbnail', 'commentary'),
       default: 'primary',
     },
   },
@@ -73,6 +73,19 @@ export default {
             square: true,
           });
 
+      case 'commentary':
+        return relations.image
+          .slots({
+            path: slots.path,
+            alt: slots.alt,
+            thumb: 'medium',
+            class: 'commentary-art',
+            reveal: true,
+            link: true,
+            square: true,
+            lazy: true,
+          });
+
       default:
         return html.blank();
     }