[READY] Fix base path

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'import/no-unresolved': [2, { commonjs: true }],
     'array-callback-return': 'off', // due to prettier
     'class-methods-use-this': 'off', // due to prettier
+    'comma-dangle': ['error', 'always-multiline'], // due to prettier
     // allow reassigning param
     'no-param-reassign': [2, { props: false }],
     'linebreak-style': ['error', 'unix'],

.prettierrc

@@ -0,0 +1,22 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false
+}

blocks/footer/footer.js

@@ -1,8 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { getMeta } from '../../scripts/libs.js';
 
 export default class Footer extends ComponentBase {
-  fragment = `${getMeta('basepath')}/footer.plain.html`;
+  // keep as it is
+  fragment = 'footer.plain.html';
 
   ready() {
     const child = this.children[0];

blocks/header/header.js

@@ -1,8 +1,9 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { eagerImage, getMeta } from '../../scripts/libs.js';
+import { eagerImage } from '../../scripts/libs.js';
 
 export default class Header extends ComponentBase {
-  fragment = `${getMeta('basepath')}/header.plain.html`;
+  // keep as it is
+  fragment = 'header.plain.html';
 
   dependencies = ['navigation'];
 

blocks/icon/icon.js

@@ -1,9 +1,8 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { getMeta } from '../../scripts/libs.js';
 
 export default class Icon extends ComponentBase {
   static observedAttributes = ['icon'];
-  
+
   constructor() {
     super();
     this.setupSprite();
@@ -19,7 +18,8 @@ export default class Icon extends ComponentBase {
   }
 
   get iconUrl() {
-    return `${getMeta('basepath')}/assets/icons/${this.iconName}.svg`;
+    // keep as it is
+    return `assets/icons/${this.iconName}.svg`;
   }
 
   get cache() {

blocks/theme/theme.js

@@ -7,7 +7,8 @@ export default class Theme extends ComponentBase {
   constructor() {
     super();
     this.scapeDiv = document.createElement('div');
-    this.fragment = `${getMeta('basepath')}/theme.json`;
+    // keep as it is
+    this.fragment = 'theme.json';
     this.skip = ['tags'];
     this.toTags = [
       'font-size',
@@ -37,6 +38,7 @@ export default class Theme extends ComponentBase {
     return '';
   }
 
+
   fontTags(t, index) {
     const tag = t.tags[index];
     const values = this.toTags.reduce((acc, key) => {

head.html

@@ -1,8 +1,21 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<!-- basepath -->
+<script>
+  const meta = document.querySelector(`meta[name="basepath"]`);
+  if (meta) {
+    const base = document.createElement('base');
+    base.href = `${meta.content || ''}/`;
+    document.head.appendChild(base);
+  }
+  document.querySelectorAll(`a[href^="http://~/"]`).forEach((a) => {
+    a.href = a.href.replace('http://~/', '');
+  });
+</script>
+
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <link
   rel="preload"
-  href="/web-guide/en/header.plain.html"
+  href="header.plain.html"
   as="fetch"
   crossorigin="anonymous"
 />

scripts/component-base.js

@@ -4,8 +4,8 @@ export default class ComponentBase extends HTMLElement {
   static get knownAttributes() {
     return [
       ...(Object.getPrototypeOf(this).knownAttributes || []),
-      ...(this.observedAttributes || [])
-    ]
+      ...(this.observedAttributes || []),
+    ];
   }
 
   constructor() {
@@ -28,7 +28,9 @@ export default class ComponentBase extends HTMLElement {
       this.connected();
       this.ready();
       this.setAttribute('initialized', true);
-      this.dispatchEvent(new CustomEvent('initialized', { detail: { block: this } }));
+      this.dispatchEvent(
+        new CustomEvent('initialized', { detail: { block: this } }),
+      );
     }
   }
 
@@ -44,7 +46,9 @@ export default class ComponentBase extends HTMLElement {
     if (response.ok) {
       const html = await response.text();
       this.innerHTML = html;
-      return this.querySelectorAll(':scope > div > div').forEach((block) => startBlock(block));
+      return this.querySelectorAll(':scope > div > div').forEach((block) =>
+        startBlock(block),
+      );
     }
     return response;
   }

scripts/component-mixin.js

@@ -1,22 +1,35 @@
 import { getMeta, loadModule } from './libs.js';
 
 export default class ComponentMixin {
-
   static applies(element) {
-    return this.observedAttributes && [...element.attributes].map((attribute) => attribute.name)
-      .find((search) => this.observedAttributes.find((attribute) => search.startsWith(attribute) || search.startsWith(`data-${attribute}`)));
+    return (
+      this.observedAttributes &&
+      [...element.attributes]
+        .map((attribute) => attribute.name)
+        .find((search) =>
+          this.observedAttributes.find(
+            (attribute) =>
+              search.startsWith(attribute) ||
+              search.startsWith(`data-${attribute}`),
+          ),
+        )
+    );
   }
 
   static async getMixins() {
-    if(!window.raqnMixins) {
+    if (!window.raqnMixins) {
       window.raqnMixins = (async () => {
         const mixins = getMeta('mixins');
-        window.raqnMixins = await Promise.all((mixins ? mixins.split(',') : []).map(async (mixin) => {
-          const { css, js } = loadModule(`/mixins/${mixin.trim()}/${mixin.trim()}`);
-          await css;
-          const mod = await js;
-          return mod.default;
-        }));
+        window.raqnMixins = await Promise.all(
+          (mixins ? mixins.split(',') : []).map(async (mixin) => {
+            const { css, js } = loadModule(
+              `/mixins/${mixin.trim()}/${mixin.trim()}`,
+            );
+            await css;
+            const mod = await js;
+            return mod.default;
+          }),
+        );
         return window.raqnMixins;
       })();
     }
@@ -27,7 +40,7 @@ export default class ComponentMixin {
     return Promise.all(
       (await ComponentMixin.getMixins())
         .filter((mixin) => mixin.applies(element))
-        .map((Mixin) => new Mixin(element).start())
+        .map((Mixin) => new Mixin(element).start()),
     );
   }
 
@@ -36,7 +49,10 @@ export default class ComponentMixin {
   }
 
   getAttribute(name) {
-    return this.element.getAttribute(name) || this.element.getAttribute(`data-${name}`);
+    return (
+      this.element.getAttribute(name) ||
+      this.element.getAttribute(`data-${name}`)
+    );
   }
 
   async start() {

scripts/init.js

@@ -1,6 +1,12 @@
 import ComponentLoader from './component-loader.js';
 import ComponentMixin from './component-mixin.js';
-import { config, debounce, eagerImage, getBreakPoint, getMeta } from './libs.js';
+import {
+  config,
+  debounce,
+  eagerImage,
+  getBreakPoint,
+  getMeta,
+} from './libs.js';
 
 function getInfo(block) {
   const el = block;
@@ -38,7 +44,9 @@ function initEagerImages() {
 
 function getLcp() {
   const lcpMeta = getMeta('lcp');
-  return lcpMeta ? lcpMeta.split(',').map((name) => ({ name: name.trim() })) : [];
+  return lcpMeta
+    ? lcpMeta.split(',').map((name) => ({ name: name.trim() }))
+    : [];
 }
 
 function includesInfo(infos, search) {
@@ -54,22 +62,20 @@ async function init() {
   initEagerImages();
 
   const blocks = [
-    document.body.querySelector(config.semanticBlocks[0]), 
-    ...document.querySelectorAll('[class]:not([class^=style]'), 
+    document.body.querySelector(config.semanticBlocks[0]),
+    ...document.querySelectorAll('[class]:not([class^=style]'),
     document.body.querySelector(config.semanticBlocks.slice(1).join(',')),
   ];
 
   const data = getInfos(blocks);
   const lcp = getLcp().map(({ name }) => includesInfo(data, name) || { name });
   const delay = window.raqnLCPDelay || [];
   const lazy = data.filter(
-    ({ name }) => !includesInfo(lcp, name) && !includesInfo(delay, name)
+    ({ name }) => !includesInfo(lcp, name) && !includesInfo(delay, name),
   );
 
   // start with lcp
-  Promise.all(
-    lcp.map(({ name, el }) => start({ name, el }))
-  ).then(() => {
+  Promise.all(lcp.map(({ name, el }) => start({ name, el }))).then(() => {
     document.body.style.display = 'unset';
   });
   // timeout for the rest to proper prioritize in case of stalled loading

tools/importer/import.js

@@ -2,9 +2,16 @@
 
 function transformLinks(main) {
   main.querySelectorAll('a').forEach((a) => {
-    if (a.href.startsWith('/') || a.href.startsWith(window.location.origin) || a.href.startsWith('https://guide.raqn.io/')) {
+    if (
+      a.href.startsWith('/') ||
+      a.href.startsWith(window.location.origin) ||
+      a.href.startsWith('https://guide.raqn.io/')
+    ) {
       const old = new URL(a.href);
-      const hlx = new URL(`${old.pathname}${old.search}${old.hash}`, 'https://main--henkel-raqn-guide--hlxsites.hlx.page/');
+      const hlx = new URL(
+        `${old.pathname}${old.search}${old.hash}`,
+        'https://main--henkel-raqn-guide--hlxsites.hlx.page/',
+      );
 
       // Remove .html extension
       if (hlx.pathname.endsWith('.html')) {
@@ -21,26 +28,36 @@ function transformLinks(main) {
 }
 
 function transformImages(document, main) {
-  main.querySelectorAll('meta[itemprop="contentUrl"][content^="https://dm.henkel-dam.com"]').forEach((meta) => {
-    const newImg = document.createElement('img');
-    newImg.src = `${meta.content}?wid=2560`;
-    meta.replaceWith(newImg);
-  });
+  main
+    .querySelectorAll(
+      'meta[itemprop="contentUrl"][content^="https://dm.henkel-dam.com"]',
+    )
+    .forEach((meta) => {
+      const newImg = document.createElement('img');
+      newImg.src = `${meta.content}?wid=2560`;
+      meta.replaceWith(newImg);
+    });
 }
 
 function transformStages(document, main) {
   main.querySelectorAll('heliux-stage').forEach((stage) => {
-    stage.replaceWith(WebImporter.DOMUtils.createTable([
-      ['Hero'],
-      [[...stage.children], [stage.querySelector('img')]]
-    ], document));
+    stage.replaceWith(
+      WebImporter.DOMUtils.createTable(
+        [['Hero'], [[...stage.children], [stage.querySelector('img')]]],
+        document,
+      ),
+    );
   });
 }
 
 function transformTeaserLists(document, main) {
   main.querySelectorAll('heliux-teaserlist').forEach((teaserList) => {
-    const cards = [...teaserList.querySelectorAll('li')].map((li) => [...li.children]);
-    teaserList.replaceWith(WebImporter.DOMUtils.createTable([['Card']].concat(cards), document));
+    const cards = [...teaserList.querySelectorAll('li')].map((li) => [
+      ...li.children,
+    ]);
+    teaserList.replaceWith(
+      WebImporter.DOMUtils.createTable([['Card']].concat(cards), document),
+    );
   });
 }