Template boiler plate code

hlxsites · Oct 17, 2023 · 0ededf2 · 0ededf2
1 parent 5cce32c
commit 0ededf2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -11,6 +11,8 @@ import {
   waitForLCP,
   loadBlocks,
   loadCSS,
+  toClassName,
+  getMetadata,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -42,6 +44,32 @@ async function loadFonts() {
   }
 }
 
+const TEMPLATE_LIST = [
+  'red',
+  'green',
+];
+
+/**
+ * Run template specific decoration code.
+ * @param {Element} main The container element
+ */
+async function decorateTemplates(main) {
+  try {
+    const template = toClassName(getMetadata('template'));
+    const templates = TEMPLATE_LIST;
+    if (templates.includes(template)) {
+      const mod = await import(`../templates/${template}/${template}.js`);
+      loadCSS(`${window.hlx.codeBasePath}/templates/${template}/${template}.css`);
+      if (mod.default) {
+        await mod.default(main);
+      }
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Auto Blocking failed', error);
+  }
+}
+
 /**
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
@@ -79,6 +107,7 @@ async function loadEager(doc) {
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);
+    await decorateTemplates(main);
     document.body.classList.add('appear');
     await waitForLCP(LCP_BLOCKS);
   }

diff --git a/templates/green/green.css b/templates/green/green.css
@@ -0,0 +1 @@
+/* green template css */
diff --git a/templates/green/green.js b/templates/green/green.js
@@ -0,0 +1 @@
+// green template
diff --git a/templates/red/red.css b/templates/red/red.css
@@ -0,0 +1 @@
+/* red template css */
diff --git a/templates/red/red.js b/templates/red/red.js
@@ -0,0 +1 @@
+// red template