Merge pull request #42 from hlxsites/fix-theming

Fix theming

blocks/breadcrumbs/breadcrumbs.js

@@ -29,11 +29,7 @@ export default class Breadcrumbs extends ComponentBase {
     this.classList.add('breadcrumbs');
     const { origin, pathname } = window.location;
     let breadcrumbRoot = getMeta(metaTags.breadcrumbRoot.metaName);
-    if (breadcrumbRoot) {
-      breadcrumbRoot = breadcrumbRoot?.starsWith('/') ? breadcrumbRoot : `/${breadcrumbRoot}`;
-    } else {
-      breadcrumbRoot = metaTags.breadcrumbRoot.fallbackContent;
-    }
+    breadcrumbRoot = breadcrumbRoot?.startsWith('/') ? breadcrumbRoot : `/${breadcrumbRoot}`;
 
     this.pathPages = `${origin}${pathname}`.split(`${origin}${breadcrumbRoot}`).join('/').split('/');
     this.innerHTML = `

blocks/footer/footer.js

@@ -1,9 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
 import { getMeta, metaTags } from '../../scripts/libs.js';
 
-const { metaName, fallbackContent } = metaTags.footer;
-const metaFooter = getMeta(metaName);
-const metaFragment = !!metaFooter && `${metaFooter}.plain.html`;
+const metaFooter = getMeta(metaTags.footer.metaName);
+
 export default class Footer extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
@@ -12,7 +11,7 @@ export default class Footer extends ComponentBase {
     },
   };
 
-  fragmentPath = metaFragment || `${fallbackContent}.plain.html`;
+  fragmentPath = `${metaFooter}.plain.html`;
 
   extendConfig() {
     return [

blocks/header/header.js

@@ -1,9 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
 import { eagerImage, getMeta, metaTags } from '../../scripts/libs.js';
 
-const { metaName, fallbackContent } = metaTags.header;
-const metaHeader = getMeta(metaName);
-const metaFragment = !!metaHeader && `${metaHeader}.plain.html`;
+const metaHeader = getMeta(metaTags.header.metaName);
+
 export default class Header extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
@@ -20,7 +19,7 @@ export default class Header extends ComponentBase {
     },
   };
 
-  fragmentPath = metaFragment || `${fallbackContent}.plain.html`;
+  fragmentPath = `${metaHeader}.plain.html`;
 
   dependencies = ['navigation', 'image'];
 

blocks/icon/icon.js

@@ -1,9 +1,7 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { flatAsValue, isObject, stringToJsVal , getMeta, metaTags} 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}`;
+const metaIcons = getMeta(metaTags.icons.metaName);
 
 export default class Icon extends ComponentBase {
   static observedAttributes = ['data-active', 'data-icon'];
@@ -50,7 +48,7 @@ export default class Icon extends ComponentBase {
   }
 
   iconUrl(iconName) {
-    const path = metaPath || fallbackContent;
+    const path = `${metaIcons}`;
     return `${path}/${iconName}.svg`;
   }
 

blocks/theming/theming.js

@@ -1,5 +1,14 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { flat, getBreakPoints, getMediaQuery, getMeta, metaTags, readValue, unFlat } from '../../scripts/libs.js';
+import {
+  flat,
+  getBreakPoints,
+  getMediaQuery,
+  getMetaGroup,
+  getMeta,
+  metaTags,
+  readValue,
+  unFlat,
+} from '../../scripts/libs.js';
 
 const k = Object.keys;
 
@@ -76,8 +85,8 @@ export default class Theming extends ComponentBase {
       style.classList.add(cssSegment);
       document.head.appendChild(style);
     });
-    const themeMeta = getMeta('theme');
-    document.body.classList.add(themeMeta, 'color-default', 'font-default');
+    const themeMeta = getMeta('theme', { getArray: true, divider: ' ' });
+    document.body.classList.add(...themeMeta, 'color-default', 'font-default');
   }
 
   async processFragment(response, type = 'color') {
@@ -94,9 +103,10 @@ export default class Theming extends ComponentBase {
         });
       } else {
         this.variations = readValue(responseData.data, this.variations);
-        this.defineVariations();
       }
+      return this.themeJson[type];
     }
+    return false;
   }
 
   defineVariations() {
@@ -155,16 +165,15 @@ export default class Theming extends ComponentBase {
   }
 
   async loadFragment() {
-    Promise.all(
-      ['color', 'font', 'layout', 'component'].map(async (fragment) => {
-        const metaKey = `theme${fragment}`;
+    const themeConfigs = getMetaGroup(metaTags.themeConfig.metaNamePrefix);
 
-        const path = getMeta(metaTags[metaKey].metaName) || metaTags[metaKey].fallbackContent;
-        return fetch(`${path}.json`).then((response) => this.processFragment(response, fragment));
-      }),
+    await Promise.allSettled(
+      themeConfigs.map(async ({ name, content }) =>
+        fetch(`${content}.json`).then((response) => this.processFragment(response, name)),
+      ),
     );
 
-    await fetch('/fonts/index.json').then((response) => this.processFragment(response, 'fontface'));
+    this.defineVariations();
     this.styles();
   }
 }

scripts/init.js

@@ -161,7 +161,7 @@ export const onLoadComponents = {
   },
 
   setStructure() {
-    const structureComponents = getMetaGroup(metaTags.structure.metaNamePrefix);
+    const structureComponents = getMetaGroup(metaTags.structure.metaNamePrefix, { getFallback: false });
     this.structureComponents = structureComponents.flatMap(({ name, content }) => {
       if (content !== true) return [];
       return {

scripts/libs.js

@@ -61,23 +61,32 @@ export const metaTags = {
     metaName: 'eager-images',
     // contentType: 'number string',
   },
-  themecolor: {
-    metaName: 'color',
+  themeConfig: {
+    metaNamePrefix: 'theme-config',
+    // contentType: 'boolean string',
+  },
+  themeConfigColor: {
+    metaName: 'theme-config-color',
     fallbackContent: '/color',
     // contentType: 'path without extension',
   },
-  themefont: {
-    metaName: 'color',
+  themeConfigFont: {
+    metaName: 'theme-config-font',
     fallbackContent: '/font',
     // contentType: 'path without extension',
   },
-  themelayout: {
-    metaName: 'layout',
+  themeConfigFontFiles: {
+    metaName: 'theme-config-fontface',
+    fallbackContent: '/fonts/index',
+    // contentType: 'path without extension',
+  },
+  themeConfigLayout: {
+    metaName: 'theme-config-layout',
     fallbackContent: '/layout',
     // contentType: 'path without extension',
   },
-  themecomponent: {
-    metaName: 'component',
+  themeConfigComponent: {
+    metaName: 'theme-config-component',
     fallbackContent: '/components-config',
     // contentType: 'path without extension',
   },
@@ -240,25 +249,43 @@ export function readValue(data, extend = {}) {
 }
 
 export function getMeta(name, settings) {
-  const { getArray = false } = settings || {};
+  const { getArray = false, divider = ',', getFallback = true } = settings || {};
   const meta = document.querySelector(`meta[name="${name}"]`);
   if (!meta) {
-    return null;
+    if (getFallback) {
+      const fallback = Object.values(metaTags).find(({ metaName }) => metaName === name)?.fallbackContent;
+      return getArray ? stringToArray(fallback, { divider }) : fallback;
+    }
+    return getArray ? [] : null;
   }
+
   const val = stringToJsVal(meta.content);
-  if (getArray) {
-    return stringToArray(val);
-  }
-  return val;
+
+  return getArray ? stringToArray(val, { divider }) : val;
 }
 
-export function getMetaGroup(group) {
+export function getMetaGroup(group, settings) {
+  const { getFallback = true, getArray = false, divider = ',' } = settings || {};
+
   const prefix = `${group}-`;
   const metaGroup = [...document.querySelectorAll(`meta[name^="${prefix}"]`)];
-  return metaGroup.map((meta) => ({
-    name: meta.name.replace(new RegExp(`^${prefix}`), ''),
-    content: stringToJsVal(meta.content),
-  }));
+
+  if (getFallback) {
+    const metaKeys = Object.values(metaTags).filter(
+      ({ metaName }) => metaName?.startsWith(prefix) && !metaGroup.some((meta) => meta.name === metaName),
+    );
+    const defaultMeta = metaKeys.map(({ metaName, fallbackContent }) => ({ name: metaName, content: fallbackContent }));
+    metaGroup.push(...defaultMeta);
+  }
+
+  return metaGroup.map((meta) => {
+    const val = stringToJsVal(meta.content);
+    return {
+      nameWithPrefix: meta.name,
+      name: meta.name.replace(new RegExp(`^${prefix}`), ''),
+      content: getArray ? stringToArray(val, { divider }) : val,
+    };
+  });
 }
 
 export function isObject(item) {

scripts/libs/external-config.js

@@ -16,9 +16,9 @@ export const externalConfig = {
 
   async loadConfig() {
     window.raqnComponentsConfig ??= (async () => {
-      const { metaName, fallbackContent } = metaTags.themecomponent;
+      const { metaName } = metaTags.themeConfigComponent;
       const metaConfigPath = getMeta(metaName);
-      const configPath = (!!metaConfigPath && `${metaConfigPath}.json`) || `${fallbackContent}.json`;
+      const configPath = `${metaConfigPath}.json`;
       let result = null;
       try {
         const response = await fetch(`${configPath}`);