diff options
Diffstat (limited to 'src/content')
3 files changed, 74 insertions, 4 deletions
diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js index 5979ed3f..5c057b80 100644 --- a/src/content/dependencies/generateAlbumCommentaryPage.js +++ b/src/content/dependencies/generateAlbumCommentaryPage.js @@ -2,10 +2,13 @@ import {stitchArrays} from '#sugar'; export default { contentDependencies: [ + 'generateAlbumCoverArtwork', 'generateAlbumNavAccent', + 'generateAlbumSidebarTrackSection', 'generateAlbumStyleRules', 'generateColorStyleVariables', 'generateContentHeading', + 'generateTrackCoverArtwork', 'generatePageLayout', 'linkAlbum', 'linkTrack', @@ -30,6 +33,9 @@ export default { relation('generateAlbumNavAccent', album, null); if (album.commentary) { + relations.albumCommentaryCover = + relation('generateAlbumCoverArtwork', album); + relations.albumCommentaryContent = relation('transformContent', album.commentary); } @@ -46,6 +52,13 @@ export default { tracksWithCommentary .map(track => relation('linkTrack', track)); + relations.trackCommentaryCovers = + tracksWithCommentary + .map(track => + (track.hasUniqueCoverArt + ? relation('generateTrackCoverArtwork', track) + : null)); + relations.trackCommentaryContent = tracksWithCommentary .map(track => relation('transformContent', track.commentary)); @@ -57,6 +70,13 @@ export default { ? null : relation('generateColorStyleVariables'))); + relations.sidebarAlbumLink = + relation('linkAlbum', album); + + relations.sidebarTrackSections = + album.trackSections.map(trackSection => + relation('generateAlbumSidebarTrackSection', album, null, trackSection)); + return relations; }, @@ -129,6 +149,9 @@ export default { {class: ['content-heading']}, language.$('albumCommentaryPage.entry.title.albumCommentary')), + relations.albumCommentaryCover + ?.slots({mode: 'commentary'}), + html.tag('blockquote', relations.albumCommentaryContent), ], @@ -137,15 +160,19 @@ export default { heading: relations.trackCommentaryHeadings, link: relations.trackCommentaryLinks, directory: data.trackCommentaryDirectories, + cover: relations.trackCommentaryCovers, content: relations.trackCommentaryContent, colorVariables: relations.trackCommentaryColorVariables, color: data.trackCommentaryColors, - }).map(({heading, link, directory, content, colorVariables, color}) => [ + }).map(({heading, link, directory, cover, content, colorVariables, color}) => [ heading.slots({ tag: 'h3', id: directory, title: link, }), + + cover?.slots({mode: 'commentary'}), + html.tag('blockquote', (color ? {style: colorVariables.slot('color', color).content} @@ -170,6 +197,16 @@ export default { }), }, ], + + leftSidebarStickyMode: 'column', + leftSidebarContent: [ + html.tag('h1', relations.sidebarAlbumLink), + relations.sidebarTrackSections.map(section => + section.slots({ + anchor: true, + open: true, + })), + ], }); }, }; diff --git a/src/content/dependencies/generateAlbumSidebarTrackSection.js b/src/content/dependencies/generateAlbumSidebarTrackSection.js index d71b0bdb..00e9b621 100644 --- a/src/content/dependencies/generateAlbumSidebarTrackSection.js +++ b/src/content/dependencies/generateAlbumSidebarTrackSection.js @@ -33,10 +33,19 @@ export default { } } + data.trackDirectories = + trackSection.tracks + .map(track => track.directory); + return data; }, - generate(data, relations, {getColors, html, language}) { + slots: { + anchor: {type: 'boolean'}, + open: {type: 'boolean'}, + }, + + generate(data, relations, slots, {getColors, html, language}) { const sectionName = html.tag('span', {class: 'group-name'}, (data.isDefaultTrackSection @@ -59,7 +68,13 @@ export default { 'current', }, language.$('albumSidebar.trackList.item', { - track: trackLink, + track: + (slots.anchor + ? trackLink.slots({ + anchor: true, + hash: data.trackDirectories[index], + }) + : trackLink), }))); return html.tag('details', @@ -67,6 +82,11 @@ export default { class: data.includesCurrentTrack && 'current', open: ( + // Allow forcing open via a template slot. + // This isn't exactly janky, but the rest of this function + // kind of is when you contextualize it in a template... + slots.open || + // Leave sidebar track sections collapsed on album info page, // since there's already a view of the full track listing // in the main content area. diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js index 4060c6b0..aeba97de 100644 --- a/src/content/dependencies/generateCoverArtwork.js +++ b/src/content/dependencies/generateCoverArtwork.js @@ -32,7 +32,7 @@ export default { }, mode: { - validate: v => v.is('primary', 'thumbnail'), + validate: v => v.is('primary', 'thumbnail', 'commentary'), default: 'primary', }, }, @@ -73,6 +73,19 @@ export default { square: true, }); + case 'commentary': + return relations.image + .slots({ + path: slots.path, + alt: slots.alt, + thumb: 'medium', + class: 'commentary-art', + reveal: true, + link: true, + square: true, + lazy: true, + }); + default: return html.blank(); } |