From 1ad3694bf132604eb7044c5a47771637d2b5d56f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 7 Jul 2022 02:07:52 -0300 Subject: htmlify: artist, commentary, flash, static, tag --- src/page/album-commentary.js | 14 +- src/page/album.js | 49 +-- src/page/artist.js | 750 ++++++++++++++++++++----------------------- src/page/flash.js | 418 ++++++++++++------------ src/page/static.js | 17 +- src/page/tag.js | 56 ++-- src/page/track.js | 24 +- src/upd8.js | 6 +- 8 files changed, 644 insertions(+), 690 deletions(-) diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js index 43b8c8d6..beddf5aa 100644 --- a/src/page/album-commentary.js +++ b/src/page/album-commentary.js @@ -2,13 +2,8 @@ // Album commentary page and index specifications. -// Imports - -import * as html from '../util/html.js'; import {filterAlbumsByCommentary} from '../util/wiki-data.js'; -// Page exports - export function condition({wikiData}) { return filterAlbumsByCommentary(wikiData.albumData).length; } @@ -30,8 +25,9 @@ export function write(album) { getAlbumStylesheet, getLinkThemeString, getThemeString, - link, + html, language, + link, transformMultiline, }) => ({ title: language.$('albumCommentaryPage.title', {album: album.name}), @@ -105,7 +101,11 @@ export function writeTargetless({wikiData}) { const page = { type: 'page', path: ['commentaryIndex'], - page: ({link, language}) => ({ + page: ({ + html, + language, + link, + }) => ({ title: language.$('commentaryIndex.title'), main: { diff --git a/src/page/album.js b/src/page/album.js index 1cadde05..11c6da29 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -2,10 +2,6 @@ // Album page specification. -// Imports - -import * as html from '../util/html.js'; - import {bindOpts, compareArrays} from '../util/sugar.js'; import { @@ -14,17 +10,18 @@ import { getTotalDuration, } from '../util/wiki-data.js'; -// Page exports - export function targets({wikiData}) { return wikiData.albumData; } export function write(album, {wikiData}) { - const unbound_trackToListItem = ( - track, - {getArtistString, getLinkThemeString, link, language} - ) => { + const unbound_trackToListItem = (track, { + getArtistString, + getLinkThemeString, + html, + language, + link, + }) => { const itemOpts = { duration: language.formatDuration(track.duration ?? 0), track: link.track(track), @@ -111,6 +108,7 @@ export function write(album, {wikiData}) { getLinkThemeString, getSizeOfAdditionalFile, getThemeString, + html, link, language, transformMultiline, @@ -119,8 +117,9 @@ export function write(album, {wikiData}) { const trackToListItem = bindOpts(unbound_trackToListItem, { getArtistString, getLinkThemeString, - link, + html, language, + link, }); const cover = getAlbumCover(album); @@ -301,6 +300,7 @@ export function write(album, {wikiData}) { sidebarLeft: generateAlbumSidebar(album, null, { fancifyURL, getLinkThemeString, + html, link, language, transformMultiline, @@ -320,13 +320,15 @@ export function write(album, {wikiData}) { bottomRowContent: generateAlbumNavLinks(album, null, {language}), content: generateAlbumChronologyLinks(album, null, { generateChronologyLinks, + html, }), }, secondaryNav: generateAlbumSecondaryNav(album, null, { + getLinkThemeString, + html, language, link, - getLinkThemeString, }), }; }, @@ -340,8 +342,9 @@ export function write(album, {wikiData}) { export function generateAlbumSidebar(album, currentTrack, { fancifyURL, getLinkThemeString, - link, + html, language, + link, transformMultiline, }) { const isAlbumPage = !currentTrack; @@ -471,11 +474,12 @@ export function generateAlbumSidebar(album, currentTrack, { } } -export function generateAlbumSecondaryNav( - album, - currentTrack, - {link, language, getLinkThemeString} -) { +export function generateAlbumSecondaryNav(album, currentTrack, { + getLinkThemeString, + html, + language, + link, +}) { const isAlbumPage = !currentTrack; const {groups} = album; @@ -551,11 +555,10 @@ export function generateAlbumNavLinks( : `(${randomLink})`; } -export function generateAlbumChronologyLinks( - album, - currentTrack, - {generateChronologyLinks} -) { +export function generateAlbumChronologyLinks(album, currentTrack, { + generateChronologyLinks, + html, +}) { const isTrackPage = !!currentTrack; return html.tag( diff --git a/src/page/artist.js b/src/page/artist.js index 481b4e36..28d73eb7 100644 --- a/src/page/artist.js +++ b/src/page/artist.js @@ -4,12 +4,6 @@ // // NB: See artist-alias.js for artist alias redirect pages. -// Imports - -import fixWS from 'fix-whitespace'; - -import * as html from '../util/html.js'; - import {bindOpts, unique} from '../util/sugar.js'; import { @@ -19,8 +13,6 @@ import { sortChronologically, } from '../util/wiki-data.js'; -// Page exports - export function targets({wikiData}) { return wikiData.artistData; } @@ -37,16 +29,14 @@ export function write(artist, {wikiData}) { ...(artist.albumsAsBannerArtist ?? []), ...(artist.tracksAsCoverArtist ?? []), ]), - {getDate: (o) => o.coverArtDate} - ); + {getDate: (o) => o.coverArtDate}); const artThingsGallery = sortAlbumsTracksChronologically( [ ...(artist.albumsAsCoverArtist ?? []), ...(artist.tracksAsCoverArtist ?? []), ], - {getDate: (o) => o.coverArtDate} - ); + {getDate: (o) => o.coverArtDate}); const commentaryThings = sortAlbumsTracksChronologically([ ...(artist.albumsAsCommentator ?? []), @@ -72,25 +62,21 @@ export function write(artist, {wikiData}) { track: thing.album ? thing : null, date: thing.date, ...props, - })) - ), - ['date', 'album'] - ); + }))), + ['date', 'album']); const commentaryListChunks = chunkByProperties( commentaryThings.map((thing) => ({ album: thing.album || thing, track: thing.album ? thing : null, })), - ['album'] - ); + ['album']); const allTracks = sortAlbumsTracksChronologically( unique([ ...(artist.tracksAsArtist ?? []), ...(artist.tracksAsContributor ?? []), - ]) - ); + ])); const chunkTracks = (tracks) => chunkByProperties( @@ -110,8 +96,8 @@ export function write(artist, {wikiData}) { ].filter(Boolean), }, })), - ['date', 'album'] - ).map(({date, album, chunk}) => ({ + ['date', 'album']) + .map(({date, album, chunk}) => ({ date, album, chunk, @@ -123,12 +109,11 @@ export function write(artist, {wikiData}) { const countGroups = (things) => { const usedGroups = things.flatMap( - (thing) => thing.groups || thing.album?.groups || [] - ); + (thing) => thing.groups || thing.album?.groups || []); return groupData .map((group) => ({ group, - contributions: usedGroups.filter((g) => g === group).length, + contributions: usedGroups.filter(g => g === group).length, })) .filter(({contributions}) => contributions > 0) .sort((a, b) => b.contributions - a.contributions); @@ -195,76 +180,68 @@ export function write(artist, {wikiData}) { }) : entry; - const unbound_generateTrackList = ( - chunks, - {getArtistString, link, language} - ) => fixWS` -
- ${chunks - .map( - ({date, album, chunk, duration}) => fixWS` -
${ - date && duration - ? language.$( - 'artistPage.creditList.album.withDate.withDuration', - { - album: link.album(album), - date: language.formatDate(date), - duration: language.formatDuration(duration, { - approximate: true, - }), - } - ) - : date - ? language.$('artistPage.creditList.album.withDate', { - album: link.album(album), - date: language.formatDate(date), - }) - : duration - ? language.$('artistPage.creditList.album.withDuration', { - album: link.album(album), - duration: language.formatDuration(duration, { - approximate: true, - }), - }) - : language.$('artistPage.creditList.album', { - album: link.album(album), - }) - }
-
    - ${chunk - .map(({track, ...props}) => ({ - original: track.originalReleaseTrack, - entry: language.$( - 'artistPage.creditList.entry.track.withDuration', - { - track: link.track(track), - duration: language.formatDuration( - track.duration ?? 0 - ), - } - ), - ...props, - })) - .map(({original, ...opts}) => - html.tag( - 'li', - {class: original && 'rerelease'}, - generateEntryAccents({ - getArtistString, - language, - original, - ...opts, - }) - ) - ) - .join('\n')} -
- ` - ) - .join('\n')} -
- `; + const unbound_generateTrackList = (chunks, { + getArtistString, + html, + language, + link, + }) => + html.tag('dl', + chunks.flatMap(({date, album, chunk, duration}) => [ + html.tag('dt', + date && duration ? + language.$('artistPage.creditList.album.withDate.withDuration', { + album: link.album(album), + date: language.formatDate(date), + duration: language.formatDuration(duration, { + approximate: true, + }), + }) : + + date ? + language.$('artistPage.creditList.album.withDate', { + album: link.album(album), + date: language.formatDate(date), + }) : + + duration ? + language.$('artistPage.creditList.album.withDuration', { + album: link.album(album), + duration: language.formatDuration(duration, { + approximate: true, + }), + }) : + + language.$('artistPage.creditList.album', { + album: link.album(album), + })), + + html.tag('dd', + html.tag('ul', + chunk + .map(({track, ...props}) => ({ + original: track.originalReleaseTrack, + entry: language.$('artistPage.creditList.entry.track.withDuration', { + track: link.track(track), + duration: language.formatDuration( + track.duration ?? 0 + ), + }), + ...props, + })) + .map(({original, ...opts}) => + html.tag( + 'li', + {class: original && 'rerelease'}, + generateEntryAccents({ + getArtistString, + language, + original, + ...opts, + }) + ) + ))), + ])); const unbound_serializeArtistsAndContrib = (key, {serializeContribs, serializeLink}) => @@ -288,6 +265,15 @@ export function write(artist, {wikiData}) { })), })); + const jumpTo = { + tracks: allTracks.length > 0, + art: artThingsAll.length > 0, + flashes: wikiInfo.enableFlashesAndGames && flashes.length > 0, + commentary: commentaryThings.length > 0, + }; + + const showJumpTo = Object.values(jumpTo).includes(true); + const data = { type: 'data', path: ['artist', artist.directory], @@ -353,300 +339,258 @@ export function write(artist, {wikiData}) { generateInfoGalleryLinks, getArtistAvatar, getArtistString, + html, link, language, transformMultiline, }) => { const generateTrackList = bindOpts(unbound_generateTrackList, { getArtistString, - link, + html, language, + link, }); return { title: language.$('artistPage.title', {artist: name}), main: { - content: fixWS` - ${ - artist.hasAvatar && - generateCoverLink({ - src: getArtistAvatar(artist), - alt: language.$('misc.alt.artistAvatar'), - }) - } -

${language.$('artistPage.title', { - artist: name, - })}

- ${ - contextNotes && - fixWS` -

${language.$('releaseInfo.note')}

-
- ${transformMultiline(contextNotes)} -
-
- ` - } - ${ - urls?.length && - `

${language.$('releaseInfo.visitOn', { - links: language.formatDisjunctionList( - urls.map((url) => fancifyURL(url, {language})) + content: [ + artist.hasAvatar && + generateCoverLink({ + src: getArtistAvatar(artist), + alt: language.$('misc.alt.artistAvatar'), + }), + + html.tag('h1', + language.$('artistPage.title', { + artist: name, + })), + + ...contextNotes ? [ + html.tag('p', + language.$('releaseInfo.note')), + + html.tag('blockquote', + transformMultiline(contextNotes)), + + html.tag('hr'), + ] : [], + + urls?.length && + html.tag('p', + language.$('releaseInfo.visitOn', { + links: language.formatDisjunctionList( + urls.map((url) => fancifyURL(url, {language})) + ), + })), + + hasGallery && + html.tag('p', + language.$('artistPage.viewArtGallery', { + link: link.artistGallery(artist, { + text: language.$('artistPage.viewArtGallery.link'), + }), + })), + + showJumpTo && + html.tag('p', + language.$('misc.jumpTo.withLinks', { + links: language.formatUnitList( + [ + jumpTo.tracks && + html.tag('a', + {href: '#tracks'}, + language.$('artistPage.trackList.title')), + + jumpTo.art && + html.tag('a', + {href: '#art'}, + language.$('artistPage.artList.title')), + + jumpTo.flashes && + html.tag('a', + {href: '#flashes'}, + language.$('artistPage.flashList.title')), + + jumpTo.commentary && + html.tag('a', + {href: '#commentary'}, + language.$('artistPage.commentaryList.title')), + ].filter(Boolean)), + })), + + ...allTracks.length ? [ + html.tag('h2', + {id: 'tracks'}, + language.$('artistPage.trackList.title')), + + totalDuration && + html.tag('p', + language.$('artistPage.contributedDurationLine', { + artist: artist.name, + duration: language.formatDuration( + totalDuration, + { + approximate: true, + unit: true, + } + ), + })), + + musicGroups.length && + html.tag('p', + language.$('artistPage.musicGroupsLine', { + groups: language.formatUnitList( + musicGroups.map(({group, contributions}) => + language.$('artistPage.groupsLine.item', { + group: link.groupInfo(group), + contributions: + language.countContributions( + contributions ), - })}

` - } - ${ - hasGallery && - `

${language.$('artistPage.viewArtGallery', { - link: link.artistGallery(artist, { - text: language.$( - 'artistPage.viewArtGallery.link' - ), - }), - })}

` - } -

${language.$('misc.jumpTo.withLinks', { - links: language.formatUnitList( - [ - allTracks.length && - `${language.$( - 'artistPage.trackList.title' - )}`, - artThingsAll.length && - `${language.$( - 'artistPage.artList.title' - )}`, - wikiInfo.enableFlashesAndGames && - flashes.length && - `${language.$( - 'artistPage.flashList.title' - )}`, - commentaryThings.length && - `${language.$( - 'artistPage.commentaryList.title' - )}`, - ].filter(Boolean) + }) + ) + ), + })), + + generateTrackList(trackListChunks), + ] : [], + + ...artThingsAll.length ? [ + html.tag('h2', + {id: 'art'}, + language.$('artistPage.artList.title')), + + hasGallery && + html.tag('p', + language.$('artistPage.viewArtGallery.orBrowseList', { + link: link.artistGallery(artist, { + text: language.$('artistPage.viewArtGallery.link'), + }) + })), + + artGroups.length && + html.tag('p', + language.$('artistPage.artGroupsLine', { + groups: language.formatUnitList( + artGroups.map(({group, contributions}) => + language.$('artistPage.groupsLine.item', { + group: link.groupInfo(group), + contributions: + language.countContributions( + contributions ), - })}

- ${ - allTracks.length && - fixWS` -

${language.$( - 'artistPage.trackList.title' - )}

-

${language.$( - 'artistPage.contributedDurationLine', - { - artist: artist.name, - duration: language.formatDuration( - totalDuration, - { - approximate: true, - unit: true, - } - ), - } - )}

-

${language.$('artistPage.musicGroupsLine', { - groups: language.formatUnitList( - musicGroups.map(({group, contributions}) => - language.$('artistPage.groupsLine.item', { - group: link.groupInfo(group), - contributions: - language.countContributions( - contributions - ), - }) - ) - ), - })}

- ${generateTrackList(trackListChunks)} - ` - } - ${ - artThingsAll.length && - fixWS` -

${language.$( - 'artistPage.artList.title' - )}

- ${ - hasGallery && - `

${language.$( - 'artistPage.viewArtGallery.orBrowseList', - { - link: link.artistGallery(artist, { - text: language.$( - 'artistPage.viewArtGallery.link' - ), - }), - } - )}

` - } -

${language.$('artistPage.artGroupsLine', { - groups: language.formatUnitList( - artGroups.map(({group, contributions}) => - language.$('artistPage.groupsLine.item', { - group: link.groupInfo(group), - contributions: - language.countContributions( - contributions - ), - }) - ) - ), - })}

-
- ${artListChunks - .map( - ({date, album, chunk}) => fixWS` -
${language.$( - 'artistPage.creditList.album.withDate', - { - album: link.album(album), - date: language.formatDate(date), - } - )}
-
    - ${chunk - .map( - ({ - track, - key, - ...props - }) => ({ - entry: track - ? language.$( - 'artistPage.creditList.entry.track', - { - track: link.track(track), - } - ) - : `${language.$( - 'artistPage.creditList.entry.album.' + - { - wallpaperArtistContribs: - 'wallpaperArt', - bannerArtistContribs: - 'bannerArt', - coverArtistContribs: - 'coverArt', - }[key] - )}`, - ...props, - }) - ) - .map((opts) => - generateEntryAccents({ - getArtistString, - language, - ...opts, - }) - ) - .map((row) => `
  • ${row}
    • `) - .join('\n')} -
- ` - ) - .join('\n')} -
- ` - } - ${ - wikiInfo.enableFlashesAndGames && - flashes.length && - fixWS` -

${language.$( - 'artistPage.flashList.title' - )}

-
- ${flashListChunks - .map( - ({ - act, - chunk, - dateFirst, - dateLast, - }) => fixWS` -
${language.$( - 'artistPage.creditList.flashAct.withDateRange', - { - act: link.flash(chunk[0].flash, { - text: act.name, - }), - dateRange: language.formatDateRange( - dateFirst, - dateLast - ), - } - )}
-
    - ${chunk - .map(({flash, ...props}) => ({ - entry: language.$( - 'artistPage.creditList.entry.flash', - { - flash: link.flash(flash), - } - ), - ...props, - })) - .map((opts) => - generateEntryAccents({ - getArtistString, - language, - ...opts, - }) - ) - .map((row) => `
  • ${row}
    • `) - .join('\n')} -
- ` - ) - .join('\n')} -
- ` - } - ${ - commentaryThings.length && - fixWS` -

${language.$( - 'artistPage.commentaryList.title' - )}

-
- ${commentaryListChunks - .map( - ({album, chunk}) => fixWS` -
${language.$( - 'artistPage.creditList.album', - { - album: link.album(album), - } - )}
-
    - ${chunk - .map(({track}) => - track - ? language.$( - 'artistPage.creditList.entry.track', - { - track: link.track(track), - } - ) - : `${language.$( - 'artistPage.creditList.entry.album.commentary' - )}` - ) - .map((row) => `
  • ${row}
    • `) - .join('\n')} -
- ` - ) - .join('\n')} -
- ` - } - `, + }) + ) + ), + })), + + html.tag('dl', + artListChunks.flatMap(({date, album, chunk}) => [ + html.tag('dt', language.$('artistPage.creditList.album.withDate', { + album: link.album(album), + date: language.formatDate(date), + })), + + html.tag('dd', + html.tag('ul', + chunk + .map(({track, key, ...props}) => ({ + ...props, + entry: + track + ? language.$('artistPage.creditList.entry.track', { + track: link.track(track), + }) + : html.tag('i', + language.$('artistPage.creditList.entry.album.' + { + wallpaperArtistContribs: + 'wallpaperArt', + bannerArtistContribs: + 'bannerArt', + coverArtistContribs: + 'coverArt', + }[key])), + })) + .map((opts) => generateEntryAccents({ + getArtistString, + language, + ...opts, + })) + .map(row => html.tag('li', row)))), + ])), + ] : [], + + ...( + wikiInfo.enableFlashesAndGames && + flashes.length + ) ? [ + html.tag('h2', + {id: 'flashes'}, + language.$('artistPage.flashList.title')), + + html.tag('dl', + flashListChunks.flatMap(({ + act, + chunk, + dateFirst, + dateLast, + }) => [ + html.tag('dt', + language.$('artistPage.creditList.flashAct.withDateRange', { + act: link.flash(chunk[0].flash, { + text: act.name, + }), + dateRange: language.formatDateRange( + dateFirst, + dateLast + ), + })), + + html.tag('dd', + html.tag('ul', + chunk + .map(({flash, ...props}) => ({ + ...props, + entry: language.$('artistPage.creditList.entry.flash', { + flash: link.flash(flash), + }), + })) + .map(opts => generateEntryAccents({ + getArtistString, + language, + ...opts, + })) + .map(row => html.tag('li', row)))), + ])), + ] : [], + + ...commentaryThings.length ? [ + html.tag('h2', + {id: 'commentary'}, + language.$('artistPage.commentaryList.title')), + + html.tag('dl', + commentaryListChunks.flatMap(({album, chunk}) => [ + html.tag('dt', + language.$('artistPage.creditList.album', { + album: link.album(album), + })), + + html.tag('dd', + html.tag('ul', + chunk + .map(({track}) => track + ? language.$('artistPage.creditList.entry.track', { + track: link.track(track), + }) + : html.tag('i', + language.$('artistPage.creditList.entry.album.commentary'))) + .map(row => html.tag('li', row)))), + ])), + ] : [], + ], }, nav: generateNavForArtist(artist, false, hasGallery, { @@ -667,6 +611,7 @@ export function write(artist, {wikiData}) { getAlbumCover, getGridHTML, getTrackCover, + html, link, language, }) => ({ @@ -674,35 +619,34 @@ export function write(artist, {wikiData}) { main: { classes: ['top-index'], - content: fixWS` -

${language.$('artistGalleryPage.title', { - artist: name, - })}

-

${language.$( - 'artistGalleryPage.infoLine', - { - coverArts: language.countCoverArts( - artThingsGallery.length, - { - unit: true, - } - ), - } - )}

-
- ${getGridHTML({ - entries: artThingsGallery.map((item) => ({item})), - srcFn: (thing) => - thing.album - ? getTrackCover(thing) - : getAlbumCover(thing), - linkFn: (thing, opts) => - thing.album - ? link.track(thing, opts) - : link.album(thing, opts), - })} -
- `, + content: [ + html.tag('h1', + language.$('artistGalleryPage.title', { + artist: name, + })), + + html.tag('p', + {class: 'quick-info'}, + language.$('artistGalleryPage.infoLine', { + coverArts: language.countCoverArts(artThingsGallery.length, { + unit: true, + }), + })), + + html.tag('div', + {class: 'grid-listing'}, + getGridHTML({ + entries: artThingsGallery.map((item) => ({item})), + srcFn: (thing) => + thing.album + ? getTrackCover(thing) + : getAlbumCover(thing), + linkFn: (thing, opts) => + thing.album + ? link.track(thing, opts) + : link.album(thing, opts), + })), + ], }, nav: generateNavForArtist(artist, true, hasGallery, { diff --git a/src/page/flash.js b/src/page/flash.js index a4b3b9b0..3ce7646c 100644 --- a/src/page/flash.js +++ b/src/page/flash.js @@ -2,16 +2,8 @@ // Flash page and index specifications. -// Imports - -import fixWS from 'fix-whitespace'; - -import * as html from '../util/html.js'; - import {getFlashLink} from '../util/wiki-data.js'; -// Page exports - export function condition({wikiData}) { return wikiData.wikiInfo.enableFlashesAndGames; } @@ -32,6 +24,7 @@ export function write(flash, {wikiData}) { getArtistString, getFlashCover, getThemeString, + html, link, language, }) => ({ @@ -41,79 +34,80 @@ export function write(flash, {wikiData}) { ]), main: { - content: fixWS` -

${language.$('flashPage.title', { - flash: flash.name, - })}

- ${generateCoverLink({ - src: getFlashCover(flash), - alt: language.$('misc.alt.flashArt'), - })} -

${language.$('releaseInfo.released', { - date: language.formatDate(flash.date), - })}

- ${ - (flash.page || flash.urls?.length) && - `

${language.$('releaseInfo.playOn', { - links: language.formatDisjunctionList( - [ - flash.page && getFlashLink(flash), - ...(flash.urls ?? []), - ].map((url) => fancifyFlashURL(url, flash)) + content: [ + html.tag('h1', + language.$('flashPage.title', { + flash: flash.name, + })), + + generateCoverLink({ + src: getFlashCover(flash), + alt: language.$('misc.alt.flashArt'), + }), + + html.tag('p', + language.$('releaseInfo.released', { + date: language.formatDate(flash.date), + })), + + (flash.page || flash.urls?.length) && + html.tag('p', + language.$('releaseInfo.playOn', { + links: language.formatDisjunctionList( + [ + flash.page && getFlashLink(flash), + ...(flash.urls ?? []), + ].map((url) => fancifyFlashURL(url, flash)) + ), + })), + + ...flash.featuredTracks?.length ? [ + html.tag('p', + `Tracks featured in ${ + flash.name.replace(/\.$/, '') + }:`), + + html.tag('ul', + flash.featuredTracks.map(track => + html.tag('li', + language.$('trackList.item.withArtists', { + track: link.track(track), + by: `${ + language.$('trackList.item.withArtists.by', { + artists: getArtistString( + track.artistContribs ), - })}

` - } - ${ - flash.featuredTracks && - fixWS` -

Tracks featured in ${flash.name.replace( - /\.$/, - '' - )}:

- - ` - } - ${ - flash.contributorContribs.length && - fixWS` -

${language.$('releaseInfo.contributors')}

- - ` - } - `, + }) + }`, + })))), + ] : [], + + ...flash.contributorContribs.length ? [ + html.tag('p', + language.$('releaseInfo.contributors')), + + html.tag('ul', + flash.contributorContribs.map(contrib => + html.tag('li', + getArtistString([contrib], { + showContrib: true, + showIcons: true, + })))), + ] : [], + ], }, - sidebarLeft: generateSidebarForFlash(flash, {link, language, wikiData}), + sidebarLeft: generateSidebarForFlash(flash, { + html, + language, + link, + wikiData, + }), + nav: generateNavForFlash(flash, { generateChronologyLinks, generatePreviousNextLinks, + html, link, language, wikiData, @@ -124,54 +118,70 @@ export function write(flash, {wikiData}) { return [page]; } -export function writeTargetless({wikiData}) { +export function writeTargetless({ + wikiData, +}) { const {flashActData} = wikiData; const page = { type: 'page', path: ['flashIndex'], - page: ({getFlashGridHTML, getLinkThemeString, link, language}) => ({ + page: ({ + getFlashGridHTML, + getLinkThemeString, + html, + language, + link, + }) => ({ title: language.$('flashIndex.title'), main: { classes: ['flash-index'], - content: fixWS` -

${language.$('flashIndex.title')}

-
-

${language.$('misc.jumpTo')}

- -
- ${flashActData - .map( - (act, i) => fixWS` -

${link.flash(act.flashes[0], { - text: act.name, - })}

-
- ${getFlashGridHTML({ - entries: act.flashes.map((flash) => ({ - item: flash, - })), - lazy: i === 0 ? 4 : true, - })} -
- ` - ) - .join('\n')} - `, + content: [ + html.tag('h1', + language.$('flashIndex.title')), + + html.tag('div', + {class: 'long-content'}, + [ + html.tag('p', + {class: 'quick-info'}, + language.$('misc.jumpTo')), + + html.tag('ul', + {class: 'quick-info'}, + flashActData + .filter(act => act.jump) + .map(({anchor, jump, jumpColor}) => + html.tag('li', + html.tag('a', + { + href: '#' + anchor, + style: getLinkThemeString(jumpColor), + }, + jump)))), + ]), + + ...flashActData.flatMap((act, i) => [ + html.tag('h2', + { + id: '#' + act.anchor, + style: getLinkThemeString(act.color), + }, + link.flash(act.flashes[0], { + text: act.name, + })), + + html.tag('div', + {class: 'grid-listing'}, + getFlashGridHTML({ + entries: act.flashes.map((flash) => ({ + item: flash, + })), + lazy: i === 0 ? 4 : true, + })), + ]), + ], }, nav: {simple: true}, @@ -183,10 +193,14 @@ export function writeTargetless({wikiData}) { // Utility functions -function generateNavForFlash( - flash, - {generateChronologyLinks, generatePreviousNextLinks, link, language, wikiData} -) { +function generateNavForFlash(flash, { + generateChronologyLinks, + generatePreviousNextLinks, + html, + language, + link, + wikiData +}) { const {flashData} = wikiData; const previousNextLinks = generatePreviousNextLinks(flash, { @@ -211,19 +225,21 @@ function generateNavForFlash( bottomRowContent: previousNextLinks && `(${previousNextLinks})`, - content: fixWS` -
- ${generateChronologyLinks(flash, { - headingString: 'misc.chronology.heading.flash', - contribKey: 'contributorContribs', - getThings: (artist) => artist.flashesAsContributor, - })} -
- `, + content: html.tag('div', + generateChronologyLinks(flash, { + headingString: 'misc.chronology.heading.flash', + contribKey: 'contributorContribs', + getThings: (artist) => artist.flashesAsContributor, + })), }; } -function generateSidebarForFlash(flash, {link, language, wikiData}) { +function generateSidebarForFlash(flash, { + html, + language, + link, + wikiData, +}) { // all hard-coded, sorry :( // this doesnt have a super portable implementation/design...yet!! @@ -244,82 +260,74 @@ function generateSidebarForFlash(flash, {link, language, wikiData}) { const currentAct = flash && flash.act; return { - content: fixWS` -

${link.flashIndex('', { - text: language.$('flashIndex.title'), - })}

-
- ${flashActData - .filter( - (act) => - act.name.startsWith('Act 1') || - act.name.startsWith('Act 6 Act 1') || - act.name.startsWith('Hiveswap') || - // Sorry not sorry -Yiffy - (({index = flashActData.indexOf(act)} = {}) => - index < act6 - ? side === 1 - : index < outsideCanon - ? side === 2 - : true)() - ) - .flatMap((act) => [ - (act.name.startsWith('Act 1') && - html.tag( - 'dt', - {class: ['side', side === 1 && 'current']}, - link.flash(act.flashes[0], { - color: '#4ac925', - text: `Side 1 (Acts 1-5)`, - }) - )) || - (act.name.startsWith('Act 6 Act 1') && - html.tag( - 'dt', - {class: ['side', side === 2 && 'current']}, - link.flash(act.flashes[0], { - color: '#1076a2', - text: `Side 2 (Acts 6-7)`, - }) - )) || - (act.name.startsWith('Hiveswap Act 1') && - html.tag( - 'dt', - {class: ['side', side === 3 && 'current']}, - link.flash(act.flashes[0], { - color: '#008282', - text: `Outside Canon (Misc. Games)`, - }) - )), - (({index = flashActData.indexOf(act)} = {}) => - index < act6 - ? side === 1 - : index < outsideCanon - ? side === 2 - : true)() && - html.tag( - 'dt', - {class: act === currentAct && 'current'}, - link.flash(act.flashes[0], {text: act.name}) - ), - act === currentAct && - fixWS` -
    - ${act.flashes - .map((f) => - html.tag( - 'li', - {class: f === flash && 'current'}, - link.flash(f) - ) - ) - .join('\n')} -
- `, - ]) - .filter(Boolean) - .join('\n')} -
- `, + content: [ + html.tag('h1', + link.flashIndex('', { + text: language.$('flashIndex.title'), + })), + + html.tag('dl', + flashActData + .filter( + (act) => + act.name.startsWith('Act 1') || + act.name.startsWith('Act 6 Act 1') || + act.name.startsWith('Hiveswap') || + // Sorry not sorry -Yiffy + (({index = flashActData.indexOf(act)} = {}) => + index < act6 + ? side === 1 + : index < outsideCanon + ? side === 2 + : true)()) + .flatMap((act) => [ + (act.name.startsWith('Act 1') && + html.tag( + 'dt', + {class: ['side', side === 1 && 'current']}, + link.flash(act.flashes[0], { + color: '#4ac925', + text: `Side 1 (Acts 1-5)`, + }) + )) || + (act.name.startsWith('Act 6 Act 1') && + html.tag( + 'dt', + {class: ['side', side === 2 && 'current']}, + link.flash(act.flashes[0], { + color: '#1076a2', + text: `Side 2 (Acts 6-7)`, + }) + )) || + (act.name.startsWith('Hiveswap Act 1') && + html.tag( + 'dt', + {class: ['side', side === 3 && 'current']}, + link.flash(act.flashes[0], { + color: '#008282', + text: `Outside Canon (Misc. Games)`, + }) + )), + (({index = flashActData.indexOf(act)} = {}) => + index < act6 + ? side === 1 + : index < outsideCanon + ? side === 2 + : true)() && + html.tag( + 'dt', + {class: act === currentAct && 'current'}, + link.flash(act.flashes[0], {text: act.name}) + ), + act === currentAct && + html.tag('dd', + html.tag('ul', + act.flashes + .map(f => + html.tag('li', + {class: f === flash && 'current'}, + link.flash(f))))), + ])), + ], }; } diff --git a/src/page/static.js b/src/page/static.js index 2a49ff87..5f50333a 100644 --- a/src/page/static.js +++ b/src/page/static.js @@ -4,12 +4,6 @@ // wiki data folder, used for a variety of purposes, e.g. wiki info, // changelog, and so on.) -// Imports - -import fixWS from 'fix-whitespace'; - -// Page exports - export function targets({wikiData}) { return wikiData.staticPageData; } @@ -18,17 +12,14 @@ export function write(staticPage) { const page = { type: 'page', path: ['staticPage', staticPage.directory], - page: ({transformMultiline}) => ({ + page: ({html, transformMultiline}) => ({ title: staticPage.name, stylesheet: staticPage.stylesheet, main: { - content: fixWS` -
-

${staticPage.name}

- ${transformMultiline(staticPage.content)} -
- `, + content: html.tag('div', + {class: 'long-content'}, + transformMultiline(staticPage.content)), }, nav: {simple: true}, diff --git a/src/page/tag.js b/src/page/tag.js index 38f7e213..faa0df22 100644 --- a/src/page/tag.js +++ b/src/page/tag.js @@ -2,12 +2,6 @@ // Art tag page specification. -// Imports - -import fixWS from 'fix-whitespace'; - -// Page exports - export function condition({wikiData}) { return wikiData.wikiInfo.enableArtTagUI; } @@ -33,6 +27,7 @@ export function write(tag, {wikiData}) { getGridHTML, getThemeString, getTrackCover, + html, link, language, }) => ({ @@ -41,27 +36,34 @@ export function write(tag, {wikiData}) { main: { classes: ['top-index'], - content: fixWS` -

${language.$('tagPage.title', {tag: tag.name})}

-

${language.$('tagPage.infoLine', { - coverArts: language.countCoverArts(things.length, { - unit: true, - }), - })}

-
- ${getGridHTML({ - entries, - srcFn: (thing) => - thing.album - ? getTrackCover(thing) - : getAlbumCover(thing), - linkFn: (thing, opts) => - thing.album - ? link.track(thing, opts) - : link.album(thing, opts), - })} -
- `, + content: [ + html.tag('h1', + language.$('tagPage.title', { + tag: tag.name, + })), + + html.tag('p', + {class: 'quick-info'}, + language.$('tagPage.infoLine', { + coverArts: language.countCoverArts(things.length, { + unit: true, + }), + })), + + html.tag('div', + {class: 'grid-listing'}, + getGridHTML({ + entries, + srcFn: (thing) => + thing.album + ? getTrackCover(thing) + : getAlbumCover(thing), + linkFn: (thing, opts) => + thing.album + ? link.track(thing, opts) + : link.album(thing, opts), + })), + ], }, nav: generateTagNav(tag, { diff --git a/src/page/track.js b/src/page/track.js index 436205b4..258e11d3 100644 --- a/src/page/track.js +++ b/src/page/track.js @@ -2,8 +2,6 @@ // Track page specification. -// Imports - import { generateAlbumChronologyLinks, generateAlbumNavLinks, @@ -11,8 +9,6 @@ import { generateAlbumSidebar, } from './album.js'; -import * as html from '../util/html.js'; - import {bindOpts} from '../util/sugar.js'; import { @@ -21,8 +17,6 @@ import { sortChronologically, } from '../util/wiki-data.js'; -// Page exports - export function targets({wikiData}) { return wikiData.trackData; } @@ -48,7 +42,12 @@ export function write(track, {wikiData}) { ); } - const unbound_getTrackItem = (track, {getArtistString, link, language}) => + const unbound_getTrackItem = (track, { + getArtistString, + html, + language, + link, + }) => html.tag('li', language.$('trackList.item.withArtists', { track: link.track(track), @@ -159,6 +158,7 @@ export function write(track, {wikiData}) { getLinkThemeString, getThemeString, getTrackCover, + html, link, language, transformLyrics, @@ -168,8 +168,9 @@ export function write(track, {wikiData}) { }) => { const getTrackItem = bindOpts(unbound_getTrackItem, { getArtistString, - link, + html, language, + link, }); const cover = getTrackCover(track); @@ -338,8 +339,9 @@ export function write(track, {wikiData}) { sidebarLeft: generateAlbumSidebar(album, track, { fancifyURL, getLinkThemeString, - link, + html, language, + link, transformMultiline, wikiData, }), @@ -369,6 +371,7 @@ export function write(track, {wikiData}) { content: generateAlbumChronologyLinks(album, track, { generateChronologyLinks, + html, }), bottomRowContent: @@ -380,9 +383,10 @@ export function write(track, {wikiData}) { }, secondaryNav: generateAlbumSecondaryNav(album, track, { + getLinkThemeString, + html, language, link, - getLinkThemeString, }), }; }, diff --git a/src/upd8.js b/src/upd8.js index e81eccce..7f05fba4 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -2306,6 +2306,8 @@ async function main() { // each page? const bound = {}; + bound.html = html; + bound.link = withEntries(unbound_link, (entries) => entries.map(([key, fn]) => [key, bindOpts(fn, {to})]) ); @@ -2497,7 +2499,7 @@ async function main() { .from('shared.root') .to('shared.path', paths.pathname + OEMBED_JSON_FILE); - const html = writePage.html(pageInfo, { + const pageHTML = writePage.html(pageInfo, { defaultLanguage: finalDefaultLanguage, language, languages, @@ -2510,7 +2512,7 @@ async function main() { }); return writePage.write({ - html, + html: pageHTML, oEmbedJSON, paths, }); -- cgit 1.3.0-6-gf8a5