From f7653c270cac820e57b655884a1d416e68ec5229 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:13:55 +0100 Subject: [PATCH 01/11] fix base path --- scripts/init.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/scripts/init.js b/scripts/init.js index 0669ed52..ff588ca9 100644 --- a/scripts/init.js +++ b/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) { @@ -46,6 +54,10 @@ function includesInfo(infos, search) { } async function init() { + const base = document.createElement('base'); + base.href = `${window.location.origin}/${getMeta('basePath') || ''}`; + document.head.appendChild(base); + ComponentMixin.getMixins(); // mechanism of retrieving lang to be used in the app @@ -54,8 +66,8 @@ 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(',')), ]; @@ -63,13 +75,11 @@ async function init() { 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 From 3c67ea643f50ed6bb448723c3e885c153078d066 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:16:38 +0100 Subject: [PATCH 02/11] revert --- blocks/footer/footer.js | 1 + blocks/header/header.js | 1 + blocks/icon/icon.js | 3 ++- blocks/theme/theme.js | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 4a34bd72..c0138f3f 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,6 +1,7 @@ import ComponentBase from '../../scripts/component-base.js'; export default class Footer extends ComponentBase { + // keep as it is fragment = '/footer.plain.html'; ready() { diff --git a/blocks/header/header.js b/blocks/header/header.js index 3d059c77..66726ef1 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -2,6 +2,7 @@ import ComponentBase from '../../scripts/component-base.js'; import { eagerImage } from '../../scripts/libs.js'; export default class Header extends ComponentBase { + // keep as it is fragment = '/header.plain.html'; dependencies = ['navigation']; diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js index 2fe1ea80..9c681e54 100644 --- a/blocks/icon/icon.js +++ b/blocks/icon/icon.js @@ -2,7 +2,7 @@ import ComponentBase from '../../scripts/component-base.js'; export default class Icon extends ComponentBase { static observedAttributes = ['icon']; - + constructor() { super(); this.setupSprite(); @@ -18,6 +18,7 @@ export default class Icon extends ComponentBase { } get iconUrl() { + // keep as it is return `/assets/icons/${this.iconName}.svg`; } diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js index 6db05d4f..1327ed39 100644 --- a/blocks/theme/theme.js +++ b/blocks/theme/theme.js @@ -7,6 +7,7 @@ export default class Theme extends ComponentBase { constructor() { super(); this.scapeDiv = document.createElement('div'); + // keep as it is this.fragment = '/theme.json'; this.skip = ['tags']; this.toTags = [ From f2856b1dcacdcd5773caaef5b0f66cc5ea4e99d5 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:19:54 +0100 Subject: [PATCH 03/11] Fix --- blocks/footer/footer.js | 1 - blocks/header/header.js | 2 +- blocks/icon/icon.js | 1 - blocks/theme/theme.js | 2 +- 4 files changed, 2 insertions(+), 4 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 3a1ccf03..c0138f3f 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,5 +1,4 @@ import ComponentBase from '../../scripts/component-base.js'; -import { getMeta } from '../../scripts/libs.js'; export default class Footer extends ComponentBase { // keep as it is diff --git a/blocks/header/header.js b/blocks/header/header.js index 1d3268bd..66726ef1 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,5 +1,5 @@ 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 { // keep as it is diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js index 0af0a71b..9c681e54 100644 --- a/blocks/icon/icon.js +++ b/blocks/icon/icon.js @@ -1,5 +1,4 @@ import ComponentBase from '../../scripts/component-base.js'; -import { getMeta } from '../../scripts/libs.js'; export default class Icon extends ComponentBase { static observedAttributes = ['icon']; diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js index 1327ed39..e1b468ee 100644 --- a/blocks/theme/theme.js +++ b/blocks/theme/theme.js @@ -1,5 +1,5 @@ import ComponentBase from '../../scripts/component-base.js'; -import { config, getMeta } from '../../scripts/libs.js'; +import { config } from '../../scripts/libs.js'; // minify alias const k = Object.keys; From 8b6000b9cac6ee4e7341999e8f7f6c96dfaac5e6 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:23:29 +0100 Subject: [PATCH 04/11] Fix --- scripts/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/init.js b/scripts/init.js index ff588ca9..99eaa910 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -54,7 +54,7 @@ function includesInfo(infos, search) { } async function init() { - const base = document.createElement('base'); + const base = document.createElement('basepath'); base.href = `${window.location.origin}/${getMeta('basePath') || ''}`; document.head.appendChild(base); From a1105ab1d6789e0e351b11188ff0b1f573bd2e86 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:23:57 +0100 Subject: [PATCH 05/11] Fix --- scripts/init.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/init.js b/scripts/init.js index 99eaa910..7edd8c0b 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -54,8 +54,8 @@ function includesInfo(infos, search) { } async function init() { - const base = document.createElement('basepath'); - base.href = `${window.location.origin}/${getMeta('basePath') || ''}`; + const base = document.createElement('base'); + base.href = `${window.location.origin}/${getMeta('basepath') || ''}`; document.head.appendChild(base); ComponentMixin.getMixins(); From f351eff8f635d9a57afd2948ac6b631e9e25a063 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:24:42 +0100 Subject: [PATCH 06/11] Fix --- scripts/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/init.js b/scripts/init.js index 7edd8c0b..8fc5139b 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -55,7 +55,7 @@ function includesInfo(infos, search) { async function init() { const base = document.createElement('base'); - base.href = `${window.location.origin}/${getMeta('basepath') || ''}`; + base.href = `${window.location.origin}${getMeta('basepath') || ''}`; document.head.appendChild(base); ComponentMixin.getMixins(); From 43c5bd6a8f68fa55b6ae892e9834a075b6fe03dc Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Thu, 14 Mar 2024 16:26:41 +0100 Subject: [PATCH 07/11] Fix --- head.html | 10 ++++++++++ scripts/init.js | 4 ---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/head.html b/head.html index 395d4352..9e2c5095 100644 --- a/head.html +++ b/head.html @@ -1,4 +1,14 @@ + + + Date: Thu, 14 Mar 2024 16:51:09 +0100 Subject: [PATCH 08/11] Fix --- blocks/footer/footer.js | 2 +- blocks/header/header.js | 2 +- blocks/icon/icon.js | 2 +- blocks/theme/theme.js | 4 ++-- head.html | 4 ++-- scripts/component-base.js | 12 ++++++++---- 6 files changed, 15 insertions(+), 11 deletions(-) diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index c0138f3f..32ce6b8c 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -2,7 +2,7 @@ import ComponentBase from '../../scripts/component-base.js'; export default class Footer extends ComponentBase { // keep as it is - fragment = '/footer.plain.html'; + fragment = 'footer.plain.html'; ready() { const child = this.children[0]; diff --git a/blocks/header/header.js b/blocks/header/header.js index 66726ef1..9d1e29ae 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -3,7 +3,7 @@ import { eagerImage } from '../../scripts/libs.js'; export default class Header extends ComponentBase { // keep as it is - fragment = '/header.plain.html'; + fragment = 'header.plain.html'; dependencies = ['navigation']; diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js index 9c681e54..27638ec7 100644 --- a/blocks/icon/icon.js +++ b/blocks/icon/icon.js @@ -19,7 +19,7 @@ export default class Icon extends ComponentBase { get iconUrl() { // keep as it is - return `/assets/icons/${this.iconName}.svg`; + return `assets/icons/${this.iconName}.svg`; } get cache() { diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js index e1b468ee..78b52a1c 100644 --- a/blocks/theme/theme.js +++ b/blocks/theme/theme.js @@ -1,5 +1,5 @@ import ComponentBase from '../../scripts/component-base.js'; -import { config } from '../../scripts/libs.js'; +import { config, getMeta } from '../../scripts/libs.js'; // minify alias const k = Object.keys; @@ -8,7 +8,7 @@ export default class Theme extends ComponentBase { super(); this.scapeDiv = document.createElement('div'); // keep as it is - this.fragment = '/theme.json'; + this.fragment = 'theme.json'; this.skip = ['tags']; this.toTags = [ 'font-size', diff --git a/head.html b/head.html index 9e2c5095..01bbaa28 100644 --- a/head.html +++ b/head.html @@ -4,7 +4,7 @@ const meta = document.querySelector(`meta[name="basepath"]`); if (meta) { const base = document.createElement('base'); - base.href = `${window.location.origin}${meta.content || ''}`; + base.href = `${meta.content || ''}/`; document.head.appendChild(base); } @@ -12,7 +12,7 @@ diff --git a/scripts/component-base.js b/scripts/component-base.js index 481a5b66..15532abc 100644 --- a/scripts/component-base.js +++ b/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; } From 863b0bd87b20a1f19af0815b141848cd7f9e3f6d Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Fri, 15 Mar 2024 09:45:17 +0100 Subject: [PATCH 09/11] add eslint rule and prettier --- .eslintrc.js | 1 + .prettierrc | 22 ++++++++++++++++++++++ blocks/theme/theme.js | 1 + head.html | 3 +++ 4 files changed, 27 insertions(+) create mode 100644 .prettierrc diff --git a/.eslintrc.js b/.eslintrc.js index deac7e89..3ff49bd0 100644 --- a/.eslintrc.js +++ b/.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': 'always-multiline', // due to prettier // allow reassigning param 'no-param-reassign': [2, { props: false }], 'linebreak-style': ['error', 'unix'], diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..856658af --- /dev/null +++ b/.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 +} diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js index 78b52a1c..86fe2602 100644 --- a/blocks/theme/theme.js +++ b/blocks/theme/theme.js @@ -38,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) => { diff --git a/head.html b/head.html index 01bbaa28..3a7e1b29 100644 --- a/head.html +++ b/head.html @@ -7,6 +7,9 @@ base.href = `${meta.content || ''}/`; document.head.appendChild(base); } + document.querySelectorAll(`a[href^="http://~/"]`).forEach((a) => { + a.href = a.href.replace('http://~/', ''); + }); From f7c33eb13a6f15c7b128d5a7b4800c04bcf4a7df Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Fri, 15 Mar 2024 09:52:42 +0100 Subject: [PATCH 10/11] fix eslint --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3ff49bd0..62ea182f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,7 +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': 'always-multiline', // due to prettier + 'comma-dangle': ['error', 'always-multiline'], // due to prettier // allow reassigning param 'no-param-reassign': [2, { props: false }], 'linebreak-style': ['error', 'unix'], From 4763773323ed401cbef70fc79596efafbf10e8a9 Mon Sep 17 00:00:00 2001 From: Felipe Simoes Date: Fri, 15 Mar 2024 09:54:26 +0100 Subject: [PATCH 11/11] update linting rules --- scripts/component-mixin.js | 40 ++++++++++++++++++++++++----------- tools/importer/import.js | 43 ++++++++++++++++++++++++++------------ 2 files changed, 58 insertions(+), 25 deletions(-) diff --git a/scripts/component-mixin.js b/scripts/component-mixin.js index 64087041..a7517451 100644 --- a/scripts/component-mixin.js +++ b/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() { diff --git a/tools/importer/import.js b/tools/importer/import.js index 9a085e2a..96c5fa03 100644 --- a/tools/importer/import.js +++ b/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), + ); }); }