Use fragment for blog footer

blocks/fragment/fragment.css

@@ -0,0 +1,14 @@
+/* suppress nested section padding */
+
+.fragment-wrapper > .section {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.fragment-wrapper > .section:first-of-type {
+    padding-top: 0;
+}
+
+.fragment-wrapper > .section:last-of-type {
+    padding-bottom: 0;
+}

blocks/fragment/fragment.js

@@ -0,0 +1,55 @@
+/*
+ * Fragment Block
+ * Include content on a page as a fragment.
+ * https://www.aem.live/developer/block-collection/fragment
+ */
+
+import {
+  decorateMain,
+} from '../../scripts/scripts.js';
+
+import {
+  loadBlocks,
+} from '../../scripts/lib-franklin.js';
+
+/**
+ * Loads a fragment.
+ * @param {string} path The path to the fragment
+ * @returns {HTMLElement} The root element of the fragment
+ */
+export 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();
+
+      // reset base path for media to fragment base
+      const resetAttributeBase = (tag, attr) => {
+        main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => {
+          elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href;
+        });
+      };
+      resetAttributeBase('img', 'src');
+      resetAttributeBase('source', 'srcset');
+
+      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

@@ -59,11 +59,8 @@ function buildBlockPostPage(main) {
   if (lastContentSection) {
     lastContentSection.appendChild(socialMediaButtons.cloneNode(true));
 
-    const lostPetTeaser = document.createRange().createContextualFragment('<div class="lost-pet-teaser">Lost Pet Teaser Block Placeholder</div>');
-    lastContentSection.appendChild(lostPetTeaser);
-
-    const similarBlogs = document.createRange().createContextualFragment('<div class="similar-blogs">Similar Blogs Block Placeholder</div>');
-    lastContentSection.appendChild(similarBlogs);
+    const fragment = document.createRange().createContextualFragment('<div><div class="fragment">/fragments/blog-footer</div></div>');
+    lastContentSection.parentElement.appendChild(fragment);
   }
 }
 
@@ -73,6 +70,10 @@ function buildBlockPostPage(main) {
  */
 function buildAutoBlocks(main) {
   try {
+    if (main.parentNode !== document.body) {
+      return;
+    }
+
     if (!document.body.classList.contains('blog-post')) {
       buildHeroBlock(main);
     } else {