4 files changed, 84 insertions, 40 deletions

diff --git a/src/content/dependencies/generateAdditionalNamesBox.js b/src/content/dependencies/generateAdditionalNamesBox.js
index f7fa3b0..63427c5 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 0000000..bb4c847
--- /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);
+  },
+};
diff --git a/src/static/site6.css b/src/static/site6.css
index 76b58f3..892458d 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -955,7 +955,7 @@ h1 a[href="#additional-names-box"]:hover {
   margin-top: 0.5em;
 }
 
-#additional-names-box li .annotation {
+#additional-names-box li .accent {
   opacity: 0.8;
   display: inline-block;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index f02a10a..53763dc 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -346,8 +346,12 @@ misc:
 
     item:
       _: "{NAME}"
-      withAnnotation: "{NAME} {ANNOTATION}"
-      annotation: "({ANNOTATION})"
+      withAccent: "{NAME} {ACCENT}"
+
+      accent:
+        withAnnotation: "({ANNOTATION})"
+        withAlbums: "(on {ALBUMS})"
+        withAnnotations.withAlbums: "({ANNOTATION}; on {ALBUMS})"
 
   # alt:
   #   Fallback text for the alt text of images and artworks - these