diff options
Diffstat (limited to 'src/content/dependencies/generateAlbumCommentaryPage.js')
| -rw-r--r-- | src/content/dependencies/generateAlbumCommentaryPage.js | 110 |
1 files changed, 80 insertions, 30 deletions
diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js index 3ad1549e..5a7142e5 100644 --- a/src/content/dependencies/generateAlbumCommentaryPage.js +++ b/src/content/dependencies/generateAlbumCommentaryPage.js @@ -1,4 +1,4 @@ -import {stitchArrays} from '#sugar'; +import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ @@ -6,13 +6,13 @@ export default { 'generateAlbumNavAccent', 'generateAlbumSidebarTrackSection', 'generateAlbumStyleRules', - 'generateColorStyleVariables', + 'generateCommentaryEntry', 'generateContentHeading', 'generateTrackCoverArtwork', 'generatePageLayout', 'linkAlbum', + 'linkExternal', 'linkTrack', - 'transformContent', ], extraDependencies: ['html', 'language'], @@ -33,13 +33,23 @@ export default { relation('generateAlbumNavAccent', album, null); if (album.commentary) { + relations.albumCommentaryHeading = + relation('generateContentHeading'); + + relations.albumCommentaryLink = + relation('linkAlbum', album); + + relations.albumCommentaryListeningLinks = + album.urls.map(url => relation('linkExternal', url)); + if (album.hasCoverArt) { relations.albumCommentaryCover = relation('generateAlbumCoverArtwork', album); } - relations.albumCommentaryContent = - relation('transformContent', album.commentary); + relations.albumCommentaryEntries = + album.commentary + .map(entry => relation('generateCommentaryEntry', entry)); } const tracksWithCommentary = @@ -54,6 +64,11 @@ export default { tracksWithCommentary .map(track => relation('linkTrack', track)); + relations.trackCommentaryListeningLinks = + tracksWithCommentary + .map(track => + track.urls.map(url => relation('linkExternal', url))); + relations.trackCommentaryCovers = tracksWithCommentary .map(track => @@ -61,16 +76,11 @@ export default { ? relation('generateTrackCoverArtwork', track) : null)); - relations.trackCommentaryContent = - tracksWithCommentary - .map(track => relation('transformContent', track.commentary)); - - relations.trackCommentaryColorVariables = + relations.trackCommentaryEntries = tracksWithCommentary .map(track => - (track.color === album.color - ? null - : relation('generateColorStyleVariables'))); + track.commentary + .map(entry => relation('generateCommentaryEntry', entry))); relations.sidebarAlbumLink = relation('linkAlbum', album); @@ -97,11 +107,15 @@ export default { ? [album, ...tracksWithCommentary] : tracksWithCommentary); - data.entryCount = thingsWithCommentary.length; + data.entryCount = + thingsWithCommentary + .flatMap(({commentary}) => commentary) + .length; data.wordCount = thingsWithCommentary - .map(({commentary}) => commentary) + .flatMap(({commentary}) => commentary) + .map(({body}) => body) .join(' ') .split(' ') .length; @@ -146,40 +160,75 @@ export default { language.countCommentaryEntries(data.entryCount, {unit: true})), })), - relations.albumCommentaryContent && [ - html.tag('h3', - {class: ['content-heading']}, - language.$('albumCommentaryPage.entry.title.albumCommentary')), + relations.albumCommentaryEntries && [ + relations.albumCommentaryHeading.slots({ + tag: 'h3', + color: data.color, + + title: + language.$('albumCommentaryPage.entry.title.albumCommentary', { + album: relations.albumCommentaryLink, + }), + + accent: + !empty(relations.albumCommentaryListeningLinks) && + language.$('albumCommentaryPage.entry.title.albumCommentary.accent', { + listeningLinks: + language.formatUnitList( + relations.albumCommentaryListeningLinks + .map(link => link.slots({ + context: 'album', + tab: 'separate', + }))), + }), + }), relations.albumCommentaryCover ?.slots({mode: 'commentary'}), - html.tag('blockquote', - relations.albumCommentaryContent), + relations.albumCommentaryEntries, ], stitchArrays({ heading: relations.trackCommentaryHeadings, link: relations.trackCommentaryLinks, + listeningLinks: relations.trackCommentaryListeningLinks, directory: data.trackCommentaryDirectories, cover: relations.trackCommentaryCovers, - content: relations.trackCommentaryContent, - colorVariables: relations.trackCommentaryColorVariables, + entries: relations.trackCommentaryEntries, color: data.trackCommentaryColors, - }).map(({heading, link, directory, cover, content, colorVariables, color}) => [ + }).map(({ + heading, + link, + listeningLinks, + directory, + cover, + entries, + color, + }) => [ heading.slots({ tag: 'h3', id: directory, - title: link, + color, + + title: + language.$('albumCommentaryPage.entry.title.trackCommentary', { + track: link, + }), + + accent: + !empty(listeningLinks) && + language.$('albumCommentaryPage.entry.title.trackCommentary.accent', { + listeningLinks: + language.formatUnitList( + listeningLinks.map(link => + link.slot('tab', 'separate'))), + }), }), cover?.slots({mode: 'commentary'}), - html.tag('blockquote', - (color - ? {style: colorVariables.slot('color', color).content} - : {}), - content), + entries.map(entry => entry.slot('color', color)), ]), ], @@ -201,6 +250,7 @@ export default { ], leftSidebarStickyMode: 'column', + leftSidebarClass: 'commentary-track-list-sidebar-box', leftSidebarContent: [ html.tag('h1', relations.sidebarAlbumLink), relations.sidebarTrackSections.map(section => |