content: generatePageSidebar: always use boxes slot

Removes the 'content' shorthand slot, making the surface of
all sidebars more predictable.

5 files changed, 85 insertions, 66 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index 751a0c91..7879269f 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -2,15 +2,14 @@ import {empty, stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateAlbumCommentarySidebar',
     'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
-    'generateAlbumSidebarTrackSection',
     'generateAlbumStyleRules',
     'generateCommentaryEntry',
     'generateContentHeading',
     'generateTrackCoverArtwork',
     'generatePageLayout',
-    'generatePageSidebar',
     'linkAlbum',
     'linkExternal',
     'linkTrack',
@@ -25,7 +24,7 @@ export default {
       relation('generatePageLayout');
 
     relations.sidebar =
-      relation('generatePageSidebar');
+      relation('generateAlbumCommentarySidebar', album);
 
     relations.albumStyleRules =
       relation('generateAlbumStyleRules', album, null);
@@ -86,13 +85,6 @@ export default {
           track.commentary
             .map(entry => relation('generateCommentaryEntry', entry)));
 
-    relations.sidebarAlbumLink =
-      relation('linkAlbum', album);
-
-    relations.sidebarTrackSections =
-      album.trackSections.map(trackSection =>
-        relation('generateAlbumSidebarTrackSection', album, null, trackSection));
-
     return relations;
   },
 
@@ -253,22 +245,7 @@ export default {
           },
         ],
 
-        leftSidebar:
-          relations.sidebar.slots({
-            attributes: {class: 'commentary-track-list-sidebar-box'},
-
-            stickyMode: 'column',
-
-            content: [
-              html.tag('h1', relations.sidebarAlbumLink),
-              relations.sidebarTrackSections.map(section =>
-                section.slots({
-                  anchor: true,
-                  open: true,
-                  mode: 'commentary',
-                })),
-            ],
-          }),
+        leftSidebar: relations.sidebar,
       });
   },
 };
diff --git a/src/content/dependencies/generateAlbumCommentarySidebar.js b/src/content/dependencies/generateAlbumCommentarySidebar.js
new file mode 100644
index 00000000..435860cb
--- /dev/null
+++ b/src/content/dependencies/generateAlbumCommentarySidebar.js
@@ -0,0 +1,47 @@
+export default {
+  contentDependencies: [
+    'generateAlbumSidebarTrackSection',
+    'generatePageSidebar',
+    'generatePageSidebarBox',
+    'linkAlbum',
+  ],
+
+  extraDependencies: ['html'],
+
+  relations: (relation, album) => ({
+    sidebar:
+      relation('generatePageSidebar'),
+
+    sidebarBox:
+      relation('generatePageSidebarBox'),
+
+    albumLink:
+      relation('linkAlbum', album),
+
+    trackSections:
+      album.trackSections.map(trackSection =>
+        relation('generateAlbumSidebarTrackSection',
+          album,
+          null,
+          trackSection)),
+  }),
+
+  generate: (relations, {html}) =>
+    relations.sidebar.slots({
+      stickyMode: 'column',
+      boxes: [
+        relations.sidebarBox.slots({
+          attributes: {class: 'commentary-track-list-sidebar-box'},
+          content: [
+            html.tag('h1', relations.albumLink),
+            relations.trackSections.map(section =>
+              section.slots({
+                anchor: true,
+                open: true,
+                mode: 'commentary',
+              })),
+          ],
+        }),
+      ]
+    }),
+}
diff --git a/src/content/dependencies/generateGroupSidebar.js b/src/content/dependencies/generateGroupSidebar.js
index 3abb3392..0888cbbe 100644
--- a/src/content/dependencies/generateGroupSidebar.js
+++ b/src/content/dependencies/generateGroupSidebar.js
@@ -2,6 +2,7 @@ export default {
   contentDependencies: [
     'generateGroupSidebarCategoryDetails',
     'generatePageSidebar',
+    'generatePageSidebarBox',
   ],
 
   extraDependencies: ['html', 'language', 'wikiData'],
@@ -12,6 +13,9 @@ export default {
     sidebar:
       relation('generatePageSidebar'),
 
+    sidebarBox:
+      relation('generatePageSidebarBox'),
+
     categoryDetails:
       sprawl.groupCategoryData.map(category =>
         relation('generateGroupSidebarCategoryDetails', category, group)),
@@ -25,15 +29,18 @@ export default {
 
   generate: (relations, slots, {html, language}) =>
     relations.sidebar.slots({
-      attributes: {class: 'category-map-sidebar-box'},
-
-      content: [
-        html.tag('h1',
-          language.$('groupSidebar.title')),
-
-        relations.categoryDetails
-          .map(details =>
-            details.slot('currentExtra', slots.currentExtra)),
+      boxes: [
+        relations.sidebarBox.slots({
+          attributes: {class: 'category-map-sidebar-box'},
+          content: [
+            html.tag('h1',
+              language.$('groupSidebar.title')),
+
+            relations.categoryDetails
+              .map(details =>
+                details.slot('currentExtra', slots.currentExtra)),
+          ],
+        }),
       ],
     }),
 };
diff --git a/src/content/dependencies/generateListingSidebar.js b/src/content/dependencies/generateListingSidebar.js
index 1e5c8bfc..aeac05cf 100644
--- a/src/content/dependencies/generateListingSidebar.js
+++ b/src/content/dependencies/generateListingSidebar.js
@@ -2,6 +2,7 @@ export default {
   contentDependencies: [
     'generateListingIndexList',
     'generatePageSidebar',
+    'generatePageSidebarBox',
     'linkListingIndex',
   ],
 
@@ -11,6 +12,9 @@ export default {
     sidebar:
       relation('generatePageSidebar'),
 
+    sidebarBox:
+      relation('generatePageSidebarBox'),
+
     listingIndexLink:
       relation('linkListingIndex'),
 
@@ -20,10 +24,14 @@ export default {
 
   generate: (relations, {html}) =>
     relations.sidebar.slots({
-      attributes: {class: 'listing-map-sidebar-box'},
-      content: [
-        html.tag('h1', relations.listingIndexLink),
-        relations.listingIndexList.slot('mode', 'sidebar'),
+      boxes: [
+        relations.sidebarBox.slots({
+          attributes: {class: 'listing-map-sidebar-box'},
+          content: [
+            html.tag('h1', relations.listingIndexLink),
+            relations.listingIndexList.slot('mode', 'sidebar'),
+          ],
+        }),
       ],
     }),
 };
diff --git a/src/content/dependencies/generatePageSidebar.js b/src/content/dependencies/generatePageSidebar.js
index a7da3d1d..dda75dd3 100644
--- a/src/content/dependencies/generatePageSidebar.js
+++ b/src/content/dependencies/generatePageSidebar.js
@@ -1,29 +1,16 @@
 export default {
-  contentDependencies: ['generatePageSidebarBox'],
   extraDependencies: ['html'],
 
-  relations: (relation) => ({
-    box:
-      relation('generatePageSidebarBox'),
-  }),
-
   slots: {
-    // Content is a flat HTML array. It'll all be placed into one sidebar box
-    // if specified.
-    content: {
-      type: 'html',
-      mutable: false,
-    },
-
-    // Attributes to apply to the whole sidebar. If specifying multiple
-    // sections, this be added to the containing sidebar-column, arr - specify
-    // attributes on each section if that's more suitable.
+    // Attributes to apply to the whole sidebar. This be added to the
+    // containing sidebar-column, arr - specify attributes on each section if
+    // that's more suitable.
     attributes: {
       type: 'attributes',
       mutable: false,
     },
 
-    // Chunks of content to be split into separate boxes in the sidebar.
+    // Content boxes to line up vertically in the sidebar.
     boxes: {
       type: 'html',
       mutable: false,
@@ -62,7 +49,7 @@ export default {
     },
   },
 
-  generate(relations, slots, {html}) {
+  generate(slots, {html}) {
     const attributes =
       html.attributes({class: [
         'sidebar-column',
@@ -87,17 +74,10 @@ export default {
       attributes.add('class', `sticky-${slots.stickyMode}`);
     }
 
-    const boxes =
-      (!html.isBlank(slots.boxes)
-        ? slots.boxes
-     : !html.isBlank(slots.content)
-        ? relations.box.slot('content', slots.content)
-        : html.blank());
-
-    if (html.isBlank(boxes)) {
+    if (html.isBlank(slots.boxes)) {
       return html.blank();
     } else {
-      return html.tag('div', attributes, boxes);
+      return html.tag('div', attributes, slots.boxes);
     }
   },
 };