content: generatePageLayout (mostly stub)

5 files changed, 203 insertions, 157 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;
+      })));
+  },
+};
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 `<!DOCTYPE html>\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 `<!DOCTYPE html>\n`
 }
 
 export function generateOEmbedJSON(pageInfo, {language, wikiData}) {