diff options
Diffstat (limited to 'src/content')
| -rw-r--r-- | src/content/dependencies/generatePageLayout.js | 56 | ||||
| -rw-r--r-- | src/content/dependencies/generateStickyHeadingContainer.js | 20 | ||||
| -rw-r--r-- | src/content/dependencies/transformContent.js | 25 |
3 files changed, 45 insertions, 56 deletions
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index a45f7415..8a073624 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -276,10 +276,16 @@ export default { (html.isBlank(slots.title) ? null : slots.headingMode === 'sticky' - ? relations.stickyHeadingContainer.slots({ - title: titleContentsHTML, - cover: slots.cover, - }) + ? [ + relations.stickyHeadingContainer.slots({ + title: titleContentsHTML, + cover: slots.cover, + }), + + relations.stickyHeadingContainer.clone().slots({ + rootAttributes: {inert: true}, + }), + ] : html.tag('h1', titleContentsHTML)); // TODO: There could be neat interactions with the sticky heading here, @@ -390,30 +396,24 @@ export default { i === slots.navLinks.length - 1); return ( - html.tag('span', {class: 'nav-link'}, - showAsCurrent && - {class: 'current'}, - - [ - html.tag('span', {class: 'nav-link-content'}, - // Use inline-block styling on the content span, - // rather than wrapping the whole nav-link in a proper - // blockwrap, so that if the content spans multiple - // lines, it'll kick the accent down beneath it. - i > 0 && - {class: 'blockwrap'}, - - content), - - html.tag('span', {class: 'nav-link-accent'}, - {[html.noEdgeWhitespace]: true}, - {[html.onlyIfContent]: true}, - - language.$('misc.navAccent', { - [language.onlyIfOptions]: ['links'], - links: cur.accent, - })), - ])); + html.metatag('blockwrap', + html.tag('span', {class: 'nav-link'}, + showAsCurrent && + {class: 'current'}, + + [ + html.tag('span', {class: 'nav-link-content'}, + content), + + html.tag('span', {class: 'nav-link-accent'}, + {[html.noEdgeWhitespace]: true}, + {[html.onlyIfContent]: true}, + + language.$('misc.navAccent', { + [language.onlyIfOptions]: ['links'], + links: cur.accent, + })), + ]))); })), html.tag('div', {class: 'nav-bottom-row'}, diff --git a/src/content/dependencies/generateStickyHeadingContainer.js b/src/content/dependencies/generateStickyHeadingContainer.js index f58b0cd8..ec3062a3 100644 --- a/src/content/dependencies/generateStickyHeadingContainer.js +++ b/src/content/dependencies/generateStickyHeadingContainer.js @@ -2,6 +2,11 @@ export default { extraDependencies: ['html'], slots: { + rootAttributes: { + type: 'attributes', + mutable: false, + }, + title: { type: 'html', mutable: false, @@ -15,6 +20,8 @@ export default { generate: (slots, {html}) => html.tags([ html.tag('div', {class: 'content-sticky-heading-root'}, + slots.rootAttributes, + !html.isBlank(slots.cover) && {class: 'has-cover'}, @@ -26,12 +33,12 @@ export default { [ html.tag('div', {class: 'content-sticky-heading-row'}, [ html.tag('h1', [ - slots.title, - - // Placement after generally keeps the contents from being - // the first, when matched by .querySelector() calls. html.tag('span', {class: 'reference-collapsed-heading'}, + {inert: true}, + slots.title.clone()), + + slots.title, ]), html.tag('div', {class: 'content-sticky-heading-cover-container'}, @@ -48,10 +55,5 @@ export default { html.tag('div', {class: 'content-sticky-subheading-row'}, html.tag('h2', {class: 'content-sticky-subheading'})), ]))), - - html.tag('h1', {class: 'imaginary-static-heading-root'}, - html.tag('span', {class: 'imaginary-static-heading-row'}, - html.tag('span', {class: 'imaginary-static-heading-title'}, - slots.title.clone()))), ]), }; diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index 0904069f..f56a1da9 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -709,25 +709,12 @@ export default { const markedInput = extractNonTextNodes({ - getTextNodeContents(node, index) { - // First, replace line breaks that follow text content with - // <br> tags. - let content = node.data.replace(/(?!^)\n/gm, '<br>\n'); - - // Scrap line breaks that are at the end of a verse. - content = content.replace(/<br>$(?=\n\n)/gm, ''); - - // If the node started with a line break, and it's not the - // very first node, then whatever came before it was inline. - // (This is an assumption based on text links being basically - // the only tag that shows up in lyrics.) Since this text is - // following content that was already inline, restore that - // initial line break. - if (node.data[0] === '\n' && index !== 0) { - content = '<br>' + content; - } - - return content; + getTextNodeContents(node) { + // Just insert <br> before every line break. The resulting + // text will appear all in one paragraph - this is expected + // for lyrics, and allows for multiple lines of proportional + // space between stanzas. + return node.data.replace(/\n/g, '<br>\n'); }, }); |