1 files changed, 88 insertions, 0 deletions
diff --git a/src/content/dependencies/generateChronologyLinks.js b/src/content/dependencies/generateChronologyLinks.js
new file mode 100644
index 00000000..a61b5e6f
--- /dev/null
+++ b/src/content/dependencies/generateChronologyLinks.js
@@ -0,0 +1,88 @@
+import {accumulateSum, empty} from '../../util/sugar.js';
+
+export default {
+  extraDependencies: ['html', 'language'],
+
+  generate({html, language}) {
+    return html.template({
+      annotation: `generateChronologyLinks`,
+
+      slots: {
+        chronologyInfoSets: {
+          validate: v =>
+            v.arrayOf(
+              v.validateProperties({
+                headingString: v.isString,
+                contributions: v.arrayOf(v.validateProperties({
+                  index: v.isCountingNumber,
+                  artistLink: v.isHTML,
+                  previousLink: v.isHTML,
+                  nextLink: v.isHTML,
+                })),
+              })),
+        }
+      },
+
+      content(slots) {
+        if (empty(slots.chronologyInfoSets)) {
+          return html.blank();
+        }
+
+        const totalContributionCount =
+          accumulateSum(
+            slots.chronologyInfoSets,
+            ({contributions}) => contributions.length);
+
+        if (totalContributionCount === 0) {
+          return html.blank();
+        }
+
+        if (totalContributionCount > 8) {
+          return html.tag('div', {class: 'chronology'},
+            language.$('misc.chronology.seeArtistPages'));
+        }
+
+        return html.tags(
+          slots.chronologyInfoSets.map(({
+            headingString,
+            contributions,
+          }) =>
+            contributions.map(({
+              index,
+              artistLink,
+              previousLink,
+              nextLink,
+            }) => {
+              const heading =
+                html.tag('span', {class: 'heading'},
+                  language.$(headingString, {
+                    index: language.formatIndex(index),
+                    artist: artistLink,
+                  }));
+
+              const navigation =
+                (previousLink || nextLink) &&
+                  html.tag('span', {class: 'buttons'},
+                    language.formatUnitList([
+                      previousLink?.slots({
+                        tooltip: true,
+                        color: false,
+                        content: language.$('misc.nav.previous'),
+                      }),
+
+                      nextLink?.slots({
+                        tooltip: true,
+                        color: false,
+                        content: language.$('misc.nav.next'),
+                      }),
+                    ].filter(Boolean)));
+
+              return html.tag('div', {class: 'chronology'},
+                (navigation
+                  ? language.$('misc.chronology.withNavigation', {heading, navigation})
+                  : heading));
+            })));
+      },
+    });
+  },
+};