diff options
Diffstat (limited to 'src/content/dependencies/generatePageLayout.js')
| -rw-r--r-- | src/content/dependencies/generatePageLayout.js | 136 |
1 files changed, 86 insertions, 50 deletions
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index cbfc905..e138a98 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -5,12 +5,13 @@ export default { contentDependencies: [ 'generateColorStyleRules', 'generateFooterLocalizationLinks', + 'generatePageSidebar', + 'generateSearchSidebarBox', 'generateStickyHeadingContainer', 'transformContent', ], extraDependencies: [ - 'cachebust', 'getColors', 'html', 'language', @@ -21,6 +22,7 @@ export default { sprawl({wikiInfo}) { return { + enableSearch: wikiInfo.enableSearch, footerContent: wikiInfo.footerContent, wikiColor: wikiInfo.color, wikiName: wikiInfo.nameShort, @@ -43,6 +45,14 @@ export default { relations.stickyHeadingContainer = relation('generateStickyHeadingContainer'); + relations.sidebar = + relation('generatePageSidebar'); + + if (sprawl.enableSearch) { + relations.searchBox = + relation('generateSearchSidebarBox'); + } + if (sprawl.footerContent) { relations.defaultFooterContent = relation('transformContent', sprawl.footerContent); @@ -65,6 +75,11 @@ export default { default: true, }, + showSearch: { + type: 'boolean', + default: true, + }, + additionalNames: { type: 'html', mutable: false, @@ -209,7 +224,6 @@ export default { }, generate(data, relations, slots, { - cachebust, getColors, html, language, @@ -348,9 +362,6 @@ export default { showAsCurrent && {class: 'current'}, - i > 0 && - {class: 'has-divider'}, - [ html.tag('span', {class: 'nav-link-content'}, // Use inline-block styling on the content span, @@ -377,29 +388,54 @@ export default { slots.navContent), ]); - const getSidebar = (side, id) => - (html.isBlank(slots[side]) - ? html.blank() - : slots[side].slots({ - attributes: - slots[side] - .getSlotValue('attributes') - .with({id}), - })); + const getSidebar = (side, id, needed) => { + const sidebar = + (html.isBlank(slots[side]) + ? (needed + ? relations.sidebar.clone() + : html.blank()) + : slots[side]); + + if (html.isBlank(sidebar) && !needed) { + return sidebar; + } + + return sidebar.slots({ + attributes: + sidebar + .getSlotValue('attributes') + .with({id}), + }); + } + + const willShowSearch = + slots.showSearch && relations.searchBox; + + let showingSidebarLeft; + let showingSidebarRight; + + const leftSidebar = getSidebar('leftSidebar', 'sidebar-left', willShowSearch); + const rightSidebar = getSidebar('rightSidebar', 'sidebar-right', false); - const leftSidebar = getSidebar('leftSidebar', 'sidebar-left'); - const rightSidebar = getSidebar('rightSidebar', 'sidebar-right'); + if (willShowSearch) { + if (html.isBlank(leftSidebar)) { + leftSidebar.setSlot('initiallyHidden', true); + showingSidebarLeft = false; + } + + leftSidebar.setSlot( + 'boxes', + html.tags([ + relations.searchBox, + leftSidebar.getSlotValue('boxes'), + ])); + } const hasSidebarLeft = !html.isBlank(html.resolve(leftSidebar)); const hasSidebarRight = !html.isBlank(html.resolve(rightSidebar)); - const collapseSidebars = - (hasSidebarLeft - ? leftSidebar.getSlotValue('collapse') - : true) && - (hasSidebarRight - ? rightSidebar.getSlotValue('collapse') - : true); + showingSidebarLeft ??= hasSidebarLeft; + showingSidebarRight ??= hasSidebarRight; const processSkippers = skipperList => skipperList @@ -407,8 +443,11 @@ export default { (condition === undefined ? hasID(id) : condition)) + .map(({id, string}) => html.tag('span', {class: 'skipper'}, + {'data-for': id}, + html.tag('a', {href: `#${id}`}, language.$('misc.skippers', string)))); @@ -512,15 +551,11 @@ export default { slots.secondaryNav, - html.tag('div', {class: 'layout-columns'}, - !collapseSidebars && - {class: 'vertical-when-thin'}, - - [ - leftSidebar, - mainHTML, - rightSidebar, - ]), + html.tag('div', {class: 'layout-columns'}, [ + leftSidebar, + mainHTML, + rightSidebar, + ]), slots.bannerPosition === 'bottom' && slots.banner, @@ -543,6 +578,8 @@ export default { {'data-rebase-localized': to('localized.root')}, {'data-rebase-shared': to('shared.root')}, {'data-rebase-media': to('media.root')}, + {'data-rebase-thumb': to('thumb.root')}, + {'data-rebase-lib': to('staticLib.root')}, {'data-rebase-data': to('data.root')}, [ @@ -613,7 +650,7 @@ export default { html.tag('link', { rel: 'stylesheet', - href: to('shared.staticFile', 'site6.css', cachebust), + href: to('staticCSS.path', 'site.css'), }), html.tag('style', [ @@ -623,25 +660,29 @@ export default { ]), html.tag('script', { - src: to('shared.staticFile', 'lazy-loading.js', cachebust), + src: to('staticLib.path', 'chroma-js/chroma.min.js'), + }), + + html.tag('script', { + blocking: 'render', + src: to('staticJS.path', 'lazy-loading.js'), + }), + + html.tag('script', { + blocking: 'render', + type: 'module', + src: to('staticJS.path', 'client.js'), }), ]), html.tag('body', [ html.tag('div', {id: 'page-container'}, - (hasSidebarLeft || hasSidebarRight - ? {class: 'has-one-sidebar'} - : {class: 'has-zero-sidebars'}), - - hasSidebarLeft && hasSidebarRight && - {class: 'has-two-sidebars'}, + showingSidebarLeft && + {class: 'showing-sidebar-left'}, - hasSidebarLeft && - {class: 'has-sidebar-left'}, - - hasSidebarRight && - {class: 'has-sidebar-right'}, + showingSidebarRight && + {class: 'showing-sidebar-right'}, [ skippersHTML, @@ -650,11 +691,6 @@ export default { // infoCardHTML, imageOverlayHTML, - - html.tag('script', { - type: 'module', - src: to('shared.staticFile', 'client3.js', cachebust), - }), ]), ]) ]).toString(); |