6 files changed, 205 insertions, 1 deletions

diff --git a/src/content/dependencies/generateBackToTrackLink.js b/src/content/dependencies/generateBackToTrackLink.js
new file mode 100644
index 00000000..8677d811
--- /dev/null
+++ b/src/content/dependencies/generateBackToTrackLink.js
@@ -0,0 +1,15 @@
+export default {
+  contentDependencies: ['linkTrack'],
+  extraDependencies: ['language'],
+
+  relations: (relation, track) => ({
+    trackLink:
+      relation('linkTrack', track),
+  }),
+
+  generate: (relations, {language}) =>
+    relations.trackLink.slots({
+      content: language.$('trackPage.nav.backToTrack'),
+      color: false,
+    }),
+};
diff --git a/src/content/dependencies/generateTrackNavLinks.js b/src/content/dependencies/generateTrackNavLinks.js
index 89da171a..e6e6d6ab 100644
--- a/src/content/dependencies/generateTrackNavLinks.js
+++ b/src/content/dependencies/generateTrackNavLinks.js
@@ -18,7 +18,11 @@ export default {
       track.album.tracks.indexOf(track) + 1,
   }),
 
-  slots: {},
+  slots: {
+    currentExtra: {
+      validate: v => v.is('referenced-art'),
+    },
+  },
 
   generate: (data, relations, slots, {html, language}) =>
     language.encapsulate('trackPage.nav', navCapsule => [
@@ -42,6 +46,17 @@ export default {
 
             return language.$(workingCapsule, workingOptions);
           }),
+
+        accent:
+          html.tag('a',
+            {[html.onlyIfContent]: true},
+
+            {href: ''},
+            {class: 'current'},
+
+            (slots.currentExtra === 'referenced-art'
+              ? language.$(navCapsule, 'referencedArtworks')
+              : null)),
       },
     ]),
 };
diff --git a/src/content/dependencies/generateTrackReferencedArtworksPage.js b/src/content/dependencies/generateTrackReferencedArtworksPage.js
new file mode 100644
index 00000000..545276c5
--- /dev/null
+++ b/src/content/dependencies/generateTrackReferencedArtworksPage.js
@@ -0,0 +1,143 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateAlbumStyleRules',
+    'generateBackToTrackLink',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'generateTrackCoverArtwork',
+    'generateTrackNavLinks',
+    'image',
+    'linkAlbum',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, track) => ({
+    layout:
+      relation('generatePageLayout'),
+
+    albumStyleRules:
+      relation('generateAlbumStyleRules', track.album, track),
+
+    navLinks:
+      relation('generateTrackNavLinks', track),
+
+    backToTrackLink:
+      relation('generateBackToTrackLink', track),
+
+    cover:
+      relation('generateTrackCoverArtwork', track),
+
+    coverGrid:
+      relation('generateCoverGrid'),
+
+    links:
+      track.referencedArtworks
+        .map(({thing}) =>
+          (thing.album
+            ? relation('linkTrack', thing)
+            : relation('linkAlbum', thing))),
+
+    images:
+      track.referencedArtworks
+        .map(({thing}) =>
+          relation('image', thing.artTags)),
+  }),
+
+  data: (track) => ({
+    name:
+      track.name,
+
+    color:
+      track.color,
+
+    count:
+      track.referencedArtworks.length,
+
+    names:
+      track.referencedArtworks
+        .map(({thing}) => thing.name),
+
+    paths:
+      track.referencedArtworks
+        .map(({thing}) =>
+          (thing.album
+            ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension]
+            : ['media.albumCover', thing.directory, thing.coverArtFileExtension])),
+
+    dimensions:
+      track.referencedArtworks
+        .map(({thing}) => thing.coverArtDimensions),
+
+    coverArtistNames:
+      track.referencedArtworks
+        .map(({thing}) =>
+          thing.coverArtistContribs
+            .map(contrib => contrib.artist.name)),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('trackReferencedArtworksPage', pageCapsule =>
+      relations.layout.slots({
+        title:
+          language.$(pageCapsule, 'title', {
+            track:
+              data.name,
+          }),
+
+        subtitle:
+          language.$(pageCapsule, 'subtitle'),
+
+        color: data.color,
+        styleRules: [relations.albumStyleRules],
+
+        cover:
+          relations.cover
+            .slot('mode', 'primary-artists'),
+
+        mainClasses: ['top-index'],
+        mainContent: [
+          html.tag('p', {class: 'quick-info'},
+            language.$(pageCapsule, 'statsLine', {
+              artworks:
+                language.countArtworks(data.count, {
+                  unit: true,
+                }),
+            })),
+
+          relations.coverGrid.slots({
+            links: relations.links,
+            names: data.names,
+
+            images:
+              stitchArrays({
+                image: relations.images,
+                path: data.paths,
+                dimensions: data.dimensions,
+              }).map(({image, path, dimensions}) =>
+                  image.slots({
+                    path,
+                    dimensions,
+                  })),
+
+            info:
+              data.coverArtistNames.map(names =>
+                language.$('misc.coverGrid.details.coverArtists', {
+                  artists:
+                    language.formatUnitList(names),
+                })),
+          }),
+        ],
+
+        navLinkStyle: 'hierarchical',
+        navLinks:
+          html.resolve(
+            relations.navLinks
+              .slot('currentExtra', 'referenced-art')),
+
+        navBottomRowContent: relations.backToTrackLink,
+      })),
+};
diff --git a/src/page/track.js b/src/page/track.js
index e75b6958..beb804f8 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -1,5 +1,7 @@
 // Track page specification.
 
+import {empty} from '#sugar';
+
 export const description = `per-track info pages`;
 
 export function targets({wikiData}) {
@@ -17,5 +19,16 @@ export function pathsForTarget(track) {
         args: [track],
       },
     },
+
+    !empty(track.referencedArtworks) &&
+      {
+        type: 'page',
+        path: ['trackReferencedArtworks', track.directory],
+
+        contentFunction: {
+          name: 'generateTrackReferencedArtworksPage',
+          args: [track],
+        },
+      },
   ];
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index dd80063b..d93b98cc 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -2089,6 +2089,10 @@ trackPage:
   nav:
     random: "Random"
 
+    backToTrack: "Return to track page"
+
+    referencedArtworks: "Referenced Artworks"
+
     track:
       _: "{TRACK}"
       withNumber: "{NUMBER}. {TRACK}"
@@ -2107,3 +2111,15 @@ trackPage:
       withArtists.withCoverArtists: "By {ARTISTS}; art by {COVER_ARTISTS}."
       withArtists: "By {ARTISTS}."
       withCoverArtists: "Art by {COVER_ARTISTS}."
+
+#
+# trackReferencedArtworksPage:
+#   The track referenced-artworks page shows a gallery grid of all the
+#   artworks which the art for a track references.
+#
+trackReferencedArtworksPage:
+  title: "{TRACK}"
+  subtitle: "Referenced Artworks"
+
+  statsLine: >-
+    References {ARTWORKS}.
diff --git a/src/url-spec.js b/src/url-spec.js
index 56366ed4..e4224ef6 100644
--- a/src/url-spec.js
+++ b/src/url-spec.js
@@ -65,6 +65,8 @@ const urlSpec = {
       tag: 'tag/<>/',
 
       track: 'track/<>/',
+      trackReferencedArtworks: 'track/<>/referenced-art/',
+      trackReferencingArtworks: 'track/<>/referencing-art/',
     },
   },