From d019852fc5dcfa2a7686c17ec1bc9c4877ad5832 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 15 Nov 2023 11:27:22 -0400 Subject: content, css: generateCommentarySection{Entry}? --- src/content/dependencies/generateAlbumInfoPage.js | 22 ++----- .../dependencies/generateCommentarySection.js | 29 ++++++++ .../dependencies/generateCommentarySectionEntry.js | 77 ++++++++++++++++++++++ src/content/dependencies/generateTrackInfoPage.js | 22 ++----- src/static/site5.css | 11 ++++ src/strings-default.yaml | 20 ++++-- 6 files changed, 141 insertions(+), 40 deletions(-) create mode 100644 src/content/dependencies/generateCommentarySection.js create mode 100644 src/content/dependencies/generateCommentarySectionEntry.js (limited to 'src') diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index 5fe27caf..90a120ca 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -17,6 +17,7 @@ export default { 'generateAlbumStyleRules', 'generateAlbumTrackList', 'generateChronologyLinks', + 'generateCommentarySection', 'generateContentHeading', 'generatePageLayout', 'linkAlbum', @@ -126,13 +127,8 @@ export default { // Section: Artist commentary if (album.commentary) { - const artistCommentary = sections.artistCommentary = {}; - - artistCommentary.heading = - relation('generateContentHeading'); - - artistCommentary.content = - relation('transformContent', album.commentary); + sections.artistCommentary = + relation('generateCommentarySection', album.commentary); } return relations; @@ -235,17 +231,7 @@ export default { sec.additionalFiles.additionalFilesList, ], - sec.artistCommentary && [ - sec.artistCommentary.heading - .slots({ - id: 'artist-commentary', - title: language.$('releaseInfo.artistCommentary') - }), - - html.tag('blockquote', - sec.artistCommentary.content - .slot('mode', 'multiline')), - ], + sec.artistCommentary, ], navLinkStyle: 'hierarchical', diff --git a/src/content/dependencies/generateCommentarySection.js b/src/content/dependencies/generateCommentarySection.js new file mode 100644 index 00000000..d08c3c90 --- /dev/null +++ b/src/content/dependencies/generateCommentarySection.js @@ -0,0 +1,29 @@ +export default { + contentDependencies: [ + 'transformContent', + 'generateCommentarySectionEntry', + 'generateContentHeading', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, entries) => ({ + heading: + relation('generateContentHeading'), + + entries: + entries.map(entry => + relation('generateCommentarySectionEntry', entry)), + }), + + generate: (relations, {html, language}) => + html.tags([ + relations.heading + .slots({ + id: 'artist-commentary', + title: language.$('misc.artistCommentary') + }), + + relations.entries, + ]), +}; diff --git a/src/content/dependencies/generateCommentarySectionEntry.js b/src/content/dependencies/generateCommentarySectionEntry.js new file mode 100644 index 00000000..22e8fd1e --- /dev/null +++ b/src/content/dependencies/generateCommentarySectionEntry.js @@ -0,0 +1,77 @@ +export default { + contentDependencies: ['linkArtist', 'transformContent'], + extraDependencies: ['html', 'language'], + + relations: (relation, entry) => ({ + artistLink: + (entry.artist && !entry.artistDisplayText + ? relation('linkArtist', entry.artist) + : null), + + artistsContent: + (entry.artistDisplayText + ? relation('transformContent', entry.artistDisplayText) + : null), + + annotationContent: + (entry.annotation + ? relation('transformContent', entry.annotation) + : null), + + bodyContent: + (entry.body + ? relation('transformContent', entry.body) + : null), + }), + + data: (entry) => ({ + date: entry.date, + }), + + generate(data, relations, {html, language}) { + const artistsSpan = + html.tag('span', {class: 'commentary-entry-artists'}, + (relations.artistsContent + ? relations.artistsContent.slot('mode', 'inline') + : relations.artistLink + ? relations.artistLink + : language.$('misc.artistCommentary.noArtist'))); + + const accentParts = ['misc.artistCommentary.entry.title.accent']; + const accentOptions = {}; + + if (relations.annotationContent) { + accentParts.push('withAnnotation'); + accentOptions.annotation = + relations.annotationContent.slot('mode', 'inline'); + } + + if (data.date) { + accentParts.push('withDate'); + accentOptions.date = + language.formatDate(data.date); + } + + const accent = + (accentParts.length > 1 + ? html.tag('span', {class: 'commentary-entry-accent'}, + language.$(...accentParts, accentOptions)) + : null); + + const titleParts = ['misc.artistCommentary.entry.title']; + const titleOptions = {artists: artistsSpan}; + + if (accent) { + titleParts.push('withAccent'); + titleOptions.accent = accent; + } + + return html.tags([ + html.tag('p', {class: 'commentary-entry-heading'}, + language.$(...titleParts, titleOptions)), + + html.tag('blockquote', {class: 'commentary-entry-body'}, + relations.bodyContent.slot('mode', 'multiline')), + ]); + }, +}; diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index 93334948..200cf054 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -11,6 +11,7 @@ export default { 'generateAlbumSidebar', 'generateAlbumStyleRules', 'generateChronologyLinks', + 'generateCommentarySection', 'generateContentHeading', 'generateContributionList', 'generatePageLayout', @@ -268,13 +269,8 @@ export default { // Section: Artist commentary if (track.commentary) { - const artistCommentary = sections.artistCommentary = {}; - - artistCommentary.heading = - relation('generateContentHeading'); - - artistCommentary.content = - relation('transformContent', track.commentary); + sections.artistCommentary = + relation('generateCommentarySection', track.commentary); } return relations; @@ -491,17 +487,7 @@ export default { 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')), - ], + sec.artistCommentary, ], navLinkStyle: 'hierarchical', diff --git a/src/static/site5.css b/src/static/site5.css index 014e6d25..1ffe5044 100644 --- a/src/static/site5.css +++ b/src/static/site5.css @@ -537,6 +537,17 @@ p .current { margin-top: 5px; } +.commentary-entry-heading { + margin-left: 15px; + padding-left: 5px; + padding-bottom: 0.2em; + border-bottom: 1px dotted var(--primary-color); +} + +.commentary-entry-accent { + font-style: oblique; +} + .commentary-art { float: right; width: 30%; diff --git a/src/strings-default.yaml b/src/strings-default.yaml index a21758e7..eccfc80c 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -273,10 +273,6 @@ releaseInfo: _: "Read {LINK}." link: "artist commentary" - artistCommentary: - _: "Artist commentary:" - seeOriginalRelease: "See {ORIGINAL}!" - additionalFiles: heading: "View or download {ADDITIONAL_FILES}:" @@ -349,6 +345,22 @@ misc: artistAvatar: "artist avatar" flashArt: "flash art" + # artistCommentary: + + artistCommentary: + _: "Artist commentary:" + + entry: + title: + _: "{ARTISTS}:" + withAccent: "{ARTISTS}: {ACCENT}" + accent: + withAnnotation: "({ANNOTATION})" + withDate: ({DATE})" + withAnnotation.withDate: "({ANNOTATION}, {DATE})" + + seeOriginalRelease: "See {ORIGINAL}!" + # artistLink: # Artist links have special accents which are made conditionally # present in a variety of places across the wiki. -- cgit 1.3.0-6-gf8a5