content: generate{Album,}ReferencedArtworksPage

9 files changed, 258 insertions, 127 deletions

diff --git a/src/content/dependencies/generateAlbumReferencedArtworksPage.js b/src/content/dependencies/generateAlbumReferencedArtworksPage.js
new file mode 100644
index 00000000..3f3d77b3
--- /dev/null
+++ b/src/content/dependencies/generateAlbumReferencedArtworksPage.js
@@ -0,0 +1,68 @@
+export default {
+  contentDependencies: [
+    'generateAlbumCoverArtwork',
+    'generateAlbumStyleRules',
+    'generateBackToAlbumLink',
+    'generateReferencedArtworksPage',
+    'linkAlbum',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, album) => ({
+    page:
+      relation('generateReferencedArtworksPage', album.referencedArtworks),
+
+    albumStyleRules:
+      relation('generateAlbumStyleRules', album, null),
+
+    albumLink:
+      relation('linkAlbum', album),
+
+    backToAlbumLink:
+      relation('generateBackToAlbumLink', album),
+
+    cover:
+      relation('generateAlbumCoverArtwork', album),
+  }),
+
+  data: (album) => ({
+    name:
+      album.name,
+
+    color:
+      album.color,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    relations.page.slots({
+      title:
+        language.$('albumPage.title', {
+          album:
+            data.name,
+        }),
+
+      color: data.color,
+      styleRules: [relations.albumStyleRules],
+
+      cover: relations.cover,
+
+      navLinks: [
+        {auto: 'home'},
+
+        {
+          html:
+            relations.albumLink
+              .slot('attributes', {class: 'current'}),
+
+          accent:
+            html.tag('a', {href: ''},
+              {class: 'current'},
+
+              language.$('referencedArtworksPage.subtitle')),
+        },
+      ],
+
+      navBottomRowContent: relations.backToAlbumLink,
+    }),
+};
diff --git a/src/content/dependencies/generateBackToAlbumLink.js b/src/content/dependencies/generateBackToAlbumLink.js
new file mode 100644
index 00000000..6648b463
--- /dev/null
+++ b/src/content/dependencies/generateBackToAlbumLink.js
@@ -0,0 +1,15 @@
+export default {
+  contentDependencies: ['linkAlbum'],
+  extraDependencies: ['language'],
+
+  relations: (relation, track) => ({
+    trackLink:
+      relation('linkAlbum', track),
+  }),
+
+  generate: (relations, {language}) =>
+    relations.trackLink.slots({
+      content: language.$('albumPage.nav.backToAlbum'),
+      color: false,
+    }),
+};
diff --git a/src/content/dependencies/generateReferencedArtworksPage.js b/src/content/dependencies/generateReferencedArtworksPage.js
new file mode 100644
index 00000000..fa65a245
--- /dev/null
+++ b/src/content/dependencies/generateReferencedArtworksPage.js
@@ -0,0 +1,121 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateCoverGrid',
+    'generatePageLayout',
+    'image',
+    'linkAlbum',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, referencedArtworks) => ({
+    layout:
+      relation('generatePageLayout'),
+
+    coverGrid:
+      relation('generateCoverGrid'),
+
+    links:
+      referencedArtworks.map(({thing}) =>
+        (thing.album
+          ? relation('linkTrack', thing)
+          : relation('linkAlbum', thing))),
+
+    images:
+      referencedArtworks.map(({thing}) =>
+        relation('image', thing.artTags)),
+  }),
+
+  data: (referencedArtworks) => ({
+    count:
+      referencedArtworks.length,
+
+    names:
+      referencedArtworks
+        .map(({thing}) => thing.name),
+
+    paths:
+      referencedArtworks
+        .map(({thing}) =>
+          (thing.album
+            ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension]
+            : ['media.albumCover', thing.directory, thing.coverArtFileExtension])),
+
+    dimensions:
+      referencedArtworks
+        .map(({thing}) => thing.coverArtDimensions),
+
+    coverArtistNames:
+      referencedArtworks
+        .map(({thing}) =>
+          thing.coverArtistContribs
+            .map(contrib => contrib.artist.name)),
+  }),
+
+  slots: {
+    color: {validate: v => v.isColor},
+
+    styleRules: {type: 'html', mutable: false},
+
+    title: {type: 'html', mutable: false},
+    cover: {type: 'html', mutable: true},
+
+    navLinks: {validate: v => v.isArray},
+    navBottomRowContent: {type: 'html', mutable: false},
+  },
+
+  generate: (data, relations, slots, {html, language}) =>
+    language.encapsulate('referencedArtworksPage', pageCapsule =>
+      relations.layout.slots({
+        title: slots.title,
+        subtitle: language.$(pageCapsule, 'subtitle'),
+
+        color: slots.color,
+        styleRules: slots.styleRules,
+
+        cover:
+          slots.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: slots.navLinks,
+        navBottomRowContent: slots.navBottomRowContent,
+      })),
+};
diff --git a/src/content/dependencies/generateTrackNavLinks.js b/src/content/dependencies/generateTrackNavLinks.js
index e6e6d6ab..2d4ad378 100644
--- a/src/content/dependencies/generateTrackNavLinks.js
+++ b/src/content/dependencies/generateTrackNavLinks.js
@@ -55,7 +55,7 @@ export default {
             {class: 'current'},
 
             (slots.currentExtra === 'referenced-art'
-              ? language.$(navCapsule, 'referencedArtworks')
+              ? language.$('referencedArtworksPage.subtitle')
               : null)),
       },
     ]),
diff --git a/src/content/dependencies/generateTrackReferencedArtworksPage.js b/src/content/dependencies/generateTrackReferencedArtworksPage.js
index 545276c5..ac81e525 100644
--- a/src/content/dependencies/generateTrackReferencedArtworksPage.js
+++ b/src/content/dependencies/generateTrackReferencedArtworksPage.js
@@ -1,23 +1,17 @@
-import {stitchArrays} from '#sugar';
-
 export default {
   contentDependencies: [
     'generateAlbumStyleRules',
     'generateBackToTrackLink',
-    'generateCoverGrid',
-    'generatePageLayout',
+    'generateReferencedArtworksPage',
     'generateTrackCoverArtwork',
     'generateTrackNavLinks',
-    'image',
-    'linkAlbum',
-    'linkTrack',
   ],
 
   extraDependencies: ['html', 'language'],
 
   relations: (relation, track) => ({
-    layout:
-      relation('generatePageLayout'),
+    page:
+      relation('generateReferencedArtworksPage', track.referencedArtworks),
 
     albumStyleRules:
       relation('generateAlbumStyleRules', track.album, track),
@@ -30,21 +24,6 @@ export default {
 
     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) => ({
@@ -53,91 +32,26 @@ export default {
 
     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,
+    relations.page.slots({
+      title:
+        language.$('trackPage.title', {
+          track:
+            data.name,
+        }),
 
-            images:
-              stitchArrays({
-                image: relations.images,
-                path: data.paths,
-                dimensions: data.dimensions,
-              }).map(({image, path, dimensions}) =>
-                  image.slots({
-                    path,
-                    dimensions,
-                  })),
+      color: data.color,
+      styleRules: [relations.albumStyleRules],
 
-            info:
-              data.coverArtistNames.map(names =>
-                language.$('misc.coverGrid.details.coverArtists', {
-                  artists:
-                    language.formatUnitList(names),
-                })),
-          }),
-        ],
+      cover: relations.cover,
 
-        navLinkStyle: 'hierarchical',
-        navLinks:
-          html.resolve(
-            relations.navLinks
-              .slot('currentExtra', 'referenced-art')),
+      navLinks:
+        html.resolve(
+          relations.navLinks
+            .slot('currentExtra', 'referenced-art')),
 
-        navBottomRowContent: relations.backToTrackLink,
-      })),
+      navBottomRowContent: relations.backToTrackLink,
+    }),
 };
diff --git a/src/page/album.js b/src/page/album.js
index c7327cc8..76f3d6b0 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -1,3 +1,5 @@
+import {empty} from '#sugar';
+
 export const description = `per-album info, artwork gallery & commentary pages`;
 
 export function targets({wikiData}) {
@@ -38,6 +40,16 @@ export function pathsForTarget(album) {
       },
     },
 
+    !empty(album.referencedArtworks) && {
+      type: 'page',
+      path: ['albumReferencedArtworks', album.directory],
+
+      contentFunction: {
+        name: 'generateAlbumReferencedArtworksPage',
+        args: [album],
+      },
+    },
+
     /*
     {
       type: 'data',
diff --git a/src/page/track.js b/src/page/track.js
index beb804f8..ea5d0dce 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -20,15 +20,14 @@ export function pathsForTarget(track) {
       },
     },
 
-    !empty(track.referencedArtworks) &&
-      {
-        type: 'page',
-        path: ['trackReferencedArtworks', track.directory],
+    !empty(track.referencedArtworks) && {
+      type: 'page',
+      path: ['trackReferencedArtworks', track.directory],
 
-        contentFunction: {
-          name: 'generateTrackReferencedArtworksPage',
-          args: [track],
-        },
+      contentFunction: {
+        name: 'generateTrackReferencedArtworksPage',
+        args: [track],
       },
+    },
   ];
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index d93b98cc..e6682fa6 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -983,6 +983,9 @@ albumPage:
 
   nav:
     album: "{ALBUM}"
+
+    backToAlbum: "Return to album page"
+
     randomTrack: "Random Track"
     gallery: "Gallery"
     commentary: "Commentary"
@@ -2054,6 +2057,17 @@ redirectPage:
     This page has been moved to {TARGET}.
 
 #
+# referencedArtworksPage:
+#   The "referenced artworks" page shows a list of all the artworks which
+#   some artwork references.
+#
+referencedArtworksPage:
+  subtitle: "Referenced Artworks"
+
+  statsLine: >-
+    References {ARTWORKS}.
+
+#
 # tagPage:
 #   The tag gallery page displays all the artworks that a tag has
 #   been featured in, in one neat grid, with each artwork displaying
@@ -2091,8 +2105,6 @@ trackPage:
 
     backToTrack: "Return to track page"
 
-    referencedArtworks: "Referenced Artworks"
-
     track:
       _: "{TRACK}"
       withNumber: "{NUMBER}. {TRACK}"
@@ -2111,15 +2123,3 @@ 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 e4224ef6..b66208b5 100644
--- a/src/url-spec.js
+++ b/src/url-spec.js
@@ -37,6 +37,8 @@ const urlSpec = {
       album: 'album/<>/',
       albumCommentary: 'commentary/album/<>/',
       albumGallery: 'album/<>/gallery/',
+      albumReferencedArtworks: 'album/<>/referenced-art/',
+      albumReferencingArtworks: 'album/<>/referencing-art/',
 
       artist: 'artist/<>/',
       artistGallery: 'artist/<>/gallery/',