4 files changed, 172 insertions, 52 deletions

diff --git a/src/content/dependencies/generateArtistGalleryPage.js b/src/content/dependencies/generateArtistGalleryPage.js
new file mode 100644
index 00000000..41758d59
--- /dev/null
+++ b/src/content/dependencies/generateArtistGalleryPage.js
@@ -0,0 +1,112 @@
+import {sortAlbumsTracksChronologically} from '../../util/wiki-data.js';
+
+// TODO: Very awkward we have to duplicate this functionality in relations and data.
+function getGalleryThings(artist) {
+  const galleryThings = [...artist.albumsAsCoverArtist, ...artist.tracksAsCoverArtist];
+  sortAlbumsTracksChronologically(galleryThings, {latestFirst: true});
+  return galleryThings;
+}
+
+export default {
+  contentDependencies: [
+    'generateArtistNavLinks',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'image',
+    'linkAlbum',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, artist) {
+    const relations = {};
+
+    relations.layout =
+      relation('generatePageLayout');
+
+    relations.artistNavLinks =
+      relation('generateArtistNavLinks', artist);
+
+    relations.coverGrid =
+      relation('generateCoverGrid');
+
+    const galleryThings = getGalleryThings(artist);
+
+    relations.links =
+      galleryThings.map(thing =>
+        (thing.album
+          ? relation('linkTrack', thing)
+          : relation('linkAlbum', thing)));
+
+    relations.images =
+      galleryThings.map(thing =>
+        relation('image', thing.artTags));
+
+    return relations;
+  },
+
+  data(artist) {
+    const data = {};
+
+    data.name = artist.name;
+
+    const galleryThings = getGalleryThings(artist);
+
+    data.numArtworks = galleryThings.length;
+
+    data.names =
+      galleryThings.map(thing => thing.name);
+
+    data.paths =
+      galleryThings.map(thing =>
+        (thing.album
+          ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension]
+          : ['media.albumCover', thing.directory, thing.coverArtFileExtension]));
+
+    return data;
+  },
+
+  generate(data, relations, {html, language}) {
+    return relations.layout
+      .slots({
+        title:
+          language.$('artistGalleryPage.title', {
+            artist: data.name,
+          }),
+
+        headingMode: 'static',
+
+        mainClasses: ['top-index'],
+        mainContent: [
+          html.tag('p',
+            {class: 'quick-info'},
+            language.$('artistGalleryPage.infoLine', {
+              coverArts: language.countCoverArts(data.numArtworks, {
+                unit: true,
+              }),
+            })),
+
+          relations.coverGrid
+            .slots({
+              links: relations.links,
+              names: data.names,
+              images:
+                relations.images.map((image, i) =>
+                  image.slots({
+                    path: data.paths[i],
+                  })),
+            }),
+        ],
+
+        navLinkStyle: 'hierarchical',
+        navLinks:
+          relations.artistNavLinks
+            .slots({
+              showExtraLinks: true,
+              currentExtra: 'gallery',
+            })
+            .content,
+      })
+  },
+}
diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js
index 7599b5b6..aaff7fb2 100644
--- a/src/content/dependencies/generateArtistInfoPage.js
+++ b/src/content/dependencies/generateArtistInfoPage.js
@@ -760,56 +760,4 @@ export default {
       };
     },
   };
-
-  const artThingsGallery = sortAlbumsTracksChronologically(
-    [
-      ...(artist.albumsAsCoverArtist ?? []),
-      ...(artist.tracksAsCoverArtist ?? []),
-    ],
-    {latestFirst: true, getDate: (o) => o.coverArtDate});
-
-  const galleryPage = hasGallery && {
-    type: 'page',
-    path: ['artistGallery', artist.directory],
-    page: ({
-      generateInfoGalleryLinks,
-      getAlbumCover,
-      getGridHTML,
-      getTrackCover,
-      html,
-      link,
-      language,
-    }) => ({
-      title: language.$('artistGalleryPage.title', {artist: name}),
-
-      main: {
-        classes: ['top-index'],
-        headingMode: 'static',
-
-        content: [
-          html.tag('p',
-            {class: 'quick-info'},
-            language.$('artistGalleryPage.infoLine', {
-              coverArts: language.countCoverArts(artThingsGallery.length, {
-                unit: true,
-              }),
-            })),
-
-          html.tag('div',
-            {class: 'grid-listing'},
-            getGridHTML({
-              entries: artThingsGallery.map((item) => ({item})),
-              srcFn: (thing) =>
-                thing.album
-                  ? getTrackCover(thing)
-                  : getAlbumCover(thing),
-              linkFn: (thing, opts) =>
-                thing.album
-                  ? link.track(thing, opts)
-                  : link.album(thing, opts),
-            })),
-        ],
-      },
-    }),
-  };
 */
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js
new file mode 100644
index 00000000..fdd9f8b7
--- /dev/null
+++ b/src/content/dependencies/generateCoverGrid.js
@@ -0,0 +1,44 @@
+export default {
+  extraDependencies: ['html'],
+
+  generate({html}) {
+    return html.template({
+      annotation: `generateCoverGrid`,
+
+      slots: {
+        images: {validate: v => v.arrayOf(v.isHTML)},
+        links: {validate: v => v.arrayOf(v.isHTML)},
+        names: {validate: v => v.arrayOf(v.isString)},
+
+        lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)},
+      },
+
+      content(slots) {
+        return (
+          html.tag('div', {class: 'grid-listing'},
+            slots.images.map((image, i) => {
+              const link = slots.links[i];
+              const name = slots.names[i];
+              return link.slots({
+                content: [
+                  image.slots({
+                    thumb: 'medium',
+                    lazy:
+                      (typeof slots.lazy === 'number'
+                        ? i >= slots.lazy
+                     : typeof slots.lazy === 'boolean'
+                        ? slots.lazy
+                        : false),
+                    square: true,
+                  }),
+                  html.tag('span', name),
+                ],
+                attributes: {
+                  class: ['grid-item', 'box', /* large && 'large-grid-item' */],
+                },
+              });
+            })));
+      },
+    });
+  },
+};
diff --git a/src/page/artist.js b/src/page/artist.js
index ad365161..1e8dd907 100644
--- a/src/page/artist.js
+++ b/src/page/artist.js
@@ -2,6 +2,8 @@
 //
 // NB: See artist-alias.js for artist alias redirect pages.
 
+import {empty} from '../util/sugar.js';
+
 export const description = `per-artist info & artwork gallery pages`;
 
 export function targets({wikiData}) {
@@ -9,6 +11,10 @@ export function targets({wikiData}) {
 }
 
 export function pathsForTarget(artist) {
+  const hasGalleryPage =
+    !empty(artist.tracksAsCoverArtist) ||
+    !empty(artist.albumsAsCoverArtist);
+
   return [
     {
       type: 'page',
@@ -19,5 +25,15 @@ export function pathsForTarget(artist) {
         args: [artist],
       },
     },
+
+    hasGalleryPage && {
+      type: 'page',
+      path: ['artistGallery', artist.directory],
+
+      contentFunction: {
+        name: 'generateArtistGalleryPage',
+        args: [artist],
+      },
+    },
   ];
 }