1 files changed, 40 insertions, 4 deletions

diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
index faa944ac..f0e1e39c 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
@@ -3,6 +3,7 @@ import {empty} from '#sugar';
 export default {
   contentDependencies: [
     'generateAbsoluteDatetimestamp',
+    'generateArtistCredit',
     'generateColorStyleAttribute',
     'linkAlbum',
     'linkGroup',
@@ -35,12 +36,21 @@ export default {
         ? relation('generateAbsoluteDatetimestamp', album.date)
         : null),
 
+    artistCredit:
+      relation('generateArtistCredit', album.artistContribs, []),
+
     otherGroupLinks:
       query.otherGroups
         .map(group => relation('linkGroup', group)),
   }),
 
-  generate: (relations, {html, language}) =>
+  slots: {
+    accentMode: {
+      validate: v => v.is('groups', 'artists'),
+    },
+  },
+
+  generate: (relations, slots, {html, language}) =>
     html.tag('li',
       relations.colorStyle,
 
@@ -51,20 +61,24 @@ export default {
           workingOptions.album =
             relations.albumLink.slot('color', false);
 
+          const yearCapsule = language.encapsulate(itemCapsule, 'withYear');
+
           if (relations.datetimestamp) {
             workingCapsule += '.withYear';
             workingOptions.yearAccent =
-              language.$(itemCapsule, 'yearAccent', {
+              language.$(yearCapsule, 'accent', {
                 year:
                   relations.datetimestamp.slots({style: 'year', tooltip: true}),
               });
           }
 
-          if (!empty(relations.otherGroupLinks)) {
+          const otherGroupCapsule = language.encapsulate(itemCapsule, 'withOtherGroup');
+
+          if (slots.accentMode === 'groups' && !empty(relations.otherGroupLinks)) {
             workingCapsule += '.withOtherGroup';
             workingOptions.otherGroupAccent =
               html.tag('span', {class: 'other-group-accent'},
-                language.$(itemCapsule, 'otherGroupAccent', {
+                language.$(otherGroupCapsule, 'accent', {
                   groups:
                     language.formatConjunctionList(
                       relations.otherGroupLinks.map(groupLink =>
@@ -72,6 +86,28 @@ export default {
                 }));
           }
 
+          const artistCapsule = language.encapsulate(itemCapsule, 'withArtists');
+          const {artistCredit} = relations;
+
+          artistCredit.setSlots({
+            normalStringKey:
+              artistCapsule + '.by',
+
+            featuringStringKey:
+              artistCapsule + '.featuring',
+
+            normalFeaturingStringKey:
+              artistCapsule + '.by.featuring',
+          });
+
+          if (slots.accentMode === 'artists' && !html.isBlank(artistCredit)) {
+            workingCapsule += '.withArtists';
+            workingOptions.by =
+              html.tag('span', {class: 'by'},
+                html.metatag('chunkwrap', {split: ','},
+                  html.resolve(artistCredit)));
+          }
+
           return language.$(workingCapsule, workingOptions);
         }))),
 };