From 0d31ffdd127d4a199b8944ddb81f9013c45cd83c Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 27 Jun 2021 13:11:16 -0300 Subject: improved sidebar/index layout for listing pages --- src/listing-spec.js | 90 +++++++++++++++++++++++++++++++--------------- src/page/listing.js | 93 ++++++++++++++++++++++++++++++++++++------------ src/strings-default.json | 35 ++++++++++++++++++ src/upd8.js | 3 +- 4 files changed, 169 insertions(+), 52 deletions(-) (limited to 'src') 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` -

${listing.title({strings})}

+

${strings(titleKey)}

${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}) { })}

${strings('listingIndex.exploreList')}

- ${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`

${link.listingIndex('', {text: strings('listingIndex.title')})}

- ${generateLinkIndexForListings(currentListing, {link, strings, wikiData})} + ${generateLinkIndexForListings(currentListing, true, { + getLinkThemeString, + link, + strings, + wikiData + })} `; } -function generateLinkIndexForListings(currentListing, {link, strings, wikiData}) { - const { listingSpec } = wikiData; - - return fixWS` - - `; +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, -- cgit 1.3.0-6-gf8a5