diff options
Diffstat (limited to 'src/upd8.js')
-rwxr-xr-x | src/upd8.js | 81 |
1 files changed, 69 insertions, 12 deletions
diff --git a/src/upd8.js b/src/upd8.js index 8e3e0920..6d63b1b1 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -37,6 +37,8 @@ import {fileURLToPath} from 'url'; // It stands for "HTML Entities", apparently. Cursed. import he from 'he'; +import chroma from 'chroma-js'; + import { copyFile, mkdir, @@ -56,7 +58,7 @@ import * as pageSpecs from './page/index.js'; import find, {bindFind} from './util/find.js'; import * as html from './util/html.js'; -import unbound_link, {getLinkThemeString} from './util/link.js'; +import {getColors} from './util/colors.js'; import {findFiles} from './util/io.js'; import CacheableObject from './data/cacheable-object.js'; @@ -92,10 +94,14 @@ import { getGridHTML, getRevealStringFromTags, getRevealStringFromWarnings, - getThemeString, + getThemeString as unbound_getThemeString, iconifyURL, } from './misc-templates.js'; +import unbound_link, { + getLinkThemeString as unbound_getLinkThemeString, +} from './util/link.js'; + import { color, decorateTime, @@ -866,6 +872,7 @@ writePage.to = writePage.html = (pageInfo, { defaultLanguage, + getThemeString, language, languages, localizedPaths, @@ -884,6 +891,7 @@ writePage.html = (pageInfo, { stylesheet = '', showWikiNameInTitle = true, + themeColor = '', // missing properties are auto-filled, see below! body = {}, @@ -934,6 +942,10 @@ writePage.html = (pageInfo, { ? transformMultiline(wikiInfo.footerContent) : ''; + const colors = themeColor + ? getColors(themeColor, {chroma}) + : null; + const canonical = wikiInfo.canonicalBase ? wikiInfo.canonicalBase + (paths.pathname === '/' ? '' : paths.pathname) : ''; @@ -988,6 +1000,11 @@ writePage.html = (pageInfo, { classes, collapse = true, wide = false, + + // 'last' - last or only sidebar box is sticky + // 'column' - entire column, incl. multiple boxes from top, is sticky + // 'none' - sidebar not sticky at all, stays at top of page + stickyMode = 'last', }) => content ? html.tag('div', @@ -998,6 +1015,7 @@ writePage.html = (pageInfo, { 'sidebar', wide && 'wide', !collapse && 'no-hide', + stickyMode !== 'none' && 'sticky-' + stickyMode, ...classes, ], }, @@ -1011,10 +1029,24 @@ writePage.html = (pageInfo, { 'sidebar-multiple', wide && 'wide', !collapse && 'no-hide', + stickyMode !== 'none' && 'sticky-' + stickyMode, ], }, - multiple.map((content) => - html.tag('div', {class: ['sidebar', ...classes]}, content))) + multiple + .map((infoOrContent) => + (typeof infoOrContent === 'object' && !Array.isArray(infoOrContent)) + ? infoOrContent + : {content: infoOrContent}) + .filter(({content}) => content) + .map(({ + content, + classes: classes2 = [], + }) => + html.tag('div', + { + class: ['sidebar', ...classes, ...classes2], + }, + html.fragment(content)))) : ''; const sidebarLeftHTML = generateSidebarHTML('sidebar-left', sidebarLeft); @@ -1201,8 +1233,21 @@ writePage.html = (pageInfo, { socialEmbed.image && html.tag('meta', {property: 'og:image', content: socialEmbed.image}), - socialEmbed.color && - html.tag('meta', {name: 'theme-color', content: socialEmbed.color}), + ...html.fragment( + colors && [ + // Safari only respects the first media-matching meta tag here, + // so position the dark-specific entry first + html.tag('meta', { + name: 'theme-color', + content: colors.dark, + media: '(prefers-color-scheme: dark)' + }), + + html.tag('meta', { + name: 'theme-color', + content: colors.primary, + }), + ]), oEmbedJSONHref && html.tag('link', { @@ -2304,9 +2349,24 @@ async function main() { bound.html = html; + bound.getColors = bindOpts(getColors, { + chroma, + }); + + bound.getLinkThemeString = bindOpts(unbound_getLinkThemeString, { + getColors: bound.getColors, + }); + + bound.getThemeString = bindOpts(unbound_getThemeString, { + getColors: bound.getColors, + }); + bound.link = withEntries(unbound_link, (entries) => - entries.map(([key, fn]) => [key, bindOpts(fn, {to})]) - ); + entries + .map(([key, fn]) => [key, bindOpts(fn, { + getLinkThemeString: bound.getLinkThemeString, + to, + })])); bound.parseAttributes = bindOpts(parseAttributes, { to, @@ -2363,10 +2423,6 @@ async function main() { getRevealStringFromWarnings: bound.getRevealStringFromWarnings, }); - bound.getLinkThemeString = getLinkThemeString; - - bound.getThemeString = getThemeString; - bound.getArtistString = bindOpts(getArtistString, { html, link: bound.link, @@ -2497,6 +2553,7 @@ async function main() { const pageHTML = writePage.html(pageInfo, { defaultLanguage: finalDefaultLanguage, + getThemeString: bound.getThemeString, language, languages, localizedPaths, |