From 0cbfa8c1b70080c7ec4eb352902cf76f8ef30fcf Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 6 Apr 2023 12:34:39 -0300 Subject: content: generatePageLayout (mostly stub) --- src/content/dependencies/generateAlbumInfoPage.js | 27 ++-- src/content/dependencies/generatePageLayout.js | 181 ++++++++++++++++++++++ src/write/bind-utilities.js | 2 + src/write/build-modes/live-dev-server.js | 5 +- src/write/page-template.js | 145 +---------------- 5 files changed, 203 insertions(+), 157 deletions(-) create mode 100644 src/content/dependencies/generatePageLayout.js diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js index 59c314a1..dcd8589c 100644 --- a/src/content/dependencies/generateAlbumInfoPage.js +++ b/src/content/dependencies/generateAlbumInfoPage.js @@ -4,6 +4,7 @@ export default { 'generateAlbumSocialEmbed', 'generateAlbumStyleRules', 'generateColorStyleRules', + 'generatePageLayout', ], extraDependencies: [ @@ -13,6 +14,8 @@ export default { relations(relation, album) { const relations = {}; + relations.layout = relation('generatePageLayout'); + relations.content = relation('generateAlbumInfoPageContent', album); relations.socialEmbed = relation('generateAlbumSocialEmbed', album); relations.albumStyleRules = relation('generateAlbumStyleRules', album); @@ -33,21 +36,21 @@ export default { generate(data, relations, { language, }) { - const page = {}; - - Object.assign(page, relations.content); - - page.title = language.$('albumPage.title', {album: data.name}); + // page.title = language.$('albumPage.title', {album: data.name}); - page.themeColor = data.color; + // page.themeColor = data.color; - page.styleRules = [ - relations.albumStyleRules, - relations.colorStyleRules, - ]; + // page.styleRules = [ + // relations.albumStyleRules, + // relations.colorStyleRules, + // ]; - page.socialEmbed = relations.socialEmbed; + // page.socialEmbed = relations.socialEmbed; - return page; + return relations.layout + .slot('title', language.$('albumPage.title', {album: data.name})) + .slot('cover', relations.content.cover) + .slot('mainContent', relations.content.main.content) + .slot('socialEmbed', relations.socialEmbed); }, }; diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js new file mode 100644 index 00000000..b27d487b --- /dev/null +++ b/src/content/dependencies/generatePageLayout.js @@ -0,0 +1,181 @@ +import {empty} from '../../util/sugar.js'; + +export default { + extraDependencies: [ + 'html', + 'language', + 'to', + ], + + generate({ + cachebust, + html, + language, + to, + }) { + return html.template(slot => + slot('title', ([...title]) => + slot('headingMode', ([headingMode = 'static']) => { + let titleHTML = null; + + if (!empty(title)) { + if (headingMode === 'sticky') { + /* + generateStickyHeadingContainer({ + coverSrc: cover.src, + coverAlt: cover.alt, + coverArtTags: cover.artTags, + title, + }) + */ + } else if (headingMode === 'static') { + titleHTML = html.tag('h1', title); + } + } + + const mainHTML = + html.tag('main', { + id: 'content', + class: slot('mainClass'), + }, [ + titleHTML, + + slot('cover'), + + html.tag('div', + { + [html.onlyIfContent]: true, + class: 'main-content-container', + }, + slot('mainContent')), + ]); + + const layoutHTML = [ + // navHTML, + // banner.position === 'top' && bannerHTML, + // secondaryNavHTML, + html.tag('div', + { + class: [ + 'layout-columns', + // !collapseSidebars && 'vertical-when-thin', + // (sidebarLeftHTML || sidebarRightHTML) && 'has-one-sidebar', + // (sidebarLeftHTML && sidebarRightHTML) && 'has-two-sidebars', + // !(sidebarLeftHTML || sidebarRightHTML) && 'has-zero-sidebars', + // sidebarLeftHTML && 'has-sidebar-left', + // sidebarRightHTML && 'has-sidebar-right', + ], + }, + [ + // sidebarLeftHTML, + mainHTML, + // sidebarRightHTML, + ]), + // banner.position === 'bottom' && bannerHTML, + // footerHTML, + ].filter(Boolean).join('\n'); + + const documentHTML = html.tags([ + ``, + 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'), + }, + [ + // developersComment, + + html.tag('head', [ + /* + html.tag('title', + showWikiNameInTitle + ? language.formatString('misc.pageTitle.withWikiName', { + title, + wikiName: wikiInfo.nameShort, + }) + : language.formatString('misc.pageTitle', {title})), + */ + + html.tag('meta', {charset: 'utf-8'}), + html.tag('meta', { + name: 'viewport', + content: 'width=device-width, initial-scale=1', + }), + + /* + ...( + Object.entries(meta) + .filter(([key, value]) => value) + .map(([key, value]) => html.tag('meta', {[key]: value}))), + + canonical && + html.tag('link', { + rel: 'canonical', + href: canonical, + }), + + ...( + localizedCanonical + .map(({lang, href}) => html.tag('link', { + rel: 'alternate', + hreflang: lang, + href, + }))), + + */ + + // slot('socialEmbed'), + + html.tag('link', { + rel: 'stylesheet', + href: to('shared.staticFile', `site3.css?${cachebust}`), + }), + + /* + html.tag('style', + {[html.onlyIfContent]: true}, + [ + theme, + stylesheet, + ]), + */ + + html.tag('script', { + src: to('shared.staticFile', `lazy-loading.js?${cachebust}`), + }), + ]), + + html.tag('body', + // {style: body.style || ''}, + [ + html.tag('div', {id: 'page-container'}, [ + // mainHTML && skippersHTML, + layoutHTML, + ]), + + // infoCardHTML, + // imageOverlayHTML, + + html.tag('script', { + type: 'module', + src: to('shared.staticFile', `client.js?${cachebust}`), + }), + ]), + ]) + ]); + + return documentHTML; + }))); + }, +}; diff --git a/src/write/bind-utilities.js b/src/write/bind-utilities.js index 99df1e9c..50596a39 100644 --- a/src/write/bind-utilities.js +++ b/src/write/bind-utilities.js @@ -20,6 +20,7 @@ import {thumb} from '../util/urls.js'; export function bindUtilities({ absoluteTo, + cachebust, defaultLanguage, getSizeOfAdditionalFile, getSizeOfImageFile, @@ -36,6 +37,7 @@ export function bindUtilities({ Object.assign(bound, { absoluteTo, + cachebust, defaultLanguage, getSizeOfAdditionalFile, getSizeOfImageFile, diff --git a/src/write/build-modes/live-dev-server.js b/src/write/build-modes/live-dev-server.js index 206a2403..93980929 100644 --- a/src/write/build-modes/live-dev-server.js +++ b/src/write/build-modes/live-dev-server.js @@ -81,6 +81,8 @@ export async function go({ const contentDependenciesWatcher = await watchContentDependencies(); const {contentDependencies: allContentDependencies} = contentDependenciesWatcher; + + contentDependenciesWatcher.on('error', () => {}); await new Promise(resolve => contentDependenciesWatcher.once('ready', resolve)); let targetSpecPairs = getPageSpecsWithTargets({wikiData}); @@ -333,6 +335,7 @@ export async function go({ const bound = bindUtilities({ absoluteTo, + cachebust, defaultLanguage, getSizeOfAdditionalFile, getSizeOfImageFile, @@ -440,7 +443,7 @@ export async function go({ // END PASTE - const pageHTML = topLevelResult.main.content.toString(); + const pageHTML = topLevelResult.toString(); /* const pageHTML = generateDocumentHTML(pageInfo, { diff --git a/src/write/page-template.js b/src/write/page-template.js index 72300ba2..1c448fc7 100644 --- a/src/write/page-template.js +++ b/src/write/page-template.js @@ -152,40 +152,7 @@ export function generateDocumentHTML(pageInfo, { const collapseSidebars = sidebarLeft.collapse !== false && sidebarRight.collapse !== false; - const mainHTML = - html.tag('main', { - id: 'content', - class: main.classes, - }, [ - ...html.fragment( - !title ? - null - : main.headingMode === 'sticky' ? - generateStickyHeadingContainer({ - coverSrc: cover.src, - coverAlt: cover.alt, - coverArtTags: cover.artTags, - title, - }) - : main.headingMode === 'static' ? - html.tag('h1', title) - : null), - - ...html.fragment( - cover.src && - generateCoverLink({ - src: cover.src, - alt: cover.alt, - tags: cover.artTags, - })), - html.tag('div', - { - [html.onlyIfContent]: true, - class: 'main-content-container', - }, - main.content), - ]); const footerHTML = html.tag('footer', @@ -377,31 +344,6 @@ export function generateDocumentHTML(pageInfo, { height: banner.dimensions[1] || 200, })); - const layoutHTML = [ - navHTML, - banner.position === 'top' && bannerHTML, - secondaryNavHTML, - html.tag('div', - { - class: [ - 'layout-columns', - !collapseSidebars && 'vertical-when-thin', - (sidebarLeftHTML || sidebarRightHTML) && 'has-one-sidebar', - (sidebarLeftHTML && sidebarRightHTML) && 'has-two-sidebars', - !(sidebarLeftHTML || sidebarRightHTML) && 'has-zero-sidebars', - sidebarLeftHTML && 'has-sidebar-left', - sidebarRightHTML && 'has-sidebar-right', - ], - }, - [ - sidebarLeftHTML, - mainHTML, - sidebarRightHTML, - ]), - banner.position === 'bottom' && bannerHTML, - footerHTML, - ].filter(Boolean).join('\n'); - const processSkippers = skipperList => skipperList .filter(Boolean) @@ -611,92 +553,7 @@ export function generateDocumentHTML(pageInfo, { }), ].filter(Boolean).join('\n'); - return `\n` + 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'), - }, - [ - developersComment, - - html.tag('head', [ - html.tag('title', - showWikiNameInTitle - ? language.formatString('misc.pageTitle.withWikiName', { - title, - wikiName: wikiInfo.nameShort, - }) - : language.formatString('misc.pageTitle', {title})), - - html.tag('meta', {charset: 'utf-8'}), - html.tag('meta', { - name: 'viewport', - content: 'width=device-width, initial-scale=1', - }), - - ...( - Object.entries(meta) - .filter(([key, value]) => value) - .map(([key, value]) => html.tag('meta', {[key]: value}))), - - canonical && - html.tag('link', { - rel: 'canonical', - href: canonical, - }), - - ...( - localizedCanonical - .map(({lang, href}) => html.tag('link', { - rel: 'alternate', - hreflang: lang, - href, - }))), - - socialEmbedHTML, - - html.tag('link', { - rel: 'stylesheet', - href: to('shared.staticFile', `site3.css?${cachebust}`), - }), - - html.tag('style', - {[html.onlyIfContent]: true}, - [ - theme, - stylesheet, - ]), - - html.tag('script', { - src: to('shared.staticFile', `lazy-loading.js?${cachebust}`), - }), - ]), - - html.tag('body', - {style: body.style || ''}, - [ - html.tag('div', {id: 'page-container'}, [ - mainHTML && - skippersHTML, - layoutHTML, - ]), - - infoCardHTML, - imageOverlayHTML, - - html.tag('script', { - type: 'module', - src: to('shared.staticFile', `client.js?${cachebust}`), - }), - ]), - ]); + return `\n` } export function generateOEmbedJSON(pageInfo, {language, wikiData}) { -- cgit 1.3.0-6-gf8a5