content, css: demo new cover artworks ui + data integration

This is not remotely comprehensive and mostly just touches
album and track info pages.

1 files changed, 44 insertions, 0 deletions

diff --git a/src/content/dependencies/generateCoverArtworkOriginDetails.js b/src/content/dependencies/generateCoverArtworkOriginDetails.js
new file mode 100644
index 00000000..8b5a28ac
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtworkOriginDetails.js
@@ -0,0 +1,44 @@
+export default {
+  contentDependencies: ['generateArtistCredit'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, artwork) => ({
+    credit:
+      relation('generateArtistCredit', artwork.artistContribs, []),
+  }),
+
+  data: (artwork) => ({
+    date:
+      (artwork.date !== artwork.thing.date
+        ? artwork.date
+        : null),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('misc.coverArtwork', capsule =>
+      html.tag('p', {class: 'image-details'},
+        {[html.onlyIfContent]: true},
+        {[html.joinChildren]: html.tag('br')},
+
+        {class: 'origin-details'},
+
+        [
+          relations.credit.slots({
+            showAnnotation: true,
+            showExternalLinks: true,
+            showChronology: true,
+            showWikiEdits: true,
+
+            trimAnnotation: false,
+
+            chronologyKind: 'coverArt',
+
+            normalStringKey: capsule + '.artworkBy',
+          }),
+
+          language.$(capsule, 'released', {
+            [language.onlyIfOptions]: ['date'],
+            date: language.formatDate(data.date),
+          })
+        ])),
+};