content: generateGroupInfoPage: content function syntax cleanup

2 files changed, 203 insertions, 202 deletions

diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js
index e6b0ded1..956d56d8 100644
--- a/src/content/dependencies/generateGroupInfoPage.js
+++ b/src/content/dependencies/generateGroupInfoPage.js
@@ -1,221 +1,90 @@
-import {empty, stitchArrays} from '#sugar';
-
 export default {
   contentDependencies: [
-    'generateAbsoluteDatetimestamp',
-    'generateColorStyleAttribute',
-    'generateContentHeading',
+    'generateGroupInfoPageAlbumsSection',
     'generateGroupNavLinks',
     'generateGroupSecondaryNav',
     'generateGroupSidebar',
     'generatePageLayout',
-    'linkAlbum',
     'linkExternal',
-    'linkGroupGallery',
-    'linkGroup',
     'transformContent',
   ],
 
   extraDependencies: ['html', 'language', 'wikiData'],
 
-  sprawl({wikiInfo}) {
-    return {
-      enableGroupUI: wikiInfo.enableGroupUI,
-    };
-  },
-
-  query(sprawl, group) {
-    const albums =
-      group.albums;
-
-    const albumGroups =
-      albums
-        .map(album => album.groups);
-
-    const albumOtherCategory =
-      albumGroups
-        .map(groups => groups
-          .map(group => group.category)
-          .find(category => category !== group.category));
-
-    const albumOtherGroups =
-      stitchArrays({
-        groups: albumGroups,
-        category: albumOtherCategory,
-      }).map(({groups, category}) =>
-          groups
-            .filter(group => group.category === category));
-
-    return {albums, albumOtherGroups};
-  },
-
-  relations(relation, query, sprawl, group) {
-    const relations = {};
-    const sec = relations.sections = {};
-
-    relations.layout =
-      relation('generatePageLayout');
+  sprawl: ({wikiInfo}) => ({
+    enableGroupUI:
+      wikiInfo.enableGroupUI,
+  }),
 
-    relations.navLinks =
-      relation('generateGroupNavLinks', group);
+  relations: (relation, sprawl, group) => ({
+    layout:
+      relation('generatePageLayout'),
 
-    if (sprawl.enableGroupUI) {
-      relations.secondaryNav =
-        relation('generateGroupSecondaryNav', group);
+    navLinks:
+      relation('generateGroupNavLinks', group),
 
-      relations.sidebar =
-        relation('generateGroupSidebar', group);
-    }
+    secondaryNav:
+      (sprawl.enableGroupUI
+        ? relation('generateGroupSecondaryNav', group)
+        : null),
 
-    sec.info = {};
+    sidebar:
+      (sprawl.enableGroupUI
+        ? relation('generateGroupSidebar', group)
+        : null),
 
-    sec.info.visitLinks =
+    visitLinks:
       group.urls
-        .map(url => relation('linkExternal', url));
-
-    if (group.description) {
-      sec.info.description =
-        relation('transformContent', group.description);
-    }
-
-    if (!empty(query.albums)) {
-      sec.albums = {};
-
-      sec.albums.heading =
-        relation('generateContentHeading');
-
-      sec.albums.galleryLink =
-        relation('linkGroupGallery', group);
-
-      sec.albums.albumColorStyles =
-        query.albums
-          .map(album => relation('generateColorStyleAttribute', album.color));
-
-      sec.albums.albumLinks =
-        query.albums
-          .map(album => relation('linkAlbum', album));
-
-      sec.albums.otherGroupLinks =
-        query.albumOtherGroups
-          .map(groups => groups
-            .map(group => relation('linkGroup', group)));
-
-      sec.albums.datetimestamps =
-        group.albums.map(album =>
-          (album.date
-            ? relation('generateAbsoluteDatetimestamp', album.date)
-            : null));
-    }
-
-    return relations;
-  },
-
-  data(query, sprawl, group) {
-    const data = {};
-
-    data.name = group.name;
-    data.color = group.color;
-
-    return data;
-  },
-
-  generate(data, relations, {html, language}) {
-    const {sections: sec} = relations;
-
-    return relations.layout
-      .slots({
-        title: language.$('groupInfoPage.title', {group: data.name}),
-        headingMode: 'sticky',
-        color: data.color,
-
-        mainContent: [
-          html.tag('p',
-            {[html.onlyIfContent]: true},
-            language.$('releaseInfo.visitOn', {
-              [language.onlyIfOptions]: ['links'],
-              links:
-                language.formatDisjunctionList(
-                  sec.info.visitLinks
-                    .map(link => link.slot('context', 'group'))),
-            })),
-
-          html.tag('blockquote',
-            {[html.onlyIfContent]: true},
-            sec.info.description
-              ?.slot('mode', 'multiline')),
-
-          sec.albums && [
-            sec.albums.heading
-              .slots({
-                tag: 'h2',
-                title: language.$('groupInfoPage.albumList.title'),
-              }),
-
-            html.tag('p',
-              language.$('groupInfoPage.viewAlbumGallery', {
-                link:
-                  sec.albums.galleryLink
-                    .slot('content', language.$('groupInfoPage.viewAlbumGallery.link')),
-              })),
-
-            html.tag('ul',
-              stitchArrays({
-                albumLink: sec.albums.albumLinks,
-                otherGroupLinks: sec.albums.otherGroupLinks,
-                datetimestamp: sec.albums.datetimestamps,
-                albumColorStyle: sec.albums.albumColorStyles,
-              }).map(({
-                  albumLink,
-                  otherGroupLinks,
-                  datetimestamp,
-                  albumColorStyle,
-                }) => {
-                  const prefix = 'groupInfoPage.albumList.item';
-                  const parts = [prefix];
-                  const options = {};
-
-                  options.album =
-                    albumLink.slot('color', false);
-
-                  if (datetimestamp) {
-                    parts.push('withYear');
-                    options.yearAccent =
-                      language.$(prefix, 'yearAccent', {
-                        year:
-                          datetimestamp.slots({style: 'year', tooltip: true}),
-                      });
-                  }
-
-                  if (!empty(otherGroupLinks)) {
-                    parts.push('withOtherGroup');
-                    options.otherGroupAccent =
-                      html.tag('span', {class: 'other-group-accent'},
-                        language.$(prefix, 'otherGroupAccent', {
-                          groups:
-                            language.formatConjunctionList(
-                              otherGroupLinks.map(groupLink =>
-                                groupLink.slot('color', false))),
-                        }));
-                  }
-
-                  return (
-                    html.tag('li',
-                      albumColorStyle,
-                      language.$(...parts, options)));
-                })),
-          ],
-        ],
-
-        leftSidebar:
-          (relations.sidebar
-            ? relations.sidebar
-                .content /* TODO: Kludge. */
-            : null),
-
-        navLinkStyle: 'hierarchical',
-        navLinks: relations.navLinks.content,
-
-        secondaryNav: relations.secondaryNav ?? null,
-      });
-  },
+        .map(url => relation('linkExternal', url)),
+
+    description:
+      relation('transformContent', group.description),
+
+    albumSection:
+      relation('generateGroupInfoPageAlbumsSection', group),
+  }),
+
+  data: (_sprawl, group) => ({
+    name:
+      group.name,
+
+    color:
+      group.color,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    relations.layout.slots({
+      title: language.$('groupInfoPage.title', {group: data.name}),
+      headingMode: 'sticky',
+      color: data.color,
+
+      mainContent: [
+        html.tag('p',
+          {[html.onlyIfContent]: true},
+          language.$('releaseInfo.visitOn', {
+            [language.onlyIfOptions]: ['links'],
+            links:
+              language.formatDisjunctionList(
+                relations.visitLinks
+                  .map(link => link.slot('context', 'group'))),
+          })),
+
+        html.tag('blockquote',
+          {[html.onlyIfContent]: true},
+          relations.description.slot('mode', 'multiline')),
+
+        relations.albumSection,
+      ],
+
+      leftSidebar:
+        (relations.sidebar
+          ? relations.sidebar
+              .content /* TODO: Kludge. */
+          : null),
+
+      navLinkStyle: 'hierarchical',
+      navLinks: relations.navLinks.content,
+
+      secondaryNav: relations.secondaryNav ?? null,
+    }),
 };
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js
new file mode 100644
index 00000000..d1dab542
--- /dev/null
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js
@@ -0,0 +1,132 @@
+import {empty} from '#sugar';
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateAbsoluteDatetimestamp',
+    'generateColorStyleAttribute',
+    'generateContentHeading',
+    'linkAlbum',
+    'linkGroupGallery',
+    'linkGroup',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  query(group) {
+    const albums =
+      group.albums;
+
+    const albumGroups =
+      albums
+        .map(album => album.groups);
+
+    const albumOtherCategory =
+      albumGroups
+        .map(groups => groups
+          .map(group => group.category)
+          .find(category => category !== group.category));
+
+    const albumOtherGroups =
+      stitchArrays({
+        groups: albumGroups,
+        category: albumOtherCategory,
+      }).map(({groups, category}) =>
+          groups
+            .filter(group => group.category === category));
+
+    return {albums, albumOtherGroups};
+  },
+
+  relations: (relation, query, group) => ({
+    contentHeading:
+      relation('generateContentHeading'),
+
+    galleryLink:
+      relation('linkGroupGallery', group),
+
+    albumColorStyles:
+      query.albums
+        .map(album => relation('generateColorStyleAttribute', album.color)),
+
+    albumLinks:
+      query.albums
+        .map(album => relation('linkAlbum', album)),
+
+    otherGroupLinks:
+      query.albumOtherGroups
+        .map(groups => groups
+          .map(group => relation('linkGroup', group))),
+
+    datetimestamps:
+      group.albums.map(album =>
+        (album.date
+          ? relation('generateAbsoluteDatetimestamp', album.date)
+          : null)),
+  }),
+
+  generate: (relations, {html, language}) =>
+    html.tags([
+      relations.contentHeading
+        .slots({
+          tag: 'h2',
+          title: language.$('groupInfoPage.albumList.title'),
+        }),
+
+      html.tag('p',
+        {[html.onlyIfSiblings]: true},
+        language.$('groupInfoPage.viewAlbumGallery', {
+          link:
+            relations.galleryLink
+              .slot('content', language.$('groupInfoPage.viewAlbumGallery.link')),
+        })),
+
+      html.tag('ul',
+        {[html.onlyIfContent]: true},
+
+        stitchArrays({
+          albumLink: relations.albumLinks,
+          otherGroupLinks: relations.otherGroupLinks,
+          datetimestamp: relations.datetimestamps,
+          albumColorStyle: relations.albumColorStyles,
+        }).map(({
+            albumLink,
+            otherGroupLinks,
+            datetimestamp,
+            albumColorStyle,
+          }) => {
+            const prefix = 'groupInfoPage.albumList.item';
+            const parts = [prefix];
+            const options = {};
+
+            options.album =
+              albumLink.slot('color', false);
+
+            if (datetimestamp) {
+              parts.push('withYear');
+              options.yearAccent =
+                language.$(prefix, 'yearAccent', {
+                  year:
+                    datetimestamp.slots({style: 'year', tooltip: true}),
+                });
+            }
+
+            if (!empty(otherGroupLinks)) {
+              parts.push('withOtherGroup');
+              options.otherGroupAccent =
+                html.tag('span', {class: 'other-group-accent'},
+                  language.$(prefix, 'otherGroupAccent', {
+                    groups:
+                      language.formatConjunctionList(
+                        otherGroupLinks.map(groupLink =>
+                          groupLink.slot('color', false))),
+                  }));
+            }
+
+            return (
+              html.tag('li',
+                albumColorStyle,
+                language.$(...parts, options)));
+          })),
+    ]),
+};