content: generateWikiHomePage: update sidebar slotting

2 files changed, 59 insertions, 46 deletions

diff --git a/src/content/dependencies/generateWikiHomeNewsBox.js b/src/content/dependencies/generateWikiHomeNewsBox.js
index f592ab99..e054edda 100644
--- a/src/content/dependencies/generateWikiHomeNewsBox.js
+++ b/src/content/dependencies/generateWikiHomeNewsBox.js
@@ -1,48 +1,51 @@
 import {empty, stitchArrays} from '#sugar';
 
 export default {
-  contentDependencies: ['linkNewsEntry', 'transformContent'],
+  contentDependencies: [
+    'generatePageSidebarBox',
+    'linkNewsEntry',
+    'transformContent',
+  ],
+
   extraDependencies: ['html', 'language', 'wikiData'],
 
-  sprawl({newsData}) {
-    return {
-      entries: newsData.slice(0, 3),
-    };
-  },
+  sprawl: ({newsData}) => ({
+    entries:
+      newsData.slice(0, 3),
+  }),
 
-  relations(relation, sprawl) {
-    return {
-      entryContents:
-        sprawl.entries
-          .map(entry => relation('transformContent', entry.contentShort)),
+  relations: (relation, sprawl) => ({
+    box:
+      relation('generatePageSidebarBox'),
 
-      entryMainLinks:
-        sprawl.entries
-          .map(entry => relation('linkNewsEntry', entry)),
+    entryContents:
+      sprawl.entries
+        .map(entry => relation('transformContent', entry.contentShort)),
 
-      entryReadMoreLinks:
-        sprawl.entries
-          .map(entry =>
-            entry.contentShort !== entry.content &&
-              relation('linkNewsEntry', entry)),
-    };
-  },
+    entryMainLinks:
+      sprawl.entries
+        .map(entry => relation('linkNewsEntry', entry)),
 
-  data(sprawl) {
-    return {
-      entryDates:
-        sprawl.entries
-          .map(entry => entry.date),
-    }
-  },
+    entryReadMoreLinks:
+      sprawl.entries
+        .map(entry =>
+          entry.contentShort !== entry.content &&
+            relation('linkNewsEntry', entry)),
+  }),
+
+  data: (sprawl) => ({
+    entryDates:
+      sprawl.entries
+        .map(entry => entry.date),
+  }),
 
   generate(data, relations, {html, language}) {
     if (empty(relations.entryContents)) {
       return html.blank();
     }
 
-    return {
-      class: 'latest-news-sidebar-box',
+    return relations.box.slots({
+      attributes: {class: 'latest-news-sidebar-box'},
       content: [
         html.tag('h1', language.$('homepage.news.title')),
 
@@ -77,6 +80,6 @@ export default {
                     })),
               ])),
       ],
-    };
+    });
   },
 };
diff --git a/src/content/dependencies/generateWikiHomePage.js b/src/content/dependencies/generateWikiHomePage.js
index 36fcc6f2..35461d03 100644
--- a/src/content/dependencies/generateWikiHomePage.js
+++ b/src/content/dependencies/generateWikiHomePage.js
@@ -1,6 +1,8 @@
 export default {
   contentDependencies: [
     'generatePageLayout',
+    'generatePageSidebar',
+    'generatePageSidebarBox',
     'generateWikiHomeAlbumsRow',
     'generateWikiHomeNewsBox',
     'transformContent',
@@ -22,7 +24,13 @@ export default {
     relations.layout =
       relation('generatePageLayout');
 
+    relations.sidebar =
+      relation('generatePageSidebar');
+
     if (homepageLayout.sidebarContent) {
+      relations.customSidebarBox =
+        relation('generatePageSidebarBox');
+
       relations.customSidebarContent =
         relation('transformContent', homepageLayout.sidebarContent);
     }
@@ -69,21 +77,23 @@ export default {
         relations.contentRows,
       ],
 
-      leftSidebarCollapse: false,
-      leftSidebarWide: true,
-
-      leftSidebarMultiple: [
-        (relations.customSidebarContent
-          ? {
-              class: 'custom-content-sidebar-box',
-              content:
-                relations.customSidebarContent
-                  .slot('mode', 'multiline'),
-            }
-          : null),
-
-        relations.newsSidebarBox ?? null,
-      ],
+      leftSidebar:
+        relations.sidebar.slots({
+          collapse: false,
+          wide: true,
+
+          boxes: [
+            relations.customSidebarContent &&
+              relations.customSidebarBox.slots({
+                attributes: {class: 'custom-content-sidebar-box'},
+                content:
+                  relations.customSidebarContent
+                    .slot('mode', 'multiline'),
+              }),
+
+            relations.newsSidebarBox,
+          ],
+        }),
 
       navLinkStyle: 'index',
       navLinks: [