16 - [Blog Pages] Autoblock Sidebar (#65)

.gitignore

@@ -7,3 +7,7 @@ helix-importer-ui
 .DS_Store
 *.bak
 .idea
+
+.vscode/
+.htmlvalidate.json
+.htmlvalidateignore

blocks/fragment/fragment.css

@@ -0,0 +1 @@
+/* nothing here */

blocks/fragment/fragment.js

@@ -0,0 +1,45 @@
+/*
+ * Fragment Block
+ * Include content from one Helix page in another.
+ * https://www.hlx.live/developer/block-collection/fragment
+ */
+
+import {
+  decorateMain,
+} from '../../scripts/scripts.js';
+
+import {
+  loadBlocks,
+} from '../../scripts/aem.js';
+
+/**
+ * Loads a fragment.
+ * @param {string} path The path to the fragment
+ * @returns {HTMLElement} The root element of the fragment
+ */
+async function loadFragment(path) {
+  if (path && path.startsWith('/')) {
+    const resp = await fetch(`${path}.plain.html`);
+    if (resp.ok) {
+      const main = document.createElement('main');
+      main.innerHTML = await resp.text();
+      decorateMain(main);
+      await loadBlocks(main);
+      return main;
+    }
+  }
+  return null;
+}
+
+export default async function decorate(block) {
+  const link = block.querySelector('a');
+  const path = link ? link.getAttribute('href') : block.textContent.trim();
+  const fragment = await loadFragment(path);
+  if (fragment) {
+    const fragmentSection = fragment.querySelector(':scope .section');
+    if (fragmentSection) {
+      block.closest('.section').classList.add(...fragmentSection.classList);
+      block.closest('.fragment-wrapper').replaceWith(...fragmentSection.childNodes);
+    }
+  }
+}

scripts/scripts.js

@@ -13,6 +13,7 @@ import {
   sampleRUM,
   toClassName,
   waitForLCP,
+  loadBlock,
 } from './aem.js';
 import {
   a, div, p, span,
@@ -163,6 +164,27 @@ function buildArticleSocialShare(main) {
   main.append(div(buildBlock('social-share', { elems: [] })));
 }
 
+/**
+ * Builds an article sidebar and appends it to main in a new section.
+ * @param main
+ */
+function buildArticleSidebar(main) {
+  const divs = Array.from(document.querySelectorAll('.section-metadata div div'));
+  const targetDivs = divs.filter(
+    (d) => d.textContent.trim().toLowerCase() === 'style' || d.textContent.trim().toLowerCase() === 'sidebar',
+  );
+  if (targetDivs.length !== 2) {
+    // the article did not come with an inline sidebar
+    const locInfo = getLocaleInfo();
+    const sidebarBlock = buildBlock('fragment', [
+      [a({ href: `${locInfo.placeholdersPrefix}/fragments/sidebar-fragment` }, 'Sidebar')],
+    ]);
+    sidebarBlock.dataset.eagerBlock = true;
+    const sidebar = div(sidebarBlock); // wrap sidebarBlock in div to create a new section
+    main.append(sidebar);
+  }
+}
+
 /**
  * Returns true if the page is an article based on the template metadata.
  * @returns {boolean}
@@ -182,9 +204,13 @@ function isArticlePage() {
  */
 // eslint-disable-next-line no-unused-vars
 function buildAutoBlocks(main) {
+  if (main.parentNode !== document.body) { // don't build auto blocks in fragments
+    return;
+  }
   try {
     if (isArticlePage()) {
       buildArticleHeader(main);
+      buildArticleSidebar(main);
       buildArticleCopyright(main);
       buildArticleSocialShare(main);
     }
@@ -195,8 +221,14 @@ function buildAutoBlocks(main) {
   }
 }
 
-function detectSidebar(main) {
+async function loadEagerBlocks(main) {
+  const eagerBlocks = main.querySelectorAll('div[data-eager-block]');
+  await Promise.all([...eagerBlocks].map((eagerBlock) => loadBlock(eagerBlock)));
+}
+
+async function detectSidebar(main) {
   const sidebar = main.querySelector('.section.sidebar');
+
   if (sidebar) {
     main.classList.add('has-sidebar');
     const sidebarOffset = Number.parseInt(
@@ -248,7 +280,6 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
-  detectSidebar(main);
 }
 
 /**
@@ -261,6 +292,8 @@ async function loadEager(doc) {
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);
+    await loadEagerBlocks(main);
+    await detectSidebar(main);
     document.body.classList.add('appear');
     await waitForLCP(LCP_BLOCKS);
   }
@@ -308,7 +341,7 @@ function loadDelayed() {
   // load anything that can be postponed to the latest here
 }
 
-async function loadPage() {
+export async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();