1 files changed, 89 insertions, 101 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 3d5a614f..3a10ab20 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -1,55 +1,41 @@
-import {stitchArrays} from '#sugar';
-
 export default {
-  contentDependencies: ['image', 'linkArtTag'],
-  extraDependencies: ['html'],
+  contentDependencies: [
+    'generateCoverArtworkArtTagDetails',
+    'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkOriginDetails',
+    'generateCoverArtworkReferenceDetails',
+    'image',
+  ],
 
-  query: (artTags) => ({
-    linkableArtTags:
-      (artTags
-        ? artTags.filter(tag => !tag.isContentWarning)
-        : []),
-  }),
+  extraDependencies: ['html'],
 
-  relations: (relation, query, artTags) => ({
+  relations: (relation, artwork) => ({
     image:
-      relation('image', artTags),
+      relation('image', artwork),
 
-    tagLinks:
-      query.linkableArtTags
-        .filter(tag => !tag.isContentWarning)
-        .map(tag => relation('linkArtTag', tag)),
-  }),
+    originDetails:
+      relation('generateCoverArtworkOriginDetails', artwork),
 
-  data: (query) => {
-    const data = {};
+    artTagDetails:
+      relation('generateCoverArtworkArtTagDetails', artwork),
 
-    const seenShortNames = new Set();
-    const duplicateShortNames = new Set();
+    artistDetails:
+      relation('generateCoverArtworkArtistDetails', artwork),
 
-    for (const {nameShort: shortName} of query.linkableArtTags) {
-      if (seenShortNames.has(shortName)) {
-        duplicateShortNames.add(shortName);
-      } else {
-        seenShortNames.add(shortName);
-      }
-    }
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails', artwork),
+  }),
 
-    data.preferShortName =
-      query.linkableArtTags
-        .map(artTag => !duplicateShortNames.has(artTag.nameShort));
+  data: (artwork) => ({
+    color:
+      artwork.thing.color ?? null,
 
-    return data;
-  },
+    dimensions:
+      artwork.dimensions,
+  }),
 
   slots: {
-    path: {
-      validate: v => v.validateArrayItems(v.isString),
-    },
-
-    alt: {
-      type: 'string',
-    },
+    alt: {type: 'string'},
 
     color: {
       validate: v => v.isColor,
@@ -60,74 +46,76 @@ export default {
       default: 'primary',
     },
 
-    dimensions: {
-      validate: v => v.isDimensions,
+    showOriginDetails: {type: 'boolean', default: false},
+    showArtTagDetails: {type: 'boolean', default: false},
+    showArtistDetails: {type: 'boolean', default: false},
+    showReferenceDetails: {type: 'boolean', default: false},
+
+    details: {
+      type: 'html',
+      mutable: false,
     },
   },
 
   generate(data, relations, slots, {html}) {
+    const {image} = relations;
+
+    image.setSlots({
+      color: slots.color ?? data.color,
+      alt: slots.alt,
+    });
+
     const square =
-      (slots.dimensions
-        ? slots.dimensions[0] === slots.dimensions[1]
+      (data.dimensions
+        ? data.dimensions[0] === data.dimensions[1]
         : true);
 
-    const sizeSlots =
-      (square
-        ? {square: true}
-        : {dimensions: slots.dimensions});
-
-    switch (slots.mode) {
-      case 'primary':
-        return html.tags([
-          relations.image.slots({
-            path: slots.path,
-            alt: slots.alt,
-            color: slots.color,
-            thumb: 'medium',
-            reveal: true,
-            link: true,
-            ...sizeSlots,
-          }),
-
-          html.tag('ul', {class: 'image-details'},
-            {[html.onlyIfContent]: true},
-
-            stitchArrays({
-              tagLink: relations.tagLinks,
-              preferShortName: data.preferShortName,
-            }).map(({tagLink, preferShortName}) =>
-                html.tag('li',
-                  tagLink.slot('preferShortName', preferShortName)))),
-        ]);
-
-      case 'thumbnail':
-        return relations.image.slots({
-          path: slots.path,
-          alt: slots.alt,
-          color: slots.color,
-          thumb: 'small',
-          reveal: false,
-          link: false,
-          ...sizeSlots,
-        });
-
-      case 'commentary':
-        return relations.image.slots({
-          path: slots.path,
-          alt: slots.alt,
-          color: slots.color,
-          thumb: 'medium',
-          reveal: true,
-          link: true,
-          lazy: true,
-          ...sizeSlots,
-
-          attributes:
-            {class: 'commentary-art'},
-        });
-
-      default:
-        return html.blank();
+    if (square) {
+      image.setSlot('square', true);
+    } else {
+      image.setSlot('dimensions', data.dimensions);
     }
+
+    return (
+      html.tag('div', {class: 'cover-artwork'},
+        slots.mode === 'commentary' &&
+          {class: 'commentary-art'},
+
+        (slots.mode === 'primary'
+          ? [
+              relations.image.slots({
+                thumb: 'medium',
+                reveal: true,
+                link: true,
+              }),
+
+              slots.showOriginDetails &&
+                relations.originDetails,
+
+              slots.showArtTagDetails &&
+                relations.artTagDetails,
+
+              slots.showArtistDetails &&
+                relations.artistDetails,
+
+              slots.showReferenceDetails &&
+                relations.referenceDetails,
+
+              slots.details,
+            ]
+       : slots.mode === 'thumbnail'
+          ? relations.image.slots({
+              thumb: 'small',
+              reveal: false,
+              link: false,
+            })
+       : slots.mode === 'commentary'
+          ? relations.image.slots({
+              thumb: 'medium',
+              reveal: true,
+              link: true,
+              lazy: true,
+            })
+          : html.blank())));
   },
 };