diff options
Diffstat (limited to 'src/content/dependencies')
| -rw-r--r-- | src/content/dependencies/generateAlbumInfoPage.js | 27 | ||||
| -rw-r--r-- | src/content/dependencies/generatePageLayout.js | 181 |
2 files changed, 196 insertions, 12 deletions
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([ + `<!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'), + }, + [ + // 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; + }))); + }, +}; |