Merge pull request #29 from hlxsites/general-improvements

Remove Base Path
hlxsites · Sep 10, 2024 · 8e238eb · 8e238eb
2 parents 4826c11 + 6153f04
commit 8e238eb
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 40 deletions.
diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
@@ -1,5 +1,5 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { getBaseUrl } from '../../scripts/libs.js';
+import { getMeta, metaTags } from '../../scripts/libs.js';
 
 export default class Breadcrumbs extends ComponentBase {
   static loaderConfig = {
@@ -28,19 +28,26 @@ export default class Breadcrumbs extends ComponentBase {
     this.classList.add('full-width');
     this.classList.add('breadcrumbs');
     const { origin, pathname } = window.location;
-    this.path = `${origin}${pathname}`.split(getBaseUrl()).join('/').split('/');
+    let breadcrumbRoot = getMeta(metaTags.breadcrumbRoot.metaName);
+    if (breadcrumbRoot) {
+      breadcrumbRoot = breadcrumbRoot?.starsWith('/') ? breadcrumbRoot : `/${breadcrumbRoot}`;
+    } else {
+      breadcrumbRoot = metaTags.breadcrumbRoot.fallbackContent;
+    }
+
+    this.pathPages = `${origin}${pathname}`.split(`${origin}${breadcrumbRoot}`).join('/').split('/');
     this.innerHTML = `
     <ul>
-        ${this.path
-          .map((path, index) => {
-            if (path === '') {
-              return `<li><a href="/${path}">Home</a></li>`;
+        ${this.pathPages
+          .map((pageName, index) => {
+            if (pageName === '') {
+              return `<li><a href="/${pageName}">Home</a></li>`;
             }
-            if (index === this.path.length - 1) {
-              return `<li>${this.capitalize(path)}</li>`;
+            if (index === this.pathPages.length - 1) {
+              return `<li>${this.capitalize(pageName)}</li>`;
             }
-            const href = this.path.slice(0, index + 1).join('/');
-            return `<li><a href="${href}">${this.capitalize(path)}</a></li>`;
+            const href = this.pathPages.slice(0, index + 1).join('/');
+            return `<li><a href="${href}">${this.capitalize(pageName)}</a></li>`;
           })
           .join('<li class="separator">›</li>')}
     </ul>`;

diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js
@@ -1,5 +1,9 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { flatAsValue, isObject, stringToJsVal } from '../../scripts/libs.js';
+import { flatAsValue, isObject, stringToJsVal , getMeta, metaTags} from '../../scripts/libs.js';
+
+const { metaName, fallbackContent } = metaTags.icons;
+const metaIcons = getMeta(metaName);
+const metaPath = !!metaIcons && `${metaIcons}`;
 
 export default class Icon extends ComponentBase {
   static observedAttributes = ['data-active', 'data-icon'];
@@ -46,7 +50,8 @@ export default class Icon extends ComponentBase {
   }
 
   iconUrl(iconName) {
-    return `assets/icons/${iconName}.svg`;
+    const path = metaPath || fallbackContent;
+    return `${path}/${iconName}.svg`;
   }
 
   async connected() {

diff --git a/blocks/theming/theming.js b/blocks/theming/theming.js
@@ -163,9 +163,7 @@ export default class Theming extends ComponentBase {
         return fetch(`${path}.json`).then((response) => this.processFragment(response, fragment));
       }),
     );
-    //
-    await fetch('color.json').then((response) => this.processFragment(response, 'color'));
-    await fetch('font.json').then((response) => this.processFragment(response, 'font'));
+
     await fetch('/fonts/index.json').then((response) => this.processFragment(response, 'fontface'));
     this.styles();
   }

diff --git a/head.html b/head.html
@@ -1,27 +1,15 @@
-    <!-- test change -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <script>
-      const baseMeta = document.querySelector('meta[name="basepath"]');
-      const base = document.createElement('base');
-      if (!baseMeta || !baseMeta.content || baseMeta.content === '/') {
-        base.href = '/';
-      } else {
-        base.href = `${baseMeta.content}/`;
-      }
-      document.head.appendChild(base);
-      document.querySelectorAll('a[href^="http://~/"]').forEach((a) => {
-        a.href = a.href.replace('http://~/', '');
-      });
-
+      /* Preload header */
       const headerMeta = document.querySelector('meta[name="header"]');
       const url = headerMeta?.content.trim();
       if (url?.toLowerCase() !== 'false') {
         const link = document.createElement('link');
         link.setAttribute('rel', 'preload');
         link.setAttribute('as', 'fetch');
         link.setAttribute('crossorigin', 'anonymous');
-        link.href = url ? `${url}.plain.html` : 'header.plain.html';
+        link.href = url ? `${url}.plain.html` : '/header.plain.html';
         document.head.appendChild(link);
       }
     </script>

diff --git a/scripts/libs.js b/scripts/libs.js
@@ -29,19 +29,19 @@ export const metaTags = {
     metaName: 'breadcrumb-root',
     fallbackContent: '/',
   },
-  componentsConfig: {
-    metaName: 'components-config',
-    fallbackContent: 'components-config',
+  icons: {
+    metaName: 'icons',
+    fallbackContent: '/assets/icons',
     // contentType: 'path without extension',
   },
   header: {
     metaName: 'header',
-    fallbackContent: 'header',
+    fallbackContent: '/header',
     // contentType: 'path without extension',
   },
   footer: {
     metaName: 'footer',
-    fallbackContent: 'footer',
+    fallbackContent: '/footer',
     // contentType: 'path without extension',
   },
   structure: {
@@ -63,22 +63,22 @@ export const metaTags = {
   },
   themecolor: {
     metaName: 'color',
-    fallbackContent: 'color',
+    fallbackContent: '/color',
     // contentType: 'path without extension',
   },
   themefont: {
     metaName: 'color',
-    fallbackContent: 'font',
+    fallbackContent: '/font',
     // contentType: 'path without extension',
   },
   themelayout: {
     metaName: 'layout',
-    fallbackContent: 'layout',
+    fallbackContent: '/layout',
     // contentType: 'path without extension',
   },
   themecomponent: {
     metaName: 'component',
-    fallbackContent: 'components-config',
+    fallbackContent: '/components-config',
     // contentType: 'path without extension',
   },
   theme: {

diff --git a/scripts/libs/external-config.js b/scripts/libs/external-config.js
@@ -16,8 +16,8 @@ export const externalConfig = {
 
   async loadConfig() {
     window.raqnComponentsConfig ??= (async () => {
-      const { metaName, fallbackContent } = metaTags.componentsConfig;
-      const metaConfigPath = getMeta(metaName) || 'components-config';
+      const { metaName, fallbackContent } = metaTags.themecomponent;
+      const metaConfigPath = getMeta(metaName);
       const configPath = (!!metaConfigPath && `${metaConfigPath}.json`) || `${fallbackContent}.json`;
       let result = null;
       try {