content, css: cover artwork reference details, non-unique art line

11 files changed, 234 insertions, 17 deletions

diff --git a/src/content/dependencies/generateAlbumCoverArtwork.js b/src/content/dependencies/generateAlbumCoverArtwork.js
index d52d57ce..1e11c0ac 100644
--- a/src/content/dependencies/generateAlbumCoverArtwork.js
+++ b/src/content/dependencies/generateAlbumCoverArtwork.js
@@ -3,7 +3,10 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkReferenceDetails',
     'image',
+    'linkAlbumReferencedArtworks',
+    'linkAlbumReferencingArtworks',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -20,6 +23,17 @@ export default {
 
     artistDetails:
       relation('generateCoverArtworkArtistDetails', album.coverArtistContribs),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails',
+        album.referencedArtworks,
+        album.referencedByArtworks),
+
+    referencedArtworksLink:
+      relation('linkAlbumReferencedArtworks', album),
+
+    referencingArtworksLink:
+      relation('linkAlbumReferencingArtworks', album),
   }),
 
   data: (album) => ({
@@ -40,6 +54,11 @@ export default {
       validate: v => v.is('tags', 'artists'),
       default: 'tags',
     },
+
+    showReferenceLinks: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
   generate: (data, relations, slots, {language}) =>
@@ -55,11 +74,21 @@ export default {
 
       dimensions: data.dimensions,
 
-      details:
-        (slots.details === 'tags'
-          ? relations.artTagDetails
-       : slots.details === 'artists'
-          ? relations.artistDetails
-          : null),
+      details: [
+        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 a291dedb..14745b96 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -108,7 +108,10 @@ export default {
 
         additionalNames: relations.additionalNamesBox,
 
-        cover: relations.cover,
+        cover:
+          relations.cover?.slots({
+            showReferenceLinks: true,
+          }),
 
         mainContent: [
           relations.releaseInfo,
diff --git a/src/content/dependencies/generateCoverArtworkReferenceDetails.js b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
new file mode 100644
index 00000000..006b2b4b
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtworkReferenceDetails.js
@@ -0,0 +1,56 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  data: (referenced, referencedBy) => ({
+    referenced:
+      referenced.length,
+
+    referencedBy:
+      referencedBy.length,
+  }),
+
+  slots: {
+    referencedLink: {type: 'html', mutable: true},
+    referencingLink: {type: 'html', mutable: true},
+  },
+
+  generate: (data, slots, {html, language}) =>
+    language.encapsulate('releaseInfo', capsule => {
+      const referencedText =
+        language.$(capsule, 'referencesArtworks', {
+          [language.onlyIfOptions]: ['artworks'],
+
+          artworks:
+            language.countArtworks(data.referenced, {
+              blankIfZero: true,
+              unit: true,
+            }),
+        });
+
+      const referencingText =
+        language.$(capsule, 'referencedByArtworks', {
+          [language.onlyIfOptions]: ['artworks'],
+
+          artworks:
+            language.countArtworks(data.referencedBy, {
+              blankIfZero: true,
+              unit: true,
+            }),
+        });
+
+      return (
+        html.tag('p', {class: 'image-details'},
+          {[html.onlyIfContent]: true},
+          {[html.joinChildren]: html.tag('br')},
+
+          {class: 'reference-details'},
+
+          [
+            !html.isBlank(referencedText) &&
+              slots.referencedLink.slot('content', referencedText),
+
+            !html.isBlank(referencingText) &&
+              slots.referencingLink.slot('content', referencingText),
+          ]));
+    }),
+}
diff --git a/src/content/dependencies/generateTrackCoverArtwork.js b/src/content/dependencies/generateTrackCoverArtwork.js
index 2ad14993..90ce2b4a 100644
--- a/src/content/dependencies/generateTrackCoverArtwork.js
+++ b/src/content/dependencies/generateTrackCoverArtwork.js
@@ -3,7 +3,11 @@ export default {
     'generateCoverArtwork',
     'generateCoverArtworkArtTagDetails',
     'generateCoverArtworkArtistDetails',
+    'generateCoverArtworkReferenceDetails',
     'image',
+    'linkAlbum',
+    'linkTrackReferencedArtworks',
+    'linkTrackReferencingArtworks',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -26,6 +30,20 @@ export default {
         (track.hasUniqueCoverArt
           ? track.coverArtistContribs
           : track.album.coverArtistContribs)),
+
+    referenceDetails:
+      relation('generateCoverArtworkReferenceDetails',
+        track.referencedArtworks,
+        track.referencedByArtworks),
+
+    referencedArtworksLink:
+      relation('linkTrackReferencedArtworks', track),
+
+    referencingArtworksLink:
+      relation('linkTrackReferencingArtworks', track),
+
+    albumLink:
+      relation('linkAlbum', track.album),
   }),
 
   data: (track) => ({
@@ -41,6 +59,9 @@ export default {
       (track.hasUniqueCoverArt
         ? track.coverArtDimensions
         : track.album.coverArtDimensions),
+
+    nonUnique:
+      !track.hasUniqueCoverArt,
   }),
 
   slots: {
@@ -50,9 +71,19 @@ export default {
       validate: v => v.is('tags', 'artists'),
       default: 'tags',
     },
+
+    showReferenceLinks: {
+      type: 'boolean',
+      default: false,
+    },
+
+    showNonUniqueLine: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
-  generate: (data, relations, slots, {language}) =>
+  generate: (data, relations, slots, {html, language}) =>
     relations.coverArtwork.slots({
       mode: slots.mode,
 
@@ -65,12 +96,34 @@ export default {
 
       dimensions: data.dimensions,
 
-      details:
-        (slots.details === 'tags'
-          ? relations.artTagDetails
-       : slots.details === 'artists'
-          ? relations.artistDetails
-          : null),
+      details: [
+        slots.details === 'tags' &&
+          relations.artTagDetails,
+
+        slots.details === 'artists'&&
+          relations.artistDetails,
+
+        slots.showReferenceLinks &&
+          relations.referenceDetails.slots({
+            referencedLink:
+              relations.referencedArtworksLink,
+
+            referencingLink:
+              relations.referencingArtworksLink,
+          }),
+
+        slots.showNonUniqueLine &&
+        data.nonUnique &&
+          html.tag('p', {class: 'image-details'},
+            {class: 'non-unique-details'},
+
+            language.$('misc.trackArtFromAlbum', {
+              album:
+                relations.albumLink.slots({
+                  color: false,
+                }),
+            })),
+      ],
     }),
 };
 
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index ea13032a..39f2a437 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -139,7 +139,11 @@ export default {
         color: data.color,
         styleRules: [relations.albumStyleRules],
 
-        cover: relations.cover,
+        cover:
+          relations.cover?.slots({
+            showReferenceLinks: true,
+            showNonUniqueLine: true,
+          }),
 
         mainContent: [
           relations.releaseInfo,
diff --git a/src/content/dependencies/linkAlbumReferencedArtworks.js b/src/content/dependencies/linkAlbumReferencedArtworks.js
new file mode 100644
index 00000000..ba51b5e3
--- /dev/null
+++ b/src/content/dependencies/linkAlbumReferencedArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, album) =>
+    ({link: relation('linkThing', 'localized.albumReferencedArtworks', album)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkAlbumReferencingArtworks.js b/src/content/dependencies/linkAlbumReferencingArtworks.js
new file mode 100644
index 00000000..4d5e799d
--- /dev/null
+++ b/src/content/dependencies/linkAlbumReferencingArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, album) =>
+    ({link: relation('linkThing', 'localized.albumReferencingArtworks', album)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkTrackReferencedArtworks.js b/src/content/dependencies/linkTrackReferencedArtworks.js
new file mode 100644
index 00000000..b4cb08fe
--- /dev/null
+++ b/src/content/dependencies/linkTrackReferencedArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, track) =>
+    ({link: relation('linkThing', 'localized.trackReferencedArtworks', track)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/content/dependencies/linkTrackReferencingArtworks.js b/src/content/dependencies/linkTrackReferencingArtworks.js
new file mode 100644
index 00000000..c9c9f4d1
--- /dev/null
+++ b/src/content/dependencies/linkTrackReferencingArtworks.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, track) =>
+    ({link: relation('linkThing', 'localized.trackReferencingArtworks', track)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 9a1db403..781bafd5 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1263,6 +1263,10 @@ p .current {
   border-top-color: var(--deep-color);
 }
 
+#cover-art-container .image-details + .image-details {
+  border-top-color: var(--primary-color);
+}
+
 #cover-art-container .image {
   display: block;
   width: 100%;
@@ -1272,21 +1276,52 @@ p .current {
 .image-details {
   display: block;
 
-  padding: 6px 9px 4px 9px;
   margin-top: 0;
   margin-bottom: 0;
+
+  /* Styles below only apply for first image-details. */
+
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 9px;
+  padding-right: 9px;
+
+  padding-top: 6px;
+  padding-bottom: 4px;
+
   border-top: 1px dashed var(--dim-color);
 }
 
+.image-details + .image-details {
+  display: block;
+
+  margin-left: 6px;
+  margin-right: 6px;
+  padding-left: 3px;
+  padding-right: 3px;
+
+  padding-top: 4px;
+  padding-bottom: 4px;
+
+  border-top: 1px dotted var(--primary-color);
+}
+
+.image-details:last-child {
+  margin-bottom: 2px;
+}
+
 ul.image-details.art-tag-details li {
   display: inline-block;
-  margin: 0;
 }
 
 ul.image-details.art-tag-details li:not(:last-child)::after {
   content: " \00b7 ";
 }
 
+.image-details.non-unique-details {
+  font-style: oblique;
+}
+
 p.image-details.illustrator-details {
   text-align: center;
   font-style: oblique;
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 204d2002..af9f5895 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -308,6 +308,9 @@ releaseInfo:
       _: "{FLASH}"
       asDifferentRelease: "{FLASH} (as {TRACK})"
 
+  referencesArtworks: "References {ARTWORKS}."
+  referencedByArtworks: "Referenced by {ARTWORKS}."
+
   # Note that there's no sticky variant here,
   # such as "Tracks that this flash features",
   # because not all flashes are *called* flashes!
@@ -845,6 +848,8 @@ misc:
   socialEmbed:
     heading: "{WIKI_NAME} | {HEADING}"
 
+  trackArtFromAlbum: "Album cover for {ALBUM}"
+
   # jumpTo:
   #   Generic action displayed at the top of some longer pages, for
   #   quickly scrolling down to a particular section.