content: generateListingPageSameTargetListingsLine preview

2 files changed, 71 insertions, 67 deletions

diff --git a/src/content/dependencies/generateListingPage.js b/src/content/dependencies/generateListingPage.js
index 7ba59979..987008eb 100644
--- a/src/content/dependencies/generateListingPage.js
+++ b/src/content/dependencies/generateListingPage.js
@@ -1,56 +1,36 @@
-import {bindOpts, empty, stitchArrays} from '#sugar';
+import {bindOpts, stitchArrays} from '#sugar';
 
 export default {
-  relations(relation, listing) {
-    const relations = {};
+  relations: (relation, listing) => ({
+    layout:
+      relation('generatePageLayout'),
 
-    relations.layout =
-      relation('generatePageLayout');
+    sidebar:
+      relation('generateListingSidebar', listing),
 
-    relations.sidebar =
-      relation('generateListingSidebar', listing);
+    listingsIndexLink:
+      relation('linkListingIndex'),
 
-    relations.listingsIndexLink =
-      relation('linkListingIndex');
+    chunkHeading:
+      relation('generateContentHeading'),
 
-    relations.chunkHeading =
-      relation('generateContentHeading');
+    showSkipToSectionLinkTemplate:
+      relation('linkTemplate'),
 
-    relations.showSkipToSectionLinkTemplate =
-      relation('linkTemplate');
+    sameTargetListingsLine:
+      (listing.target.listings.length > 1
+        ? relation('generateListingPageSameTargetListingsLine', listing)
+        : null),
 
-    if (listing.target.listings.length > 1) {
-      relations.sameTargetListingLinks =
-        listing.target.listings
-          .map(listing => relation('linkListing', listing));
-    } else {
-      relations.sameTargetListingLinks = [];
-    }
-
-    relations.seeAlsoLinks =
-      (!empty(listing.seeAlso)
-        ? listing.seeAlso
-            .map(listing => relation('linkListing', listing))
-        : []);
-
-    return relations;
-  },
+    seeAlsoLinks:
+      listing.seeAlso
+        .map(listing => relation('linkListing', listing)),
+  }),
 
-  data(listing) {
-    return {
-      stringsKey: listing.stringsKey,
-
-      targetStringsKey: listing.target.stringsKey,
-
-      sameTargetListingStringsKeys:
-        listing.target.listings
-          .map(listing => listing.stringsKey),
-
-      sameTargetListingsCurrentIndex:
-        listing.target.listings
-          .indexOf(listing),
-    };
-  },
+  data: (listing) => ({
+    stringsKey:
+      listing.stringsKey,
+  }),
 
   slots: {
     type: {
@@ -158,29 +138,7 @@ export default {
       headingMode: 'sticky',
 
       mainContent: [
-        html.tag('p',
-          {[html.onlyIfContent]: true},
-          language.$('listingPage.listingsFor', {
-            [language.onlyIfOptions]: ['listings'],
-
-            target:
-              language.$('listingPage.target', data.targetStringsKey),
-
-            listings:
-              language.formatUnitList(
-                stitchArrays({
-                  link: relations.sameTargetListingLinks,
-                  stringsKey: data.sameTargetListingStringsKeys,
-                }).map(({link, stringsKey}, index) =>
-                    html.tag('span',
-                      index === data.sameTargetListingsCurrentIndex &&
-                        {class: 'current'},
-
-                      link.slots({
-                        attributes: {class: 'nowrap'},
-                        content: language.$('listingPage', stringsKey, 'title.short'),
-                      })))),
-          })),
+        relations.sameTargetListingsLine,
 
         html.tag('p',
           {[html.onlyIfContent]: true},
diff --git a/src/content/dependencies/generateListingPageSameTargetListingsLine.js b/src/content/dependencies/generateListingPageSameTargetListingsLine.js
new file mode 100644
index 00000000..2146b1eb
--- /dev/null
+++ b/src/content/dependencies/generateListingPageSameTargetListingsLine.js
@@ -0,0 +1,46 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  relations: (relation, listing) => ({
+    listingLinks:
+      listing.target.listings
+        .map(listing => relation('linkListing', listing)),
+  }),
+
+  data: (listing) => ({
+    targetStringsKey:
+      listing.target.stringsKey,
+
+    listingStringsKeys:
+      listing.target.listings.map(listing => listing.stringsKey),
+
+    currentIndex:
+      listing.target.listings.indexOf(listing),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    html.tag('p',
+      {[html.onlyIfContent]: true},
+
+      language.$('listingPage.listingsFor', {
+        [language.onlyIfOptions]: ['listings'],
+
+        target:
+          language.$('listingPage.target', data.targetStringsKey),
+
+        listings:
+          language.formatUnitList(
+            stitchArrays({
+              link: relations.listingLinks,
+              stringsKey: data.listingStringsKeys,
+            }).map(({link, stringsKey}, index) =>
+                html.tag('span',
+                  index === data.currentIndex &&
+                    {class: 'current'},
+
+                  link.slots({
+                    attributes: {class: 'nowrap'},
+                    content: language.$('listingPage', stringsKey, 'title.short'),
+                  })))),
+      })),
+};