5 files changed, 83 insertions, 26 deletions

diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js
index 52f3e221..7b47c037 100644
--- a/src/content/dependencies/generateArtistInfoPage.js
+++ b/src/content/dependencies/generateArtistInfoPage.js
@@ -1,4 +1,4 @@
-import {empty, unique} from '#sugar';
+import {empty, stitchArrays, unique} from '#sugar';
 
 export default {
   contentDependencies: [
@@ -71,7 +71,8 @@ export default {
 
     closeGroupLinks:
       artist.closelyLinkedGroups
-        .map(group => relation('linkGroup', group)),
+        .map(({thing: group}) =>
+          relation('linkGroup', group)),
 
     visitLinks:
       artist.urls
@@ -116,6 +117,10 @@ export default {
         ? artist.avatarFileExtension
         : null),
 
+    closeGroupAnnotations:
+      artist.closelyLinkedGroups
+        .map(({annotation}) => annotation),
+
     totalTrackCount:
       query.allTracks.length,
 
@@ -154,17 +159,35 @@ export default {
           html.tag('p',
             {[html.onlyIfContent]: true},
 
-            language.encapsulate(pageCapsule, 'closelyLinkedGroups', capsule =>
-              (relations.closeGroupLinks.length === 0
-                ? html.blank()
-             : relations.closeGroupLinks.length === 1
-                ? language.$(capsule, 'one', {
-                    group: relations.closeGroupLinks,
-                  })
-                : language.$(capsule, 'multiple', {
-                    groups:
-                      language.formatUnitList(relations.closeGroupLinks),
-                  })))),
+            language.encapsulate(pageCapsule, 'closelyLinkedGroups', capsule => {
+              const [workingCapsule, option] =
+                (relations.closeGroupLinks.length === 0
+                  ? [null, null]
+               : relations.closeGroupLinks.length === 1
+                  ? [language.encapsulate(capsule, 'one'), 'group']
+                  : [language.encapsulate(capsule, 'multiple'), 'groups']);
+
+              if (!workingCapsule) return html.blank();
+
+              return language.$(workingCapsule, {
+                [option]:
+                  language.formatUnitList(
+                    stitchArrays({
+                      link: relations.closeGroupLinks,
+                      annotation: data.closeGroupAnnotations,
+                    }).map(({link, annotation}) =>
+                        language.encapsulate(capsule, 'group', workingCapsule => {
+                          const workingOptions = {group: link};
+
+                          if (annotation) {
+                            workingCapsule += '.withAnnotation';
+                            workingOptions.annotation = annotation;
+                          }
+
+                          return language.$(workingCapsule, workingOptions);
+                        }))),
+              });
+            })),
 
           html.tag('p',
             {[html.onlyIfContent]: true},
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js
index deddfd68..918d6476 100644
--- a/src/content/dependencies/generateGroupInfoPage.js
+++ b/src/content/dependencies/generateGroupInfoPage.js
@@ -1,3 +1,5 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   contentDependencies: [
     'generateColorStyleAttribute',
@@ -43,7 +45,8 @@ export default {
 
     closeArtistLinks:
       group.closelyLinkedArtists
-        .map(artist => relation('linkArtist', artist)),
+        .map(({thing: artist}) =>
+          relation('linkArtist', artist)),
 
     visitLinks:
       group.urls
@@ -62,6 +65,10 @@ export default {
 
     color:
       group.color,
+
+    closeArtistAnnotations:
+      group.closelyLinkedArtists
+        .map(({annotation}) => annotation),
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -76,23 +83,37 @@ export default {
             {[html.onlyIfContent]: true},
 
             language.encapsulate(pageCapsule, 'closelyLinkedArtists', capsule => {
-              let option;
-              [capsule, option] =
+              const [workingCapsule, option] =
                 (relations.closeArtistLinks.length === 0
                   ? [null, null]
                : relations.closeArtistLinks.length === 1
                   ? [language.encapsulate(capsule, 'one'), 'artist']
                   : [language.encapsulate(capsule, 'multiple'), 'artists']);
 
-              if (!capsule) return html.blank();
+              if (!workingCapsule) return html.blank();
 
-              return language.$(capsule, {
+              return language.$(workingCapsule, {
                 [option]:
                   language.formatUnitList(
-                    relations.closeArtistLinks
-                      .map(link => link.slots({
-                        attributes: [relations.wikiColorAttribute],
-                      }))),
+                    stitchArrays({
+                      link: relations.closeArtistLinks,
+                      annotation: data.closeArtistAnnotations,
+                    }).map(({link, annotation}) =>
+                        language.encapsulate(capsule, 'artist', workingCapsule => {
+                          const workingOptions = {};
+
+                          workingOptions.artist =
+                            link.slots({
+                              attributes: [relations.wikiColorAttribute],
+                            });
+
+                          if (annotation) {
+                            workingCapsule += '.withAnnotation';
+                            workingOptions.annotation = annotation;
+                          }
+
+                          return language.$(workingCapsule, workingOptions);
+                        }))),
               });
             })),
 
diff --git a/src/data/things/artist.js b/src/data/things/artist.js
index 8ac370c2..c6ee222a 100644
--- a/src/data/things/artist.js
+++ b/src/data/things/artist.js
@@ -21,6 +21,7 @@ import {
   fileExtension,
   flag,
   name,
+  reverseAnnotatedReferenceList,
   reverseContributionList,
   reverseReferenceList,
   singleReference,
@@ -139,7 +140,7 @@ export class Artist extends Thing {
       list: input.value('commentatorArtists'),
     }),
 
-    closelyLinkedGroups: reverseReferenceList({
+    closelyLinkedGroups: reverseAnnotatedReferenceList({
       data: 'groupData',
       list: input.value('closelyLinkedArtists'),
     }),
diff --git a/src/data/things/group.js b/src/data/things/group.js
index 06791ccc..4a790140 100644
--- a/src/data/things/group.js
+++ b/src/data/things/group.js
@@ -3,9 +3,10 @@ export const GROUP_DATA_FILE = 'groups.yaml';
 import {input} from '#composite';
 import find from '#find';
 import Thing from '#thing';
-import {parseSerieses} from '#yaml';
+import {parseAnnotatedReferences, parseSerieses} from '#yaml';
 
 import {
+  annotatedReferenceList,
   color,
   contentString,
   directory,
@@ -29,7 +30,7 @@ export class Group extends Thing {
 
     urls: urls(),
 
-    closelyLinkedArtists: referenceList({
+    closelyLinkedArtists: annotatedReferenceList({
       class: input.value(Artist),
       find: input.value(find.artist),
       data: 'artistData',
@@ -120,7 +121,10 @@ export class Group extends Thing {
       'Description': {property: 'description'},
       'URLs': {property: 'urls'},
 
-      'Closely Linked Artists': {property: 'closelyLinkedArtists'},
+      'Closely Linked Artists': {
+        property: 'closelyLinkedArtists',
+        transform: parseAnnotatedReferences,
+      },
 
       'Featured Albums': {property: 'featuredAlbums'},
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 7d85bf15..f6c21c72 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1077,6 +1077,10 @@ artistPage:
     one: "This artist has a group page: {GROUP}."
     multiple: "This artist has group pages: {GROUPS}."
 
+    group:
+      _: "{GROUP}"
+      withAnnotation: "{GROUP} ({ANNOTATION})"
+
   creditList:
 
     # album:
@@ -1314,6 +1318,10 @@ groupInfoPage:
     one: "View artist page: {ARTIST}."
     multiple: "View artist pages: {ARTISTS}."
 
+    artist:
+      _: "{ARTIST}"
+      withAnnotation: "{ARTIST} ({ANNOTATION})"
+
   viewAlbumGallery:
     _: >-
       View {LINK}! Or browse the list: