improved sidebar/index layout for listing pages

4 files changed, 169 insertions, 52 deletions

diff --git a/src/listing-spec.js b/src/listing-spec.js
index 90a2de5a..c5b9429e 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -15,7 +15,7 @@ import {
 const listingSpec = [
     {
         directory: 'albums/by-name',
-        title: ({strings}) => strings('listingPage.listAlbums.byName.title'),
+        stringsKey: 'listAlbums.byName',
 
         data({wikiData}) {
             return wikiData.albumData.slice()
@@ -32,7 +32,7 @@ const listingSpec = [
 
     {
         directory: 'albums/by-tracks',
-        title: ({strings}) => strings('listingPage.listAlbums.byTracks.title'),
+        stringsKey: 'listAlbums.byTracks',
 
         data({wikiData}) {
             return wikiData.albumData.slice()
@@ -49,7 +49,7 @@ const listingSpec = [
 
     {
         directory: 'albums/by-duration',
-        title: ({strings}) => strings('listingPage.listAlbums.byDuration.title'),
+        stringsKey: 'listAlbums.byDuration',
 
         data({wikiData}) {
             return wikiData.albumData
@@ -67,7 +67,7 @@ const listingSpec = [
 
     {
         directory: 'albums/by-date',
-        title: ({strings}) => strings('listingPage.listAlbums.byDate.title'),
+        stringsKey: 'listAlbums.byDate',
 
         data({wikiData}) {
             return sortByDate(wikiData.albumData
@@ -84,7 +84,7 @@ const listingSpec = [
 
     {
         directory: 'albusm/by-date-added',
-        title: ({strings}) => strings('listingPage.listAlbums.byDateAdded.title'),
+        stringsKey: 'listAlbums.byDateAdded',
 
         data({wikiData}) {
             return chunkByProperties(wikiData.albumData.slice().sort((a, b) => {
@@ -116,7 +116,7 @@ const listingSpec = [
 
     {
         directory: 'artists/by-name',
-        title: ({strings}) => strings('listingPage.listArtists.byName.title'),
+        stringsKey: 'listArtists.byName',
 
         data({wikiData}) {
             return wikiData.artistData.slice()
@@ -134,7 +134,7 @@ const listingSpec = [
 
     {
         directory: 'artists/by-contribs',
-        title: ({strings}) => strings('listingPage.listArtists.byContribs.title'),
+        stringsKey: 'listArtists.byContribs',
 
         data({wikiData}) {
             return {
@@ -209,7 +209,7 @@ const listingSpec = [
 
     {
         directory: 'artists/by-commentary',
-        title: ({strings}) => strings('listingPage.listArtists.byCommentary.title'),
+        stringsKey: 'listArtists.byCommentary',
 
         data({wikiData}) {
             return wikiData.artistData
@@ -228,7 +228,7 @@ const listingSpec = [
 
     {
         directory: 'artists/by-duration',
-        title: ({strings}) => strings('listingPage.listArtists.byDuration.title'),
+        stringsKey: 'listArtists.byDuration',
 
         data({wikiData}) {
             return wikiData.artistData
@@ -249,7 +249,7 @@ const listingSpec = [
 
     {
         directory: 'artists/by-latest',
-        title: ({strings}) => strings('listingPage.listArtists.byLatest.title'),
+        stringsKey: 'listArtists.byLatest',
 
         data({wikiData}) {
             const reversedTracks = wikiData.trackData.slice().reverse();
@@ -330,7 +330,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-name',
-        title: ({strings}) => strings('listingPage.listGroups.byName.title'),
+        stringsKey: 'listGroups.byName',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
         data: ({wikiData}) => wikiData.groupData.slice().sort(sortByName),
 
@@ -346,7 +346,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-category',
-        title: ({strings}) => strings('listingPage.listGroups.byCategory.title'),
+        stringsKey: 'listGroups.byCategory',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
         data: ({wikiData}) => wikiData.groupCategoryData,
 
@@ -376,7 +376,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-albums',
-        title: ({strings}) => strings('listingPage.listGroups.byAlbums.title'),
+        stringsKey: 'listGroups.byAlbums',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
 
         data({wikiData}) {
@@ -395,7 +395,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-tracks',
-        title: ({strings}) => strings('listingPage.listGroups.byTracks.title'),
+        stringsKey: 'listGroups.byTracks',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
 
         data({wikiData}) {
@@ -414,7 +414,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-duration',
-        title: ({strings}) => strings('listingPage.listGroups.byDuration.title'),
+        stringsKey: 'listGroups.byDuration',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
 
         data({wikiData}) {
@@ -433,7 +433,7 @@ const listingSpec = [
 
     {
         directory: 'groups/by-latest-album',
-        title: ({strings}) => strings('listingPage.listGroups.byLatest.title'),
+        stringsKey: 'listGroups.byLatest',
         condition: ({wikiData}) => wikiData.wikiInfo.features.groupUI,
 
         data({wikiData}) {
@@ -464,7 +464,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-name',
-        title: ({strings}) => strings('listingPage.listTracks.byName.title'),
+        stringsKey: 'listTracks.byName',
 
         data({wikiData}) {
             return wikiData.trackData.slice().sort(sortByName);
@@ -479,7 +479,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-album',
-        title: ({strings}) => strings('listingPage.listTracks.byAlbum.title'),
+        stringsKey: 'listTracks.byAlbum',
         data: ({wikiData}) => wikiData.albumData,
 
         html(albumData, {link, strings}) {
@@ -505,7 +505,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-date',
-        title: ({strings}) => strings('listingPage.listTracks.byDate.title'),
+        stringsKey: 'listTracks.byDate',
 
         data({wikiData}) {
             return chunkByProperties(
@@ -541,7 +541,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-duration',
-        title: ({strings}) => strings('listingPage.listTracks.byDuration.title'),
+        stringsKey: 'listTracks.byDuration',
 
         data({wikiData}) {
             return wikiData.trackData
@@ -561,7 +561,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-duration-in-album',
-        title: ({strings}) => strings('listingPage.listTracks.byDurationInAlbum.title'),
+        stringsKey: 'listTracks.byDurationInAlbum',
 
         data({wikiData}) {
             return wikiData.albumData.map(album => ({
@@ -594,7 +594,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/by-times-referenced',
-        title: ({strings}) => strings('listingPage.listTracks.byTimesReferenced.title'),
+        stringsKey: 'listTracks.byTimesReferenced',
 
         data({wikiData}) {
             return wikiData.trackData
@@ -613,7 +613,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/in-flashes/by-album',
-        title: ({strings}) => strings('listingPage.listTracks.inFlashes.byAlbum.title'),
+        stringsKey: 'listTracks.inFlashes.byAlbum',
         condition: ({wikiData}) => wikiData.wikiInfo.features.flashesAndGames,
 
         data({wikiData}) {
@@ -647,7 +647,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/in-flashes/by-flash',
-        title: ({strings}) => strings('listingPage.listTracks.inFlashes.byFlash.title'),
+        stringsKey: 'listTracks.inFlashes.byFlash',
         condition: ({wikiData}) => wikiData.wikiInfo.features.flashesAndGames,
         data: ({wikiData}) => wikiData.flashData,
 
@@ -676,7 +676,7 @@ const listingSpec = [
 
     {
         directory: 'tracks/with-lyrics',
-        title: ({strings}) => strings('listingPage.listTracks.withLyrics.title'),
+        stringsKey: 'listTracks.withLyrics',
 
         data({wikiData}) {
             return chunkByProperties(wikiData.trackData.filter(t => t.lyrics), ['album']);
@@ -706,7 +706,7 @@ const listingSpec = [
 
     {
         directory: 'tags/by-name',
-        title: ({strings}) => strings('listingPage.listTags.byName.title'),
+        stringsKey: 'listTags.byName',
         condition: ({wikiData}) => wikiData.wikiInfo.features.artTagUI,
 
         data({wikiData}) {
@@ -726,7 +726,7 @@ const listingSpec = [
 
     {
         directory: 'tags/by-uses',
-        title: ({strings}) => strings('listingPage.listTags.byUses.title'),
+        stringsKey: 'listTags.byUses',
         condition: ({wikiData}) => wikiData.wikiInfo.features.artTagUI,
 
         data({wikiData}) {
@@ -746,7 +746,7 @@ const listingSpec = [
 
     {
         directory: 'random',
-        title: ({strings}) => `Random Pages`,
+        stringsKey: 'other.randomPages',
 
         data: ({wikiData}) => ({
             officialAlbumData: wikiData.officialAlbumData,
@@ -784,4 +784,36 @@ const listingSpec = [
     }
 ];
 
-export default listingSpec;
+const filterListings = directoryPrefix => listingSpec
+    .filter(l => l.directory.startsWith(directoryPrefix));
+
+const listingTargetSpec = [
+    {
+        title: ({strings}) => strings('listingPage.target.album'),
+        listings: filterListings('album')
+    },
+    {
+        title: ({strings}) => strings('listingPage.target.artist'),
+        listings: filterListings('artist')
+    },
+    {
+        title: ({strings}) => strings('listingPage.target.group'),
+        listings: filterListings('group')
+    },
+    {
+        title: ({strings}) => strings('listingPage.target.track'),
+        listings: filterListings('track')
+    },
+    {
+        title: ({strings}) => strings('listingPage.target.tag'),
+        listings: filterListings('tag')
+    },
+    {
+        title: ({strings}) => strings('listingPage.target.other'),
+        listings: [
+            listingSpec.find(l => l.directory === 'random')
+        ]
+    }
+];
+
+export {listingSpec, listingTargetSpec};
diff --git a/src/page/listing.js b/src/page/listing.js
index d4021747..d3ab79e0 100644
--- a/src/page/listing.js
+++ b/src/page/listing.js
@@ -47,14 +47,15 @@ export function write(listing, {wikiData}) {
         type: 'page',
         path: ['listing', listing.directory],
         page: opts => {
-            const { link, strings } = opts;
+            const { getLinkThemeString, link, strings } = opts;
+            const titleKey = `listingPage.${listing.stringsKey}.title`;
 
             return {
-                title: listing.title({strings}),
+                title: strings(titleKey),
 
                 main: {
                     content: fixWS`
-                        <h1>${listing.title({strings})}</h1>
+                        <h1>${strings(titleKey)}</h1>
                         ${listing.html && (listing.data
                             ? listing.html(data, opts)
                             : listing.html(opts))}
@@ -70,7 +71,12 @@ export function write(listing, {wikiData}) {
                 },
 
                 sidebarLeft: {
-                    content: generateSidebarForListings(listing, {link, strings, wikiData})
+                    content: generateSidebarForListings(listing, {
+                        getLinkThemeString,
+                        link,
+                        strings,
+                        wikiData
+                    })
                 },
 
                 nav: {
@@ -101,6 +107,7 @@ export function writeTargetless({wikiData}) {
         type: 'page',
         path: ['listingIndex'],
         page: ({
+            getLinkThemeString,
             strings,
             link
         }) => ({
@@ -117,12 +124,17 @@ export function writeTargetless({wikiData}) {
                     })}</p>
                     <hr>
                     <p>${strings('listingIndex.exploreList')}</p>
-                    ${generateLinkIndexForListings(null, {link, strings, wikiData})}
+                    ${generateLinkIndexForListings(null, false, {link, strings, wikiData})}
                 `
             },
 
             sidebarLeft: {
-                content: generateSidebarForListings(null, {link, strings, wikiData})
+                content: generateSidebarForListings(null, {
+                    getLinkThemeString,
+                    link,
+                    strings,
+                    wikiData
+                })
             },
 
             nav: {simple: true}
@@ -134,25 +146,62 @@ export function writeTargetless({wikiData}) {
 
 // Utility functions
 
-function generateSidebarForListings(currentListing, {link, strings, wikiData}) {
+function generateSidebarForListings(currentListing, {
+    getLinkThemeString,
+    link,
+    strings,
+    wikiData
+}) {
     return fixWS`
         <h1>${link.listingIndex('', {text: strings('listingIndex.title')})}</h1>
-        ${generateLinkIndexForListings(currentListing, {link, strings, wikiData})}
+        ${generateLinkIndexForListings(currentListing, true, {
+            getLinkThemeString,
+            link,
+            strings,
+            wikiData
+        })}
     `;
 }
 
-function generateLinkIndexForListings(currentListing, {link, strings, wikiData}) {
-    const { listingSpec } = wikiData;
-
-    return fixWS`
-        <ul>
-            ${(listingSpec
-                .filter(({ condition }) => !condition || condition({wikiData}))
-                .map(listing => html.tag('li',
-                    {class: [listing === currentListing && 'current']},
-                    link.listing(listing, {text: listing.title({strings})})
-                ))
-                .join('\n'))}
-        </ul>
-    `;
+function generateLinkIndexForListings(currentListing, forSidebar, {
+    getLinkThemeString,
+    link,
+    strings,
+    wikiData
+}) {
+    const { listingTargetSpec, wikiInfo } = wikiData;
+
+    const filteredByCondition = listingTargetSpec
+        .map(({ listings, ...rest }) => ({
+            ...rest,
+            listings: listings.filter(({ condition: c }) => !c || c({wikiData}))
+        }))
+        .filter(({ listings }) => listings.length > 0);
+
+    const genUL = listings => html.tag('ul',
+        listings.map(listing => html.tag('li',
+            {class: [listing === currentListing && 'current']},
+            link.listing(listing, {text: strings(`listingPage.${listing.stringsKey}.title.short`)})
+        )));
+
+    if (forSidebar) {
+        return filteredByCondition.map(({ title, listings }) =>
+            html.tag('details', {
+                open: !forSidebar || listings.includes(currentListing),
+                class: listings.includes(currentListing) && 'current'
+            }, [
+                html.tag('summary',
+                    {style: getLinkThemeString(wikiInfo.color)},
+                    html.tag('span',
+                        {class: 'group-name'},
+                        title({strings}))),
+                genUL(listings)
+            ])).join('\n');
+    } else {
+        return html.tag('dl',
+            filteredByCondition.flatMap(({ title, listings }) => [
+                html.tag('dt', title({strings})),
+                html.tag('dd', genUL(listings))
+            ]));
+    }
 }
diff --git a/src/strings-default.json b/src/strings-default.json
index dd892392..60a76614 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -222,71 +222,106 @@
     "listingIndex.title": "Listings",
     "listingIndex.infoLine": "{WIKI}: {TRACKS} across {ALBUMS}, totaling {DURATION}.",
     "listingIndex.exploreList": "Feel free to explore any of the listings linked below and in the sidebar!",
+    "listingPage.target.album": "Albums",
+    "listingPage.target.artist": "Artists",
+    "listingPage.target.group": "Groups",
+    "listingPage.target.track": "Tracks",
+    "listingPage.target.tag": "Tag",
+    "listingPage.target.other": "Other",
     "listingPage.listAlbums.byName.title": "Albums - by Name",
+    "listingPage.listAlbums.byName.title.short": "...by Name",
     "listingPage.listAlbums.byName.item": "{ALBUM} ({TRACKS})",
     "listingPage.listAlbums.byTracks.title": "Albums - by Tracks",
+    "listingPage.listAlbums.byTracks.title.short": "...by Tracks",
     "listingPage.listAlbums.byTracks.item": "{ALBUM} ({TRACKS})",
     "listingPage.listAlbums.byDuration.title": "Albums - by Duration",
+    "listingPage.listAlbums.byDuration.title.short": "...by Duration",
     "listingPage.listAlbums.byDuration.item": "{ALBUM} ({DURATION})",
     "listingPage.listAlbums.byDate.title": "Albums - by Date",
+    "listingPage.listAlbums.byDate.title.short": "...by Date",
     "listingPage.listAlbums.byDate.item": "{ALBUM} ({DATE})",
+    "listingPage.listAlbums.byDateAdded.title.short": "...by Date Added to Wiki",
     "listingPage.listAlbums.byDateAdded.title": "Albums - by Date Added to Wiki",
     "listingPage.listAlbums.byDateAdded.date": "{DATE}",
     "listingPage.listAlbums.byDateAdded.album": "{ALBUM}",
     "listingPage.listArtists.byName.title": "Artists - by Name",
+    "listingPage.listArtists.byName.title.short": "...by Name",
     "listingPage.listArtists.byName.item": "{ARTIST} ({CONTRIBUTIONS})",
     "listingPage.listArtists.byContribs.title": "Artists - by Contributions",
+    "listingPage.listArtists.byContribs.title.short": "...by Contributions",
     "listingPage.listArtists.byContribs.item": "{ARTIST} ({CONTRIBUTIONS})",
     "listingPage.listArtists.byCommentary.title": "Artists - by Commentary Entries",
+    "listingPage.listArtists.byCommentary.title.short": "...by Commentary Entries",
     "listingPage.listArtists.byCommentary.item": "{ARTIST} ({ENTRIES})",
     "listingPage.listArtists.byDuration.title": "Artists - by Duration",
+    "listingPage.listArtists.byDuration.title.short": "...by Duration",
     "listingPage.listArtists.byDuration.item": "{ARTIST} ({DURATION})",
     "listingPage.listArtists.byLatest.title": "Artists - by Latest Contribution",
+    "listingPage.listArtists.byLatest.title.short": "...by Latest Contribution",
     "listingPage.listArtists.byLatest.item": "{ARTIST} ({DATE})",
     "listingPage.listGroups.byName.title": "Groups - by Name",
+    "listingPage.listGroups.byName.title.short": "...by Name",
     "listingPage.listGroups.byName.item": "{GROUP} ({GALLERY})",
     "listingPage.listGroups.byName.item.gallery": "Gallery",
     "listingPage.listGroups.byCategory.title": "Groups - by Category",
+    "listingPage.listGroups.byCategory.title.short": "...by Category",
     "listingPage.listGroups.byCategory.category": "{CATEGORY}",
     "listingPage.listGroups.byCategory.group": "{GROUP} ({GALLERY})",
     "listingPage.listGroups.byCategory.group.gallery": "Gallery",
     "listingPage.listGroups.byAlbums.title": "Groups - by Albums",
+    "listingPage.listGroups.byAlbums.title.short": "...by Albums",
     "listingPage.listGroups.byAlbums.item": "{GROUP} ({ALBUMS})",
     "listingPage.listGroups.byTracks.title": "Groups - by Tracks",
+    "listingPage.listGroups.byTracks.title.short": "...by Tracks",
     "listingPage.listGroups.byTracks.item": "{GROUP} ({TRACKS})",
     "listingPage.listGroups.byDuration.title": "Groups - by Duration",
+    "listingPage.listGroups.byDuration.title.short": "...by Duration",
     "listingPage.listGroups.byDuration.item": "{GROUP} ({DURATION})",
     "listingPage.listGroups.byLatest.title": "Groups - by Latest Album",
+    "listingPage.listGroups.byLatest.title.short": "...by Latest Album",
     "listingPage.listGroups.byLatest.item": "{GROUP} ({DATE})",
     "listingPage.listTracks.byName.title": "Tracks - by Name",
+    "listingPage.listTracks.byName.title.short": "...by Name",
     "listingPage.listTracks.byName.item": "{TRACK}",
     "listingPage.listTracks.byAlbum.title": "Tracks - by Album",
+    "listingPage.listTracks.byAlbum.title.short": "...by Album",
     "listingPage.listTracks.byAlbum.album": "{ALBUM}",
     "listingPage.listTracks.byAlbum.track": "{TRACK}",
     "listingPage.listTracks.byDate.title": "Tracks - by Date",
+    "listingPage.listTracks.byDate.title.short": "...by Date",
     "listingPage.listTracks.byDate.album": "{ALBUM} ({DATE})",
     "listingPage.listTracks.byDate.track": "{TRACK}",
     "listingPage.listTracks.byDate.track.rerelease": "{TRACK} (re-release)",
     "listingPage.listTracks.byDuration.title": "Tracks - by Duration",
+    "listingPage.listTracks.byDuration.title.short": "...by Duration",
     "listingPage.listTracks.byDuration.item": "{TRACK} ({DURATION})",
     "listingPage.listTracks.byDurationInAlbum.title": "Tracks - by Duration (in Album)",
+    "listingPage.listTracks.byDurationInAlbum.title.short": "...by Duration (in Album)",
     "listingPage.listTracks.byDurationInAlbum.album": "{ALBUM}",
     "listingPage.listTracks.byDurationInAlbum.track": "{TRACK} ({DURATION})",
     "listingPage.listTracks.byTimesReferenced.title": "Tracks - by Times Referenced",
+    "listingPage.listTracks.byTimesReferenced.title.short": "...by Times Referenced",
     "listingPage.listTracks.byTimesReferenced.item": "{TRACK} ({TIMES_REFERENCED})",
     "listingPage.listTracks.inFlashes.byAlbum.title": "Tracks - in Flashes & Games (by Album)",
+    "listingPage.listTracks.inFlashes.byAlbum.title.short": "...in Flashes & Games (by Album)",
     "listingPage.listTracks.inFlashes.byAlbum.album": "{ALBUM} ({DATE})",
     "listingPage.listTracks.inFlashes.byAlbum.track": "{TRACK} (in {FLASHES})",
     "listingPage.listTracks.inFlashes.byFlash.title": "Tracks - in Flashes & Games (by Flash)",
+    "listingPage.listTracks.inFlashes.byFlash.title.short": "...in Flashes & Games (by Flash)",
     "listingPage.listTracks.inFlashes.byFlash.flash": "{FLASH} ({DATE})",
     "listingPage.listTracks.inFlashes.byFlash.track": "{TRACK} (from {ALBUM})",
     "listingPage.listTracks.withLyrics.title": "Tracks - with Lyrics",
+    "listingPage.listTracks.withLyrics.title.short": "...with Lyrics",
     "listingPage.listTracks.withLyrics.album": "{ALBUM} ({DATE})",
     "listingPage.listTracks.withLyrics.track": "{TRACK}",
     "listingPage.listTags.byName.title": "Tags - by Name",
+    "listingPage.listTags.byName.title.short": "...by Name",
     "listingPage.listTags.byName.item": "{TAG} ({TIMES_USED})",
     "listingPage.listTags.byUses.title": "Tags - by Uses",
+    "listingPage.listTags.byUses.title.short": "...by Uses",
     "listingPage.listTags.byUses.item": "{TAG} ({TIMES_USED})",
+    "listingPage.other.randomPages.title": "Random Pages",
+    "listingPage.other.randomPages.title.short": "Random Pages",
     "listingPage.misc.trackContributors": "Track Contributors",
     "listingPage.misc.artContributors": "Art Contributors",
     "listingPage.misc.artAndFlashContributors": "Art & Flash Contributors",
diff --git a/src/upd8.js b/src/upd8.js
index e2a5b734..e9b3d4ec 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -110,7 +110,7 @@ import {
 } from 'fs/promises';
 
 import genThumbs from './gen-thumbs.js';
-import listingSpec from './listing-spec.js';
+import { listingSpec, listingTargetSpec } from './listing-spec.js';
 import urlSpec from './url-spec.js';
 import * as pageSpecs from './page/index.js';
 
@@ -2155,6 +2155,7 @@ async function main() {
     const WD = wikiData;
 
     WD.listingSpec = listingSpec;
+    WD.listingTargetSpec = listingTargetSpec;
 
     const miscOptions = await parseOptions(process.argv.slice(2), {
         // Data files for the site, including flash, artist, and al8um data,