content, css: generateCoverArtwork: 'primary-artists' mode

6 files changed, 61 insertions, 16 deletions

diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js
index dbb22fe7..3f2066b4 100644
--- a/src/content/dependencies/generateAlbumCoverArtwork.js
+++ b/src/content/dependencies/generateAlbumCoverArtwork.js
@@ -3,7 +3,7 @@ export default {
 
   relations: (relation, album) => ({
     coverArtwork:
-      relation('generateCoverArtwork', album.artTags),
+      relation('generateCoverArtwork', album.artTags, album.coverArtistContribs),
   }),
 
   data: (album) => ({
diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js
index e969de8d..cbd80683 100644
--- a/src/content/dependencies/generateArtistInfoPage.js
+++ b/src/content/dependencies/generateArtistInfoPage.js
@@ -70,7 +70,7 @@ export default {
 
     cover:
       (artist.hasAvatar
-        ? relation('generateCoverArtwork', [])
+        ? relation('generateCoverArtwork', [], [])
         : null),
 
     contentHeading:
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 3d5a614f..70d71bc6 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -1,27 +1,32 @@
 import {stitchArrays} from '#sugar';
 
 export default {
-  contentDependencies: ['image', 'linkArtTag'],
-  extraDependencies: ['html'],
+  contentDependencies: ['image', 'linkArtTag', 'linkArtistGallery'],
+  extraDependencies: ['html', 'language'],
 
-  query: (artTags) => ({
+  query: (artTags, _coverArtistContribs) => ({
     linkableArtTags:
       (artTags
         ? artTags.filter(tag => !tag.isContentWarning)
         : []),
   }),
 
-  relations: (relation, query, artTags) => ({
+  relations: (relation, query, artTags, coverArtistContribs) => ({
     image:
       relation('image', artTags),
 
     tagLinks:
       query.linkableArtTags
-        .filter(tag => !tag.isContentWarning)
         .map(tag => relation('linkArtTag', tag)),
+
+    artistLinks:
+      coverArtistContribs
+        .map(contrib => contrib.artist)
+        .map(artist =>
+          relation('linkArtistGallery', artist)),
   }),
 
-  data: (query) => {
+  data: (query, _artTags, _coverArtistContribs) => {
     const data = {};
 
     const seenShortNames = new Set();
@@ -56,8 +61,15 @@ export default {
     },
 
     mode: {
-      validate: v => v.is('primary', 'thumbnail', 'commentary'),
-      default: 'primary',
+      validate: v =>
+        v.is(...[
+          'primary-tags',
+          'primary-artists',
+          'thumbnail',
+          'commentary',
+        ]),
+
+      default: 'primary-tags',
     },
 
     dimensions: {
@@ -65,7 +77,7 @@ export default {
     },
   },
 
-  generate(data, relations, slots, {html}) {
+  generate(data, relations, slots, {html, language}) {
     const square =
       (slots.dimensions
         ? slots.dimensions[0] === slots.dimensions[1]
@@ -77,7 +89,7 @@ export default {
         : {dimensions: slots.dimensions});
 
     switch (slots.mode) {
-      case 'primary':
+      case 'primary-tags':
         return html.tags([
           relations.image.slots({
             path: slots.path,
@@ -92,6 +104,8 @@ export default {
           html.tag('ul', {class: 'image-details'},
             {[html.onlyIfContent]: true},
 
+            {class: 'art-tag-details'},
+
             stitchArrays({
               tagLink: relations.tagLinks,
               preferShortName: data.preferShortName,
@@ -100,6 +114,29 @@ export default {
                   tagLink.slot('preferShortName', preferShortName)))),
         ]);
 
+      case 'primary-artists':
+        return html.tags([
+          relations.image.slots({
+            path: slots.path,
+            alt: slots.alt,
+            color: slots.color,
+            thumb: 'medium',
+            reveal: true,
+            link: true,
+            ...sizeSlots,
+          }),
+
+          html.tag('p', {class: 'image-details'},
+            {[html.onlyIfContent]: true},
+
+            {class: 'illustrator-details'},
+
+            language.$('misc.coverGrid.details.coverArtists', {
+              artists:
+                language.formatConjunctionList(relations.artistLinks),
+            })),
+        ]);
+
       case 'thumbnail':
         return relations.image.slots({
           path: slots.path,
diff --git a/src/content/dependencies/generateFlashCoverArtwork.js b/src/content/dependencies/generateFlashCoverArtwork.js
index af03ae6b..7b996827 100644
--- a/src/content/dependencies/generateFlashCoverArtwork.js
+++ b/src/content/dependencies/generateFlashCoverArtwork.js
@@ -3,7 +3,7 @@ export default {
 
   relations: (relation) => ({
     coverArtwork:
-      relation('generateCoverArtwork'),
+      relation('generateCoverArtwork', [], []),
   }),
 
   data: (flash) => ({
diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js
index a241eaf2..df4e37a4 100644
--- a/src/content/dependencies/generateTrackCoverArtwork.js
+++ b/src/content/dependencies/generateTrackCoverArtwork.js
@@ -6,7 +6,10 @@ export default {
       relation('generateCoverArtwork',
         (track.hasUniqueCoverArt
           ? track.artTags
-          : track.album.artTags)),
+          : track.album.artTags),
+        (track.hasUniqueCoverArt
+          ? track.coverArtistContribs
+          : track.album.coverArtistContribs)),
   }),
 
   data: (track) => ({
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 65f14e91..1ffe02fb 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1278,15 +1278,20 @@ p .current {
   border-top: 1px dashed var(--dim-color);
 }
 
-ul.image-details li {
+ul.image-details.art-tag-details li {
   display: inline-block;
   margin: 0;
 }
 
-#cover-art-container ul li:not(:last-child)::after {
+ul.image-details.art-tag-details li:not(:last-child)::after {
   content: " \00b7 ";
 }
 
+p.image-details.illustrator-details {
+  text-align: center;
+  font-style: oblique;
+}
+
 #artist-commentary.first-entry-is-dated {
   clear: right;
 }