From 22ca57c7fd366ff6ca055ec5c28f527e57509bb8 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 25 May 2023 22:08:35 -0300 Subject: content: multiline content & fill out album/track pages more --- .../generateAlbumAdditionalFilesList.js | 10 +- .../dependencies/generateAlbumInfoPageContent.js | 186 ++++++++++++-------- src/content/dependencies/generateAlbumTrackList.js | 2 +- .../dependencies/generateTrackInfoPageContent.js | 190 ++++++++++++++++----- src/content/dependencies/transformContent.js | 67 +++++++- 5 files changed, 332 insertions(+), 123 deletions(-) (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateAlbumAdditionalFilesList.js b/src/content/dependencies/generateAlbumAdditionalFilesList.js index f8fd5499..5fd4e05b 100644 --- a/src/content/dependencies/generateAlbumAdditionalFilesList.js +++ b/src/content/dependencies/generateAlbumAdditionalFilesList.js @@ -9,24 +9,24 @@ export default { 'urls', ], - data(album, {fileSize = true} = {}) { + data(album, additionalFiles, {fileSize = true} = {}) { return { albumDirectory: album.directory, - fileLocations: album.additionalFiles.flatMap(({files}) => files), + fileLocations: additionalFiles.flatMap(({files}) => files), showFileSizes: fileSize, }; }, - relations(relation, album, {fileSize = true} = {}) { + relations(relation, album, additionalFiles, {fileSize = true} = {}) { return { additionalFilesList: - relation('generateAdditionalFilesList', album.additionalFiles, { + relation('generateAdditionalFilesList', additionalFiles, { fileSize, }), additionalFileLinks: Object.fromEntries( - album.additionalFiles + additionalFiles .flatMap(({files}) => files) .map(file => [ file, diff --git a/src/content/dependencies/generateAlbumInfoPageContent.js b/src/content/dependencies/generateAlbumInfoPageContent.js index 76862f9c..7b8522b7 100644 --- a/src/content/dependencies/generateAlbumInfoPageContent.js +++ b/src/content/dependencies/generateAlbumInfoPageContent.js @@ -13,65 +13,104 @@ export default { 'linkExternal', ], - extraDependencies: [ - 'html', - 'language', - 'transformMultiline', - ], + extraDependencies: ['html', 'language'], relations(relation, album) { const relations = {}; + const sections = relations.sections = {}; const contributionLinksRelation = contribs => contribs.map(contrib => relation('linkContribution', contrib.who, contrib.what)); + // Section: Release info + + const releaseInfo = sections.releaseInfo = {}; + + if (!empty(album.artistContribs)) { + releaseInfo.artistContributionLinks = + contributionLinksRelation(album.artistContribs); + } + if (album.hasCoverArt) { relations.cover = relation('generateCoverArtwork', album.artTags); + releaseInfo.coverArtistContributionLinks = + contributionLinksRelation(album.coverArtistContribs); + } else { + relations.cover = null; } - relations.artistLinks = - contributionLinksRelation(album.artistContribs); + if (album.hasWallpaperArt) { + releaseInfo.wallpaperArtistContributionLinks = + contributionLinksRelation(album.wallpaperArtistContribs); + } + + if (album.hasBannerArt) { + releaseInfo.bannerArtistContributionLinks = + contributionLinksRelation(album.bannerArtistContribs); + } + + // Section: Listen on + + if (!empty(album.urls)) { + const listen = sections.listen = {}; - relations.coverArtistLinks = - contributionLinksRelation(album.coverArtistContribs); + listen.heading = + relation('generateContentHeading'); + + listen.externalLinks = + album.urls.map(url => + relation('linkExternal', url, {type: 'album'})); + } - relations.wallpaperArtistLinks = - contributionLinksRelation(album.wallpaperArtistContribs); + // Section: Extra links - relations.bannerArtistLinks = - contributionLinksRelation(album.bannerArtistContribs); + const extra = sections.extra = {}; if (album.tracks.some(t => t.hasUniqueCoverArt)) { - relations.galleryLink = + extra.galleryLink = relation('linkAlbumGallery', album); } if (album.commentary || album.tracks.some(t => t.commentary)) { - relations.commentaryLink = + extra.commentaryLink = relation('linkAlbumCommentary', album); } - relations.externalLinks = - album.urls.map(url => - relation('linkExternal', url, {type: 'album'})); + if (!empty(album.additionalFiles)) { + extra.additionalFilesShortcut = + relation('generateAdditionalFilesShortcut', album.additionalFiles); + } + + // Section: Track list + + relations.trackList = + relation('generateAlbumTrackList', album); - relations.trackList = relation('generateAlbumTrackList', album); + // Section: Additional files if (!empty(album.additionalFiles)) { - relations.additionalFilesShortcut = - relation('generateAdditionalFilesShortcut', album.additionalFiles); + const additionalFiles = sections.additionalFiles = {}; - relations.additionalFilesHeading = + additionalFiles.heading = relation('generateContentHeading'); - relations.additionalFilesList = - relation('generateAlbumAdditionalFilesList', album); + additionalFiles.additionalFilesList = + relation('generateAlbumAdditionalFilesList', album, album.additionalFiles); } - relations.artistCommentaryHeading = - relation('generateContentHeading'); + // Section: Artist commentary + + if (album.commentary) { + const artistCommentary = sections.artistCommentary = {}; + + artistCommentary.heading = + relation('generateContentHeading'); + + artistCommentary.content = + relation('transformContent', album.commentary); + } return relations; }, @@ -99,7 +138,6 @@ export default { } data.dateAddedToWiki = album.dateAddedToWiki; - data.artistCommentary = album.commentary; return data; }, @@ -107,18 +145,20 @@ export default { generate(data, relations, { html, language, - transformMultiline, }) { const content = {}; - const formatContributions = contributionLinks => - language.formatConjunctionList( - contributionLinks.map(link => - link - .slots({ - showContribution: true, - showIcons: true, - }))); + const {sections: sec} = relations; + + const formatContributions = + (stringKey, contributionLinks, {showContribution = true, showIcons = true} = {}) => + contributionLinks && + language.$(stringKey, { + artists: + language.formatConjunctionList( + contributionLinks.map(link => + link.slots({showContribution, showIcons}))), + }); if (data.hasCoverArt) { content.cover = relations.cover @@ -126,6 +166,8 @@ export default { path: ['media.albumCover', data.coverArtDirectory, data.coverArtFileExtension], alt: language.$('misc.alt.trackCover') }); + } else { + content.cover = null; } content.main = { @@ -137,25 +179,10 @@ export default { [html.joinChildren]: html.tag('br'), }, [ - !empty(relations.artistLinks) && - language.$('releaseInfo.by', { - artists: formatContributions(relations.artistLinks), - }), - - !empty(relations.coverArtistLinks) && - language.$('releaseInfo.coverArtBy', { - artists: formatContributions(relations.coverArtistLinks), - }), - - !empty(relations.wallpaperArtistLinks) && - language.$('releaseInfo.wallpaperArtBy', { - artists: formatContributions(relations.wallpaperArtistLinks), - }), - - !empty(relations.bannerArtistLinks) && - language.$('releaseInfo.bannerArtBy', { - artists: formatContributions(relations.bannerArtistLinks), - }), + formatContributions('releaseInfo.by', sec.releaseInfo.artistContributionLinks), + formatContributions('releaseInfo.coverArtBy', sec.releaseInfo.coverArtistContributionLinks), + formatContributions('releaseInfo.wallpaperArtBy', sec.releaseInfo.wallpaperArtistContributionLinks), + formatContributions('releaseInfo.bannerArtBy', sec.releaseInfo.bannerArtistContributionLinks), data.date && language.$('releaseInfo.released', { @@ -176,35 +203,48 @@ export default { }), ]), + sec.listen && + sec.listen.heading.slots({ + id: 'listen-on', + title: + language.$('releaseInfo.listenOn', { + links: language.formatDisjunctionList(sec.listen.externalLinks), + }), + }), + html.tag('p', { [html.onlyIfContent]: true, [html.joinChildren]: html.tag('br'), }, [ - relations.additionalFilesShortcut, + sec.extra.additionalFilesShortcut, + + sec.extra.galleryLink && sec.extra.commentaryLink && + language.$('releaseInfo.viewGalleryOrCommentary', { + gallery: + sec.extra.galleryLink + .slot('content', language.$('releaseInfo.viewGalleryOrCommentary.gallery')), + commentary: + sec.extra.commentaryLink + .slot('content', language.$('releaseInfo.viewGalleryOrCommentary.commentary')), + }), - relations.galleryLink && + sec.extra.galleryLink && !sec.extra.commentaryLink && language.$('releaseInfo.viewGallery', { link: - relations.galleryLink + sec.extra.galleryLink .slot('content', language.$('releaseInfo.viewGallery.link')), }), - relations.commentaryLink && + !sec.extra.galleryLink && sec.extra.commentaryLink && language.$('releaseInfo.viewCommentary', { link: - relations.commentaryLink + sec.extra.commentaryLink .slot('content', language.$('releaseInfo.viewCommentary.link')), }), ]), - !empty(relations.externalLinks) && - html.tag('p', - language.$('releaseInfo.listenOn', { - links: language.formatDisjunctionList(relations.externalLinks), - })), - relations.trackList, html.tag('p', @@ -219,11 +259,10 @@ export default { }), ]), - relations.additionalFilesList && [ - relations.additionalFilesHeading + sec.additionalFiles && [ + sec.additionalFiles.heading .slots({ id: 'additional-files', - title: language.$('releaseInfo.additionalFiles.heading', { additionalFiles: @@ -231,18 +270,19 @@ export default { }), }), - relations.additionalFilesList, + sec.additionalFiles.additionalFilesList, ], - data.artistCommentary && [ - relations.artistCommentaryHeading + sec.artistCommentary && [ + sec.artistCommentary.heading .slots({ id: 'artist-commentary', title: language.$('releaseInfo.artistCommentary') }), html.tag('blockquote', - transformMultiline(data.artistCommentary)), + sec.artistCommentary.content + .slot('mode', 'multiline')), ], ]), }; diff --git a/src/content/dependencies/generateAlbumTrackList.js b/src/content/dependencies/generateAlbumTrackList.js index f2f2279d..ce174953 100644 --- a/src/content/dependencies/generateAlbumTrackList.js +++ b/src/content/dependencies/generateAlbumTrackList.js @@ -101,7 +101,7 @@ export default { {class: 'album-group-list'}, data.trackSectionInfo.map((info, index) => [ html.tag('dt', - {class: 'content-heading'}, + {class: 'content-heading', tabindex: '0'}, language.$('trackList.section.withDuration', { section: info.name, duration: diff --git a/src/content/dependencies/generateTrackInfoPageContent.js b/src/content/dependencies/generateTrackInfoPageContent.js index 57bdc0c2..47a9130d 100644 --- a/src/content/dependencies/generateTrackInfoPageContent.js +++ b/src/content/dependencies/generateTrackInfoPageContent.js @@ -2,6 +2,8 @@ import {empty} from '../../util/sugar.js'; export default { contentDependencies: [ + 'generateAdditionalFilesShortcut', + 'generateAlbumAdditionalFilesList', 'generateContentHeading', 'generateCoverArtwork', 'generateTrackList', @@ -12,11 +14,7 @@ export default { 'linkTrack', ], - extraDependencies: [ - 'html', - 'language', - 'transformMultiline', - ], + extraDependencies: ['html', 'language'], relations(relation, track, {topLevelGroups}) { const {album} = track; @@ -28,6 +26,11 @@ export default { contribs.map(contrib => relation('linkContribution', contrib.who, contrib.what)); + const additionalFilesSection = additionalFiles => ({ + heading: relation('generateContentHeading'), + list: relation('generateAlbumAdditionalFilesList', album, additionalFiles), + }); + // Section: Release info const releaseInfo = sections.releaseInfo = {}; @@ -60,6 +63,15 @@ export default { relation('linkExternal', url)); } + // Section: Extra links + + const extra = sections.extra = {}; + + if (!empty(track.additionalFiles)) { + extra.additionalFilesShortcut = + relation('generateAdditionalFilesShortcut', track.additionalFiles); + } + // Section: Other releases if (!empty(track.otherReleases)) { @@ -113,6 +125,44 @@ export default { topLevelGroups); } + // Section: Lyrics + + if (track.lyrics) { + const lyrics = sections.lyrics = {}; + + lyrics.heading = + relation('generateContentHeading'); + + lyrics.content = + relation('transformContent', track.lyrics); + } + + // Sections: Sheet music files, MIDI/proejct files, additional files + + if (!empty(track.sheetMusicFiles)) { + sections.sheetMusicFiles = additionalFilesSection(track.sheetMusicFiles); + } + + if (!empty(track.midiProjectFiles)) { + sections.midiProjectFiles = additionalFilesSection(track.midiProjectFiles); + } + + if (!empty(track.additionalFiles)) { + sections.additionalFiles = additionalFilesSection(track.additionalFiles); + } + + // Section: Artist commentary + + if (track.commentary) { + const artistCommentary = sections.artistCommentary = {}; + + artistCommentary.heading = + relation('generateContentHeading'); + + artistCommentary.content = + relation('transformContent', track.commentary); + } + return relations; }, @@ -141,23 +191,27 @@ export default { data.coverArtFileExtension = album.coverArtFileExtension; } + if (!empty(track.additionalFiles)) { + data.numAdditionalFiles = track.additionalFiles.length; + } + return data; }, - generate(data, relations, { - html, - language, - // transformMultiline, - }) { + generate(data, relations, {html, language}) { const content = {}; const {sections: sec} = relations; const formatContributions = - (contributionLinks, {showContribution = true, showIcons = true} = {}) => - language.formatConjunctionList( - contributionLinks.map(link => - link.slots({showContribution, showIcons}))); + (stringKey, contributionLinks, {showContribution = true, showIcons = true} = {}) => + contributionLinks && + language.$(stringKey, { + artists: + language.formatConjunctionList( + contributionLinks.map(link => + link.slots({showContribution, showIcons}))), + }); if (data.hasUniqueCoverArt) { content.cover = relations.cover @@ -190,15 +244,8 @@ export default { [html.onlyIfContent]: true, [html.joinChildren]: html.tag('br'), }, [ - sec.releaseInfo.artistContributionLinks && - language.$('releaseInfo.by', { - artists: formatContributions(sec.releaseInfo.artistContributionLinks), - }), - - sec.releaseInfo.coverArtistContributionLinks && - language.$('releaseInfo.coverArtBy', { - artists: formatContributions(sec.releaseInfo.coverArtistContributionLinks), - }), + formatContributions('releaseInfo.by', sec.releaseInfo.artistContributionLinks), + formatContributions('releaseInfo.coverArtBy', sec.releaseInfo.coverArtistContributionLinks), data.date && language.$('releaseInfo.released', { @@ -216,41 +263,48 @@ export default { }), ]), - /* + sec.listen.heading.slots({ + id: 'listen-on', + title: + (sec.listen.externalLinks + ? language.$('releaseInfo.listenOn', { + links: language.formatDisjunctionList(sec.listen.externalLinks), + }) + : language.$('releaseInfo.listenOn.noLinks', { + name: html.tag('i', data.name), + })), + }), + html.tag('p', { [html.onlyIfContent]: true, [html.joinChildren]: '
', }, [ - hasSheetMusicFiles && + sec.sheetMusicFiles && language.$('releaseInfo.sheetMusicFiles.shortcut', { link: html.tag('a', {href: '#sheet-music-files'}, language.$('releaseInfo.sheetMusicFiles.shortcut.link')), }), - hasMidiProjectFiles && + sec.midiProjectFiles && language.$('releaseInfo.midiProjectFiles.shortcut', { link: html.tag('a', {href: '#midi-project-files'}, language.$('releaseInfo.midiProjectFiles.shortcut.link')), }), - hasAdditionalFiles && - generateAdditionalFilesShortcut(track.additionalFiles), - ]), - */ + sec.additionalFiles && + sec.extra.additionalFilesShortcut, - sec.listen.heading.slots({ - id: 'listen-on', - title: - (sec.listen.externalLinks - ? language.$('releaseInfo.listenOn', { - links: language.formatDisjunctionList(sec.listen.externalLinks), - }) - : language.$('releaseInfo.listenOn.noLinks')), - }), + sec.artistCommentary && + language.$('releaseInfo.readCommentary', { + link: html.tag('a', + {href: '#artist-commentary'}, + language.$('releaseInfo.readCommentary.link')), + }), + ]), sec.otherReleases && [ sec.otherReleases.heading @@ -309,6 +363,64 @@ export default { sec.referencedBy.list, ], + + sec.lyrics && [ + sec.lyrics.heading + .slots({ + id: 'lyrics', + title: language.$('releaseInfo.lyrics'), + }), + + html.tag('blockquote', + sec.lyrics.content + .slot('mode', 'lyrics')), + ], + + sec.sheetMusicFiles && [ + sec.sheetMusicFiles.heading + .slots({ + id: 'sheet-music-files', + title: language.$('releaseInfo.sheetMusicFiles.heading'), + }), + + sec.sheetMusicFiles.list, + ], + + sec.midiProjectFiles && [ + sec.midiProjectFiles.heading + .slots({ + id: 'midi-project-files', + title: language.$('releaseInfo.midiProjectFiles.heading'), + }), + + sec.midiProjectFiles.list, + ], + + sec.additionalFiles && [ + sec.additionalFiles.heading + .slots({ + id: 'additional-files', + title: + language.$('releaseInfo.additionalFiles.heading', { + additionalFiles: + language.countAdditionalFiles(data.numAdditionalFiles, {unit: true}), + }), + }), + + sec.additionalFiles.list, + ], + + sec.artistCommentary && [ + sec.artistCommentary.heading + .slots({ + id: 'artist-commentary', + title: language.$('releaseInfo.artistCommentary') + }), + + html.tag('blockquote', + sec.artistCommentary.content + .slot('mode', 'multiline')), + ], ]), }; diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index 262c2982..c2ca548a 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -1,3 +1,5 @@ +import {marked} from 'marked'; + import {bindFind} from '../../util/find.js'; import {parseInput} from '../../util/replacer.js'; import {replacerSpec} from '../../util/transform-content.js'; @@ -191,7 +193,13 @@ export default { } if (node.type === 'link') { - const {link, label, hash} = relations.links[linkIndex++]; + const linkNode = relations.links[linkIndex++]; + if (linkNode.type === 'text') { + return {type: 'text', data: linkNode.data}; + } + + const {link, label, hash} = linkNode; + return { type: 'link', data: link.slots({content: label, hash}), @@ -242,16 +250,65 @@ export default { return html.tags(contentFromNodes.map(node => node.data)); } - // In multiline mode... + // Multiline mode has a secondary processing stage where it's passed... + // through marked! Rolling your own Markdown only gets you so far :D + + const markedOptions = { + headerIds: false, + mangle: false, + }; + + // This is separated into its own function just since we're gonna reuse + // it in a minute if everything goes to heck in lyrics mode. + const transformMultiline = () => + marked.parse( + contentFromNodes + .map(node => { + if (node.type === 'text') { + return node.data.replace(/\n+/g, '\n\n'); + } else { + return node.data.toString(); + } + }) + .join(''), + markedOptions); if (slots.mode === 'multiline') { - return html.tags(contentFromNodes.map(node => node.data)); + // Unfortunately, we kind of have to be super evil here and stringify + // the links, or else parse marked's output into html tags, which is + // very out of scope at the moment. + return transformMultiline(); } - // In lyrics mode... + // Lyrics mode goes through marked too, but line breaks are processed + // differently. Instead of having each line get its own paragraph, + // "adjacent" lines are joined together (with blank lines separating + // each verse/paragraph). if (slots.mode === 'lyrics') { - return html.tags(contentFromNodes.map(node => node.data)); + // If it looks like old data, using
instead of bunched together + // lines... then oh god... just use transformMultiline. Perishes. + if ( + contentFromNodes.some(node => + node.type === 'text' && + node.data.includes(' { + if (node.type === 'text') { + return node.data.replace(/\b\n\b/g, '
\n'); + } else { + return node.data.toString(); + } + }) + .join(''), + markedOptions); } }, }); -- cgit 1.3.0-6-gf8a5