4 files changed, 57 insertions, 50 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index bc4ac1dc..74d80e33 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -13,6 +13,7 @@ export default {
   relations(relation, album) {
     const relations = {};
 
+    relations.content = relation('generateAlbumInfoPageContent', album);
     relations.socialEmbed = relation('generateAlbumSocialEmbed', album);
     relations.albumStyleRules = relation('generateAlbumStyleRules', album);
     relations.colorStyleRules = relation('generateColorStyleRules', album.color);
@@ -25,6 +26,8 @@ export default {
   }) {
     const page = {};
 
+    Object.assign(page, relations.content);
+
     page.title = language.$('albumPage.title', {album: data.name});
 
     page.themeColor = data.color;
diff --git a/src/content/dependencies/generateAlbumInfoPageContent.js b/src/content/dependencies/generateAlbumInfoPageContent.js
index 41c9d309..e959f274 100644
--- a/src/content/dependencies/generateAlbumInfoPageContent.js
+++ b/src/content/dependencies/generateAlbumInfoPageContent.js
@@ -7,6 +7,7 @@ export default {
     'generateAlbumTrackList',
     'generateContributionLinks',
     'generateContentHeading',
+    'generateCoverArtwork',
     'linkAlbumCommentary',
     'linkAlbumGallery',
     'linkExternal',
@@ -21,6 +22,9 @@ export default {
   relations(relation, album) {
     const relations = {};
 
+    relations.cover =
+      relation('generateCoverArtwork', album.artTags);
+
     const contributionLinksRelation = contribs =>
       relation('generateContributionLinks', contribs, {
         showContribution: true,
@@ -80,6 +84,9 @@ export default {
   data(album) {
     const data = {};
 
+    data.coverArtDirectory = album.directory;
+    data.coverArtFileExtension = album.coverArtFileExtension;
+
     data.date = album.date;
     data.duration = accumulateSum(album.tracks, track => track.duration);
     data.durationApproximate = album.tracks.length > 1;
@@ -109,6 +116,10 @@ export default {
   }) {
     const content = {};
 
+    content.cover = relations.cover
+      .slot('path', ['media.albumCover', data.coverArtDirectory, data.coverArtFileExtension])
+      .slot('alt', language.$('misc.alt.trackCover'));
+
     content.main = {
       headingMode: 'sticky',
       content: html.tag(null, [
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
new file mode 100644
index 00000000..62fc3566
--- /dev/null
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -0,0 +1,43 @@
+import {empty} from '../../util/sugar.js';
+
+export default {
+  contentDependencies: ['image', 'linkArtTag'],
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, artTags) {
+    const relations = {};
+
+    relations.image =
+      relation('image', artTags);
+
+    if (artTags) {
+      relations.tagLinks =
+        artTags
+          .filter(tag => !tag.isContentWarning)
+          .map(tag => relation('linkArtTag', tag));
+    } else {
+      relations.tagLinks = null;
+    }
+
+    return relations;
+  },
+
+  generate(relations, {html, language}) {
+    return html.template(slot =>
+      html.tag('div', {id: 'cover-art-container'}, [
+        relations.image
+          .slot('path', slot('path'))
+          .slot('alt', slot('alt'))
+          .slot('thumb', 'medium')
+          .slot('id', 'cover-art')
+          .slot('link', true)
+          .slot('square', true),
+
+        !empty(relations.tagLinks) &&
+          html.tag('p',
+            language.$('releaseInfo.artTags.inline', {
+              tags: language.formatUnitList(relations.tagLinks),
+            })),
+      ]));
+  },
+};
diff --git a/src/misc-templates.js b/src/misc-templates.js
index f2307724..885efa9e 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -137,56 +137,6 @@ function unbound_getRevealStringFromArtTags(tags, {
   );
 }
 
-// Cover art links
-
-function unbound_generateCoverLink({
-  html,
-  img,
-  language,
-  link,
-
-  getRevealStringFromArtTags,
-
-  alt,
-  path,
-  src,
-  tags = [],
-  to,
-  wikiData,
-}) {
-  const {wikiInfo} = wikiData;
-
-  if (!src && path) {
-    src = to(...path);
-  }
-
-  if (!src) {
-    throw new Error(`Expected src or path`);
-  }
-
-  const linkedTags = tags.filter(tag => !tag.isContentWarning);
-
-  return html.tag('div', {id: 'cover-art-container'}, [
-    img({
-      src,
-      alt,
-      thumb: 'medium',
-      id: 'cover-art',
-      link: true,
-      square: true,
-      reveal: getRevealStringFromArtTags(tags),
-    }),
-
-    wikiInfo.enableArtTagUI &&
-    linkedTags.length &&
-      html.tag('p', {class: 'tags'},
-        language.$('releaseInfo.artTags.inline', {
-          tags: language.formatUnitList(
-            linkedTags.map(tag => link.tag(tag))),
-        })),
-  ]);
-}
-
 // Divided track lists
 
 function unbound_generateTrackListDividedByGroups(tracks, {