"Listings for..." & "See also..." sections on listing pages

4 files changed, 63 insertions, 3 deletions

diff --git a/src/listing-spec.js b/src/listing-spec.js
index e86fb403..22e93514 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -19,6 +19,10 @@ const listingSpec = [
     directory: 'albums/by-name',
     stringsKey: 'listAlbums.byName',
 
+    seeAlso: [
+      'tracks/by-album',
+    ],
+
     data: ({wikiData: {albumData}}) =>
       sortAlphabetically(albumData.slice()),
 
@@ -68,6 +72,10 @@ const listingSpec = [
     directory: 'albums/by-date',
     stringsKey: 'listAlbums.byDate',
 
+    seeAlso: [
+      'tracks/by-date',
+    ],
+
     data: ({wikiData: {albumData}}) =>
       sortChronologically(
         albumData
@@ -829,6 +837,10 @@ const listingSpec = [
     directory: 'tracks/with-sheet-music-files',
     stringsKey: 'listTracks.withSheetMusicFiles',
 
+    seeAlso: [
+      'all-sheet-music',
+    ],
+
     data: ({wikiData: {albumData}}) =>
       albumData
         .map(album => ({
@@ -948,6 +960,10 @@ const listingSpec = [
     stringsKey: 'other.allSheetMusic',
     groupUnderOther: true,
 
+    seeAlso: [
+      'tracks/with-sheet-music-files',
+    ],
+
     data: ({wikiData: {albumData}}) =>
       albumData
         .map(album => ({
diff --git a/src/page/listing.js b/src/page/listing.js
index 2412efe6..73c30827 100644
--- a/src/page/listing.js
+++ b/src/page/listing.js
@@ -27,8 +27,22 @@ export function write(listing, {wikiData}) {
     return null;
   }
 
+  const {listingSpec, listingTargetSpec} = wikiData;
+
+  const getTitleKey = l => `listingPage.${l.stringsKey}.title`;
+
   const data = listing.data ? listing.data({wikiData}) : null;
 
+  // TODO: Invalid listing directories filtered here aren't warned about anywhere.
+  const seeAlso =
+    listing.seeAlso
+     ?.map(directory => listingSpec.find(l => l.directory === directory))
+      .filter(Boolean)
+    ?? null;
+
+  const currentTarget = listingTargetSpec.find(({listings}) => listings.includes(listing));
+  const currentListing = listing;
+
   const page = {
     type: 'page',
     path: ['listing', listing.directory],
@@ -40,15 +54,39 @@ export function write(listing, {wikiData}) {
         link,
       } = opts;
 
-      const titleKey = `listingPage.${listing.stringsKey}.title`;
-
       return {
-        title: language.$(titleKey),
+        title: language.$(getTitleKey(listing)),
 
         main: {
           headingMode: 'sticky',
 
           content: [
+            currentTarget.listings.length > 1 &&
+              html.tag('p',
+                language.$('listingPage.listingsFor', {
+                  target: currentTarget.title({language}),
+                  listings:
+                    language.formatUnitList(
+                      currentTarget.listings.map(listing =>
+                        html.tag('span',
+                          {class: listing === currentListing ? 'current' : ''},
+                          link.listing(listing, {
+                            class: 'nowrap',
+                            text: language.$(getTitleKey(listing) + '.short'),
+                          })))),
+                })),
+
+            !empty(seeAlso) &&
+              html.tag('p',
+                language.$('listingPage.seeAlso', {
+                  listings:
+                    language.formatUnitList(
+                      seeAlso.map(listing =>
+                        link.listing(listing, {
+                          text: language.$(getTitleKey(listing)),
+                        }))),
+                })),
+
             ...html.fragment(
               listing.html &&
                 (listing.data
diff --git a/src/static/site3.css b/src/static/site3.css
index b7f95f54..3ebe782d 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -507,6 +507,10 @@ a:hover {
   font-size: 1em;
 }
 
+p .current {
+  font-weight: 800;
+}
+
 #cover-art-container {
   font-size: 0.8em;
 }
diff --git a/src/strings-default.json b/src/strings-default.json
index 5f07d8a3..2761582e 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -308,6 +308,8 @@
   "listingPage.target.track": "Tracks",
   "listingPage.target.tag": "Tags",
   "listingPage.target.other": "Other",
+  "listingPage.listingsFor": "Listings for {TARGET}: {LISTINGS}",
+  "listingPage.seeAlso": "Also check out: {LISTINGS}",
   "listingPage.listAlbums.byName.title": "Albums - by Name",
   "listingPage.listAlbums.byName.title.short": "...by Name",
   "listingPage.listAlbums.byName.item": "{ALBUM} ({TRACKS})",