content: general multiple artworks integration

16 files changed, 212 insertions, 360 deletions

diff --git a/src/content/dependencies/generateAlbumArtworkColumn.js b/src/content/dependencies/generateAlbumArtworkColumn.js
new file mode 100644
index 00000000..e6762463
--- /dev/null
+++ b/src/content/dependencies/generateAlbumArtworkColumn.js
@@ -0,0 +1,38 @@
+export default {
+  contentDependencies: ['generateAlbumArtInfoBox', 'generateCoverArtwork'],
+  extraDependencies: ['html'],
+
+  relations: (relation, album) => ({
+    firstCover:
+      (album.hasCoverArt
+        ? relation('generateCoverArtwork', album.coverArtworks[0])
+        : null),
+
+    restCovers:
+      (album.hasCoverArt
+        ? album.coverArtworks.slice(1).map(artwork =>
+            relation('generateCoverArtwork', artwork))
+        : []),
+
+    albumArtInfoBox:
+      relation('generateAlbumArtInfoBox', album),
+  }),
+
+  generate: (relations, {html}) =>
+    html.tags([
+      relations.firstCover?.slots({
+        showOriginDetails: true,
+        showArtTagDetails: true,
+        showReferenceDetails: true,
+      }),
+
+      relations.albumArtInfoBox,
+
+      relations.restCovers.map(cover =>
+        cover.slots({
+          showOriginDetails: true,
+          showArtTagDetails: true,
+          showReferenceDetails: true,
+        })),
+    ]),
+};
diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index f5df7c3d..1e39b47d 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -3,13 +3,12 @@ import {empty, stitchArrays} from '#sugar';
 export default {
   contentDependencies: [
     'generateAlbumCommentarySidebar',
-    'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
     'generateAlbumSecondaryNav',
     'generateAlbumStyleRules',
     'generateCommentaryEntry',
     'generateContentHeading',
-    'generateTrackCoverArtwork',
+    'generateCoverArtwork',
     'generatePageLayout',
     'linkAlbum',
     'linkExternal',
@@ -66,7 +65,7 @@ export default {
 
       if (album.hasCoverArt) {
         relations.albumCommentaryCover =
-          relation('generateAlbumCoverArtwork', album);
+          relation('generateCoverArtwork', album.coverArtworks[0]);
       }
 
       relations.albumCommentaryEntries =
@@ -91,7 +90,7 @@ export default {
       query.tracksWithCommentary
         .map(track =>
           (track.hasUniqueCoverArt
-            ? relation('generateTrackCoverArtwork', track)
+            ? relation('generateCoverArtwork', track.trackArtworks[0])
             : null));
 
     relations.trackCommentaryEntries =
diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js
deleted file mode 100644
index 7c546fc6..00000000
--- a/src/content/dependencies/generateAlbumCoverArtwork.js
+++ /dev/null
@@ -1,112 +0,0 @@
-export default {
-  contentDependencies: [
-    'generateCoverArtwork',
-    'generateCoverArtworkArtTagDetails',
-    'generateCoverArtworkArtistDetails',
-    'generateCoverArtworkOriginDetails',
-    'generateCoverArtworkReferenceDetails',
-    'image',
-    'linkAlbumReferencedArtworks',
-    'linkAlbumReferencingArtworks',
-  ],
-
-  extraDependencies: ['html', 'language'],
-
-  relations: (relation, album) => ({
-    coverArtwork:
-      relation('generateCoverArtwork'),
-
-    image:
-      relation('image'),
-
-    originDetails:
-      relation('generateCoverArtworkOriginDetails', album.coverArtwork),
-
-    artTagDetails:
-      relation('generateCoverArtworkArtTagDetails', album.coverArtwork),
-
-    artistDetails:
-      relation('generateCoverArtworkArtistDetails', album.coverArtwork),
-
-    referenceDetails:
-      relation('generateCoverArtworkReferenceDetails',
-        album.referencedArtworks,
-        album.referencedByArtworks),
-
-    referencedArtworksLink:
-      relation('linkAlbumReferencedArtworks', album),
-
-    referencingArtworksLink:
-      relation('linkAlbumReferencingArtworks', album),
-  }),
-
-  data: (album) => ({
-    path:
-      ['media.albumCover', album.directory, album.coverArtFileExtension],
-
-    color:
-      album.color,
-
-    dimensions:
-      album.coverArtDimensions,
-
-    warnings:
-      album.artTags
-        .filter(tag => tag.isContentWarning)
-        .map(tag => tag.name),
-  }),
-
-  slots: {
-    mode: {type: 'string'},
-
-    details: {
-      validate: v => v.is('tags', 'artists'),
-      default: 'tags',
-    },
-
-    showOriginDetails: {
-      type: 'boolean',
-      default: false,
-    },
-
-    showReferenceLinks: {
-      type: 'boolean',
-      default: false,
-    },
-  },
-
-  generate: (data, relations, slots, {language}) =>
-    relations.coverArtwork.slots({
-      mode: slots.mode,
-
-      image:
-        relations.image.slots({
-          path: data.path,
-          color: data.color,
-          alt: language.$('misc.alt.albumCover'),
-        }),
-
-      dimensions: data.dimensions,
-      warnings: data.warnings,
-
-      details: [
-        slots.showOriginDetails &&
-          relations.originDetails,
-
-        slots.details === 'tags' &&
-          relations.artTagDetails,
-
-        slots.details === 'artists' &&
-          relations.artistDetails,
-
-        slots.showReferenceLinks &&
-          relations.referenceDetails.slots({
-            referencedLink:
-              relations.referencedArtworksLink,
-
-            referencingLink:
-              relations.referencingArtworksLink,
-          }),
-      ],
-    }),
-};
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 51632c99..d0788523 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -4,9 +4,8 @@ export default {
   contentDependencies: [
     'generateAdditionalNamesBox',
     'generateAlbumAdditionalFilesList',
-    'generateAlbumArtInfoBox',
+    'generateAlbumArtworkColumn',
     'generateAlbumBanner',
-    'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
     'generateAlbumReleaseInfo',
     'generateAlbumSecondaryNav',
@@ -45,13 +44,8 @@ export default {
     additionalNamesBox:
       relation('generateAdditionalNamesBox', album.additionalNames),
 
-    cover:
-      (album.hasCoverArt
-        ? relation('generateAlbumCoverArtwork', album)
-        : null),
-
-    albumArtInfoBox:
-      relation('generateAlbumArtInfoBox', album),
+    artworkColumn:
+      relation('generateAlbumArtworkColumn', album),
 
     banner:
       (album.hasBannerArt
@@ -116,16 +110,8 @@ export default {
 
         additionalNames: relations.additionalNamesBox,
 
-        artworkColumnContent: [
-          (relations.cover
-            ? relations.cover.slots({
-                showOriginDetails: true,
-                showReferenceLinks: true,
-              })
-            : null),
-
-          relations.albumArtInfoBox,
-        ],
+        artworkColumnContent:
+          relations.artworkColumn,
 
         mainContent: [
           relations.releaseInfo,
diff --git a/src/content/dependencies/generateAlbumReferencedArtworksPage.js b/src/content/dependencies/generateAlbumReferencedArtworksPage.js
index 3f3d77b3..7586393c 100644
--- a/src/content/dependencies/generateAlbumReferencedArtworksPage.js
+++ b/src/content/dependencies/generateAlbumReferencedArtworksPage.js
@@ -1,6 +1,5 @@
 export default {
   contentDependencies: [
-    'generateAlbumCoverArtwork',
     'generateAlbumStyleRules',
     'generateBackToAlbumLink',
     'generateReferencedArtworksPage',
@@ -11,7 +10,7 @@ export default {
 
   relations: (relation, album) => ({
     page:
-      relation('generateReferencedArtworksPage', album.referencedArtworks),
+      relation('generateReferencedArtworksPage', album.coverArtworks[0]),
 
     albumStyleRules:
       relation('generateAlbumStyleRules', album, null),
@@ -21,17 +20,11 @@ export default {
 
     backToAlbumLink:
       relation('generateBackToAlbumLink', album),
-
-    cover:
-      relation('generateAlbumCoverArtwork', album),
   }),
 
   data: (album) => ({
     name:
       album.name,
-
-    color:
-      album.color,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -42,11 +35,8 @@ export default {
             data.name,
         }),
 
-      color: data.color,
       styleRules: [relations.albumStyleRules],
 
-      cover: relations.cover,
-
       navLinks: [
         {auto: 'home'},
 
diff --git a/src/content/dependencies/generateAlbumReferencingArtworksPage.js b/src/content/dependencies/generateAlbumReferencingArtworksPage.js
index 8f2349f9..d072d2f6 100644
--- a/src/content/dependencies/generateAlbumReferencingArtworksPage.js
+++ b/src/content/dependencies/generateAlbumReferencingArtworksPage.js
@@ -1,6 +1,5 @@
 export default {
   contentDependencies: [
-    'generateAlbumCoverArtwork',
     'generateAlbumStyleRules',
     'generateBackToAlbumLink',
     'generateReferencingArtworksPage',
@@ -11,7 +10,7 @@ export default {
 
   relations: (relation, album) => ({
     page:
-      relation('generateReferencingArtworksPage', album.referencedByArtworks),
+      relation('generateReferencingArtworksPage', album.coverArtworks[0]),
 
     albumStyleRules:
       relation('generateAlbumStyleRules', album, null),
@@ -21,17 +20,11 @@ export default {
 
     backToAlbumLink:
       relation('generateBackToAlbumLink', album),
-
-    cover:
-      relation('generateAlbumCoverArtwork', album),
   }),
 
   data: (album) => ({
     name:
       album.name,
-
-    color:
-      album.color,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -42,11 +35,8 @@ export default {
             data.name,
         }),
 
-      color: data.color,
       styleRules: [relations.albumStyleRules],
 
-      cover: relations.cover,
-
       navLinks: [
         {auto: 'home'},
 
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 8b5f9b8e..71c0747d 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -3,6 +3,7 @@ export default {
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
     'generateCoverArtworkOriginDetails',
+    'generateCoverArtworkReferenceDetails',
     'image',
   ],
 
@@ -20,11 +21,25 @@ export default {
 
     artistDetails:
       relation('generateCoverArtworkArtistDetails', artwork),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails', artwork),
   }),
 
   data: (artwork) => ({
+    color:
+      artwork.thing.color,
+
     path:
       artwork.path,
+
+    dimensions:
+      artwork.dimensions,
+
+    warnings:
+      artwork.artTags
+        .filter(tag => tag.isContentWarning)
+        .map(tag => tag.name),
   }),
 
   slots: {
@@ -39,17 +54,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',
@@ -62,21 +70,21 @@ export default {
 
     image.setSlots({
       path: data.path,
+      warnings: data.warnings,
 
-      color: slots.color,
+      color: slots.color ?? data.color,
       alt: slots.alt,
-      warnings: slots.warnings,
     });
 
     const square =
-      (slots.dimensions
-        ? slots.dimensions[0] === slots.dimensions[1]
+      (data.dimensions
+        ? data.dimensions[0] === data.dimensions[1]
         : true);
 
     if (square) {
       image.setSlot('square', true);
     } else {
-      image.setSlot('dimensions', slots.dimensions);
+      image.setSlot('dimensions', data.dimensions);
     }
 
     return (
@@ -101,6 +109,9 @@ export default {
               slots.showArtistDetails &&
                 relations.artistDetails,
 
+              slots.showReferenceDetails &&
+                relations.referenceDetails,
+
               slots.details,
             ]
        : slots.mode === 'thumbnail'
diff --git a/src/content/dependencies/generateCoverArtworkReferenceDetails.js b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
index 006b2b4b..035ab586 100644
--- a/src/content/dependencies/generateCoverArtworkReferenceDetails.js
+++ b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
@@ -1,20 +1,24 @@
 export default {
+  contentDependencies: ['linkReferencedArtworks', 'linkReferencingArtworks'],
   extraDependencies: ['html', 'language'],
 
-  data: (referenced, referencedBy) => ({
+  relations: (relation, artwork) => ({
+    referencedArtworksLink:
+      relation('linkReferencedArtworks', artwork),
+
+    referencingArtworksLink:
+      relation('linkReferencingArtworks', artwork),
+  }),
+
+  data: (artwork) => ({
     referenced:
-      referenced.length,
+      artwork.referencedArtworks.length,
 
     referencedBy:
-      referencedBy.length,
+      artwork.referencedByArtworks.length,
   }),
 
-  slots: {
-    referencedLink: {type: 'html', mutable: true},
-    referencingLink: {type: 'html', mutable: true},
-  },
-
-  generate: (data, slots, {html, language}) =>
+  generate: (data, relations, {html, language}) =>
     language.encapsulate('releaseInfo', capsule => {
       const referencedText =
         language.$(capsule, 'referencesArtworks', {
@@ -47,10 +51,10 @@ export default {
 
           [
             !html.isBlank(referencedText) &&
-              slots.referencedLink.slot('content', referencedText),
+              relations.referencedArtworksLink.slot('content', referencedText),
 
             !html.isBlank(referencingText) &&
-              slots.referencingLink.slot('content', referencingText),
+              relations.referencingArtworksLink.slot('content', referencingText),
           ]));
     }),
 }
diff --git a/src/content/dependencies/generateReferencedArtworksPage.js b/src/content/dependencies/generateReferencedArtworksPage.js
index cdd0a3c7..5733631d 100644
--- a/src/content/dependencies/generateReferencedArtworksPage.js
+++ b/src/content/dependencies/generateReferencedArtworksPage.js
@@ -2,66 +2,64 @@ import {stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateCoverArtwork',
     'generateCoverGrid',
     'generatePageLayout',
     'image',
-    'linkAlbum',
-    'linkTrack',
+    'linkAnythingMan',
   ],
 
   extraDependencies: ['html', 'language'],
 
-  relations: (relation, referencedArtworks) => ({
+  relations: (relation, artwork) => ({
     layout:
       relation('generatePageLayout'),
 
+    cover:
+      relation('generateCoverArtwork', artwork),
+
     coverGrid:
       relation('generateCoverGrid'),
 
     links:
-      referencedArtworks.map(({thing}) =>
-        (thing.album
-          ? relation('linkTrack', thing)
-          : relation('linkAlbum', thing))),
+      artwork.referencedArtworks.map(({artwork}) =>
+        relation('linkAnythingMan', artwork.thing)),
 
     images:
-      referencedArtworks.map(({thing}) =>
-        relation('image', thing.artTags)),
+      artwork.referencedArtworks.map(({artwork}) =>
+        relation('image', artwork.artTags)),
   }),
 
-  data: (referencedArtworks) => ({
+  data: (artwork) => ({
+    color:
+      artwork.thing.color,
+
     count:
-      referencedArtworks.length,
+      artwork.referencedArtworks.length,
 
     names:
-      referencedArtworks
-        .map(({thing}) => thing.name),
+      artwork.referencedArtworks
+        .map(({artwork}) => artwork.thing.name),
 
     paths:
-      referencedArtworks
-        .map(({thing}) =>
-          (thing.album
-            ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension]
-            : ['media.albumCover', thing.directory, thing.coverArtFileExtension])),
+      artwork.referencedArtworks
+        .map(({artwork}) => artwork.path),
 
     dimensions:
-      referencedArtworks
-        .map(({thing}) => thing.coverArtDimensions),
+      artwork.referencedArtworks
+        .map(({artwork}) => artwork.dimensions),
 
     coverArtistNames:
-      referencedArtworks
-        .map(({thing}) =>
-          thing.coverArtistContribs
+      artwork.referencedArtworks
+        .map(({artwork}) =>
+          artwork.artistContribs
             .map(contrib => contrib.artist.name)),
   }),
 
   slots: {
-    color: {validate: v => v.isColor},
-
     styleRules: {type: 'html', mutable: false},
 
     title: {type: 'html', mutable: false},
-    cover: {type: 'html', mutable: true},
 
     navLinks: {validate: v => v.isArray},
     navBottomRowContent: {type: 'html', mutable: false},
@@ -73,11 +71,13 @@ export default {
         title: slots.title,
         subtitle: language.$(pageCapsule, 'subtitle'),
 
-        color: slots.color,
+        color: data.color,
         styleRules: slots.styleRules,
 
-        coverColumnContent:
-          slots.cover.slot('details', 'artists'),
+        artworkColumnContent:
+          relations.cover.slots({
+            showArtistDetails: true,
+          }),
 
         mainClasses: ['top-index'],
         mainContent: [
diff --git a/src/content/dependencies/generateReferencingArtworksPage.js b/src/content/dependencies/generateReferencingArtworksPage.js
index b8722725..520a33c3 100644
--- a/src/content/dependencies/generateReferencingArtworksPage.js
+++ b/src/content/dependencies/generateReferencingArtworksPage.js
@@ -2,66 +2,64 @@ import {stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateCoverArtwork',
     'generateCoverGrid',
     'generatePageLayout',
     'image',
-    'linkAlbum',
-    'linkTrack',
+    'linkAnythingMan',
   ],
 
   extraDependencies: ['html', 'language'],
 
-  relations: (relation, referencingArtworks) => ({
+  relations: (relation, artwork) => ({
     layout:
       relation('generatePageLayout'),
 
+    cover:
+      relation('generateCoverArtwork', artwork),
+
     coverGrid:
       relation('generateCoverGrid'),
 
     links:
-      referencingArtworks.map(({thing}) =>
-        (thing.album
-          ? relation('linkTrack', thing)
-          : relation('linkAlbum', thing))),
+      artwork.referencedByArtworks.map(({artwork}) =>
+        relation('linkAnythingMan', artwork.thing)),
 
     images:
-      referencingArtworks.map(({thing}) =>
-        relation('image', thing.artTags)),
+      artwork.referencedByArtworks.map(({artwork}) =>
+        relation('image', artwork.artTags)),
   }),
 
-  data: (referencingArtworks) => ({
+  data: (artwork) => ({
+    color:
+      artwork.thing.color,
+
     count:
-      referencingArtworks.length,
+      artwork.referencedByArtworks.length,
 
     names:
-      referencingArtworks
-        .map(({thing}) => thing.name),
+      artwork.referencedByArtworks
+        .map(({artwork}) => artwork.thing.name),
 
     paths:
-      referencingArtworks
-        .map(({thing}) =>
-          (thing.album
-            ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension]
-            : ['media.albumCover', thing.directory, thing.coverArtFileExtension])),
+      artwork.referencedByArtworks
+        .map(({artwork}) => artwork.path),
 
     dimensions:
-      referencingArtworks
-        .map(({thing}) => thing.coverArtDimensions),
+      artwork.referencedByArtworks
+        .map(({artwork}) => artwork.dimensions),
 
     coverArtistNames:
-      referencingArtworks
-        .map(({thing}) =>
-          thing.coverArtistContribs
+      artwork.referencedByArtworks
+        .map(({artwork}) =>
+          artwork.artistContribs
             .map(contrib => contrib.artist.name)),
   }),
 
   slots: {
-    color: {validate: v => v.isColor},
-
     styleRules: {type: 'html', mutable: false},
 
     title: {type: 'html', mutable: false},
-    cover: {type: 'html', mutable: true},
 
     navLinks: {validate: v => v.isArray},
     navBottomRowContent: {type: 'html', mutable: false},
@@ -73,11 +71,13 @@ export default {
         title: slots.title,
         subtitle: language.$(pageCapsule, 'subtitle'),
 
-        color: slots.color,
+        color: data.color,
         styleRules: slots.styleRules,
 
-        coverColumnContent:
-          slots.cover.slot('details', 'artists'),
+        artworkColumnContent:
+          relations.cover.slots({
+            showArtistDetails: true,
+          }),
 
         mainClasses: ['top-index'],
         mainContent: [
diff --git a/src/content/dependencies/generateTrackArtworkColumn.js b/src/content/dependencies/generateTrackArtworkColumn.js
index 1cd5bff0..f06d735b 100644
--- a/src/content/dependencies/generateTrackArtworkColumn.js
+++ b/src/content/dependencies/generateTrackArtworkColumn.js
@@ -1,25 +1,33 @@
 export default {
-  contentDependencies: ['generateTrackCoverArtwork'],
+  contentDependencies: ['generateCoverArtwork'],
+  extraDependencies: ['html'],
 
   relations: (relation, track) => ({
     albumCover:
       (!track.hasUniqueCoverArt && track.album.hasCoverArt
-        ? relation('generateTrackCoverArtwork', track.album.coverArtworks[0])
+        ? relation('generateCoverArtwork', track.album.coverArtworks[0])
         : null),
 
     trackCovers:
       (track.hasUniqueCoverArt
         ? track.trackArtworks.map(artwork =>
-            relation('generateTrackCoverArtwork', artwork))
-        : null),
+            relation('generateCoverArtwork', artwork))
+        : []),
   }),
 
-  generate: (relations) =>
-    [relations.albumCover, ...relations.trackCovers ?? []]
-      .filter(Boolean)
-      .map(cover =>
+  generate: (relations, {html}) =>
+    html.tags([
+      relations.albumCover?.slots({
+        showOriginDetails: true,
+        showArtTagDetails: true,
+        showReferenceDetails: true,
+      }),
+
+      relations.trackCovers.map(cover =>
         cover.slots({
           showOriginDetails: true,
-          showReferenceLinks: true,
+          showArtTagDetails: true,
+          showReferenceDetails: true,
         })),
+    ]),
 };
diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js
deleted file mode 100644
index 7ad87548..00000000
--- a/src/content/dependencies/generateTrackCoverArtwork.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export default {
-  contentDependencies: [
-    'generateCoverArtwork',
-    'generateCoverArtworkReferenceDetails',
-    'linkTrackReferencedArtworks',
-    'linkTrackReferencingArtworks',
-  ],
-
-  extraDependencies: ['html', 'language'],
-
-  relations: (relation, artwork) => ({
-    coverArtwork:
-      relation('generateCoverArtwork', artwork),
-
-    // referenceDetails:
-    //   relation('generateCoverArtworkReferenceDetails',
-    //     artwork.referencedArtworks,
-    //     artwork.referencedByArtworks),
-
-    // referencedArtworksLink:
-    //   relation('linkTrackReferencedArtworks', track),
-
-    // referencingArtworksLink:
-    //   relation('linkTrackReferencingArtworks', track),
-  }),
-
-  data: (artwork) => ({
-    // color:
-    //   track.color,
-
-    dimensions:
-      artwork.thing.coverArtDimensions,
-
-    nonUnique:
-      !artwork.thing.album,
-
-    warnings:
-      artwork.artTags
-        .filter(tag => tag.isContentWarning)
-        .map(tag => tag.name),
-  }),
-
-  slots: {
-    mode: {type: 'string'},
-
-    details: {
-      validate: v => v.is('tags', 'artists'),
-      default: 'tags',
-    },
-
-    showOriginDetails: {
-      type: 'boolean',
-      default: false,
-    },
-
-    showReferenceLinks: {
-      type: 'boolean',
-      default: false,
-    },
-  },
-
-  generate: (data, relations, slots, {language}) =>
-    relations.coverArtwork.slots({
-      mode: slots.mode,
-
-      // color: data.color,
-      alt: language.$('misc.alt.trackCover'),
-
-      dimensions: data.dimensions,
-      warnings: data.warnings,
-
-      showOriginDetails: slots.showOriginDetails,
-      showArtTagDetails: slots.details === 'tags',
-      showArtistDetails: slots.details === 'artists',
-
-      details: [
-        /*
-        slots.showReferenceLinks &&
-          relations.referenceDetails.slots({
-            referencedLink:
-              relations.referencedArtworksLink,
-
-            referencingLink:
-              relations.referencingArtworksLink,
-          }),
-        */
-      ],
-    }),
-};
-
diff --git a/src/content/dependencies/generateTrackReferencedArtworksPage.js b/src/content/dependencies/generateTrackReferencedArtworksPage.js
index ac81e525..93438c5b 100644
--- a/src/content/dependencies/generateTrackReferencedArtworksPage.js
+++ b/src/content/dependencies/generateTrackReferencedArtworksPage.js
@@ -3,7 +3,6 @@ export default {
     'generateAlbumStyleRules',
     'generateBackToTrackLink',
     'generateReferencedArtworksPage',
-    'generateTrackCoverArtwork',
     'generateTrackNavLinks',
   ],
 
@@ -11,7 +10,7 @@ export default {
 
   relations: (relation, track) => ({
     page:
-      relation('generateReferencedArtworksPage', track.referencedArtworks),
+      relation('generateReferencedArtworksPage', track.trackArtworks[0]),
 
     albumStyleRules:
       relation('generateAlbumStyleRules', track.album, track),
@@ -21,17 +20,11 @@ export default {
 
     backToTrackLink:
       relation('generateBackToTrackLink', track),
-
-    cover:
-      relation('generateTrackCoverArtwork', track),
   }),
 
   data: (track) => ({
     name:
       track.name,
-
-    color:
-      track.color,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -42,11 +35,8 @@ export default {
             data.name,
         }),
 
-      color: data.color,
       styleRules: [relations.albumStyleRules],
 
-      cover: relations.cover,
-
       navLinks:
         html.resolve(
           relations.navLinks
diff --git a/src/content/dependencies/generateTrackReferencingArtworksPage.js b/src/content/dependencies/generateTrackReferencingArtworksPage.js
index 097ee929..e9818bad 100644
--- a/src/content/dependencies/generateTrackReferencingArtworksPage.js
+++ b/src/content/dependencies/generateTrackReferencingArtworksPage.js
@@ -3,7 +3,6 @@ export default {
     'generateAlbumStyleRules',
     'generateBackToTrackLink',
     'generateReferencingArtworksPage',
-    'generateTrackCoverArtwork',
     'generateTrackNavLinks',
   ],
 
@@ -11,7 +10,7 @@ export default {
 
   relations: (relation, track) => ({
     page:
-      relation('generateReferencingArtworksPage', track.referencedByArtworks),
+      relation('generateReferencingArtworksPage', track.trackArtworks[0]),
 
     albumStyleRules:
       relation('generateAlbumStyleRules', track.album, track),
@@ -21,17 +20,11 @@ export default {
 
     backToTrackLink:
       relation('generateBackToTrackLink', track),
-
-    cover:
-      relation('generateTrackCoverArtwork', track),
   }),
 
   data: (track) => ({
     name:
       track.name,
-
-    color:
-      track.color,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -42,11 +35,8 @@ export default {
             data.name,
         }),
 
-      color: data.color,
       styleRules: [relations.albumStyleRules],
 
-      cover: relations.cover,
-
       navLinks:
         html.resolve(
           relations.navLinks
diff --git a/src/content/dependencies/linkReferencedArtworks.js b/src/content/dependencies/linkReferencedArtworks.js
new file mode 100644
index 00000000..c456b808
--- /dev/null
+++ b/src/content/dependencies/linkReferencedArtworks.js
@@ -0,0 +1,24 @@
+import Thing from '#thing';
+
+export default {
+  contentDependencies: [
+    'linkAlbumReferencedArtworks',
+    'linkTrackReferencedArtworks',
+  ],
+
+  query: (artwork) => ({
+    referenceType:
+      artwork.thing.constructor[Thing.referenceType],
+  }),
+
+  relations: (relation, query, artwork) => ({
+    link:
+      (query.referenceType === 'album'
+        ? relation('linkAlbumReferencedArtworks', artwork.thing)
+     : query.referenceType === 'track'
+        ? relation('linkTrackReferencedArtworks', artwork.thing)
+        : null),
+  }),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkReferencingArtworks.js b/src/content/dependencies/linkReferencingArtworks.js
new file mode 100644
index 00000000..0cfca4db
--- /dev/null
+++ b/src/content/dependencies/linkReferencingArtworks.js
@@ -0,0 +1,24 @@
+import Thing from '#thing';
+
+export default {
+  contentDependencies: [
+    'linkAlbumReferencingArtworks',
+    'linkTrackReferencingArtworks',
+  ],
+
+  query: (artwork) => ({
+    referenceType:
+      artwork.thing.constructor[Thing.referenceType],
+  }),
+
+  relations: (relation, query, artwork) => ({
+    link:
+      (query.referenceType === 'album'
+        ? relation('linkAlbumReferencingArtworks', artwork.thing)
+     : query.referenceType === 'track'
+        ? relation('linkTrackReferencingArtworks', artwork.thing)
+        : null),
+  }),
+
+  generate: (relations) => relations.link,
+};