From 48dde4a388fd4c31dd5680f7535419874124e554 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 25 Jul 2024 16:35:02 -0300 Subject: wip --- src/content/dependencies/generateLyricsEntry.js | 25 +++++++++++ src/content/dependencies/generateLyricsSection.js | 42 +++++++++++++++++++ src/content/dependencies/generateLyricsSwitcher.js | 49 ++++++++++++++++++++++ src/content/dependencies/generateTrackInfoPage.js | 27 ++++++------ src/content/dependencies/transformContent.js | 35 ++++++++++++++-- 5 files changed, 163 insertions(+), 15 deletions(-) create mode 100644 src/content/dependencies/generateLyricsEntry.js create mode 100644 src/content/dependencies/generateLyricsSection.js create mode 100644 src/content/dependencies/generateLyricsSwitcher.js (limited to 'src/content') diff --git a/src/content/dependencies/generateLyricsEntry.js b/src/content/dependencies/generateLyricsEntry.js new file mode 100644 index 00000000..4f9c22f1 --- /dev/null +++ b/src/content/dependencies/generateLyricsEntry.js @@ -0,0 +1,25 @@ +export default { + contentDependencies: [ + 'transformContent', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, entry) => ({ + content: + relation('transformContent', entry.body), + }), + + slots: { + attributes: { + type: 'attributes', + mutable: false, + }, + }, + + generate: (relations, slots, {html}) => + html.tag('div', {class: 'lyrics-entry'}, + slots.attributes, + + relations.content.slot('mode', 'lyrics')), +}; diff --git a/src/content/dependencies/generateLyricsSection.js b/src/content/dependencies/generateLyricsSection.js new file mode 100644 index 00000000..7e7718c7 --- /dev/null +++ b/src/content/dependencies/generateLyricsSection.js @@ -0,0 +1,42 @@ +export default { + contentDependencies: [ + 'generateContentHeading', + 'generateLyricsEntry', + 'generateLyricsSwitcher', + 'transformContent', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, entries) => ({ + heading: + relation('generateContentHeading'), + + switcher: + relation('generateLyricsSwitcher', entries), + + entries: + entries + .map(entry => relation('generateLyricsEntry', entry)), + }), + + generate: (relations, {html, language}) => + html.tags([ + relations.heading + .slots({ + attributes: {id: 'lyrics'}, + title: language.$('releaseInfo.lyrics'), + }), + + relations.switcher, + + relations.entries + .map((entry, index) => + entry.slots({ + attributes: [ + index >= 1 && + {style: 'display: none'}, + ], + })), + ]), +}; diff --git a/src/content/dependencies/generateLyricsSwitcher.js b/src/content/dependencies/generateLyricsSwitcher.js new file mode 100644 index 00000000..1c9ee6a3 --- /dev/null +++ b/src/content/dependencies/generateLyricsSwitcher.js @@ -0,0 +1,49 @@ +export default { + contentDependencies: ['transformContent'], + extraDependencies: ['html', 'language'], + + relations: (relation, entries) => ({ + annotations: + entries + .map(entry => entry.annotation) + .map(annotation => relation('transformContent', annotation)), + }), + + slots: { + tag: {type: 'string', default: 'p'}, + }, + + generate: (relations, slots, {html, language}) => + html.tag(slots.tag, {class: 'lyrics-switcher'}, + language.$('releaseInfo.lyrics.switcher', { + entries: + language.formatListWithoutSeparator( + relations.annotations + .map((annotation, index) => + html.tag('span', {[html.joinChildren]: ''}, [ + html.tag('a', + {href: '#'}, + + index === 0 && + {style: 'display: none'}, + + annotation + .slots({ + mode: 'inline', + textOnly: true, + })), + + html.tag('a', + {class: 'current'}, + + index >= 1 && + {style: 'display: none'}, + + annotation + .slots({ + mode: 'inline', + textOnly: true, + })), + ]))), + })), +}; diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index 7d531124..ca6f82b9 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -9,6 +9,7 @@ export default { 'generateCommentaryEntry', 'generateContentHeading', 'generateContributionList', + 'generateLyricsSection', 'generatePageLayout', 'generateTrackArtistCommentarySection', 'generateTrackArtworkColumn', @@ -90,8 +91,8 @@ export default { flashesThatFeatureList: relation('generateTrackInfoPageFeaturedByFlashesList', track), - lyrics: - relation('transformContent', track.lyrics), + lyricsSection: + relation('generateLyricsSection', track.lyrics), sheetMusicFilesList: relation('generateAlbumAdditionalFilesList', @@ -308,17 +309,19 @@ export default { relations.flashesThatFeatureList, ]), - html.tags([ - relations.contentHeading.clone() - .slots({ - attributes: {id: 'lyrics'}, - title: language.$('releaseInfo.lyrics'), - }), + relations.lyricsSection, - html.tag('blockquote', - {[html.onlyIfContent]: true}, - relations.lyrics.slot('mode', 'lyrics')), - ]), + // html.tags([ + // relations.contentHeading.clone() + // .slots({ + // attributes: {id: 'lyrics'}, + // title: language.$('releaseInfo.lyrics'), + // }), + + // html.tag('blockquote', + // {[html.onlyIfContent]: true}, + // relations.lyrics.slot('mode', 'lyrics')), + // ]), html.tags([ relations.contentHeading.clone() diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index f56a1da9..1bbd45e2 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -2,6 +2,7 @@ import {bindFind} from '#find'; import {replacerSpec, parseInput} from '#replacer'; import {Marked} from 'marked'; +import striptags from 'striptags'; const commonMarkedOptions = { headerIds: false, @@ -184,6 +185,8 @@ export default { link: relation(name, arg), label: node.data.label, hash: node.data.hash, + name: arg?.name, + shortName: arg?.shortName ?? arg?.nameShort, } : getPlaceholder(node, content)); @@ -241,6 +244,11 @@ export default { default: true, }, + textOnly: { + type: 'boolean', + default: false, + }, + thumb: { validate: v => v.is('small', 'medium', 'large'), default: 'large', @@ -452,7 +460,17 @@ export default { nodeFromRelations.link, {slots: ['content', 'hash']}); - const {label, hash} = nodeFromRelations; + const {label, hash, shortName, name} = nodeFromRelations; + + if (slots.textOnly) { + if (label) { + return {type: 'text', data: label}; + } else if (slots.preferShortLinkNames) { + return {type: 'text', data: shortName ?? name}; + } else { + return {type: 'text', data: name}; + } + } // These are removed from the typical combined slots({})-style // because we don't want to override slots that were already set @@ -506,6 +524,10 @@ export default { const {label} = node.data; const externalLink = relations.externalLinks[externalLinkIndex++]; + if (slots.textOnly) { + return {type: 'text', data: label}; + } + externalLink.setSlots({ content: label, fromContent: true, @@ -542,12 +564,19 @@ export default { ? valueFn(replacerValue) : replacerValue); - const contents = + const content = (htmlFn ? htmlFn(value, {html, language}) : value); - return {type: 'text', data: contents.toString()}; + const contentText = + html.resolve(content, {normalize: 'string'}); + + if (slots.textOnly) { + return {type: 'text', data: striptags(contentText)}; + } else { + return {type: 'text', data: contentText}; + } } default: -- cgit 1.3.0-6-gf8a5