3 files changed, 80 insertions, 37 deletions
diff --git a/src/content/dependencies/listGroupsByCategory.js b/src/content/dependencies/listGroupsByCategory.js
new file mode 100644
index 00000000..84a895f6
--- /dev/null
+++ b/src/content/dependencies/listGroupsByCategory.js
@@ -0,0 +1,76 @@
+import {stitchArrays} from '../../util/sugar.js';
+
+export default {
+  contentDependencies: ['generateListingPage', 'linkGroup', 'linkGroupGallery'],
+  extraDependencies: ['language', 'wikiData'],
+
+  sprawl({groupCategoryData}) {
+    return {groupCategoryData};
+  },
+
+  query({groupCategoryData}, spec) {
+    return {
+      spec,
+      groupCategories: groupCategoryData,
+    };
+  },
+
+  relations(relation, query) {
+    return {
+      page: relation('generateListingPage', query.spec),
+
+      categoryLinks:
+        query.groupCategories
+          .map(category => relation('linkGroup', category.groups[0])),
+
+      infoLinks:
+        query.groupCategories
+          .map(category =>
+            category.groups
+              .map(group => relation('linkGroup', group))),
+
+      galleryLinks:
+        query.groupCategories
+          .map(category =>
+            category.groups
+              .map(group => relation('linkGroupGallery', group)))
+    };
+  },
+
+  data(query) {
+    return {
+      categoryNames:
+        query.groupCategories
+          .map(category => category.name),
+    };
+  },
+
+  generate(data, relations, {language}) {
+    return relations.page.slots({
+      type: 'chunks',
+
+      chunkTitles:
+        stitchArrays({
+          link: relations.categoryLinks,
+          name: data.categoryNames,
+        }).map(({link, name}) => ({
+            category: link.slot('content', name),
+          })),
+
+      chunkRows:
+        stitchArrays({
+          infoLinks: relations.infoLinks,
+          galleryLinks: relations.galleryLinks,
+        }).map(({infoLinks, galleryLinks}) =>
+            stitchArrays({
+              infoLink: infoLinks,
+              galleryLink: galleryLinks,
+            }).map(({infoLink, galleryLink}) => ({
+                group: infoLink,
+                gallery:
+                  galleryLink
+                    .slot('content', language.$('listingPage.listGroups.byCategory.chunk.item.gallery')),
+              }))),
+    });
+  },
+};
diff --git a/src/listing-spec.js b/src/listing-spec.js
index 88b0d9b4..06b20884 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -96,41 +96,8 @@ listingSpec.push({
 listingSpec.push({
   directory: 'groups/by-category',
   stringsKey: 'listGroups.byCategory',
+  contentFunction: 'listGroupsByCategory',
   featureFlag: 'enableGroupUI',
-
-  data: ({wikiData: {groupCategoryData}}) =>
-    groupCategoryData
-      .map(category => ({
-        category,
-        groups: category.groups,
-      })),
-
-  html: (data, {html, language, link}) =>
-    html.tag('dl',
-      data.flatMap(({category, groups}) => [
-        html.tag('dt',
-          {class: ['content-heading']},
-          language.$('listingPage.listGroups.byCategory.category', {
-            category: empty(groups)
-              ? category.name
-              : link.groupInfo(groups[0], {
-                  text: category.name,
-                }),
-          })),
-
-        html.tag('dd',
-          empty(groups)
-            ? null // todo: #85
-            : html.tag('ul',
-                category.groups.map(group =>
-                  html.tag('li',
-                    language.$('listingPage.listGroups.byCategory.group', {
-                      group: link.groupInfo(group),
-                      gallery: link.groupGallery(group, {
-                        text: language.$('listingPage.listGroups.byCategory.group.gallery'),
-                      }),
-                    }))))),
-      ])),
 });
 
 listingSpec.push({
diff --git a/src/strings-default.json b/src/strings-default.json
index 4deeebfa..a6614931 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -386,9 +386,9 @@
   "listingPage.listGroups.byName.item.gallery": "Gallery",
   "listingPage.listGroups.byCategory.title": "Groups - by Category",
   "listingPage.listGroups.byCategory.title.short": "...by Category",
-  "listingPage.listGroups.byCategory.category": "{CATEGORY}",
-  "listingPage.listGroups.byCategory.group": "{GROUP} ({GALLERY})",
-  "listingPage.listGroups.byCategory.group.gallery": "Gallery",
+  "listingPage.listGroups.byCategory.chunk.title": "{CATEGORY}",
+  "listingPage.listGroups.byCategory.chunk.item": "{GROUP} ({GALLERY})",
+  "listingPage.listGroups.byCategory.chunk.item.gallery": "Gallery",
   "listingPage.listGroups.byAlbums.title": "Groups - by Albums",
   "listingPage.listGroups.byAlbums.title.short": "...by Albums",
   "listingPage.listGroups.byAlbums.item": "{GROUP} ({ALBUMS})",