« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content/dependencies
diff options
context:
space:
mode:
Diffstat (limited to 'src/content/dependencies')
-rw-r--r--src/content/dependencies/generateAlbumInfoPage.js27
-rw-r--r--src/content/dependencies/generatePageLayout.js181
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;
+      })));
+  },
+};