[WIP] Global Cleanup and Fixes

blocks/accordion/accordion.js

@@ -1,23 +1,11 @@
 import ComponentBase from '../../scripts/component-base.js';
+import { componentList } from '../../scripts/component-list/component-list.js';
 
 export default class Accordion extends ComponentBase {
-  dependencies = ['icon'];
+  dependencies = componentList.accordion.module.dependencies;
 
-  extendNestedConfig() {
-    return [
-      ...super.extendNestedConfig(),
-      {
-        button: {
-          componentName: 'button',
-          loaderConfig: {
-            targetsSelectorsPrefix: ':scope > :is(:nth-child(even))',
-          },
-        },
-      },
-    ];
-  }
-
-  ready() {
+  init() {
+    super.init();
     this.setAttribute('role', 'navigation');
     let children = Array.from(this.children);
     children = children.map((child) => {

blocks/breadcrumbs/breadcrumbs.js

@@ -1,32 +1,15 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { getMeta, metaTags } from '../../scripts/libs.js';
+import { getMeta, metaTags, capitalizeCase } from '../../scripts/libs.js';
 
 export default class Breadcrumbs extends ComponentBase {
-  static loaderConfig = {
-    ...ComponentBase.loaderConfig,
-    targetsSelectors: 'main > div:first-child',
-    targetsSelectorsLimit: 1,
+  attributesValues = {
+    all: {
+      class: ['full-width'],
+    },
   };
 
-  nestedComponentsConfig = {};
-
-  extendConfig() {
-    return [
-      ...super.extendConfig(),
-      {
-        contentFromTargets: false,
-        addToTargetMethod: 'replaceWith',
-        targetsAsContainers: {
-          addToTargetMethod: 'prepend',
-          contentFromTargets: false,
-        },
-      },
-    ];
-  }
-
-  connected() {
-    this.classList.add('full-width');
-    this.classList.add('breadcrumbs');
+  init() {
+    super.init();
     const { origin, pathname } = window.location;
     let breadcrumbRoot = getMeta(metaTags.breadcrumbRoot.metaName);
     breadcrumbRoot = breadcrumbRoot?.startsWith('/') ? breadcrumbRoot : `/${breadcrumbRoot}`;
@@ -52,7 +35,7 @@ export default class Breadcrumbs extends ComponentBase {
   capitalize(string) {
     return string
       .split('-')
-      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+      .map((str) => capitalizeCase(str))
       .join(' ');
   }
 }

blocks/button/button.js

@@ -1,21 +1,10 @@
 import ComponentBase from '../../scripts/component-base.js';
 
 export default class Button extends ComponentBase {
-  static loaderConfig = {
-    ...ComponentBase.loaderConfig,
-    targetsSelectors: ':is(p,div):has(> a[href]:only-child)',
-    selectorTest: (el) => el.childNodes.length === 1,
-  };
-
-  nestedComponentsConfig = {};
-
   extendConfig() {
     return [
       ...super.extendConfig(),
       {
-        targetsAsContainers: {
-          addToTargetMethod: 'append',
-        },
         selectors: {
           anchor: ':scope > a',
           ariaText: ':scope > a:has(> raqn-icon, > .icon) > strong',
@@ -24,23 +13,13 @@ export default class Button extends ComponentBase {
     ];
   }
 
-  connected() {
-    this.initAsBlock();
+  init() {
+    super.init();
     this.queryElements();
     this.wrapText();
     this.addAriaText();
   }
 
-  initAsBlock() {
-    if (!this.isInitAsBlock) return;
-    const anchor = this.querySelector('a');
-    this.innerHTML = '';
-    if (!anchor) {
-      throw new Error(`No anchor found in the "${this.componentName}" block`);
-    }
-    this.append(anchor);
-  }
-
   wrapText() {
     const { anchor, ariaText } = this.elements;
     const wrap = document.createElement('span');

blocks/card/card.js

@@ -25,9 +25,9 @@ export default class Card extends ComponentBase {
     },
   };
 
-  ready() {
+  init() {
+    super.init();
     this.eager = parseInt(this.dataset.eager || 0, 10);
-    this.classList.add('inner');
     if (this.eager) {
       eagerImage(this, this.eager);
     }

blocks/developers-content/developers-content.js

@@ -3,27 +3,8 @@ import ComponentBase from '../../scripts/component-base.js';
 const sitePathPrefix = window.location.hostname === 'docs.raqn.io' ? '/developers' : '';
 
 export default class DeveloperToc extends ComponentBase {
-  static loaderConfig = {
-    ...ComponentBase.loaderConfig,
-    targetsSelectors: 'main > div:first-child',
-    targetsSelectorsLimit: 1,
-  };
-
-  extendConfig() {
-    return [
-      ...super.extendConfig(),
-      {
-        contentFromTargets: false,
-        addToTargetMethod: 'replaceWith',
-        targetsAsContainers: {
-          addToTargetMethod: 'prepend',
-          contentFromTargets: false,
-        },
-      },
-    ];
-  }
-
-  ready() {
+  init() {
+    super.init();
     this.generateTablesOfContent();
   }
 
@@ -32,21 +13,21 @@ export default class DeveloperToc extends ComponentBase {
   }
 
   toLink(path) {
-    if(window.location.host.startsWith('localhost') || window.location.host.search(/\.aem\.(page|live)/) > 0) {
+    if (window.location.host.startsWith('localhost') || window.location.host.search(/\.aem\.(page|live)/) > 0) {
       return path;
     }
     return `${sitePathPrefix}${path}`;
   }
 
   async loadPageHierarchy() {
     const response = await fetch(`${sitePathPrefix}/query-index.json`);
-    if(!response.ok) return [];
+    if (!response.ok) return [];
     const json = await response.json();
 
     const pageHierarchy = [];
-    const pageHierarchyObject = { children:pageHierarchy };
+    const pageHierarchyObject = { children: pageHierarchy };
     let currentNode;
-    json.data.forEach(page => {
+    json.data.forEach((page) => {
       const segments = page.path.split('/').slice(1);
       let currentParent = pageHierarchyObject;
       let nodePath = '';
@@ -60,12 +41,12 @@ export default class DeveloperToc extends ComponentBase {
             active: window.location.pathname.startsWith(`${sitePathPrefix}${nodePath}`),
             children: [],
           };
-          if(nodePath === page.path) {
+          if (nodePath === page.path) {
             node.page = page;
-            if(this.isIndex(node)) {
+            if (this.isIndex(node)) {
               currentParent.link = page.path;
             }
-            if(!currentNode && node.active) {
+            if (!currentNode && node.active) {
               currentNode = node;
             }
           }
@@ -77,16 +58,16 @@ export default class DeveloperToc extends ComponentBase {
 
     const postProcessHierarchy = (node) => {
       node.children.sort((a, b) => a.segment.localeCompare(b.segment));
-      if(!node.page && !node.link) {
+      if (!node.page && !node.link) {
         const firstChildPage = node.children.find((child) => child.page);
-        if(firstChildPage) {
+        if (firstChildPage) {
           node.link = firstChildPage.page.path;
         }
       }
       node.children.forEach((child) => postProcessHierarchy(child));
     };
     postProcessHierarchy(pageHierarchyObject);
-    
+
     return [pageHierarchy, currentNode];
   }
 
@@ -98,20 +79,22 @@ export default class DeveloperToc extends ComponentBase {
   }
 
   generateProjects(org) {
-    return org.children.map((project) => {
-      const h2 = document.createElement('h2');
-      h2.innerText = `${org.segment} - ${project.segment}`;
-      return `<li class=${project.active ? 'active' : ''}>${h2.outerHTML}
-        <ul>${ project.children.map((repository) => this.generateRepository(repository)).join('')}</ul></li>`;
-    }).join('');
+    return org.children
+      .map((project) => {
+        const h2 = document.createElement('h2');
+        h2.innerText = `${org.segment} - ${project.segment}`;
+        return `<li class=${project.active ? 'active' : ''}>${h2.outerHTML}
+        <ul>${project.children.map((repository) => this.generateRepository(repository)).join('')}</ul></li>`;
+      })
+      .join('');
   }
 
   generatePages(node) {
-    if(this.isIndex(node)) return '';
+    if (this.isIndex(node)) return '';
 
     const link = node.link || node.page?.path;
     const li = document.createElement('li');
-    if(link) {
+    if (link) {
       const a = document.createElement('a');
       a.href = this.toLink(link);
       a.innerText = node.segment;
@@ -121,17 +104,17 @@ export default class DeveloperToc extends ComponentBase {
     }
 
     const childrenHTML = node.children.map((child) => this.generatePages(child)).join('');
-    if(childrenHTML) {
+    if (childrenHTML) {
       const ul = document.createElement('ul');
       ul.innerHTML = childrenHTML;
       li.appendChild(ul);
     }
-    
+
     return li.outerHTML;
   }
 
-  findRepositoryRoot(node){
-    if(node.children.length === 1 && !node.children[0].page) {
+  findRepositoryRoot(node) {
+    if (node.children.length === 1 && !node.children[0].page) {
       return this.findRepositoryRoot(node.children[0]);
     }
     return node;
@@ -145,7 +128,7 @@ export default class DeveloperToc extends ComponentBase {
 
     let tocs = `<ul class="main">${pageHierarchy.map((project) => this.generateProjects(project)).join('')}</ul>`;
 
-    if(currentRepository && currentNode) {
+    if (currentRepository && currentNode) {
       const h2 = document.createElement('h2');
       h2.innerText = `${currentOrg.segment} - ${currentProject.segment} - ${currentRepository.segment}`;
       const root = this.findRepositoryRoot(currentRepository);

blocks/footer/footer.css

@@ -19,11 +19,6 @@ raqn-footer ul li a {
 }
 
 @media screen and (min-width: 1024px) {
-  raqn-footer {
-    display: grid;
-    grid-template-columns: auto 20vw;
-  }
-
   raqn-footer ul li a {
     padding: 10px 1.2em;
     border-inline-end: 1px solid var(--text);

blocks/footer/footer.js

@@ -4,31 +4,11 @@ import { getMeta, metaTags } from '../../scripts/libs.js';
 const metaFooter = getMeta(metaTags.footer.metaName);
 
 export default class Footer extends ComponentBase {
-  static loaderConfig = {
-    ...ComponentBase.loaderConfig,
-    loaderStopInit() {
-      return metaFooter === false;
-    },
-  };
-
   fragmentPath = `${metaFooter}.plain.html`;
 
-  extendConfig() {
-    return [
-      ...super.extendConfig(),
-      {
-        addToTargetMethod: 'append',
-      },
-    ];
-  }
-
-  ready() {
-    const child = this.children[0];
-    if (!child) return;
-    child.replaceWith(...child.children);
-    this.nav = this.querySelector('ul');
-    this.nav?.setAttribute('role', 'navigation');
-    this.classList.add('full-width');
-    this.classList.add('horizontal');
+  init() {
+    super.init();
+    this.elements.nav = this.querySelector('ul');
+    this.elements.nav?.setAttribute('role', 'navigation');
   }
 }