chore: switch hero autoblock for fragment autoblocking

scripts/aem.js

@@ -630,7 +630,7 @@ function decorateBlock(block) {
  * @param {Element} main The container element
  */
 function decorateBlocks(main) {
-  main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
+  main.querySelectorAll('div.section div[class]:not(.section)').forEach(decorateBlock);
 }
 
 /**

scripts/scripts.js

@@ -15,21 +15,6 @@ import {
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
-  }
-}
-
 /**
  * load fonts.css and set a session storage flag
  */
@@ -42,13 +27,33 @@ async function loadFonts() {
   }
 }
 
+/**
+ * Builds fragment blocks in a container element.
+ * @param {Element} container The container element
+ */
+
+function buildFragmentBlocks(container) {
+  console.log('building blocks');
+  container.querySelectorAll('a[href*="/fragments/"]:only-child').forEach((a) => {
+    const parent = a.parentNode;
+    const fragment =buildBlock('fragment', [[ a.cloneNode(true) ]]) 
+    if (parent.tagName === 'P') {
+      parent.before(fragment);
+      parent.remove();  
+    } else {
+      a.before(fragment);
+      a.remove();
+    }
+  });
+}
+
 /**
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    buildFragmentBlocks(main);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);