Template boiler plate code

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,34 @@ async function loadFonts() {
   }
 }
 
+const TEMPLATE_LIST = [
+  'Default',
+  'Plasmids',
+  'Proteins',
+  'mRNA',
+];
+
+/**
+ * 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 +109,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);
   }

templates/Default/Default.css

@@ -0,0 +1 @@
+/* Default template css */

templates/Default/Default.js

@@ -0,0 +1 @@
+// Default template

templates/Plasmids/Plasmids.css

@@ -0,0 +1 @@
+/* Plasmids */

templates/Plasmids/Plasmids.js

@@ -0,0 +1 @@
+// Plasmids

templates/Proteins/Proteins.css

@@ -0,0 +1 @@
+/* Proteins */

templates/Proteins/Proteins.js

@@ -0,0 +1 @@
+// Proteins

templates/mRNA/mRNA.css

@@ -0,0 +1 @@
+/* mRNA */

templates/mRNA/mRNA.js

@@ -0,0 +1 @@
+// mRNA