diff options
Diffstat (limited to 'src')
41 files changed, 586 insertions, 531 deletions
diff --git a/src/content/dependencies/generateAlbumGalleryStatsLine.js b/src/content/dependencies/generateAlbumGalleryStatsLine.js index 08c0abeb..75bffb36 100644 --- a/src/content/dependencies/generateAlbumGalleryStatsLine.js +++ b/src/content/dependencies/generateAlbumGalleryStatsLine.js @@ -33,6 +33,6 @@ export default { return ( html.tag('p', {class: 'quick-info'}, - language.formatString(parts.join('.'), options))); + language.formatString(...parts, options))); }, }; diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index 90a120ca..cb7355f3 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -171,10 +171,9 @@ export default { relations.releaseInfo, html.tag('p', - { - [html.onlyIfContent]: true, - [html.joinChildren]: html.tag('br'), - }, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + [ sec.extra.additionalFilesShortcut, @@ -206,10 +205,9 @@ export default { relations.trackList, html.tag('p', - { - [html.onlyIfContent]: true, - [html.joinChildren]: '<br>', - }, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + [ data.dateAddedToWiki && language.$('releaseInfo.addedToWiki', { diff --git a/src/content/dependencies/generateAlbumNavAccent.js b/src/content/dependencies/generateAlbumNavAccent.js index 01c88bf7..121af439 100644 --- a/src/content/dependencies/generateAlbumNavAccent.js +++ b/src/content/dependencies/generateAlbumNavAccent.js @@ -90,11 +90,9 @@ export default { slots.showTrackNavigation && data.hasMultipleTracks && html.tag('a', - { - href: '#', - 'data-random': 'track-in-sidebar', - id: 'random-button', - }, + {id: 'random-button'}, + {href: '#', 'data-random': 'track-in-sidebar'}, + (data.isTrackPage ? language.$('trackPage.nav.random') : language.$('albumPage.nav.randomTrack'))); diff --git a/src/content/dependencies/generateAlbumReleaseInfo.js b/src/content/dependencies/generateAlbumReleaseInfo.js index dd5baab9..cb3aaa75 100644 --- a/src/content/dependencies/generateAlbumReleaseInfo.js +++ b/src/content/dependencies/generateAlbumReleaseInfo.js @@ -52,10 +52,9 @@ export default { generate(data, relations, {html, language}) { return html.tags([ html.tag('p', - { - [html.onlyIfContent]: true, - [html.joinChildren]: html.tag('br'), - }, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + [ relations.artistContributionsLine .slots({stringKey: 'releaseInfo.by'}), diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js index 8cf36fa4..bbf98875 100644 --- a/src/content/dependencies/generateAlbumSecondaryNav.js +++ b/src/content/dependencies/generateAlbumSecondaryNav.js @@ -129,11 +129,16 @@ export default { return ( html.tag('span', - {style: colorVariables.slot('color', groupColor).content}, + {style: + colorVariables + .slot('color', groupColor) + .content}, + [ language.$('albumSidebar.groupBox.title', { group: groupLink.slot('color', false), }), + `(${language.formatUnitList(previousNextPart)})`, ])); }), diff --git a/src/content/dependencies/generateAlbumSidebarTrackSection.js b/src/content/dependencies/generateAlbumSidebarTrackSection.js index d3cd37f0..589bd900 100644 --- a/src/content/dependencies/generateAlbumSidebarTrackSection.js +++ b/src/content/dependencies/generateAlbumSidebarTrackSection.js @@ -70,17 +70,14 @@ export default { const trackListItems = relations.trackLinks.map((trackLink, index) => html.tag('li', - { - class: [ - data.includesCurrentTrack && - index === data.currentTrackIndex && - 'current', - - slots.mode === 'commentary' && - data.tracksAreMissingCommentary[index] && - 'no-commentary', - ], - }, + data.includesCurrentTrack && + index === data.currentTrackIndex && + {class: 'current'}, + + slots.mode === 'commentary' && + data.tracksAreMissingCommentary[index] && + {class: 'no-commentary'}, + language.$('albumSidebar.trackList.item', { track: (slots.mode === 'commentary' && data.tracksAreMissingCommentary[index] @@ -96,24 +93,24 @@ export default { }))); return html.tag('details', - { - 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. - data.isTrackPage && - - // Only expand the track section which includes the track - // currently being viewed by default. - data.includesCurrentTrack), - }, + data.includesCurrentTrack && + {class: '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. + data.isTrackPage && + + // Only expand the track section which includes the track + // currently being viewed by default. + data.includesCurrentTrack}, + [ html.tag('summary', {style}, html.tag('span', diff --git a/src/content/dependencies/generateAlbumTrackList.js b/src/content/dependencies/generateAlbumTrackList.js index 2732aaa4..40cbb14d 100644 --- a/src/content/dependencies/generateAlbumTrackList.js +++ b/src/content/dependencies/generateAlbumTrackList.js @@ -123,7 +123,9 @@ export default { html.tag('dd', html.tag(listTag, - data.hasTrackNumbers ? {start: info.startIndex + 1} : {}, + data.hasTrackNumbers && + {start: info.startIndex + 1}, + items)), ])); diff --git a/src/content/dependencies/generateAlbumTrackListItem.js b/src/content/dependencies/generateAlbumTrackListItem.js index f92712f9..4cfa5cb0 100644 --- a/src/content/dependencies/generateAlbumTrackListItem.js +++ b/src/content/dependencies/generateAlbumTrackListItem.js @@ -71,6 +71,6 @@ export default { } return html.tag('li', {style}, - language.formatString(parts.join('.'), options)); + language.formatString(...parts, options)); }, }; diff --git a/src/content/dependencies/generateArtTagGalleryPage.js b/src/content/dependencies/generateArtTagGalleryPage.js index e28b54cb..5557d1e2 100644 --- a/src/content/dependencies/generateArtTagGalleryPage.js +++ b/src/content/dependencies/generateArtTagGalleryPage.js @@ -91,8 +91,7 @@ export default { mainClasses: ['top-index'], mainContent: [ - html.tag('p', - {class: 'quick-info'}, + html.tag('p', {class: 'quick-info'}, language.$('tagPage.infoLine', { coverArts: language.countCoverArts(data.numArtworks, { unit: true, diff --git a/src/content/dependencies/generateArtistGalleryPage.js b/src/content/dependencies/generateArtistGalleryPage.js index 99e2fcbf..39be9d91 100644 --- a/src/content/dependencies/generateArtistGalleryPage.js +++ b/src/content/dependencies/generateArtistGalleryPage.js @@ -83,8 +83,7 @@ export default { mainClasses: ['top-index'], mainContent: [ - html.tag('p', - {class: 'quick-info'}, + html.tag('p', {class: 'quick-info'}, language.$('artistGalleryPage.infoLine', { coverArts: language.countCoverArts(data.numArtworks, { unit: true, diff --git a/src/content/dependencies/generateArtistGroupContributionsInfo.js b/src/content/dependencies/generateArtistGroupContributionsInfo.js index 1aa5dce6..fc82072c 100644 --- a/src/content/dependencies/generateArtistGroupContributionsInfo.js +++ b/src/content/dependencies/generateArtistGroupContributionsInfo.js @@ -162,7 +162,9 @@ export default { ? language.$('artistPage.groupContributions.title.withSortButton', { title: slots.title, sort: - html.tag('a', {href: '#', class: 'group-contributions-sort-button'}, + html.tag('a', {class: 'group-contributions-sort-button'}, + {href: '#'}, + (slots.sort === 'count' ? language.$('artistPage.groupContributions.title.sorting.count') : language.$('artistPage.groupContributions.title.sorting.duration'))), @@ -170,12 +172,17 @@ export default { : slots.title)), html.tag('dd', {class: topLevelClasses}, - html.tag('ul', {class: 'group-contributions-table', role: 'list'}, + html.tag('ul', {class: 'group-contributions-table'}, + {role: 'list'}, + (slots.sort === 'count' ? stitchArrays({ group: relations.groupLinksSortedByCount, count: getCounts(data.groupCountsSortedByCount), - duration: getDurations(data.groupDurationsSortedByCount, data.groupDurationsApproximateSortedByCount), + duration: + getDurations( + data.groupDurationsSortedByCount, + data.groupDurationsApproximateSortedByCount), }).map(({group, count, duration}) => html.tag('li', html.tag('div', {class: 'group-contributions-row'}, [ @@ -187,10 +194,14 @@ export default { ? language.$('artistPage.groupContributions.item.countDurationAccent', {count, duration}) : language.$('artistPage.groupContributions.item.countAccent', {count}))), ]))) + : stitchArrays({ group: relations.groupLinksSortedByDuration, count: getCounts(data.groupCountsSortedByDuration), - duration: getDurations(data.groupDurationsSortedByDuration, data.groupDurationsApproximateSortedByCount), + duration: + getDurations( + data.groupDurationsSortedByDuration, + data.groupDurationsApproximateSortedByCount), }).map(({group, count, duration}) => html.tag('li', html.tag('div', {class: 'group-contributions-row'}, [ diff --git a/src/content/dependencies/generateArtistInfoPageChunk.js b/src/content/dependencies/generateArtistInfoPageChunk.js index 2b4523d1..d4c71c32 100644 --- a/src/content/dependencies/generateArtistInfoPageChunk.js +++ b/src/content/dependencies/generateArtistInfoPageChunk.js @@ -43,7 +43,7 @@ export default { }); } - accentedLink = language.formatString(parts.join('.'), options); + accentedLink = language.formatString(...parts, options); break; } @@ -65,7 +65,7 @@ export default { options.date = language.formatDate(slots.dateRangeStart ?? slots.date); } - accentedLink = language.formatString(parts.join('.'), options); + accentedLink = language.formatString(...parts, options); break; } } diff --git a/src/content/dependencies/generateArtistInfoPageChunkItem.js b/src/content/dependencies/generateArtistInfoPageChunkItem.js index 9f99513d..de31d30e 100644 --- a/src/content/dependencies/generateArtistInfoPageChunkItem.js +++ b/src/content/dependencies/generateArtistInfoPageChunkItem.js @@ -39,12 +39,12 @@ export default { break accent; } - accentedContent = language.formatString(parts.join('.'), options); + accentedContent = language.formatString(...parts, options); } return ( html.tag('li', - {class: slots.rerelease && 'rerelease'}, + slots.rerelease && {class: 'rerelease'}, accentedContent)); }, }; diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js index 0b2b2558..b4f24686 100644 --- a/src/content/dependencies/generateCommentaryEntry.js +++ b/src/content/dependencies/generateCommentaryEntry.js @@ -89,10 +89,12 @@ export default { : null); return html.tags([ - html.tag('p', {class: 'commentary-entry-heading', style}, + html.tag('p', {class: 'commentary-entry-heading'}, + {style}, language.$(...titleParts, titleOptions)), - html.tag('blockquote', {class: 'commentary-entry-body', style}, + html.tag('blockquote', {class: 'commentary-entry-body'}, + {style}, relations.bodyContent.slot('mode', 'multiline')), ]); }, diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js index 0343409c..57bacbe5 100644 --- a/src/content/dependencies/generateContentHeading.js +++ b/src/content/dependencies/generateContentHeading.js @@ -16,26 +16,24 @@ export default { tag: {type: 'string', default: 'p'}, }, - generate(relations, slots, {html}) { - return html.tag(slots.tag, - { - class: 'content-heading', - id: slots.id, - tabindex: '0', - - style: - slots.color && - relations.colorVariables - .slot('color', slots.color) - .content, - }, [ - html.tag('span', - {[html.onlyIfContent]: true, class: 'content-heading-main-title'}, + generate: (relations, slots, {html}) => + html.tag(slots.tag, {class: 'content-heading'}, + {id: slots.id}, + {tabindex: '0'}, + + slots.color && + {style: + relations.colorVariables + .slot('color', slots.color) + .content}, + + [ + html.tag('span', {class: 'content-heading-main-title'}, + {[html.onlyIfContent]: true}, slots.title), - html.tag('span', - {[html.onlyIfContent]: true, class: 'content-heading-accent'}, + html.tag('span', {class: 'content-heading-accent'}, + {[html.onlyIfContent]: true}, slots.accent), - ]); - } + ]), } diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js index 4919041f..49cb4300 100644 --- a/src/content/dependencies/generateCoverCarousel.js +++ b/src/content/dependencies/generateCoverCarousel.js @@ -33,15 +33,14 @@ export default { const layout = getCarouselLayoutForNumberOfItems(stitched.length); return html.tags([ - html.tag('div', - { - class: 'carousel-container', - 'data-carousel-rows': layout.rows, - 'data-carousel-columns': layout.columns, - }, + html.tag('div', {class: 'carousel-container'}, + {'data-carousel-rows': layout.rows}, + {'data-carousel-columns': layout.columns}, + repeat(3, [ - html.tag('div', - {class: 'carousel-grid', 'aria-hidden': 'true'}, + html.tag('div', {class: 'carousel-grid'}, + {'aria-hidden': 'true'}, + stitched.map(({image, link}, index) => html.tag('div', {class: 'carousel-item'}, link.slots({ diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js index bfba647f..d2648d67 100644 --- a/src/content/dependencies/generateDatetimestampTemplate.js +++ b/src/content/dependencies/generateDatetimestampTemplate.js @@ -8,21 +8,20 @@ export default { }, generate: (slots, {html}) => - html.tag('span', { - [html.joinChildren]: '', - - class: [ - 'datetimestamp', - slots.tooltipContent && 'has-tooltip', - ], - }, [ - html.tag('time', - {datetime: slots.datetime}, - slots.mainContent), + html.tag('span', {class: 'datetimestamp'}, + {[html.joinChildren]: ''}, slots.tooltipContent && - html.tag('span', {class: 'datetimestamp-tooltip'}, - html.tag('span', {class: 'datetimestamp-tooltip-content'}, - slots.tooltipContent)), - ]), + {class: 'has-tooltip'}, + + [ + html.tag('time', + {datetime: slots.datetime}, + slots.mainContent), + + slots.tooltipContent && + html.tag('span', {class: 'datetimestamp-tooltip'}, + html.tag('span', {class: 'datetimestamp-tooltip-content'}, + slots.tooltipContent)), + ]), }; diff --git a/src/content/dependencies/generateFlashActSidebar.js b/src/content/dependencies/generateFlashActSidebar.js index 29379644..3c631d92 100644 --- a/src/content/dependencies/generateFlashActSidebar.js +++ b/src/content/dependencies/generateFlashActSidebar.js @@ -155,7 +155,9 @@ export default { relations.currentActFlashLinks .map((flashLink, index) => html.tag('li', - {class: index === data.currentFlashIndex && 'current'}, + index === data.currentFlashIndex && + {class: 'current'}, + flashLink))), ]), ]); @@ -168,24 +170,31 @@ export default { sideColor: data.sideColors, actLinks: relations.sideActLinks, }).map(({sideName, sideColor, actLinks}, sideIndex) => - html.tag('details', { - class: sideIndex === data.currentSideIndex && 'current', - open: data.isFlashActPage && sideIndex === data.currentSideIndex, - style: sideColor && `--primary-color: ${getColors(sideColor).primary}` - }, [ - html.tag('summary', - html.tag('span', {class: 'group-name'}, - sideName)), - - html.tag('ul', - actLinks.map((actLink, actIndex) => - html.tag('li', - {class: + html.tag('details', + sideIndex === data.currentSideIndex && + {class: 'current'}, + + data.isFlashActPage && + sideIndex === data.currentSideIndex && + {open: true}, + + sideColor && + {style: `--primary-color: ${getColors(sideColor).primary}`}, + + [ + html.tag('summary', + html.tag('span', {class: 'group-name'}, + sideName)), + + html.tag('ul', + actLinks.map((actLink, actIndex) => + html.tag('li', sideIndex === data.currentSideIndex && actIndex === data.currentActIndex && - 'current'}, - actLink))), - ])), + {class: 'current'}, + + actLink))), + ])), ]); const sideMapBox = { diff --git a/src/content/dependencies/generateFlashIndexPage.js b/src/content/dependencies/generateFlashIndexPage.js index 5fc62ab3..621d62aa 100644 --- a/src/content/dependencies/generateFlashIndexPage.js +++ b/src/content/dependencies/generateFlashIndexPage.js @@ -96,12 +96,10 @@ export default { mainClasses: ['flash-index'], mainContent: [ !empty(data.jumpLinkLabels) && [ - html.tag('p', - {class: 'quick-info'}, + html.tag('p', {class: 'quick-info'}, language.$('misc.jumpTo')), - html.tag('ul', - {class: 'quick-info'}, + html.tag('ul', {class: 'quick-info'}, stitchArrays({ colorVariables: relations.jumpLinkColorVariables, anchor: data.jumpLinkAnchors, @@ -109,10 +107,15 @@ export default { label: data.jumpLinkLabels, }).map(({colorVariables, anchor, color, label}) => html.tag('li', - html.tag('a', { - href: '#' + anchor, - style: colorVariables.slot('color', color).content, - }, label)))), + html.tag('a', + {href: '#' + anchor}, + + {style: + colorVariables + .slot('color', color) + .content}, + + label)))), ], stitchArrays({ @@ -139,10 +142,13 @@ export default { coverGridPaths, }, index) => [ html.tag('h2', - { - id: anchor, - style: colorVariables.slot('color', color).content, - }, + {id: anchor}, + + {style: + colorVariables + .slot('color', color) + .content}, + actLink), coverGrid.slots({ diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js index 259f5dce..490dcf10 100644 --- a/src/content/dependencies/generateGroupGalleryPage.js +++ b/src/content/dependencies/generateGroupGalleryPage.js @@ -132,21 +132,25 @@ export default { image.slot('path', path)), }), - html.tag('p', - {class: 'quick-info'}, + html.tag('p', {class: 'quick-info'}, language.$('groupGalleryPage.infoLine', { - tracks: html.tag('b', - language.countTracks(data.numTracks, { - unit: true, - })), - albums: html.tag('b', - language.countAlbums(data.numAlbums, { - unit: true, - })), - time: html.tag('b', - language.formatDuration(data.totalDuration, { - unit: true, - })), + tracks: + html.tag('b', + language.countTracks(data.numTracks, { + unit: true, + })), + + albums: + html.tag('b', + language.countAlbums(data.numAlbums, { + unit: true, + })), + + time: + html.tag('b', + language.formatDuration(data.totalDuration, { + unit: true, + })), })), relations.coverGrid diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 0e5d645b..8d123c92 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -182,7 +182,11 @@ export default { return ( html.tag('li', - {style: colorVariables.slot('color', albumColor).content}, + {style: + colorVariables + .slot('color', albumColor) + .content}, + language.$(...parts, options))); })), ], diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js index e3b28099..43c78a0f 100644 --- a/src/content/dependencies/generateGroupSecondaryNav.js +++ b/src/content/dependencies/generateGroupSecondaryNav.js @@ -89,7 +89,11 @@ export default { (!relations.previousGroupLink && !relations.nextGroupLink ? categoryLink : html.tag('span', - {style: relations.colorVariables.slot('color', data.categoryColor).content}, + {style: + relations.colorVariables + .slot('color', data.categoryColor) + .content}, + [ categoryLink.slot('color', false), `(${language.formatUnitList(previousNextPart)})`, diff --git a/src/content/dependencies/generateGroupSidebarCategoryDetails.js b/src/content/dependencies/generateGroupSidebarCategoryDetails.js index 709ab211..19c5447c 100644 --- a/src/content/dependencies/generateGroupSidebarCategoryDetails.js +++ b/src/content/dependencies/generateGroupSidebarCategoryDetails.js @@ -49,13 +49,16 @@ export default { generate(data, relations, slots, {html, language}) { return html.tag('details', - { - open: data.isCurrentCategory, - class: data.isCurrentCategory && 'current', - }, + data.isCurrentCategory && + {class: 'current', open: true}, + [ html.tag('summary', - {style: relations.colorVariables.slot('color', data.color).content}, + {style: + relations.colorVariables + .slot('color', data.color) + .content}, + html.tag('span', language.$('groupSidebar.groupList.category', { category: @@ -69,7 +72,9 @@ export default { galleryLink: relations.groupGalleryLinks, })).map(({infoLink, galleryLink}, index) => html.tag('li', - {class: index === data.currentGroupIndex && 'current'}, + index === data.currentGroupIndex && + {class: 'current'}, + language.$('groupSidebar.groupList.item', { group: (slots.currentExtra === 'gallery' diff --git a/src/content/dependencies/generateListAllAdditionalFilesChunk.js b/src/content/dependencies/generateListAllAdditionalFilesChunk.js index c87c03cc..e31633f4 100644 --- a/src/content/dependencies/generateListAllAdditionalFilesChunk.js +++ b/src/content/dependencies/generateListAllAdditionalFilesChunk.js @@ -43,7 +43,7 @@ export default { ? html.tag('li', additionalFileLinks[0].slots({ content: - language.$(`listingPage.${slots.stringsKey}.file`, { + language.$('listingPage', slots.stringsKey, 'file', { title: additionalFileTitle, }), })) @@ -52,11 +52,15 @@ export default { html.tag('details', [ html.tag('summary', html.tag('span', - language.$(`listingPage.${slots.stringsKey}.file.withMultipleFiles`, { + language.$('listingPage', slots.stringsKey, 'file.withMultipleFiles', { title: - html.tag('span', {class: 'group-name'}, additionalFileTitle), + html.tag('span', {class: 'group-name'}, + additionalFileTitle), + files: - language.countAdditionalFiles(additionalFileLinks.length, {unit: true}), + language.countAdditionalFiles( + additionalFileLinks.length, + {unit: true}), }))), html.tag('ul', @@ -67,7 +71,7 @@ export default { html.tag('li', additionalFileLink.slots({ content: - language.$(`listingPage.${slots.stringsKey}.file`, { + language.$('listingPage', slots.stringsKey, 'file', { title: additionalFileFile, }), })))), diff --git a/src/content/dependencies/generateListingIndexList.js b/src/content/dependencies/generateListingIndexList.js index 290295b5..ed153652 100644 --- a/src/content/dependencies/generateListingIndexList.js +++ b/src/content/dependencies/generateListingIndexList.js @@ -81,16 +81,18 @@ export default { listingStringsKey: listingStringsKeys, }).map(({listingLink, listingStringsKey}, listingIndex) => html.tag('li', - {class: - targetIndex === data.currentTargetIndex && - listingIndex === data.currentListingIndex && - 'current'}, - listingLink - .slot('content', language.$(`listingPage.${listingStringsKey}.title.short`)))))); + targetIndex === data.currentTargetIndex && + listingIndex === data.currentListingIndex && + {class: 'current'}, + + listingLink.slots({ + content: + language.$('listingPage', listingStringsKey, 'title.short'), + }))))); const targetTitles = data.targetStringsKeys - .map(stringsKey => language.$(`listingPage.target.${stringsKey}`)); + .map(stringsKey => language.$('listingPage.target', stringsKey)); switch (slots.mode) { case 'sidebar': @@ -100,13 +102,13 @@ export default { listingLinkList: listingLinkLists, }).map(({targetTitle, listingLinkList}, targetIndex) => html.tag('details', - { - open: targetIndex === data.currentTargetIndex, - class: targetIndex === data.currentTargetIndex && 'current', - }, + targetIndex === data.currentTargetIndex && + {class: 'current', open: true}, + [ html.tag('summary', - html.tag('span', {class: 'group-name'}, targetTitle)), + html.tag('span', {class: 'group-name'}, + targetTitle)), listingLinkList, ]))); @@ -118,8 +120,11 @@ export default { targetTitle: targetTitles, listingLinkList: listingLinkLists, }).map(({targetTitle, listingLinkList}) => [ - html.tag('dt', {class: ['content-heading']}, targetTitle), - html.tag('dd', listingLinkList), + html.tag('dt', {class: 'content-heading'}, + targetTitle), + + html.tag('dd', + listingLinkList), ]))); } }, diff --git a/src/content/dependencies/generateListingPage.js b/src/content/dependencies/generateListingPage.js index 2050d62d..fe65a82d 100644 --- a/src/content/dependencies/generateListingPage.js +++ b/src/content/dependencies/generateListingPage.js @@ -167,7 +167,9 @@ export default { relations.sameTargetListingLinks && html.tag('p', language.$('listingPage.listingsFor', { - target: language.$(`listingPage.target.${data.targetStringsKey}`), + target: + language.$('listingPage.target', data.targetStringsKey), + listings: language.formatUnitList( stitchArrays({ @@ -175,10 +177,12 @@ export default { stringsKey: data.sameTargetListingStringsKeys, }).map(({link, stringsKey}, index) => html.tag('span', - {class: index === data.sameTargetListingsCurrentIndex && 'current'}, + index === data.sameTargetListingsCurrentIndex && + {class: 'current'}, + link.slots({ attributes: {class: 'nowrap'}, - content: language.$(`listingPage.${stringsKey}.title.short`), + content: language.$('listingPage', stringsKey, 'title.short'), })))), })), diff --git a/src/content/dependencies/generateNewsEntryReadAnotherLinks.js b/src/content/dependencies/generateNewsEntryReadAnotherLinks.js index 33c5bda0..d978b0e4 100644 --- a/src/content/dependencies/generateNewsEntryReadAnotherLinks.js +++ b/src/content/dependencies/generateNewsEntryReadAnotherLinks.js @@ -85,13 +85,13 @@ export default { } return ( - html.tag('p', { - [html.onlyIfContent]: true, - [html.joinChildren]: html.tag('br'), - class: [ - 'read-another-links', - entryLines.length > 1 && 'offset-tooltips', - ], - }, entryLines)); + html.tag('p', {class: 'read-another-links'}, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + + entryLines.length > 1 && + {class: 'offset-tooltips'}, + + entryLines)); }, }; diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index e4c02fb2..3ed6631c 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -252,123 +252,114 @@ export default { } const mainHTML = - html.tag('main', { - id: 'content', - class: slots.mainClasses, - }, [ - titleHTML, - - html.tag('div', { - [html.onlyIfContent]: true, - id: 'cover-art-container', - }, slots.cover), - - slots.additionalNames, - - html.tag('div', - { - [html.onlyIfContent]: true, - class: 'main-content-container', - }, - slots.mainContent), - ]); + html.tag('main', {id: 'content'}, + {class: slots.mainClasses}, + + [ + titleHTML, + + html.tag('div', {id: 'cover-art-container'}, + {[html.onlyIfContent]: true}, + slots.cover), + + slots.additionalNames, + + html.tag('div', {class: 'main-content-container'}, + {[html.onlyIfContent]: true}, + slots.mainContent), + ]); const footerHTML = - html.tag('footer', - {[html.onlyIfContent]: true, id: 'footer'}, + html.tag('footer', {id: 'footer'}, + {[html.onlyIfContent]: true}, + [ - html.tag('div', - { - [html.onlyIfContent]: true, - class: 'footer-content', - }, + html.tag('div', {class: 'footer-content'}, + {[html.onlyIfContent]: true}, footerContent), relations.footerLocalizationLinks, ]); - const navHTML = html.tag('nav', - { - [html.onlyIfContent]: true, - id: 'header', - class: [ - !empty(slots.navLinks) && 'nav-has-main-links', - !html.isBlank(slots.navContent) && 'nav-has-content', - !html.isBlank(slots.navBottomRowContent) && 'nav-has-bottom-row', - ], - }, - [ - html.tag('div', - { - [html.onlyIfContent]: true, - class: [ - 'nav-main-links', - 'nav-links-' + slots.navLinkStyle, - ], - }, - slots.navLinks - ?.filter(Boolean) - ?.map((cur, i) => { - let content; - - if (cur.html) { - content = cur.html; - } else { - let title; - let href; - - switch (cur.auto) { - case 'home': - title = data.wikiName; - href = to('localized.home'); - break; - case 'current': - title = slots.title; - href = ''; - break; - case null: - case undefined: - title = cur.title; - href = to(...cur.path); - break; - } + const navHTML = + html.tag('nav', {id: 'header'}, + {[html.onlyIfContent]: true}, - content = html.tag('a', - {href}, - title); - } + !empty(slots.navLinks) && + {class: 'nav-has-main-links'}, - let className; + !html.isBlank(slots.navContent) && + {class: 'nav-has-content'}, - if ( - cur.current || - cur.auto === 'current' || - (slots.navLinkStyle === 'hierarchical' && - i === slots.navLinks.length - 1) - ) { - className = 'current'; - } + !html.isBlank(slots.navBottomRowContent) && + {class: 'nav-has-bottom-row'}, - return html.tag('span', - {class: className}, - [ - html.tag('span', - {class: 'nav-link-content'}, - content), + [ + html.tag('div', {class: 'nav-main-links'}, + {[html.onlyIfContent]: true}, + {class: 'nav-links-' + slots.navLinkStyle}, + + slots.navLinks + ?.filter(Boolean) + ?.map((cur, i) => { + let content; + + if (cur.html) { + content = cur.html; + } else { + let title; + let href; + + switch (cur.auto) { + case 'home': + title = data.wikiName; + href = to('localized.home'); + break; + case 'current': + title = slots.title; + href = ''; + break; + case null: + case undefined: + title = cur.title; + href = to(...cur.path); + break; + } + + content = + html.tag('a', {href}, title); + } + + return ( html.tag('span', - {[html.onlyIfContent]: true, class: 'nav-link-accent'}, - cur.accent), - ]); - })), + cur.current && + {class: 'current'}, + + cur.auto === 'current' && + {class: 'current'}, - html.tag('div', - {[html.onlyIfContent]: true, class: 'nav-bottom-row'}, - slots.navBottomRowContent), + slots.navLinkStyle === 'hierarchical' && + i === slots.navLinks.length - 1 && + {class: 'current'}, - html.tag('div', - {[html.onlyIfContent]: true, class: 'nav-content'}, - slots.navContent), - ]) + [ + html.tag('span', {class: 'nav-link-content'}, + content), + + html.tag('span', {class: 'nav-link-accent'}, + {[html.onlyIfContent]: true}, + cur.accent), + ])); + })), + + html.tag('div', {class: 'nav-bottom-row'}, + {[html.onlyIfContent]: true}, + slots.navBottomRowContent), + + html.tag('div', {class: 'nav-content'}, + {[html.onlyIfContent]: true}, + slots.navContent), + ]); const generateSidebarHTML = (side, id) => { const content = slots[side + 'Content']; @@ -390,24 +381,28 @@ export default { multiple .filter(Boolean) .map(box => - html.tag('div', { - [html.onlyIfContent]: true, - class: ['sidebar', box.class], - }, box.content)); + html.tag('div', {class: 'sidebar'}, + {[html.onlyIfContent]: true}, + {class: box.class}, + box.content)); } if (html.isBlank(sidebarContent)) { return html.blank(); } - return html.tag('div', - {id, class: [ - 'sidebar-column', - wide && 'wide', - !collapse && 'no-hide', - stickyMode !== 'static' && `sticky-${stickyMode}`, - ...sidebarClasses, - ]}, + return html.tag('div', {class: 'sidebar-column'}, + {id, class: sidebarClasses}, + + wide && + {class: 'wide'}, + + !collapse && + {class: 'no-hide'}, + + stickyMode !== 'static' && + {class: `sticky-${stickyMode}`}, + sidebarContent); } @@ -435,7 +430,7 @@ export default { html.tag('span', {class: 'skipper'}, html.tag('a', {href: `#${id}`}, - language.$(`misc.skippers.${string}`)))); + language.$('misc.skippers', string)))); const skippersHTML = mainHTML && @@ -464,8 +459,8 @@ export default { {condition: footerHTML, id: 'footer', string: 'footer'}, ])), - html.tag('div', - {[html.onlyIfContent]: true, class: 'skipper-list'}, + html.tag('div', {class: 'skipper-list'}, + {[html.onlyIfContent]: true}, processSkippers([ {id: 'tracks', string: 'tracks'}, {id: 'art', string: 'artworks'}, @@ -500,20 +495,26 @@ export default { html.tag('div', {id: 'image-overlay-action-content-with-size'}, [ language.$('releaseInfo.viewOriginalFile.withSize', { - link: html.tag('a', {class: 'image-overlay-view-original'}, - language.$('releaseInfo.viewOriginalFile.link')), - size: html.tag('span', - {[html.joinChildren]: ''}, - [ - html.tag('span', {id: 'image-overlay-file-size-kilobytes'}, - language.$('count.fileSize.kilobytes', { - kilobytes: html.tag('span', {class: 'image-overlay-file-size-count'}), - })), - html.tag('span', {id: 'image-overlay-file-size-megabytes'}, - language.$('count.fileSize.megabytes', { - megabytes: html.tag('span', {class: 'image-overlay-file-size-count'}), - })), - ]), + link: + html.tag('a', {class: 'image-overlay-view-original'}, + language.$('releaseInfo.viewOriginalFile.link')), + + size: + html.tag('span', + {[html.joinChildren]: ''}, + [ + html.tag('span', {id: 'image-overlay-file-size-kilobytes'}, + language.$('count.fileSize.kilobytes', { + kilobytes: + html.tag('span', {class: 'image-overlay-file-size-count'}), + })), + + html.tag('span', {id: 'image-overlay-file-size-megabytes'}, + language.$('count.fileSize.megabytes', { + megabytes: + html.tag('span', {class: 'image-overlay-file-size-count'}), + })), + ]), }), html.tag('span', {id: 'image-overlay-file-size-warning'}, @@ -524,42 +525,45 @@ export default { const layoutHTML = [ navHTML, - slots.bannerPosition === 'top' && slots.banner, + + slots.bannerPosition === 'top' && + slots.banner, + slots.secondaryNav, - html.tag('div', - { - class: [ - 'layout-columns', - !collapseSidebars && 'vertical-when-thin', - ], - }, + + html.tag('div', {class: 'layout-columns'}, + !collapseSidebars && + {class: 'vertical-when-thin'}, + [ sidebarLeftHTML, mainHTML, sidebarRightHTML, ]), - slots.bannerPosition === 'bottom' && slots.banner, + + slots.bannerPosition === 'bottom' && + slots.banner, + footerHTML, ]; const pageHTML = html.tags([ `<!DOCTYPE html>`, html.tag('html', - { - lang: language.intlCode, - 'data-language-code': language.code, - - 'data-url-key': 'localized.' + pagePath[0], - ...Object.fromEntries( - pagePath - .slice(1) - .map((v, i) => [['data-url-value' + i], v])), - - 'data-rebase-localized': to('localized.root'), - 'data-rebase-shared': to('shared.root'), - 'data-rebase-media': to('media.root'), - 'data-rebase-data': to('data.root'), - }, + {lang: language.intlCode}, + {'data-language-code': language.code}, + + {'data-url-key': 'localized.' + pagePath[0]}, + Object.fromEntries( + pagePath + .slice(1) + .map((v, i) => [['data-url-value' + i], v])), + + {'data-rebase-localized': to('localized.root')}, + {'data-rebase-shared': to('shared.root')}, + {'data-rebase-media': to('media.root')}, + {'data-rebase-data': to('data.root')}, + [ // developersComment, @@ -644,17 +648,20 @@ export default { html.tag('body', [ - html.tag('div', - { - id: 'page-container', - class: [ - (hasSidebarLeft || hasSidebarRight) && 'has-one-sidebar', - (hasSidebarLeft && hasSidebarRight) && 'has-two-sidebars', - !(hasSidebarLeft || hasSidebarRight) && 'has-zero-sidebars', - hasSidebarLeft && 'has-sidebar-left', - hasSidebarRight && 'has-sidebar-right', - ], - }, + html.tag('div', {id: 'page-container'}, + (hasSidebarLeft || hasSidebarRight + ? {class: 'has-one-sidebar'} + : {class: 'has-zero-sidebars'}), + + hasSidebarLeft && hasSidebarRight && + {class: 'has-two-sidebars'}, + + hasSidebarLeft && + {class: 'has-sidebar-left'}, + + hasSidebarRight && + {class: 'has-sidebar-right'}, + [ skippersHTML, layoutHTML, diff --git a/src/content/dependencies/generateSecondaryNav.js b/src/content/dependencies/generateSecondaryNav.js index e62016bd..1f965a25 100644 --- a/src/content/dependencies/generateSecondaryNav.js +++ b/src/content/dependencies/generateSecondaryNav.js @@ -9,11 +9,9 @@ export default { }, }, - generate(slots, {html}) { - return html.tag('nav', { - [html.onlyIfContent]: true, - id: 'secondary-nav', - class: slots.class, - }, slots.content); - }, + generate: (slots, {html}) => + html.tag('nav', {id: 'secondary-nav'}, + {[html.onlyIfContent]: true}, + {class: slots.class}, + slots.content), }; diff --git a/src/content/dependencies/generateStickyHeadingContainer.js b/src/content/dependencies/generateStickyHeadingContainer.js index 5ea10765..8eb39e6c 100644 --- a/src/content/dependencies/generateStickyHeadingContainer.js +++ b/src/content/dependencies/generateStickyHeadingContainer.js @@ -6,21 +6,16 @@ export default { cover: {type: 'html'}, }, - generate(slots, {html}) { - const hasCover = !html.isBlank(slots.cover); + generate: (slots, {html}) => + html.tag('div', {class: 'content-sticky-heading-container'}, + !html.isBlank(slots.cover) && + {class: 'has-cover'}, - return html.tag('div', - { - class: [ - 'content-sticky-heading-container', - hasCover && 'has-cover', - ], - }, [ html.tag('div', {class: 'content-sticky-heading-row'}, [ html.tag('h1', slots.title), - hasCover && + !html.isBlank(slots.cover) && html.tag('div', {class: 'content-sticky-heading-cover-container'}, html.tag('div', {class: 'content-sticky-heading-cover'}, slots.cover.slot('mode', 'thumbnail'))), @@ -28,6 +23,5 @@ export default { html.tag('div', {class: 'content-sticky-subheading-row'}, html.tag('h2', {class: 'content-sticky-subheading'})), - ]); - }, + ]), }; diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index 041f6bbc..b5121386 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -346,10 +346,9 @@ export default { relations.releaseInfo, html.tag('p', - { - [html.onlyIfContent]: true, - [html.joinChildren]: '<br>', - }, + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + [ sec.sheetMusicFiles && language.$('releaseInfo.sheetMusicFiles.shortcut', { @@ -414,7 +413,11 @@ export default { return ( html.tag('li', - {style: colorVariables.slot('color', color).content}, + {style: + colorVariables + .slot('color', color) + .content}, + language.$(...parts, options))); })), ], diff --git a/src/content/dependencies/generateTrackReleaseInfo.js b/src/content/dependencies/generateTrackReleaseInfo.js index c347dbce..3bdeaa4f 100644 --- a/src/content/dependencies/generateTrackReleaseInfo.js +++ b/src/content/dependencies/generateTrackReleaseInfo.js @@ -46,33 +46,34 @@ export default { return data; }, - generate(data, relations, {html, language}) { - return html.tags([ - html.tag('p', { - [html.onlyIfContent]: true, - [html.joinChildren]: html.tag('br'), - }, [ - relations.artistContributionLinks - .slots({stringKey: 'releaseInfo.by'}), - - relations.coverArtistContributionsLine - ?.slots({stringKey: 'releaseInfo.coverArtBy'}), - - data.date && - language.$('releaseInfo.released', { - date: language.formatDate(data.date), - }), - - data.coverArtDate && - language.$('releaseInfo.artReleased', { - date: language.formatDate(data.coverArtDate), - }), - - data.duration && - language.$('releaseInfo.duration', { - duration: language.formatDuration(data.duration), - }), - ]), + generate: (data, relations, {html, language}) => + html.tags([ + html.tag('p', + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + + [ + relations.artistContributionLinks + .slots({stringKey: 'releaseInfo.by'}), + + relations.coverArtistContributionsLine + ?.slots({stringKey: 'releaseInfo.coverArtBy'}), + + data.date && + language.$('releaseInfo.released', { + date: language.formatDate(data.date), + }), + + data.coverArtDate && + language.$('releaseInfo.artReleased', { + date: language.formatDate(data.coverArtDate), + }), + + data.duration && + language.$('releaseInfo.duration', { + duration: language.formatDuration(data.duration), + }), + ]), html.tag('p', (relations.externalLinks @@ -85,6 +86,5 @@ export default { : language.$('releaseInfo.listenOn.noLinks', { name: html.tag('i', data.name), }))), - ]); - }, + ]), }; diff --git a/src/content/dependencies/generateWikiHomeContentRow.js b/src/content/dependencies/generateWikiHomeContentRow.js index 5b1df99e..c8354fea 100644 --- a/src/content/dependencies/generateWikiHomeContentRow.js +++ b/src/content/dependencies/generateWikiHomeContentRow.js @@ -20,16 +20,15 @@ export default { content: {type: 'html'}, }, - generate(data, relations, slots, {html}) { - return ( - html.tag('section', - { - class: 'row', - style: relations.colorVariables.slot('color', data.color).content, - }, - [ - html.tag('h2', data.name), - slots.content, - ])); - }, + generate: (data, relations, slots, {html}) => + html.tag('section', {class: 'row'}, + {style: + relations.colorVariables + .slot('color', data.color) + .content}, + + [ + html.tag('h2', data.name), + slots.content, + ]), }; diff --git a/src/content/dependencies/generateWikiHomeNewsBox.js b/src/content/dependencies/generateWikiHomeNewsBox.js index 0d8303f1..f592ab99 100644 --- a/src/content/dependencies/generateWikiHomeNewsBox.js +++ b/src/content/dependencies/generateWikiHomeNewsBox.js @@ -57,23 +57,25 @@ export default { mainLink, readMoreLink, }, index) => - html.tag('article', - {class: ['news-entry', index === 0 && 'first-news-entry']}, - [ - html.tag('h2', [ - html.tag('time', language.formatDate(date)), - mainLink, - ]), + html.tag('article', {class: 'news-entry'}, + index === 0 && + {class: 'first-news-entry'}, - content.slot('thumb', 'medium'), + [ + html.tag('h2', [ + html.tag('time', language.formatDate(date)), + mainLink, + ]), - html.tag('p', - {[html.onlyIfContent]: true}, - readMoreLink - ?.slots({ - content: language.$('homepage.news.entry.viewRest'), - })), - ])), + content.slot('thumb', 'medium'), + + html.tag('p', + {[html.onlyIfContent]: true}, + readMoreLink + ?.slots({ + content: language.$('homepage.news.entry.viewRest'), + })), + ])), ], }; }, diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 3c78abe3..91bae43c 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -141,7 +141,7 @@ export default { return prepare( html.tag('div', {class: 'image-text-area'}, (html.isBlank(slots.missingSourceContent) - ? language.$(`misc.missingImage`) + ? language.$('misc.missingImage') : slots.missingSourceContent))); } @@ -231,39 +231,44 @@ export default { const nonlazyHTML = originalSrc && - prepare( - html.tag('img', { - ...imgAttributes, - src: thumbSrc ?? originalSrc, - })); + prepareVisible( + html.tag('img', + imgAttributes, + {src: thumbSrc ?? originalSrc})); if (slots.lazy) { return html.tags([ html.tag('noscript', nonlazyHTML), - prepare( - html.tag('img', - { - ...imgAttributes, - class: 'lazy', - 'data-original': thumbSrc ?? originalSrc, - }), + prepareHidden( + html.tag('img', {class: 'lazy'}, + imgAttributes, + {'data-original': thumbSrc ?? originalSrc}), true), ]); } return nonlazyHTML; - function prepare(content, hide = false) { + function prepareVisible(content) { + return prepare(content, false); + } + + function prepareHidden(content) { + return prepare(content, true); + } + + function prepare(content, hide) { let wrapped = content; wrapped = - html.tag('div', { - class: ['image-container', !originalSrc && 'placeholder-image'], - style: styleOnContainer, - }, [ + html.tag('div', {class: 'image-container'}, + {style: styleOnContainer}, + + !originalSrc && + {style: 'placeholder-image'}, + html.tag('div', {class: 'image-inner-area'}, - wrapped), - ]); + wrapped)); if (willReveal) { wrapped = @@ -277,38 +282,29 @@ export default { if (willSquare) { wrapped = - html.tag('div', - { - class: [ - 'square', - hide && !willLink && 'js-hide' - ], - }, + html.tag('div', {class: 'square'}, + hide && !willLink && + {class: 'js-hide'}, html.tag('div', {class: 'square-content'}, wrapped)); } if (willLink) { - wrapped = html.tag('a', - { - id: idOnLink, - - class: [ - 'box', - 'image-link', - hide && 'js-hide', - classOnLink, - ], - - style: styleOnLink, - - href: - (typeof slots.link === 'string' - ? slots.link - : originalSrc), - }, - wrapped); + wrapped = + html.tag('a', {class: ['box', 'image-link']}, + {id: idOnLink}, + {class: classOnLink}, + {style: styleOnLink}, + + hide && + {class: 'js-hide'}, + + (typeof slots.link === 'string' + ? {href: slots.link} + : {href: originalSrc}), + + wrapped); } return wrapped; diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js index 790afa4f..578ae039 100644 --- a/src/content/dependencies/linkContribution.js +++ b/src/content/dependencies/linkContribution.js @@ -51,57 +51,55 @@ export default { if (hasExternalIcons && slots.iconMode === 'inline') { parts.push('withExternalLinks'); options.links = - html.tag('span', - { - [html.noEdgeWhitespace]: true, - class: ['icons', 'icons-inline'], - }, + html.tag('span', {class: ['icons', 'icons-inline']}, + {[html.noEdgeWhitespace]: true}, + language.formatUnitList( relations.artistIcons .slice(0, 4) - .map(icon => icon.slot('context', 'artist')))); + .map(icon => + icon.slot({ + context: 'artist', + })))); } - let content = language.formatString(parts.join('.'), options); + let content = language.formatString(...parts, options); if (hasExternalIcons && slots.iconMode === 'tooltip') { content = [ content, - html.tag('span', - { - [html.noEdgeWhitespace]: true, - class: ['icons', 'icons-tooltip'], - inert: true, - }, - html.tag('span', - { - [html.noEdgeWhitespace]: true, - [html.joinChildren]: '', - class: 'icons-tooltip-content', - }, + html.tag('span', {class: ['icons', 'icons-tooltip']}, + {[html.noEdgeWhitespace]: true}, + {inert: true}, + + html.tag('span', {class: 'icons-tooltip-content'}, + {[html.noEdgeWhitespace]: true}, + {[html.joinChildren]: ''}, + relations.artistIcons - .map(icon => icon.slots({context: 'artist', withText: true})))), + .map(icon => + icon.slots({ + context: 'artist', + withText: true, + })))), ]; } if (hasContribution || hasExternalIcons) { content = - html.tag('span', { - [html.noEdgeWhitespace]: true, - [html.joinChildren]: '', - - class: [ - 'contribution', - - hasExternalIcons && - slots.iconMode === 'tooltip' && - 'has-tooltip', - - parts.length > 1 && - slots.preventWrapping && - 'nowrap', - ], - }, content); + html.tag('span', {class: 'contribution'}, + {[html.noEdgeWhitespace]: true}, + {[html.joinChildren]: ''}, + + hasExternalIcons && + slots.iconMode === 'tooltip' && + {class: 'has-tooltip'}, + + parts.length > 1 && + slots.preventWrapping && + {class: 'nowrap'}, + + content); } return content; diff --git a/src/content/dependencies/linkExternal.js b/src/content/dependencies/linkExternal.js index 70e1ccff..16990023 100644 --- a/src/content/dependencies/linkExternal.js +++ b/src/content/dependencies/linkExternal.js @@ -27,14 +27,12 @@ export default { generate: (data, slots, {html, language}) => html.tag('a', - { - href: data.url, - class: 'nowrap', - target: - (slots.tab === 'separate' - ? '_blank' - : null), - }, + {class: 'nowrap'}, + {href: data.url}, + + slots.tab === 'separate' && + {target: '_blank'}, + language.formatExternalLink(data.url, { style: slots.style, context: slots.context, diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js index 357c835c..3eb355a9 100644 --- a/src/content/dependencies/linkExternalAsIcon.js +++ b/src/content/dependencies/linkExternalAsIcon.js @@ -25,8 +25,12 @@ export default { const compactText = format('compact'); const iconId = format('icon-id'); - return html.tag('a', - {href: data.url, class: ['icon', slots.withText && 'has-text']}, + return html.tag('a', {class: 'icon'}, + {href: data.url}, + + slots.withText && + {class: 'has-text'}, + [ html.tag('svg', [ !slots.withText && diff --git a/src/content/dependencies/linkListing.js b/src/content/dependencies/linkListing.js index 2fc516bc..ac66919a 100644 --- a/src/content/dependencies/linkListing.js +++ b/src/content/dependencies/linkListing.js @@ -10,5 +10,6 @@ export default { generate: (data, relations, {language}) => relations.link - .slot('content', language.$(`listingPage.${data.stringsKey}.title`)), + .slot('content', + language.$('listingPage', data.stringsKey, 'title')), }; diff --git a/src/content/dependencies/listAllAdditionalFilesTemplate.js b/src/content/dependencies/listAllAdditionalFilesTemplate.js index 1b81e24b..627fdab4 100644 --- a/src/content/dependencies/listAllAdditionalFilesTemplate.js +++ b/src/content/dependencies/listAllAdditionalFilesTemplate.js @@ -173,10 +173,13 @@ export default { html.tag('dl', [ albumChunk.slots({ - title: language.$(`listingPage.${slots.stringsKey}.albumFiles`), + title: + language.$('listingPage', slots.stringsKey, 'albumFiles'), + additionalFileTitles: albumAdditionalFileTitles, additionalFileLinks: albumAdditionalFileLinks, additionalFileFiles: albumAdditionalFileFiles, + stringsKey: slots.stringsKey, }), diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index d42cce92..151c2c2e 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -369,10 +369,11 @@ export default { type: 'image', inline: true, data: - html.tag('img', { - src, width, height, - class: pixelate && 'pixelate', - }), + html.tag('img', + {src, width, height}, + + pixelate && + {class: 'pixelate'}), }; } |