content: generateGroupSecondaryNavCategoryPart (dots)

3 files changed, 96 insertions, 94 deletions

diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js
index a4f81313..1d21ab1c 100644
--- a/src/content/dependencies/generateGroupSecondaryNav.js
+++ b/src/content/dependencies/generateGroupSecondaryNav.js
@@ -1,104 +1,20 @@
-import {atOffset} from '#sugar';
-
 export default {
   contentDependencies: [
-    'generateColorStyleAttribute',
-    'generatePreviousNextLinks',
     'generateSecondaryNav',
-    'linkGroupDynamically',
-    'linkListing',
+    'generateGroupSecondaryNavCategoryPart',
   ],
 
-  extraDependencies: ['html', 'language', 'wikiData'],
-
-  sprawl: ({listingSpec, wikiInfo}) => ({
-    groupsByCategoryListing:
-      (wikiInfo.enableListings
-        ? listingSpec
-            .find(l => l.directory === 'groups/by-category')
-        : null),
-  }),
-
-  query(sprawl, group) {
-    const groups = group.category.groups;
-    const index = groups.indexOf(group);
-
-    return {
-      previousGroup:
-        atOffset(groups, index, -1),
-
-      nextGroup:
-        atOffset(groups, index, +1),
-    };
-  },
-
-  relations(relation, query, sprawl, group) {
-    const relations = {};
-
-    relations.secondaryNav =
-      relation('generateSecondaryNav');
-
-    if (sprawl.groupsByCategoryListing) {
-      relations.categoryLink =
-        relation('linkListing', sprawl.groupsByCategoryListing);
-    }
+  relations: (relation, group) => ({
+    secondaryNav:
+      relation('generateSecondaryNav'),
 
-    relations.colorStyle =
-      relation('generateColorStyleAttribute', group.category.color);
-
-    if (query.previousGroup || query.nextGroup) {
-      relations.previousNextLinks =
-        relation('generatePreviousNextLinks');
-    }
-
-    relations.previousGroupLink =
-      (query.previousGroup
-        ? relation('linkGroupDynamically', query.previousGroup)
-        : null);
-
-    relations.nextGroupLink =
-      (query.nextGroup
-        ? relation('linkGroupDynamically', query.nextGroup)
-        : null);
-
-    return relations;
-  },
-
-  data: (query, sprawl, group) => ({
-    categoryName: group.category.name,
+    categoryPart:
+      relation('generateGroupSecondaryNavCategoryPart', group.category, group),
   }),
 
-  generate(data, relations, {html, language}) {
-    const previousNextPart =
-      (relations.previousNextLinks
-        ? relations.previousNextLinks
-            .slots({
-              previousLink: relations.previousGroupLink,
-              nextLink: relations.nextGroupLink,
-              id: true,
-            })
-            .content /* TODO: Kludge. */
-        : null);
-
-    const {categoryLink} = relations;
-
-    categoryLink?.setSlot('content', data.categoryName);
-
-    return relations.secondaryNav.slots({
+  generate: (relations) =>
+    relations.secondaryNav.slots({
       class: 'nav-links-groups',
-      content:
-        (previousNextPart
-          ? html.tag('span', {class: 'nav-link'},
-              relations.colorStyle.slot('context', 'primary-only'),
-
-              [
-                categoryLink?.slot('color', false),
-                `(${language.formatUnitList(previousNextPart)})`,
-              ])
-       : categoryLink
-          ? html.tag('span', {class: 'nav-link'},
-              categoryLink)
-          : html.blank()),
-    });
-  },
+      content: relations.categoryPart,
+    }),
 };
diff --git a/src/content/dependencies/generateGroupSecondaryNavCategoryPart.js b/src/content/dependencies/generateGroupSecondaryNavCategoryPart.js
new file mode 100644
index 00000000..b2adb9f8
--- /dev/null
+++ b/src/content/dependencies/generateGroupSecondaryNavCategoryPart.js
@@ -0,0 +1,79 @@
+import {atOffset} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generateSecondaryNavParentSiblingsPart',
+    'linkGroupDynamically',
+    'linkListing',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl: ({listingSpec, wikiInfo}) => ({
+    groupsByCategoryListing:
+      (wikiInfo.enableListings
+        ? listingSpec
+            .find(l => l.directory === 'groups/by-category')
+        : null),
+  }),
+
+  query(sprawl, category, group) {
+    const groups = category.groups;
+    const index = groups.indexOf(group);
+
+    return {
+      previousGroup:
+        atOffset(groups, index, -1),
+
+      nextGroup:
+        atOffset(groups, index, +1),
+    };
+  },
+
+  relations: (relation, query, sprawl, category, group) => ({
+    parentSiblingsPart:
+      relation('generateSecondaryNavParentSiblingsPart'),
+
+    categoryLink:
+      (sprawl.groupsByCategoryListing
+        ? relation('linkListing', sprawl.groupsByCategoryListing)
+        : null),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', group.category.color),
+
+    previousGroupLink:
+      (query.previousGroup
+        ? relation('linkGroupDynamically', query.previousGroup)
+        : null),
+
+    nextGroupLink:
+      (query.nextGroup
+        ? relation('linkGroupDynamically', query.nextGroup)
+        : null),
+  }),
+
+  data: (_query, _sprawl, category, _group) => ({
+    name: category.name,
+  }),
+
+  generate: (data, relations, {language}) =>
+    relations.parentSiblingsPart.slots({
+      colorStyle: relations.colorStyle,
+      id: true,
+
+      mainLink:
+        (relations.categoryLink
+          ? relations.categoryLink.slots({
+              content: language.sanitize(data.name),
+            })
+          : null),
+
+      previousLink: relations.previousGroupLink,
+      nextLink: relations.nextGroupLink,
+
+      stringsKey: 'groupPage.secondaryNav.category',
+      mainLinkOption: 'category',
+    }),
+};
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 79b4c1b0..853a60f9 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1291,6 +1291,13 @@ groupPage:
   nav:
     group: "Group: {GROUP}"
 
+  secondaryNav:
+    category: >-
+      {CATEGORY}
+
+    category.withPreviousNext: >-
+      {CATEGORY} ({PREVIOUS_NEXT})
+
 #
 # groupInfoPage:
 #   The group info page shows visiting links, the group's full