content: generateArtTagGalleryPage

3 files changed, 149 insertions, 86 deletions

diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js
new file mode 100644
index 00000000..138189e1
--- /dev/null
+++ b/src/content/dependencies/generateArtTagGalleryPage.js
@@ -0,0 +1,137 @@
+import {stitchArrays} from '../../util/sugar.js';
+import {sortAlbumsTracksChronologically} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: [
+    'generateColorStyleRules',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'image',
+    'linkAlbum',
+    'linkArtTag',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl({wikiInfo}) {
+    return {
+      enableListings: wikiInfo.enableListings,
+    };
+  },
+
+  query(sprawl, tag) {
+    const things = tag.taggedInThings.slice();
+
+    sortAlbumsTracksChronologically(things, {
+      getDate: thing => thing.coverArtDate,
+      latestFirst: true,
+    });
+
+    return {things};
+  },
+
+  relations(relation, query, sprawl, tag) {
+    const relations = {};
+
+    relations.layout =
+      relation('generatePageLayout');
+
+    relations.colorStyleRules =
+      relation('generateColorStyleRules', tag.color);
+
+    relations.artTagMainLink =
+      relation('linkArtTag', tag);
+
+    relations.coverGrid =
+      relation('generateCoverGrid');
+
+    relations.links =
+      query.things.map(thing =>
+        (thing.album
+          ? relation('linkTrack', thing)
+          : relation('linkAlbum', thing)));
+
+    relations.images =
+      query.things.map(thing =>
+        relation('image', thing.artTags));
+
+    return relations;
+  },
+
+  data(query, sprawl, artist) {
+    const data = {};
+
+    data.enableListings = sprawl.enableListings;
+
+    data.name = artist.name;
+
+    data.numArtworks = query.things.length;
+
+    data.names =
+      query.things.map(thing => thing.name);
+
+    data.paths =
+      query.things.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.$('tagPage.title', {
+            tag: data.name,
+          }),
+
+        headingMode: 'static',
+
+        colorStyleRules: [relations.colorStyleRules],
+
+        mainClasses: ['top-index'],
+        mainContent: [
+          html.tag('p',
+            {class: 'quick-info'},
+            language.$('tagPage.infoLine', {
+              coverArts: language.countCoverArts(data.numArtworks, {
+                unit: true,
+              }),
+            })),
+
+          relations.coverGrid
+            .slots({
+              links: relations.links,
+              names: data.names,
+              images:
+                stitchArrays({
+                  image: relations.images,
+                  path: data.paths,
+                }).map(({image, path}) =>
+                    image.slot('path', path)),
+            }),
+        ],
+
+        navLinkStyle: 'hierarchical',
+        navLinks: [
+          {auto: 'home'},
+
+          data.enableListings &&
+            {
+              path: ['localized.listingIndex'],
+              title: language.$('listingIndex.title'),
+            },
+
+          {
+            html:
+              language.$('tagPage.nav.tag', {
+                tag: relations.artTagMainLink,
+              }),
+          },
+        ],
+      });
+  },
+};
diff --git a/src/page/index.js b/src/page/index.js
index e07c1355..fd550509 100644
--- a/src/page/index.js
+++ b/src/page/index.js
@@ -16,5 +16,5 @@ export * as group from './group.js';
 export * as listing from './listing.js';
 // export * as news from './news.js';
 export * as static from './static.js';
-// export * as tag from './tag.js';
+export * as tag from './tag.js';
 export * as track from './track.js';
diff --git a/src/page/tag.js b/src/page/tag.js
index 81db6137..8942aea9 100644
--- a/src/page/tag.js
+++ b/src/page/tag.js
@@ -10,90 +10,16 @@ export function targets({wikiData}) {
   return wikiData.artTagData.filter((tag) => !tag.isContentWarning);
 }
 
-export function write(tag, {wikiData}) {
-  const {taggedInThings: things} = tag;
-
-  // Display things featuring this art tag in reverse chronological order,
-  // sticking the most recent additions near the top!
-  const thingsReversed = things.slice().reverse();
-
-  const entries = thingsReversed.map((item) => ({item}));
-
-  const page = {
-    type: 'page',
-    path: ['tag', tag.directory],
-    page: ({
-      getAlbumCover,
-      getGridHTML,
-      getThemeString,
-      getTrackCover,
-      html,
-      language,
-      link,
-    }) => ({
-      title: language.$('tagPage.title', {tag: tag.name}),
-      theme: getThemeString(tag.color),
-
-      main: {
-        classes: ['top-index'],
-        headingMode: 'static',
-
-        content: [
-          html.tag('p',
-            {class: 'quick-info'},
-            language.$('tagPage.infoLine', {
-              coverArts: language.countCoverArts(things.length, {
-                unit: true,
-              }),
-            })),
-
-          html.tag('div',
-            {class: 'grid-listing'},
-            getGridHTML({
-              entries,
-              srcFn: (thing) =>
-                thing.album
-                  ? getTrackCover(thing)
-                  : getAlbumCover(thing),
-              linkFn: (thing, opts) =>
-                thing.album
-                  ? link.track(thing, opts)
-                  : link.album(thing, opts),
-            })),
-        ],
-      },
-
-      nav: generateTagNav(tag, {
-        link,
-        language,
-        wikiData,
-      }),
-    }),
-  };
-
-  return [page];
-}
-
-// Utility functions
-
-function generateTagNav(tag, {
-  language,
-  link,
-  wikiData,
-}) {
-  return {
-    linkContainerClasses: ['nav-links-hierarchy'],
-    links: [
-      {toHome: true},
-      wikiData.wikiInfo.enableListings && {
-        path: ['localized.listingIndex'],
-        title: language.$('listingIndex.title'),
-      },
-      {
-        html: language.$('tagPage.nav.tag', {
-          tag: link.tag(tag, {class: 'current'}),
-        }),
+export function pathsForTarget(tag) {
+  return [
+    {
+      type: 'page',
+      path: ['tag', tag.directory],
+
+      contentFunction: {
+        name: 'generateArtTagGalleryPage',
+        args: [tag],
       },
-    ],
-  };
+    },
+  ];
 }