diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | src/misc-templates.js | 234 | ||||
| -rw-r--r-- | src/page/album.js | 4 | ||||
| -rw-r--r-- | src/page/flash.js | 9 | ||||
| -rwxr-xr-x | src/upd8.js | 192 |
5 files changed, 260 insertions, 180 deletions
diff --git a/.gitignore b/.gitignore index 6745b9a3..447e8916 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules +.DS_Store # FOR NOW: We are using site2.css instead of site.css, # thanks to breaking changes - we can't have the release diff --git a/src/misc-templates.js b/src/misc-templates.js index 62f41c5f..7b4ef579 100644 --- a/src/misc-templates.js +++ b/src/misc-templates.js @@ -4,10 +4,6 @@ // These are made available right on a page spec's ({wikiData, language, ...}) // args object! -import fixWS from 'fix-whitespace'; - -import * as html from './util/html.js'; - import {Track, Album} from './data/things.js'; import {getColors} from './util/colors.js'; @@ -26,7 +22,10 @@ const MASTODON_DOMAINS = ['types.pl']; // "Additional Files" listing -export function generateAdditionalFilesShortcut(additionalFiles, {language}) { +function unbound_generateAdditionalFilesShortcut(additionalFiles, { + html, + language, +}) { if (!additionalFiles?.length) return ''; return language.$('releaseInfo.additionalFiles.shortcut', { @@ -39,10 +38,13 @@ export function generateAdditionalFilesShortcut(additionalFiles, {language}) { }); } -export function generateAdditionalFilesList( - additionalFiles, - {language, getFileSize, linkFile} -) { +function unbound_generateAdditionalFilesList(additionalFiles, { + html, + language, + + getFileSize, + linkFile, +}) { if (!additionalFiles?.length) return []; const fileCount = additionalFiles.flatMap((g) => g.files).length; @@ -86,10 +88,16 @@ export function generateAdditionalFilesList( // Artist strings -export function getArtistString( - artists, - {iconifyURL, link, language, showIcons = false, showContrib = false} -) { +function unbound_getArtistString(artists, { + html, + language, + link, + + iconifyURL, + + showIcons = false, + showContrib = false, +}) { return language.formatConjunctionList( artists.map(({who, what}) => { const {urls} = who; @@ -134,14 +142,17 @@ export function getArtistString( // Chronology links -export function generateChronologyLinks(currentThing, { +function unbound_generateChronologyLinks(currentThing, { + html, + language, + link, + + generateNavigationLinks, + dateKey = 'date', contribKey, getThings, - generateNavigationLinks, headingString, - link, - language, }) { const contributions = currentThing[contribKey]; if (!contributions) { @@ -208,7 +219,10 @@ export function generateChronologyLinks(currentThing, { // Content warning tags -export function getRevealStringFromWarnings(warnings, {language}) { +function unbound_getRevealStringFromWarnings(warnings, { + html, + language, +}) { return ( language.$('misc.contentWarnings', {warnings}) + html.tag('br') + @@ -217,31 +231,37 @@ export function getRevealStringFromWarnings(warnings, {language}) { ); } -export function getRevealStringFromTags(tags, {language}) { +function unbound_getRevealStringFromTags(tags, { + language, + + getRevealStringFromWarnings, +}) { return ( - tags && - tags.some((tag) => tag.isContentWarning) && + tags?.some(tag => tag.isContentWarning) && getRevealStringFromWarnings( language.formatUnitList( tags .filter(tag => tag.isContentWarning) - .map(tag => tag.name)), - {language}) + .map(tag => tag.name))) ); } // Cover art links -export function generateCoverLink({ +function unbound_generateCoverLink({ + html, img, - link, language, - to, - wikiData, - src, - path, + link, + + getRevealStringFromTags, + alt, + path, + src, tags = [], + to, + wikiData, }) { const {wikiInfo} = wikiData; @@ -278,7 +298,7 @@ export function generateCoverLink({ // CSS & color shenanigans -export function getThemeString(color, additionalVariables = []) { +function unbound_getThemeString(color, additionalVariables = []) { if (!color) return ''; const {primary, dim, bg} = getColors(color); @@ -299,7 +319,9 @@ export function getThemeString(color, additionalVariables = []) { ].join('\n'); } -export function getAlbumStylesheet(album, {to}) { +function unbound_getAlbumStylesheet(album, { + to, +}) { const hasWallpaper = album.wallpaperArtistContribs.length >= 1; const hasWallpaperStyle = !!album.wallpaperStyle; const hasBannerStyle = !!album.bannerStyle; @@ -316,11 +338,11 @@ export function getAlbumStylesheet(album, {to}) { ? [ `body::before {`, ` background-image: url("${wallpaperSource}");`, - ...html.fragment( - hasWallpaperStyle && - album.wallpaperStyle - .split('\n') - .map(line => ` ${line}`)), + ...(hasWallpaperStyle + ? album.wallpaperStyle + .split('\n') + .map(line => ` ${line}`) + : []), `}`, ] : []); @@ -346,9 +368,11 @@ export function getAlbumStylesheet(album, {to}) { // Divided track lists -export function generateTrackListDividedByGroups(tracks, { - getTrackItem, +function unbound_generateTrackListDividedByGroups(tracks, { + html, language, + + getTrackItem, wikiData, }) { const {divideTrackListsByGroups: groups} = wikiData.wikiInfo; @@ -405,7 +429,12 @@ export function generateTrackListDividedByGroups(tracks, { // Fancy lookin' links -export function fancifyURL(url, {language, album = false} = {}) { +function unbound_fancifyURL(url, { + html, + language, + + album = false, +} = {}) { let local = Symbol(); let domain; try { @@ -415,6 +444,7 @@ export function fancifyURL(url, {language, album = false} = {}) { // be absolute relative to the domain name in order to work.) domain = local; } + return html.tag('a', { href: url, @@ -455,8 +485,13 @@ export function fancifyURL(url, {language, album = false} = {}) { : domain); } -export function fancifyFlashURL(url, flash, {language}) { - const link = fancifyURL(url, {language}); +function unbound_fancifyFlashURL(url, flash, { + html, + language, + + fancifyURL, +}) { + const link = fancifyURL(url); return html.tag('span', {class: 'nowrap'}, url.includes('homestuck.com') @@ -473,7 +508,11 @@ export function fancifyFlashURL(url, flash, {language}) { : link); } -export function iconifyURL(url, {language, to}) { +function unbound_iconifyURL(url, { + html, + language, + to, +}) { const domain = new URL(url).hostname; const [id, msg] = ( domain.includes('bandcamp.com') @@ -511,10 +550,13 @@ export function iconifyURL(url, {language, to}) { // Grids -export function getGridHTML({ +function unbound_getGridHTML({ img, + html, language, + getRevealStringFromTags, + entries, srcFn, linkFn, @@ -527,25 +569,25 @@ export function getGridHTML({ .map(({large, item}, i) => linkFn(item, { class: ['grid-item', 'box', large && 'large-grid-item'], - text: fixWS` - ${img({ - src: srcFn(item), - alt: altFn(item), - thumb: 'small', - lazy: typeof lazy === 'number' ? i >= lazy : lazy, - square: true, - reveal: getRevealStringFromTags(item.artTags, {language}), - noSrcText: noSrcTextFn(item), - })} - <span>${item.name}</span> - ${detailsFn && `<span>${detailsFn(item)}</span>`} - `, - }) - ) + text: html.fragment([ + img({ + src: srcFn(item), + alt: altFn(item), + thumb: 'small', + lazy: typeof lazy === 'number' ? i >= lazy : lazy, + square: true, + reveal: getRevealStringFromTags(item.artTags, {language}), + noSrcText: noSrcTextFn(item), + }), + html.tag('span', item.name), + detailsFn && + html.tag('span', detailsFn(item)), + ]), + })) .join('\n'); } -export function getAlbumGridHTML({ +function unbound_getAlbumGridHTML({ getAlbumCover, getGridHTML, link, @@ -571,7 +613,13 @@ export function getAlbumGridHTML({ }); } -export function getFlashGridHTML({getFlashCover, getGridHTML, link, ...props}) { +function unbound_getFlashGridHTML({ + link, + + getFlashCover, + getGridHTML, + ...props +}) { return getGridHTML({ srcFn: getFlashCover, linkFn: link.flash, @@ -581,11 +629,13 @@ export function getFlashGridHTML({getFlashCover, getGridHTML, link, ...props}) { // Nav-bar links -export function generateInfoGalleryLinks( - currentThing, - isGallery, - {link, language, linkKeyGallery, linkKeyInfo} -) { +function unbound_generateInfoGalleryLinks(currentThing, isGallery, { + link, + language, + + linkKeyGallery, + linkKeyInfo, +}) { return [ link[linkKeyInfo](currentThing, { class: isGallery ? '' : 'current', @@ -606,12 +656,13 @@ export function generateInfoGalleryLinks( // By default, generated links include ID attributes which enable client-side // keyboard shortcuts. Provide isMain: false to disable this (if the generated // links aren't the for the page's primary navigation). -export function generateNavigationLinks(current, { +function unbound_generateNavigationLinks(current, { + language, + link, + additionalLinks = [], data, isMain = true, - language, - link, linkKey = 'anything', }) { let previousLink, nextLink; @@ -659,10 +710,15 @@ export function generateNavigationLinks(current, { // Footer stuff -export function getFooterLocalizationLinks( - pathname, - {defaultLanguage, languages, paths, language, to} -) { +function unbound_getFooterLocalizationLinks(pathname, { + html, + language, + to, + paths, + + defaultLanguage, + languages, +}) { const {toPath} = paths; const keySuffix = toPath[0].replace(/^localized\./, '.'); const toArgs = toPath.slice(1); @@ -697,3 +753,37 @@ export function getFooterLocalizationLinks( language.$('misc.uiLanguage', {languages: links.join('\n')}) ); } + +// Exports + +export { + unbound_generateAdditionalFilesList as generateAdditionalFilesList, + unbound_generateAdditionalFilesShortcut as generateAdditionalFilesShortcut, + + unbound_getArtistString as getArtistString, + + unbound_generateChronologyLinks as generateChronologyLinks, + + unbound_getRevealStringFromWarnings as getRevealStringFromWarnings, + unbound_getRevealStringFromTags as getRevealStringFromTags, + + unbound_generateCoverLink as generateCoverLink, + + unbound_getThemeString as getThemeString, + unbound_getAlbumStylesheet as getAlbumStylesheet, + + unbound_generateTrackListDividedByGroups as generateTrackListDividedByGroups, + + unbound_fancifyURL as fancifyURL, + unbound_fancifyFlashURL as fancifyFlashURL, + unbound_iconifyURL as iconifyURL, + + unbound_getGridHTML as getGridHTML, + unbound_getAlbumGridHTML as getAlbumGridHTML, + unbound_getFlashGridHTML as getFlashGridHTML, + + unbound_generateInfoGalleryLinks as generateInfoGalleryLinks, + unbound_generateNavigationLinks as generateNavigationLinks, + + unbound_getFooterLocalizationLinks as getFooterLocalizationLinks, +} \ No newline at end of file diff --git a/src/page/album.js b/src/page/album.js index 1cceead9..a92d9a06 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -219,9 +219,7 @@ export function write(album, {wikiData}) { }, [ hasAdditionalFiles && - generateAdditionalFilesShortcut(album.additionalFiles, { - language, - }), + generateAdditionalFilesShortcut(album.additionalFiles), hasCommentaryEntries && language.$('releaseInfo.viewCommentary', { diff --git a/src/page/flash.js b/src/page/flash.js index c123c1be..6def3050 100644 --- a/src/page/flash.js +++ b/src/page/flash.js @@ -72,13 +72,10 @@ export function write(flash, {wikiData}) { html.tag('li', language.$('trackList.item.withArtists', { track: link.track(track), - by: `<span class="by">${ + by: html.tag('span', {class: 'by'}, language.$('trackList.item.withArtists.by', { - artists: getArtistString( - track.artistContribs - ), - }) - }</span>`, + artists: getArtistString(track.artistContribs), + })), })))), ] : [], diff --git a/src/upd8.js b/src/upd8.js index 86b2f526..6cccabfa 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -976,9 +976,10 @@ writePage.html = ( getFooterLocalizationLinks(paths.pathname, { defaultLanguage, + html, + language, languages, paths, - language, to, }), ]); @@ -1150,53 +1151,41 @@ writePage.html = ( footerHTML, ].filter(Boolean).join('\n'); - const infoCardHTML = fixWS` - <div id="info-card-container"> - <div class="info-card-decor"> - <div class="info-card"> - <div class="info-card-art-container no-reveal"> - ${img({ - class: 'info-card-art', - src: '', - link: true, - square: true, - })} - </div> - <div class="info-card-art-container reveal"> - ${img({ - class: 'info-card-art', - src: '', - link: true, - square: true, - reveal: getRevealStringFromWarnings( - '<span class="info-card-art-warnings"></span>', - {language} - ), - })} - </div> - <h1 class="info-card-name"><a></a></h1> - <p class="info-card-album">${language.$( - 'releaseInfo.from', - { - album: '<a></a>', - } - )}</p> - <p class="info-card-artists">${language.$( - 'releaseInfo.by', - { - artists: '<span></span>', - } - )}</p> - <p class="info-card-cover-artists">${language.$( - 'releaseInfo.coverArtBy', - { - artists: '<span></span>', - } - )}</p> - </div> - </div> - </div> - `; + const infoCardHTML = html.tag('div', {id: 'info-card-container'}, + html.tag('div', {id: 'info-card-decor'}, + html.tag('div', {id: 'info-card'}, [ + html.tag('div', {class: ['info-card-art-container', 'no-reveal']}, + img({ + class: 'info-card-art', + src: '', + link: true, + square: true, + })), + html.tag('div', {class: ['info-card-art-container', 'reveal']}, + img({ + class: 'info-card-art', + src: '', + link: true, + square: true, + reveal: getRevealStringFromWarnings( + html.tag('span', {class: 'info-card-art-warnings'}), + {html, language}), + })), + html.tag('h1', {class: 'info-card-name'}, + html.tag('a')), + html.tag('p', {class: 'info-card-album'}, + language.$('releaseInfo.from', { + album: html.tag('a'), + })), + html.tag('p', {class: 'info-card-artists'}, + language.$('releaseInfo.by', { + artists: html.tag('span'), + })), + html.tag('p', {class: 'info-card-cover-artists'}, + language.$('releaseInfo.coverArtBy', { + artists: html.tag('span'), + })), + ]))); const socialEmbedHTML = [ socialEmbed.title && @@ -2367,27 +2356,45 @@ async function main() { }); bound.iconifyURL = bindOpts(iconifyURL, { + html, language, to, }); bound.fancifyURL = bindOpts(fancifyURL, { + html, language, }); bound.fancifyFlashURL = bindOpts(fancifyFlashURL, { [bindOpts.bindIndex]: 2, + html, + language, + + fancifyURL: bound.fancifyURL, + }); + + bound.getRevealStringFromWarnings = bindOpts(getRevealStringFromWarnings, { + html, language, }); + bound.getRevealStringFromTags = bindOpts(getRevealStringFromTags, { + language, + + getRevealStringFromWarnings: bound.getRevealStringFromWarnings, + }); + bound.getLinkThemeString = getLinkThemeString; bound.getThemeString = getThemeString; bound.getArtistString = bindOpts(getArtistString, { - iconifyURL: bound.iconifyURL, + html, link: bound.link, language, + + iconifyURL: bound.iconifyURL, }); bound.getAlbumCover = bindOpts(getAlbumCover, { @@ -2406,93 +2413,80 @@ async function main() { to, }); - bound.generateAdditionalFilesShortcut = bindOpts( - generateAdditionalFilesShortcut, - { - language, - } - ); + bound.generateAdditionalFilesShortcut = bindOpts(generateAdditionalFilesShortcut, { + html, + language, + }); - bound.generateAdditionalFilesList = bindOpts( - generateAdditionalFilesList, - { - language, - } - ); + bound.generateAdditionalFilesList = bindOpts(generateAdditionalFilesList, { + html, + language, + }); - bound.generateNavigationLinks = bindOpts( - generateNavigationLinks, - { - link: bound.link, - language, - } - ); + bound.generateNavigationLinks = bindOpts(generateNavigationLinks, { + link: bound.link, + language, + }); bound.generateChronologyLinks = bindOpts(generateChronologyLinks, { - generateNavigationLinks: bound.generateNavigationLinks, - link: bound.link, + html, language, + link: bound.link, wikiData, + + generateNavigationLinks: bound.generateNavigationLinks, }); bound.generateCoverLink = bindOpts(generateCoverLink, { [bindOpts.bindIndex]: 0, + html, img, link: bound.link, language, to, wikiData, + + getRevealStringFromTags: bound.getRevealStringFromTags, }); - bound.generateInfoGalleryLinks = bindOpts( - generateInfoGalleryLinks, - { - [bindOpts.bindIndex]: 2, - link: bound.link, - language, - } - ); + bound.generateInfoGalleryLinks = bindOpts(generateInfoGalleryLinks, { + [bindOpts.bindIndex]: 2, + link: bound.link, + language, + }); - bound.generateTrackListDividedByGroups = bindOpts( - generateTrackListDividedByGroups, - { - language, - wikiData, - } - ); + bound.generateTrackListDividedByGroups = bindOpts(generateTrackListDividedByGroups, { + html, + language, + wikiData, + }); bound.getGridHTML = bindOpts(getGridHTML, { [bindOpts.bindIndex]: 0, img, + html, language, + + getRevealStringFromTags: bound.getRevealStringFromTags, }); bound.getAlbumGridHTML = bindOpts(getAlbumGridHTML, { [bindOpts.bindIndex]: 0, - getAlbumCover: bound.getAlbumCover, - getGridHTML: bound.getGridHTML, link: bound.link, language, + + getAlbumCover: bound.getAlbumCover, + getGridHTML: bound.getGridHTML, }); bound.getFlashGridHTML = bindOpts(getFlashGridHTML, { [bindOpts.bindIndex]: 0, - getFlashCover: bound.getFlashCover, - getGridHTML: bound.getGridHTML, link: bound.link, - }); - bound.getRevealStringFromTags = bindOpts(getRevealStringFromTags, { - language, + getFlashCover: bound.getFlashCover, + getGridHTML: bound.getGridHTML, }); - bound.getRevealStringFromWarnings = bindOpts( - getRevealStringFromWarnings, - { - language, - } - ); - bound.getAlbumStylesheet = bindOpts(getAlbumStylesheet, { to, }); |