1 files changed, 97 insertions, 62 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 06972d6b..3a10ab20 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -1,11 +1,44 @@
 export default {
-  contentDependencies: ['image'],
+  contentDependencies: [
+    'generateCoverArtworkArtTagDetails',
+    'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkOriginDetails',
+    'generateCoverArtworkReferenceDetails',
+    'image',
+  ],
+
   extraDependencies: ['html'],
 
+  relations: (relation, artwork) => ({
+    image:
+      relation('image', artwork),
+
+    originDetails:
+      relation('generateCoverArtworkOriginDetails', artwork),
+
+    artTagDetails:
+      relation('generateCoverArtworkArtTagDetails', artwork),
+
+    artistDetails:
+      relation('generateCoverArtworkArtistDetails', artwork),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails', artwork),
+  }),
+
+  data: (artwork) => ({
+    color:
+      artwork.thing.color ?? null,
+
+    dimensions:
+      artwork.dimensions,
+  }),
+
   slots: {
-    image: {
-      type: 'html',
-      mutable: true,
+    alt: {type: 'string'},
+
+    color: {
+      validate: v => v.isColor,
     },
 
     mode: {
@@ -13,13 +46,10 @@ export default {
       default: 'primary',
     },
 
-    dimensions: {
-      validate: v => v.isDimensions,
-    },
-
-    warnings: {
-      validate: v => v.looseArrayOf(v.isString),
-    },
+    showOriginDetails: {type: 'boolean', default: false},
+    showArtTagDetails: {type: 'boolean', default: false},
+    showArtistDetails: {type: 'boolean', default: false},
+    showReferenceDetails: {type: 'boolean', default: false},
 
     details: {
       type: 'html',
@@ -27,60 +57,65 @@ export default {
     },
   },
 
-  generate(slots, {html}) {
+  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([
-          slots.image.slots({
-            thumb: 'medium',
-            reveal: true,
-            link: true,
-
-            warnings: slots.warnings,
-            ...sizeSlots,
-          }),
-
-          slots.details,
-        ]);
-
-      case 'thumbnail':
-        return (
-          slots.image.slots({
-            thumb: 'small',
-            reveal: false,
-            link: false,
-
-            warnings: slots.warnings,
-            ...sizeSlots,
-          }));
-
-      case 'commentary':
-        return (
-          slots.image.slots({
-            thumb: 'medium',
-            reveal: true,
-            link: true,
-            lazy: true,
-
-            warnings: slots.warnings,
-            ...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())));
   },
 };