2 files changed, 77 insertions, 37 deletions
diff --git a/src/content/dependencies/generateAdditionalNamesBox.js b/src/content/dependencies/generateAdditionalNamesBox.js
index f7fa3b00..63427c58 100644
--- a/src/content/dependencies/generateAdditionalNamesBox.js
+++ b/src/content/dependencies/generateAdditionalNamesBox.js
@@ -1,48 +1,20 @@
-import {stitchArrays} from '#sugar';
-
 export default {
-  contentDependencies: ['transformContent'],
+  contentDependencies: ['generateAdditionalNamesBoxItem'],
   extraDependencies: ['html', 'language'],
 
   relations: (relation, additionalNames) => ({
-    names:
-      additionalNames.map(({name}) =>
-        relation('transformContent', name)),
-
-    annotations:
-      additionalNames.map(({annotation}) =>
-        (annotation
-          ? relation('transformContent', annotation)
-          : null)),
+    items:
+      additionalNames
+        .map(entry => relation('generateAdditionalNamesBoxItem', entry)),
   }),
 
-  generate: (relations, {html, language}) => {
-    const names =
-      relations.names.map(name =>
-        html.tag('span', {class: 'additional-name'},
-          name.slot('mode', 'inline')));
-
-    const annotations =
-      relations.annotations.map(annotation =>
-        (annotation
-          ? html.tag('span', {class: 'annotation'},
-              language.$('misc.additionalNames.item.annotation', {
-                annotation:
-                  annotation.slot('mode', 'inline'),
-              }))
-          : null));
-
-    return html.tag('div', {id: 'additional-names-box'}, [
+  generate: (relations, {html, language}) =>
+    html.tag('div', {id: 'additional-names-box'}, [
       html.tag('p',
         language.$('misc.additionalNames.title')),
 
       html.tag('ul',
-        stitchArrays({name: names, annotation: annotations})
-          .map(({name, annotation}) =>
-            html.tag('li',
-              (annotation
-                ? language.$('misc.additionalNames.item.withAnnotation', {name, annotation})
-                : language.$('misc.additionalNames.item', {name}))))),
-    ]);
-  },
+        relations.items
+          .map(item => html.tag('li', item))),
+    ]),
 };
diff --git a/src/content/dependencies/generateAdditionalNamesBoxItem.js b/src/content/dependencies/generateAdditionalNamesBoxItem.js
new file mode 100644
index 00000000..bb4c8477
--- /dev/null
+++ b/src/content/dependencies/generateAdditionalNamesBoxItem.js
@@ -0,0 +1,68 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: ['linkTrack', 'transformContent'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, entry) => ({
+    nameContent:
+      relation('transformContent', entry.name),
+
+    annotationContent:
+      (entry.annotation
+        ? relation('transformContent', entry.annotation)
+        : null),
+
+    trackLinks:
+      (entry.from
+        ? entry.from.map(track => relation('linkTrack', track))
+        : null),
+  }),
+
+  data: (entry) => ({
+    albumNames:
+      (entry.from
+        ? entry.from.map(track => track.album.name)
+        : null),
+  }),
+
+  generate: (data, relations, {html, language}) => {
+    const prefix = 'misc.additionalNames.item';
+
+    const itemParts = [prefix];
+    const itemOptions = {};
+
+    itemOptions.name =
+      html.tag('span', {class: 'additional-name'},
+        relations.nameContent.slot('mode', 'inline'));
+
+    const accentParts = [prefix, 'accent'];
+    const accentOptions = {};
+
+    if (relations.annotationContent) {
+      accentParts.push('withAnnotation');
+      accentOptions.annotation =
+        relations.annotationContent.slot('mode', 'inline');
+    }
+
+    if (relations.trackLinks) {
+      accentParts.push('withAlbums');
+      accentOptions.albums =
+        language.formatConjunctionList(
+          stitchArrays({
+            trackLink: relations.trackLinks,
+            albumName: data.albumNames,
+          }).map(({trackLink, albumName}) =>
+              trackLink.slot('content', albumName)));
+    }
+
+    if (accentParts.length > 2) {
+      itemParts.push('withAccent');
+      itemOptions.accent =
+        html.tag('span', {class: 'accent'},
+          language.$(...accentParts, accentOptions));
+    }
+
+    return language.$(...itemParts, itemOptions);
+  },
+};