diff --git a/dist/features/features.js b/dist/features/features.js index c2945af2..ec26bc35 100644 --- a/dist/features/features.js +++ b/dist/features/features.js @@ -1,2 +1,2 @@ -import{j as i,x as o}from"../__chunks__/lit-element.XkUWx5ik.js";import{o as a}from"../__chunks__/unsafe-html.tmuruS4o.js";const l=e=>o`${e.map(t=>o`
${t.icon}
${a(t.textBlock)}
`)}`;function d(e){const t=e.querySelectorAll(":scope > div");let n=[];[...t].forEach(r=>{const s=r.children[0].innerHTML,c=r.children[1].innerHTML;n.push({icon:s,textBlock:c})}),e.innerHTML="",e.style.removeProperty("display"),i(l(n),e)}export{d as default}; +import{j as s,x as c}from"../__chunks__/lit-element.XkUWx5ik.js";import{o as a}from"../__chunks__/unsafe-html.tmuruS4o.js";const l=e=>c`${e.map(n=>c`
${a(n.textBlock)}
`)}`;function d(e){const n=e.querySelectorAll(":scope > div");let t=[];[...n].forEach(o=>{const r=o.children[0].innerHTML,i=o.children[1].innerHTML;t.push({icon:r,textBlock:i})}),e.innerHTML="",e.style.removeProperty("display"),s(l(t),e)}export{d as default}; //# sourceMappingURL=features.js.map diff --git a/dist/features/features.js.map b/dist/features/features.js.map index 7aefac92..14ef09a3 100644 --- a/dist/features/features.js.map +++ b/dist/features/features.js.map @@ -1 +1 @@ -{"version":3,"file":"features.js","sources":["../../src/blocks/features/features.ts"],"sourcesContent":["import { html, render } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\ninterface Feature {\n icon: string;\n textBlock: string;\n}\n\ntype TemplateArgs = Feature[];\n\nconst template = (features: TemplateArgs) => {\n return html`\n ${features.map(\n (feature) => html`\n
\n ${feature.icon}\n
${unsafeHTML(feature.textBlock)}
\n
\n `\n )}\n `;\n};\n\nexport default function (block: HTMLElement) {\n const rows = block.querySelectorAll(':scope > div');\n let features: Feature[] = [];\n [...rows].forEach((row) => {\n const icon = row.children[0].innerHTML;\n const textBlock = row.children[1].innerHTML;\n features.push({ icon, textBlock });\n });\n\n block.innerHTML = '';\n\n block.style.removeProperty('display');\n render(template(features), block);\n}\n"],"names":["template","features","html","feature","unsafeHTML","block","rows","row","icon","textBlock","render"],"mappings":"2HAUA,MAAMA,EAAYC,GACTC,IACHD,EAAS,IACRE,GAAYD,uCAEmBC,EAAQ,IAAI,+BACjBC,EAAWD,EAAQ,SAAS,CAAC,kBAGzD,CAAA,GAIL,SAAAF,EAAyBI,EAAoB,CACrC,MAAAC,EAAOD,EAAM,iBAAiB,cAAc,EAClD,IAAIJ,EAAsB,CAAA,EAC1B,CAAC,GAAGK,CAAI,EAAE,QAASC,GAAQ,CACzB,MAAMC,EAAOD,EAAI,SAAS,CAAC,EAAE,UACvBE,EAAYF,EAAI,SAAS,CAAC,EAAE,UAClCN,EAAS,KAAK,CAAE,KAAAO,EAAM,UAAAC,CAAW,CAAA,CAAA,CAClC,EAEDJ,EAAM,UAAY,GAEZA,EAAA,MAAM,eAAe,SAAS,EAC7BK,EAAAV,EAASC,CAAQ,EAAGI,CAAK,CAClC"} \ No newline at end of file +{"version":3,"file":"features.js","sources":["../../src/blocks/features/features.ts"],"sourcesContent":["import { html, render } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\ninterface Feature {\n icon: string;\n textBlock: string;\n}\n\ntype TemplateArgs = Feature[];\n\nconst template = (features: TemplateArgs) => {\n return html`\n ${features.map(\n (feature) => html`\n
\n \n
${unsafeHTML(feature.textBlock)}
\n
\n `\n )}\n `;\n};\n\nexport default function (block: HTMLElement) {\n const rows = block.querySelectorAll(':scope > div');\n let features: Feature[] = [];\n [...rows].forEach((row) => {\n const icon = row.children[0].innerHTML;\n const textBlock = row.children[1].innerHTML;\n features.push({ icon, textBlock });\n });\n\n block.innerHTML = '';\n\n block.style.removeProperty('display');\n render(template(features), block);\n}\n"],"names":["template","features","html","feature","unsafeHTML","block","rows","row","icon","textBlock","render"],"mappings":"2HAUA,MAAMA,EAAYC,GACTC,IACHD,EAAS,IACRE,GAAYD,6DAEyCC,EAAQ,IAAI,kDACvCC,EAAWD,EAAQ,SAAS,CAAC,kBAGzD,CAAA,GAIL,SAAAF,EAAyBI,EAAoB,CACrC,MAAAC,EAAOD,EAAM,iBAAiB,cAAc,EAClD,IAAIJ,EAAsB,CAAA,EAC1B,CAAC,GAAGK,CAAI,EAAE,QAASC,GAAQ,CACzB,MAAMC,EAAOD,EAAI,SAAS,CAAC,EAAE,UACvBE,EAAYF,EAAI,SAAS,CAAC,EAAE,UAClCN,EAAS,KAAK,CAAE,KAAAO,EAAM,UAAAC,CAAW,CAAA,CAAA,CAClC,EAEDJ,EAAM,UAAY,GAEZA,EAAA,MAAM,eAAe,SAAS,EAC7BK,EAAAV,EAASC,CAAQ,EAAGI,CAAK,CAClC"} \ No newline at end of file diff --git a/dist/icons/README.md b/dist/icons/README.md new file mode 100644 index 00000000..1384f6a0 --- /dev/null +++ b/dist/icons/README.md @@ -0,0 +1,3 @@ +# Icons + +Icons from [Flaticon](https://www.flaticon.com/icon-fonts-most-downloaded?weight=regular&type=uicon). \ No newline at end of file diff --git a/dist/icons/angle-down.svg b/dist/icons/angle-down.svg new file mode 100644 index 00000000..fefe17a4 --- /dev/null +++ b/dist/icons/angle-down.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-left.svg b/dist/icons/angle-left.svg new file mode 100644 index 00000000..ef8746a7 --- /dev/null +++ b/dist/icons/angle-left.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-right.svg b/dist/icons/angle-right.svg new file mode 100644 index 00000000..936b34d6 --- /dev/null +++ b/dist/icons/angle-right.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-small-down.svg b/dist/icons/angle-small-down.svg new file mode 100644 index 00000000..0c84cff6 --- /dev/null +++ b/dist/icons/angle-small-down.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-small-left.svg b/dist/icons/angle-small-left.svg new file mode 100644 index 00000000..99fbf673 --- /dev/null +++ b/dist/icons/angle-small-left.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-small-right.svg b/dist/icons/angle-small-right.svg new file mode 100644 index 00000000..7458533d --- /dev/null +++ b/dist/icons/angle-small-right.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/angle-up.svg b/dist/icons/angle-up.svg new file mode 100644 index 00000000..bb485d10 --- /dev/null +++ b/dist/icons/angle-up.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/bolt.svg b/dist/icons/bolt.svg new file mode 100644 index 00000000..4d843e80 --- /dev/null +++ b/dist/icons/bolt.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/check.svg b/dist/icons/check.svg new file mode 100644 index 00000000..f322b2bf --- /dev/null +++ b/dist/icons/check.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/clip.svg b/dist/icons/clip.svg new file mode 100644 index 00000000..f75460d2 --- /dev/null +++ b/dist/icons/clip.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/clock.svg b/dist/icons/clock.svg new file mode 100644 index 00000000..5f17cdbe --- /dev/null +++ b/dist/icons/clock.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/cross.svg b/dist/icons/cross.svg new file mode 100644 index 00000000..8b905b00 --- /dev/null +++ b/dist/icons/cross.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/download.svg b/dist/icons/download.svg new file mode 100644 index 00000000..455f99d2 --- /dev/null +++ b/dist/icons/download.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/envelope.svg b/dist/icons/envelope.svg new file mode 100644 index 00000000..b99529cc --- /dev/null +++ b/dist/icons/envelope.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/eye-crossed.svg b/dist/icons/eye-crossed.svg new file mode 100644 index 00000000..8247d9fe --- /dev/null +++ b/dist/icons/eye-crossed.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/eye.svg b/dist/icons/eye.svg new file mode 100644 index 00000000..a151c61f --- /dev/null +++ b/dist/icons/eye.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/globe.svg b/dist/icons/globe.svg new file mode 100644 index 00000000..7ab30de8 --- /dev/null +++ b/dist/icons/globe.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/heart.svg b/dist/icons/heart.svg new file mode 100644 index 00000000..5562a9ea --- /dev/null +++ b/dist/icons/heart.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/home.svg b/dist/icons/home.svg new file mode 100644 index 00000000..5ab3d48c --- /dev/null +++ b/dist/icons/home.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/menu-burger.svg b/dist/icons/menu-burger.svg new file mode 100644 index 00000000..a571bafe --- /dev/null +++ b/dist/icons/menu-burger.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/paper-plane.svg b/dist/icons/paper-plane.svg new file mode 100644 index 00000000..ae798a4e --- /dev/null +++ b/dist/icons/paper-plane.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/plus.svg b/dist/icons/plus.svg new file mode 100644 index 00000000..1c87eae8 --- /dev/null +++ b/dist/icons/plus.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/rocket-lunch.svg b/dist/icons/rocket-lunch.svg new file mode 100644 index 00000000..f4a090a7 --- /dev/null +++ b/dist/icons/rocket-lunch.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/search.svg b/dist/icons/search.svg new file mode 100644 index 00000000..0c9648b3 --- /dev/null +++ b/dist/icons/search.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/share.svg b/dist/icons/share.svg new file mode 100644 index 00000000..fcd28f5b --- /dev/null +++ b/dist/icons/share.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/social-network.svg b/dist/icons/social-network.svg new file mode 100644 index 00000000..8bb26207 --- /dev/null +++ b/dist/icons/social-network.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/trash.svg b/dist/icons/trash.svg new file mode 100644 index 00000000..d6a7d41d --- /dev/null +++ b/dist/icons/trash.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/icons/user.svg b/dist/icons/user.svg new file mode 100644 index 00000000..4d69d08a --- /dev/null +++ b/dist/icons/user.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/dist/main/main.js b/dist/main/main.js index 27eff806..636508d5 100644 --- a/dist/main/main.js +++ b/dist/main/main.js @@ -1,4 +1,4 @@ -const S="modulepreload",v=function(i){return"/"+i},f={},g=function(e,t,n){let s=Promise.resolve();if(t&&t.length>0){const a=document.getElementsByTagName("link");s=Promise.all(t.map(o=>{if(o=v(o),o in f)return;f[o]=!0;const r=o.endsWith(".css"),c=r?'[rel="stylesheet"]':"";if(!!n)for(let h=a.length-1;h>=0;h--){const m=a[h];if(m.href===o&&(!r||m.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${o}"]${c}`))return;const l=document.createElement("link");if(l.rel=r?"stylesheet":S,r||(l.as="script",l.crossOrigin=""),l.href=o,document.head.appendChild(l),r)return new Promise((h,m)=>{l.addEventListener("load",h),l.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${o}`)))})}))}return s.then(()=>e()).catch(a=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a})};function u(i){return typeof i=="string"?i.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}const p=(i,e)=>{e.split(",").forEach(t=>{i.classList.add(u(t.trim()))})};function y(i,e=document){const t=i&&i.includes(":")?"property":"name",s=[...e.head.querySelectorAll(`meta[${t}="${i}"]`)].map(a=>a.content).join(", ");return s.length?s:""}function w(i){return u(i).replace(/-([a-z])/g,e=>e[1].toUpperCase())}class E{readBlockConfig(e){const t={};return e.querySelectorAll(":scope > div").forEach(n=>{if(n.children){const s=[...n.children];if(s[1]){const a=s[1],o=u(s[0].textContent??"");let r="";if(a.querySelector("a")){const c=[...a.querySelectorAll("a")];c.length===1?r=c[0].href:r=c.map(d=>d.href)}else if(a.querySelector("img")){const c=[...a.querySelectorAll("img")];c.length===1?r=c[0].src:r=c.map(d=>d.src)}else if(a.querySelector("p")){const c=[...a.querySelectorAll("p")];c.length===1?r=c[0].textContent:r=c.map(d=>d.textContent)}else r=n.children[1].textContent;t[o]=r}}}),t}decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(this.decorateBlock)}decorateBlock(e){const t=e.classList[0];if(t){e.classList.add("block"),e.dataset.blockName=t;const n=e.parentElement;n==null||n.classList.add(`${t}-wrapper`);const s=e.closest(".section");s&&s.classList.add(`${t}-container`)}}}class C{constructor(e){this.blockService=e}init(e){this.transformSection(e)}transformSection(e){e.querySelectorAll(":scope > div").forEach(t=>{this.adjustMarkup(t),this.processSectionMetaData(t)})}processSectionMetaData(e){const t=e.querySelector("div.section-metadata");if(t){const n=this.blockService.readBlockConfig(t);Object.keys(n).forEach(s=>{s==="style"?n.style.split(",").filter(o=>o).map(o=>u(o.trim())).forEach(o=>e.classList.add(o)):e.dataset[w(s)]=n[s]}),t.parentElement&&t.parentElement.remove()}}adjustMarkup(e){const t=[];let n=!1;[...e.children].forEach(s=>{if(s.tagName==="DIV"||!n){const a=document.createElement("div");t.push(a),n=s.tagName!=="DIV",n&&a.classList.add("default-content-wrapper")}t[t.length-1].append(s)}),t.forEach(s=>e.append(s)),e.classList.add("section"),e.dataset.sectionStatus="initialized",e.style.display="none"}}class b{constructor(e,t){this.sectionService=e,this.blockService=t,this.init=async()=>{this.setup(),await this.loadEager()},this.loadEager=async()=>{if(document.documentElement.lang="en",this.decorateTemplateAndTheme(),document){const s=document.querySelector("body");s&&(s.style.display="none")}const n=document.querySelector("main");n&&(n.setAttribute("id","main"),this.addSidebarContainer(n),this.sectionService.init(n),this.addInnerContainer(n),this.blockService.decorateBlocks(n),await this.loadComponents(),setTimeout(()=>{document.body.removeAttribute("style")},200))},this.loadComponents=async()=>{document.querySelectorAll(".section").forEach(s=>{const a=[],o=s.querySelectorAll("[data-block-name]");if(!o.length){s.style.removeProperty("display");return}o.forEach(r=>{r.style.display="none",a.push({name:r.dataset.blockName,element:r})}),a.length&&a.forEach(async r=>{const c=await g(()=>import(`${window.hlx.codeBasePath}/dist/${r.name}/${r.name}.js`),__vite__mapDeps([]));c.default&&await c.default(r.element)}),s.style.removeProperty("display")})}}setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse=new URLSearchParams(window.location.search).get("lighthouse")==="on";const e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(t){console.log(t)}}addSidebarContainer(e){const t=document.createElement("div");t.classList.add("sidebar"),t.setAttribute("id","sidebar"),e.after(t)}addInnerContainer(e){const t=e.innerHTML;e.innerHTML=`
${t}
`}decorateTemplateAndTheme(){const e=y("template");e&&p(document.body,e);const t=y("theme");t&&p(document.body,t)}}(async function(){const i=new E,e=new C(i);await new b(e,i).init()})(); +const w="modulepreload",g=function(r){return"/"+r},f={},S=function(e,t,n){let s=Promise.resolve();if(t&&t.length>0){const a=document.getElementsByTagName("link");s=Promise.all(t.map(o=>{if(o=g(o),o in f)return;f[o]=!0;const i=o.endsWith(".css"),c=i?'[rel="stylesheet"]':"";if(!!n)for(let h=a.length-1;h>=0;h--){const m=a[h];if(m.href===o&&(!i||m.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${o}"]${c}`))return;const l=document.createElement("link");if(l.rel=i?"stylesheet":w,i||(l.as="script",l.crossOrigin=""),l.href=o,document.head.appendChild(l),i)return new Promise((h,m)=>{l.addEventListener("load",h),l.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${o}`)))})}))}return s.then(()=>e()).catch(a=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a})};function u(r){return typeof r=="string"?r.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}const p=(r,e)=>{e.split(",").forEach(t=>{r.classList.add(u(t.trim()))})};function y(r,e=document){const t=r&&r.includes(":")?"property":"name",s=[...e.head.querySelectorAll(`meta[${t}="${r}"]`)].map(a=>a.content).join(", ");return s.length?s:""}function v(r){return u(r).replace(/-([a-z])/g,e=>e[1].toUpperCase())}class E extends HTMLElement{constructor(){super(),this.shadowRoot=this.shadowRoot||this.attachShadow({mode:"open"})}get name(){const e=this.getAttribute("name");if(!e)throw new Error("Icon must have a name attribute");return e}connectedCallback(){console.log("RENDER ICON"),this.render()}async render(){const e=await this.fetchIcon();this.shadowRoot.innerHTML=`${e}`}async fetchIcon(){return await(await fetch(`${window.hlx.codeBasePath}/icons/${this.name}.svg`)).text()}}class C{readBlockConfig(e){const t={};return e.querySelectorAll(":scope > div").forEach(n=>{if(n.children){const s=[...n.children];if(s[1]){const a=s[1],o=u(s[0].textContent??"");let i="";if(a.querySelector("a")){const c=[...a.querySelectorAll("a")];c.length===1?i=c[0].href:i=c.map(d=>d.href)}else if(a.querySelector("img")){const c=[...a.querySelectorAll("img")];c.length===1?i=c[0].src:i=c.map(d=>d.src)}else if(a.querySelector("p")){const c=[...a.querySelectorAll("p")];c.length===1?i=c[0].textContent:i=c.map(d=>d.textContent)}else i=n.children[1].textContent;t[o]=i}}}),t}decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(this.decorateBlock)}decorateBlock(e){const t=e.classList[0];if(t){e.classList.add("block"),e.dataset.blockName=t;const n=e.parentElement;n==null||n.classList.add(`${t}-wrapper`);const s=e.closest(".section");s&&s.classList.add(`${t}-container`)}}}class b{constructor(e){this.blockService=e}init(e){this.transformSection(e)}transformSection(e){e.querySelectorAll(":scope > div").forEach(t=>{this.adjustMarkup(t),this.processSectionMetaData(t)})}processSectionMetaData(e){const t=e.querySelector("div.section-metadata");if(t){const n=this.blockService.readBlockConfig(t);Object.keys(n).forEach(s=>{s==="style"?n.style.split(",").filter(o=>o).map(o=>u(o.trim())).forEach(o=>e.classList.add(o)):e.dataset[v(s)]=n[s]}),t.parentElement&&t.parentElement.remove()}}adjustMarkup(e){const t=[];let n=!1;[...e.children].forEach(s=>{if(s.tagName==="DIV"||!n){const a=document.createElement("div");t.push(a),n=s.tagName!=="DIV",n&&a.classList.add("default-content-wrapper")}t[t.length-1].append(s)}),t.forEach(s=>e.append(s)),e.classList.add("section"),e.dataset.sectionStatus="initialized",e.style.display="none"}}class k{constructor(e,t){this.sectionService=e,this.blockService=t,this.init=async()=>{this.setup(),await this.loadEager()},this.registerCustomElements=()=>{customElements.define("icon-component",E)},this.loadEager=async()=>{if(document.documentElement.lang="en",this.decorateTemplateAndTheme(),document){const s=document.querySelector("body");s&&(s.style.display="none")}const n=document.querySelector("main");n&&(n.setAttribute("id","main"),this.addSidebarContainer(n),this.sectionService.init(n),this.addInnerContainer(n),this.blockService.decorateBlocks(n),await this.loadComponents(),setTimeout(()=>{document.body.removeAttribute("style")},200))},this.loadComponents=async()=>{document.querySelectorAll(".section").forEach(s=>{const a=[],o=s.querySelectorAll("[data-block-name]");if(!o.length){s.style.removeProperty("display");return}o.forEach(i=>{i.style.display="none",a.push({name:i.dataset.blockName,element:i})}),a.length&&a.forEach(async i=>{const c=await S(()=>import(`${window.hlx.codeBasePath}/dist/${i.name}/${i.name}.js`),__vite__mapDeps([]));c.default&&await c.default(i.element)}),s.style.removeProperty("display")})}}setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse=new URLSearchParams(window.location.search).get("lighthouse")==="on",this.registerCustomElements();const e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(t){console.log(t)}}addSidebarContainer(e){const t=document.createElement("div");t.classList.add("sidebar"),t.setAttribute("id","sidebar"),e.after(t)}addInnerContainer(e){const t=e.innerHTML;e.innerHTML=`
${t}
`}decorateTemplateAndTheme(){const e=y("template");e&&p(document.body,e);const t=y("theme");t&&p(document.body,t)}}(async function(){const r=new C,e=new b(r);await new k(e,r).init()})(); function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = [] diff --git a/dist/main/main.js.map b/dist/main/main.js.map index 0e8418d4..d40c9671 100644 --- a/dist/main/main.js.map +++ b/dist/main/main.js.map @@ -1 +1 @@ -{"version":3,"mappings":"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","names":["toClassName","name","addClasses","element","classes","c","getMetadata","doc","attr","meta","m","toCamelCase","g","BlockService","block","config","row","cols","col","value","as","a","imgs","img","ps","p","main","shortBlockName","blockWrapper","section","SectionService","blockService","container","sectionMeta","key","style","wrappers","defaultContent","e","wrapper","Main","sectionService","body","components","blocks","component","componentModule","scriptEl","error","sidebarContainer","children","template","theme"],"sources":["../../src/utils/toClassName.ts","../../src/utils/addClasses.ts","../../src/utils/getMetadata.ts","../../src/utils/toCamelCase.ts","../../src/main.ts"],"sourcesContent":["export function toClassName(name: string) {\n return typeof name === 'string'\n ? name\n .toLowerCase()\n .replace(/[^0-9a-z]/gi, '-')\n .replace(/-+/g, '-')\n .replace(/^-|-$/g, '')\n : '';\n}\n","import { toClassName } from './toClassName';\n\nexport const addClasses = (element: HTMLElement, classes: string) => {\n classes.split(',').forEach((c) => {\n element.classList.add(toClassName(c.trim()));\n });\n};\n","export function getMetadata(name: string, doc = document) {\n const attr = name && name.includes(':') ? 'property' : 'name';\n const metaTags: HTMLMetaElement[] =\n ([...doc.head.querySelectorAll(`meta[${attr}=\"${name}\"]`)] as HTMLMetaElement[]) || [];\n const meta = metaTags\n .map((m) => {\n return m.content;\n })\n .join(', ');\n return meta.length ? meta : '';\n}\n","import { toClassName } from './toClassName';\n\n/**\n * Sanitizes a string for use as a js property name.\n * @param {string} name The unsanitized string\n * @returns {string} The camelCased name\n */\nexport function toCamelCase(name: string) {\n return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n}\n","// const LCP_BLOCKS: string[] = []; // add your LCP blocks to the list\n\nimport { addClasses } from '../src/utils/addClasses';\nimport { getMetadata } from '../src/utils/getMetadata';\nimport { toCamelCase } from '../src/utils/toCamelCase';\nimport { toClassName } from '../src/utils/toClassName';\n\ntype ComponentMapping = {\n name: string;\n element: HTMLDivElement;\n};\n\nclass BlockService {\n /**\n * Extracts the config from a block.\n * @param {Element} block The block element\n * @returns {object} The block config\n */\n readBlockConfig(block: Element): Record {\n const config: Record = {};\n block.querySelectorAll(':scope > div').forEach((row) => {\n if (row.children) {\n const cols = [...row.children];\n if (cols[1]) {\n const col = cols[1];\n const name = toClassName(cols[0].textContent ?? '');\n let value: any = '';\n if (col.querySelector('a')) {\n const as = [...col.querySelectorAll('a')];\n if (as.length === 1) {\n value = as[0].href;\n } else {\n value = as.map((a) => a.href);\n }\n } else if (col.querySelector('img')) {\n const imgs = [...col.querySelectorAll('img')];\n if (imgs.length === 1) {\n value = imgs[0].src;\n } else {\n value = imgs.map((img) => img.src);\n }\n } else if (col.querySelector('p')) {\n const ps = [...col.querySelectorAll('p')];\n if (ps.length === 1) {\n value = ps[0].textContent;\n } else {\n value = ps.map((p) => p.textContent);\n }\n } else value = row.children[1].textContent;\n config[name] = value;\n }\n }\n });\n return config;\n }\n\n /**\n * Decorates all blocks in a container element.\n * @param {Element} main The container element\n */\n decorateBlocks(main: HTMLElement) {\n main.querySelectorAll('div.section > div > div').forEach(this.decorateBlock);\n }\n\n /**\n * Decorates a block.\n * @param {Element} block The block element\n */\n private decorateBlock(block: HTMLElement) {\n const shortBlockName = block.classList[0];\n if (shortBlockName) {\n block.classList.add('block');\n block.dataset.blockName = shortBlockName;\n const blockWrapper = block.parentElement;\n blockWrapper?.classList.add(`${shortBlockName}-wrapper`);\n const section = block.closest('.section');\n if (section) section.classList.add(`${shortBlockName}-container`);\n }\n }\n}\n\nclass SectionService {\n constructor(private blockService: BlockService) {}\n\n init(container: HTMLElement) {\n this.transformSection(container);\n }\n\n /**\n * Decorates all sections in a container element.\n * @param {Element} main The container element\n */\n private transformSection(main: HTMLElement) {\n main.querySelectorAll(':scope > div').forEach((section) => {\n this.adjustMarkup(section);\n this.processSectionMetaData(section);\n });\n }\n\n private processSectionMetaData(section: HTMLElement) {\n // Process section metadata\n const sectionMeta = section.querySelector('div.section-metadata');\n if (sectionMeta) {\n const meta = this.blockService.readBlockConfig(sectionMeta);\n Object.keys(meta).forEach((key) => {\n if (key === 'style') {\n const styles = meta.style\n .split(',')\n .filter((style: string) => style)\n .map((style: string) => toClassName(style.trim()));\n styles.forEach((style: string) => section.classList.add(style));\n } else {\n section.dataset[toCamelCase(key)] = meta[key];\n }\n });\n if (sectionMeta.parentElement) sectionMeta.parentElement.remove();\n }\n }\n\n private adjustMarkup(section: HTMLDivElement) {\n const wrappers: HTMLDivElement[] = [];\n let defaultContent = false;\n [...section.children].forEach((e) => {\n if (e.tagName === 'DIV' || !defaultContent) {\n const wrapper = document.createElement('div');\n wrappers.push(wrapper);\n defaultContent = e.tagName !== 'DIV';\n if (defaultContent) wrapper.classList.add('default-content-wrapper');\n }\n wrappers[wrappers.length - 1].append(e);\n });\n wrappers.forEach((wrapper) => section.append(wrapper));\n section.classList.add('section');\n section.dataset.sectionStatus = 'initialized';\n section.style.display = 'none';\n }\n}\n\nclass Main {\n constructor(\n private sectionService: SectionService,\n private blockService: BlockService\n ) {}\n\n init = async () => {\n this.setup();\n await this.loadEager();\n };\n\n /**\n * Setup block utils.\n */\n private setup() {\n window.hlx = window.hlx || {};\n window.hlx.RUM_MASK_URL = 'full';\n window.hlx.codeBasePath = '';\n window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on';\n\n const scriptEl = document.querySelector('script[src$=\"/scripts/scripts.js\"]') as HTMLScriptElement;\n if (scriptEl) {\n try {\n [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log(error);\n }\n }\n }\n\n private loadEager = async () => {\n // TODO: how to support different languages here\n document.documentElement.lang = 'en';\n this.decorateTemplateAndTheme();\n if (document) {\n const body = document.querySelector('body');\n if (body) {\n body.style.display = 'none';\n }\n }\n const main = document.querySelector('main');\n if (main) {\n main.setAttribute('id', 'main');\n this.addSidebarContainer(main);\n this.sectionService.init(main);\n this.addInnerContainer(main); // TODO refactor initializing\n this.blockService.decorateBlocks(main);\n await this.loadComponents();\n // TODO: Performace adjustment\n setTimeout(() => {\n document.body.removeAttribute('style');\n }, 200);\n\n // await this.waitForLCP(LCP_BLOCKS);\n }\n };\n\n private addSidebarContainer(main: HTMLElement) {\n const sidebarContainer = document.createElement('div');\n sidebarContainer.classList.add('sidebar');\n sidebarContainer.setAttribute('id', 'sidebar');\n main.after(sidebarContainer);\n }\n\n private addInnerContainer(main: HTMLElement) {\n const children = main.innerHTML;\n main.innerHTML = `
${children}
`;\n }\n\n // private loadLazy = async () => {};\n\n private decorateTemplateAndTheme() {\n const template = getMetadata('template');\n if (template) addClasses(document.body, template);\n const theme = getMetadata('theme');\n if (theme) addClasses(document.body, theme);\n }\n\n private loadComponents = async () => {\n const sections = document.querySelectorAll('.section');\n sections.forEach((section) => {\n const components: ComponentMapping[] = [];\n const blocks = section.querySelectorAll('[data-block-name]');\n if (!blocks.length) {\n section.style.removeProperty('display');\n return;\n }\n blocks.forEach((block: HTMLDivElement) => {\n block.style.display = 'none';\n components.push({\n name: block.dataset['blockName'] as string,\n element: block,\n });\n });\n if (components.length) {\n components.forEach(async (component) => {\n const componentModule = await import(\n `${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js`\n );\n if (componentModule.default) {\n await componentModule.default(component.element);\n }\n });\n }\n section.style.removeProperty('display');\n });\n };\n}\n\n(async function () {\n const blockService = new BlockService();\n const sectionService = new SectionService(blockService);\n const main = new Main(sectionService, blockService);\n await main.init();\n})();\n\n// /**\n// * Loads JS and CSS for a block.\n// * @param {Element} block The block element\n// */\n// async function loadBlock(block) {\n// const status = block.dataset.blockStatus;\n// if (status !== 'loading' && status !== 'loaded') {\n// block.dataset.blockStatus = 'loading';\n// const { blockName } = block.dataset;\n// try {\n// const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);\n// const decorationComplete = new Promise((resolve) => {\n// (async () => {\n// try {\n// const mod = await import(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`);\n// if (mod.default) {\n// await mod.default(block);\n// }\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load module for ${blockName}`, error);\n// }\n// resolve();\n// })();\n// });\n// await Promise.all([cssLoaded, decorationComplete]);\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load block ${blockName}`, error);\n// }\n// block.dataset.blockStatus = 'loaded';\n// }\n// return block;\n// }\n\ndeclare global {\n interface Window {\n hlx: {\n RUM_MASK_URL: string;\n codeBasePath: string;\n lighthouse: boolean;\n };\n }\n}\n"],"file":"main/main.js"} \ No newline at end of file +{"version":3,"mappings":"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","names":["toClassName","name","addClasses","element","classes","c","getMetadata","doc","attr","meta","m","toCamelCase","g","Icon","srcValue","svg","BlockService","block","config","row","cols","col","value","as","a","imgs","img","ps","p","main","shortBlockName","blockWrapper","section","SectionService","blockService","container","sectionMeta","key","style","wrappers","defaultContent","e","wrapper","Main","sectionService","body","components","blocks","component","componentModule","scriptEl","error","sidebarContainer","children","template","theme"],"sources":["../../src/utils/toClassName.ts","../../src/utils/addClasses.ts","../../src/utils/getMetadata.ts","../../src/utils/toCamelCase.ts","../../src/components/icon.ts","../../src/main.ts"],"sourcesContent":["export function toClassName(name: string) {\n return typeof name === 'string'\n ? name\n .toLowerCase()\n .replace(/[^0-9a-z]/gi, '-')\n .replace(/-+/g, '-')\n .replace(/^-|-$/g, '')\n : '';\n}\n","import { toClassName } from './toClassName';\n\nexport const addClasses = (element: HTMLElement, classes: string) => {\n classes.split(',').forEach((c) => {\n element.classList.add(toClassName(c.trim()));\n });\n};\n","export function getMetadata(name: string, doc = document) {\n const attr = name && name.includes(':') ? 'property' : 'name';\n const metaTags: HTMLMetaElement[] =\n ([...doc.head.querySelectorAll(`meta[${attr}=\"${name}\"]`)] as HTMLMetaElement[]) || [];\n const meta = metaTags\n .map((m) => {\n return m.content;\n })\n .join(', ');\n return meta.length ? meta : '';\n}\n","import { toClassName } from './toClassName';\n\n/**\n * Sanitizes a string for use as a js property name.\n * @param {string} name The unsanitized string\n * @returns {string} The camelCased name\n */\nexport function toCamelCase(name: string) {\n return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n}\n","export class Icon extends HTMLElement {\n shadowRoot;\n\n constructor() {\n super();\n this.shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' });\n }\n\n get name() {\n const srcValue = this.getAttribute('name');\n if (!srcValue) {\n throw new Error('Icon must have a name attribute');\n }\n return srcValue;\n }\n\n connectedCallback() {\n console.log('RENDER ICON');\n this.render();\n }\n\n async render() {\n const svg = await this.fetchIcon();\n this.shadowRoot.innerHTML = `${svg}`;\n }\n\n async fetchIcon() {\n const response = await fetch(`${window.hlx.codeBasePath}/icons/${this.name}.svg`);\n const textResponse = await response.text();\n return textResponse;\n }\n}\n","// const LCP_BLOCKS: string[] = []; // add your LCP blocks to the list\n\nimport { addClasses } from '../src/utils/addClasses';\nimport { getMetadata } from '../src/utils/getMetadata';\nimport { toCamelCase } from '../src/utils/toCamelCase';\nimport { toClassName } from '../src/utils/toClassName';\nimport { Icon } from './components/icon';\n\ntype ComponentMapping = {\n name: string;\n element: HTMLDivElement;\n};\n\nclass BlockService {\n /**\n * Extracts the config from a block.\n * @param {Element} block The block element\n * @returns {object} The block config\n */\n readBlockConfig(block: Element): Record {\n const config: Record = {};\n block.querySelectorAll(':scope > div').forEach((row) => {\n if (row.children) {\n const cols = [...row.children];\n if (cols[1]) {\n const col = cols[1];\n const name = toClassName(cols[0].textContent ?? '');\n let value: any = '';\n if (col.querySelector('a')) {\n const as = [...col.querySelectorAll('a')];\n if (as.length === 1) {\n value = as[0].href;\n } else {\n value = as.map((a) => a.href);\n }\n } else if (col.querySelector('img')) {\n const imgs = [...col.querySelectorAll('img')];\n if (imgs.length === 1) {\n value = imgs[0].src;\n } else {\n value = imgs.map((img) => img.src);\n }\n } else if (col.querySelector('p')) {\n const ps = [...col.querySelectorAll('p')];\n if (ps.length === 1) {\n value = ps[0].textContent;\n } else {\n value = ps.map((p) => p.textContent);\n }\n } else value = row.children[1].textContent;\n config[name] = value;\n }\n }\n });\n return config;\n }\n\n /**\n * Decorates all blocks in a container element.\n * @param {Element} main The container element\n */\n decorateBlocks(main: HTMLElement) {\n main.querySelectorAll('div.section > div > div').forEach(this.decorateBlock);\n }\n\n /**\n * Decorates a block.\n * @param {Element} block The block element\n */\n private decorateBlock(block: HTMLElement) {\n const shortBlockName = block.classList[0];\n if (shortBlockName) {\n block.classList.add('block');\n block.dataset.blockName = shortBlockName;\n const blockWrapper = block.parentElement;\n blockWrapper?.classList.add(`${shortBlockName}-wrapper`);\n const section = block.closest('.section');\n if (section) section.classList.add(`${shortBlockName}-container`);\n }\n }\n}\n\nclass SectionService {\n constructor(private blockService: BlockService) {}\n\n init(container: HTMLElement) {\n this.transformSection(container);\n }\n\n /**\n * Decorates all sections in a container element.\n * @param {Element} main The container element\n */\n private transformSection(main: HTMLElement) {\n main.querySelectorAll(':scope > div').forEach((section) => {\n this.adjustMarkup(section);\n this.processSectionMetaData(section);\n });\n }\n\n private processSectionMetaData(section: HTMLElement) {\n // Process section metadata\n const sectionMeta = section.querySelector('div.section-metadata');\n if (sectionMeta) {\n const meta = this.blockService.readBlockConfig(sectionMeta);\n Object.keys(meta).forEach((key) => {\n if (key === 'style') {\n const styles = meta.style\n .split(',')\n .filter((style: string) => style)\n .map((style: string) => toClassName(style.trim()));\n styles.forEach((style: string) => section.classList.add(style));\n } else {\n section.dataset[toCamelCase(key)] = meta[key];\n }\n });\n if (sectionMeta.parentElement) sectionMeta.parentElement.remove();\n }\n }\n\n private adjustMarkup(section: HTMLDivElement) {\n const wrappers: HTMLDivElement[] = [];\n let defaultContent = false;\n [...section.children].forEach((e) => {\n if (e.tagName === 'DIV' || !defaultContent) {\n const wrapper = document.createElement('div');\n wrappers.push(wrapper);\n defaultContent = e.tagName !== 'DIV';\n if (defaultContent) wrapper.classList.add('default-content-wrapper');\n }\n wrappers[wrappers.length - 1].append(e);\n });\n wrappers.forEach((wrapper) => section.append(wrapper));\n section.classList.add('section');\n section.dataset.sectionStatus = 'initialized';\n section.style.display = 'none';\n }\n}\n\nclass Main {\n constructor(\n private sectionService: SectionService,\n private blockService: BlockService\n ) {}\n\n init = async () => {\n this.setup();\n await this.loadEager();\n };\n\n /**\n * Setup block utils.\n */\n private setup() {\n window.hlx = window.hlx || {};\n window.hlx.RUM_MASK_URL = 'full';\n window.hlx.codeBasePath = '';\n window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on';\n this.registerCustomElements();\n\n const scriptEl = document.querySelector('script[src$=\"/scripts/scripts.js\"]') as HTMLScriptElement;\n if (scriptEl) {\n try {\n [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log(error);\n }\n }\n }\n\n private registerCustomElements = () => {\n customElements.define('icon-component', Icon);\n };\n\n private loadEager = async () => {\n // TODO: how to support different languages here\n document.documentElement.lang = 'en';\n this.decorateTemplateAndTheme();\n if (document) {\n const body = document.querySelector('body');\n if (body) {\n body.style.display = 'none';\n }\n }\n const main = document.querySelector('main');\n if (main) {\n main.setAttribute('id', 'main');\n this.addSidebarContainer(main);\n this.sectionService.init(main);\n this.addInnerContainer(main); // TODO refactor initializing\n this.blockService.decorateBlocks(main);\n await this.loadComponents();\n // TODO: Performace adjustment\n setTimeout(() => {\n document.body.removeAttribute('style');\n }, 200);\n\n // await this.waitForLCP(LCP_BLOCKS);\n }\n };\n\n private addSidebarContainer(main: HTMLElement) {\n const sidebarContainer = document.createElement('div');\n sidebarContainer.classList.add('sidebar');\n sidebarContainer.setAttribute('id', 'sidebar');\n main.after(sidebarContainer);\n }\n\n private addInnerContainer(main: HTMLElement) {\n const children = main.innerHTML;\n main.innerHTML = `
${children}
`;\n }\n\n // private loadLazy = async () => {};\n\n private decorateTemplateAndTheme() {\n const template = getMetadata('template');\n if (template) addClasses(document.body, template);\n const theme = getMetadata('theme');\n if (theme) addClasses(document.body, theme);\n }\n\n private loadComponents = async () => {\n const sections = document.querySelectorAll('.section');\n sections.forEach((section) => {\n const components: ComponentMapping[] = [];\n const blocks = section.querySelectorAll('[data-block-name]');\n if (!blocks.length) {\n section.style.removeProperty('display');\n return;\n }\n blocks.forEach((block: HTMLDivElement) => {\n block.style.display = 'none';\n components.push({\n name: block.dataset['blockName'] as string,\n element: block,\n });\n });\n if (components.length) {\n components.forEach(async (component) => {\n const componentModule = await import(\n `${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js`\n );\n if (componentModule.default) {\n await componentModule.default(component.element);\n }\n });\n }\n section.style.removeProperty('display');\n });\n };\n}\n\n(async function () {\n const blockService = new BlockService();\n const sectionService = new SectionService(blockService);\n const main = new Main(sectionService, blockService);\n await main.init();\n})();\n\n// /**\n// * Loads JS and CSS for a block.\n// * @param {Element} block The block element\n// */\n// async function loadBlock(block) {\n// const status = block.dataset.blockStatus;\n// if (status !== 'loading' && status !== 'loaded') {\n// block.dataset.blockStatus = 'loading';\n// const { blockName } = block.dataset;\n// try {\n// const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);\n// const decorationComplete = new Promise((resolve) => {\n// (async () => {\n// try {\n// const mod = await import(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`);\n// if (mod.default) {\n// await mod.default(block);\n// }\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load module for ${blockName}`, error);\n// }\n// resolve();\n// })();\n// });\n// await Promise.all([cssLoaded, decorationComplete]);\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load block ${blockName}`, error);\n// }\n// block.dataset.blockStatus = 'loaded';\n// }\n// return block;\n// }\n\ndeclare global {\n interface Window {\n hlx: {\n RUM_MASK_URL: string;\n codeBasePath: string;\n lighthouse: boolean;\n };\n }\n}\n"],"file":"main/main.js"} \ No newline at end of file diff --git a/dist/posts/posts.js b/dist/posts/posts.js index 7065ccb1..fe13dfef 100644 --- a/dist/posts/posts.js +++ b/dist/posts/posts.js @@ -1,2 +1,2 @@ -import{j as d,x as h}from"../__chunks__/lit-element.XkUWx5ik.js";function w(i){const{src:n,alt:l,eager:r=!1,breakpoints:m=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]}=i,p=new URL(n,window.location.href),c=document.createElement("picture"),{pathname:e}=p,a=e.substring(e.lastIndexOf(".")+1);return m.forEach(t=>{const o=document.createElement("source");t.media&&o.setAttribute("media",t.media),o.setAttribute("type","image/webp"),o.setAttribute("srcset",`${e}?width=${t.width}&format=webply&optimize=medium`),c.appendChild(o)}),m.forEach((t,o)=>{if(o{const{postUrl:n,headline:l,text:r,picture:m}=i;return h`
${m}

${l}

${r==null?void 0:r.slice(0,200)}

`},$=i=>i.map(n=>f(n));async function x(i){i.innerHTML="";const l=await(await fetch(`${window.hlx.codeBasePath}/query-index.json`)).json();console.log("response: ",l);const r=l.data.filter(e=>e.path.includes("/posts")).map(e=>e),c=(await Promise.all(r.map(async e=>(await fetch(`${window.hlx.codeBasePath}${e.path}.plain.html`)).text()))).map(e=>{var a=new DOMParser;return a.parseFromString(e,"text/html")}).map((e,a)=>{var t,o,s,u;return{postUrl:`${window.hlx.codeBasePath}${r[a].path}`,headline:((t=e.querySelector("h1"))==null?void 0:t.innerText)||((o=e.querySelector("h2"))==null?void 0:o.innerText),text:(u=(s=e.querySelector("p"))==null?void 0:s.innerText)==null?void 0:u.trim(),picture:w({src:r[a].image,alt:r[a].imagealt})}});console.log("posts: ",c),i.style.removeProperty("display"),d($(c),i)}export{x as default}; +import{j as d,x as h}from"../__chunks__/lit-element.XkUWx5ik.js";function w(a){const{src:o,alt:m,eager:i=!1,breakpoints:c=[{media:"(min-width: 600px)",width:"2000"},{width:"750"}]}=a,p=new URL(o,window.location.href),l=document.createElement("picture"),{pathname:e}=p,s=e.substring(e.lastIndexOf(".")+1);return c.forEach(t=>{const n=document.createElement("source");t.media&&n.setAttribute("media",t.media),n.setAttribute("type","image/webp"),n.setAttribute("srcset",`${e}?width=${t.width}&format=webply&optimize=medium`),l.appendChild(n)}),c.forEach((t,n)=>{if(n{const{postUrl:o,headline:m,text:i,picture:c}=a;return h`
${c}

${m}

${i==null?void 0:i.slice(0,200)}

`},$=a=>a.map(o=>f(o));async function x(a){a.innerHTML="";const i=(await(await fetch(`${window.hlx.codeBasePath}/query-index.json`)).json()).data.filter(e=>e.path.includes("/posts")).map(e=>e),l=(await Promise.all(i.map(async e=>(await fetch(`${window.hlx.codeBasePath}${e.path}.plain.html`)).text()))).map(e=>{var s=new DOMParser;return s.parseFromString(e,"text/html")}).map((e,s)=>{var t,n,r,u;return{postUrl:`${window.hlx.codeBasePath}${i[s].path}`,headline:((t=e.querySelector("h1"))==null?void 0:t.innerText)||((n=e.querySelector("h2"))==null?void 0:n.innerText),text:(u=(r=e.querySelector("p"))==null?void 0:r.innerText)==null?void 0:u.trim(),picture:w({src:i[s].image,alt:i[s].imagealt})}});a.style.removeProperty("display"),d($(l),a)}export{x as default}; //# sourceMappingURL=posts.js.map diff --git a/dist/posts/posts.js.map b/dist/posts/posts.js.map index 2c214636..1c2ba52e 100644 --- a/dist/posts/posts.js.map +++ b/dist/posts/posts.js.map @@ -1 +1 @@ -{"version":3,"file":"posts.js","sources":["../../src/utils/createOptimizedPicture.ts","../../src/blocks/posts/posts.ts"],"sourcesContent":["/**\n * Returns a picture element with webp and fallbacks\n * @param {string} src The image URL\n * @param {string} [alt] The image alternative text\n * @param {boolean} [eager] Set loading attribute to eager\n * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width)\n * @returns {Element} The picture element\n */\n\ninterface CreateOptimizedPictureArgs {\n src: string;\n alt: string;\n eager?: boolean;\n breakpoints?: Array>;\n}\n\nexport function createOptimizedPicture(args: CreateOptimizedPictureArgs): HTMLPictureElement {\n const {\n src,\n alt,\n eager = false,\n breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],\n } = args;\n const url = new URL(src, window.location.href);\n const picture = document.createElement('picture');\n const { pathname } = url;\n const ext = pathname.substring(pathname.lastIndexOf('.') + 1);\n\n // webp\n breakpoints.forEach((br) => {\n const source = document.createElement('source');\n if (br.media) source.setAttribute('media', br.media);\n source.setAttribute('type', 'image/webp');\n source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);\n picture.appendChild(source);\n });\n\n // fallback\n breakpoints.forEach((br, i) => {\n if (i < breakpoints.length - 1) {\n const source = document.createElement('source');\n if (br.media) source.setAttribute('media', br.media);\n source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);\n picture.appendChild(source);\n } else {\n const img = document.createElement('img');\n img.setAttribute('loading', eager ? 'eager' : 'lazy');\n img.setAttribute('alt', alt);\n picture.appendChild(img);\n img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);\n }\n });\n\n return picture;\n}\n","import { html, render } from 'lit';\nimport { createOptimizedPicture } from '../../utils/createOptimizedPicture';\n\ninterface PostArgs {\n postUrl: string;\n headline?: string;\n text?: string;\n picture: HTMLPictureElement;\n}\n\nconst postTemplate = (args: PostArgs) => {\n const { postUrl, headline, text, picture } = args;\n return html`\n \n `;\n};\n\nconst template = (posts: PostArgs[]) => {\n return posts.map((post) => postTemplate(post));\n};\n\nexport default async function (block: HTMLElement) {\n block.innerHTML = '';\n\n const req = await fetch(`${window.hlx.codeBasePath}/query-index.json`);\n const response = await req.json();\n console.log('response: ', response);\n const data = response.data\n .filter((item) => {\n return item.path.includes('/posts');\n })\n .map((item) => item);\n\n const postsPreview = await Promise.all(\n data.map(async (post) => {\n const result = await fetch(`${window.hlx.codeBasePath}${post.path}.plain.html`);\n return result.text();\n })\n );\n\n const postsPreviewHtml = postsPreview.map((res) => {\n var parser = new DOMParser();\n return parser.parseFromString(res, 'text/html');\n });\n\n const posts = postsPreviewHtml.map((doc, index) => {\n return {\n postUrl: `${window.hlx.codeBasePath}${data[index].path}`,\n headline: doc.querySelector('h1')?.innerText || doc.querySelector('h2')?.innerText,\n text: doc.querySelector('p')?.innerText?.trim(),\n picture: createOptimizedPicture({ src: data[index].image, alt: data[index].imagealt }),\n };\n });\n console.log('posts: ', posts);\n\n block.style.removeProperty('display');\n render(template(posts), block);\n}\n"],"names":["createOptimizedPicture","args","src","alt","eager","breakpoints","url","picture","pathname","ext","br","source","i","img","postTemplate","postUrl","headline","text","html","template","posts","post","block","response","data","item","res","parser","doc","index","_a","_b","_d","_c","render"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"posts.js","sources":["../../src/utils/createOptimizedPicture.ts","../../src/blocks/posts/posts.ts"],"sourcesContent":["/**\n * Returns a picture element with webp and fallbacks\n * @param {string} src The image URL\n * @param {string} [alt] The image alternative text\n * @param {boolean} [eager] Set loading attribute to eager\n * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width)\n * @returns {Element} The picture element\n */\n\ninterface CreateOptimizedPictureArgs {\n src: string;\n alt: string;\n eager?: boolean;\n breakpoints?: Array>;\n}\n\nexport function createOptimizedPicture(args: CreateOptimizedPictureArgs): HTMLPictureElement {\n const {\n src,\n alt,\n eager = false,\n breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],\n } = args;\n const url = new URL(src, window.location.href);\n const picture = document.createElement('picture');\n const { pathname } = url;\n const ext = pathname.substring(pathname.lastIndexOf('.') + 1);\n\n // webp\n breakpoints.forEach((br) => {\n const source = document.createElement('source');\n if (br.media) source.setAttribute('media', br.media);\n source.setAttribute('type', 'image/webp');\n source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);\n picture.appendChild(source);\n });\n\n // fallback\n breakpoints.forEach((br, i) => {\n if (i < breakpoints.length - 1) {\n const source = document.createElement('source');\n if (br.media) source.setAttribute('media', br.media);\n source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);\n picture.appendChild(source);\n } else {\n const img = document.createElement('img');\n img.setAttribute('loading', eager ? 'eager' : 'lazy');\n img.setAttribute('alt', alt);\n picture.appendChild(img);\n img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);\n }\n });\n\n return picture;\n}\n","import { html, render } from 'lit';\nimport { createOptimizedPicture } from '../../utils/createOptimizedPicture';\n\ninterface PostArgs {\n postUrl: string;\n headline?: string;\n text?: string;\n picture: HTMLPictureElement;\n}\n\nconst postTemplate = (args: PostArgs) => {\n const { postUrl, headline, text, picture } = args;\n return html`\n \n `;\n};\n\nconst template = (posts: PostArgs[]) => {\n return posts.map((post) => postTemplate(post));\n};\n\nexport default async function (block: HTMLElement) {\n block.innerHTML = '';\n\n const req = await fetch(`${window.hlx.codeBasePath}/query-index.json`);\n const response = await req.json();\n\n const data = response.data\n .filter((item) => {\n return item.path.includes('/posts');\n })\n .map((item) => item);\n\n const postsPreview = await Promise.all(\n data.map(async (post) => {\n const result = await fetch(`${window.hlx.codeBasePath}${post.path}.plain.html`);\n return result.text();\n })\n );\n\n const postsPreviewHtml = postsPreview.map((res) => {\n var parser = new DOMParser();\n return parser.parseFromString(res, 'text/html');\n });\n\n const posts = postsPreviewHtml.map((doc, index) => {\n return {\n postUrl: `${window.hlx.codeBasePath}${data[index].path}`,\n headline: doc.querySelector('h1')?.innerText || doc.querySelector('h2')?.innerText,\n text: doc.querySelector('p')?.innerText?.trim(),\n picture: createOptimizedPicture({ src: data[index].image, alt: data[index].imagealt }),\n };\n });\n\n block.style.removeProperty('display');\n render(template(posts), block);\n}\n"],"names":["createOptimizedPicture","args","src","alt","eager","breakpoints","url","picture","pathname","ext","br","source","i","img","postTemplate","postUrl","headline","text","html","template","posts","post","block","data","item","res","parser","doc","index","_a","_b","_d","_c","render"],"mappings":"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"} \ No newline at end of file diff --git a/public/icons/README.md b/public/icons/README.md new file mode 100644 index 00000000..1384f6a0 --- /dev/null +++ b/public/icons/README.md @@ -0,0 +1,3 @@ +# Icons + +Icons from [Flaticon](https://www.flaticon.com/icon-fonts-most-downloaded?weight=regular&type=uicon). \ No newline at end of file diff --git a/public/icons/angle-down.svg b/public/icons/angle-down.svg new file mode 100644 index 00000000..fefe17a4 --- /dev/null +++ b/public/icons/angle-down.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-left.svg b/public/icons/angle-left.svg new file mode 100644 index 00000000..ef8746a7 --- /dev/null +++ b/public/icons/angle-left.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-right.svg b/public/icons/angle-right.svg new file mode 100644 index 00000000..936b34d6 --- /dev/null +++ b/public/icons/angle-right.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-small-down.svg b/public/icons/angle-small-down.svg new file mode 100644 index 00000000..0c84cff6 --- /dev/null +++ b/public/icons/angle-small-down.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-small-left.svg b/public/icons/angle-small-left.svg new file mode 100644 index 00000000..99fbf673 --- /dev/null +++ b/public/icons/angle-small-left.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-small-right.svg b/public/icons/angle-small-right.svg new file mode 100644 index 00000000..7458533d --- /dev/null +++ b/public/icons/angle-small-right.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/angle-up.svg b/public/icons/angle-up.svg new file mode 100644 index 00000000..bb485d10 --- /dev/null +++ b/public/icons/angle-up.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/bolt.svg b/public/icons/bolt.svg new file mode 100644 index 00000000..4d843e80 --- /dev/null +++ b/public/icons/bolt.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/check.svg b/public/icons/check.svg new file mode 100644 index 00000000..f322b2bf --- /dev/null +++ b/public/icons/check.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/clip.svg b/public/icons/clip.svg new file mode 100644 index 00000000..f75460d2 --- /dev/null +++ b/public/icons/clip.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/clock.svg b/public/icons/clock.svg new file mode 100644 index 00000000..5f17cdbe --- /dev/null +++ b/public/icons/clock.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/cross.svg b/public/icons/cross.svg new file mode 100644 index 00000000..8b905b00 --- /dev/null +++ b/public/icons/cross.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/download.svg b/public/icons/download.svg new file mode 100644 index 00000000..455f99d2 --- /dev/null +++ b/public/icons/download.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/envelope.svg b/public/icons/envelope.svg new file mode 100644 index 00000000..b99529cc --- /dev/null +++ b/public/icons/envelope.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/eye-crossed.svg b/public/icons/eye-crossed.svg new file mode 100644 index 00000000..8247d9fe --- /dev/null +++ b/public/icons/eye-crossed.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/eye.svg b/public/icons/eye.svg new file mode 100644 index 00000000..a151c61f --- /dev/null +++ b/public/icons/eye.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/globe.svg b/public/icons/globe.svg new file mode 100644 index 00000000..7ab30de8 --- /dev/null +++ b/public/icons/globe.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/heart.svg b/public/icons/heart.svg new file mode 100644 index 00000000..5562a9ea --- /dev/null +++ b/public/icons/heart.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/home.svg b/public/icons/home.svg new file mode 100644 index 00000000..5ab3d48c --- /dev/null +++ b/public/icons/home.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/menu-burger.svg b/public/icons/menu-burger.svg new file mode 100644 index 00000000..a571bafe --- /dev/null +++ b/public/icons/menu-burger.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/paper-plane.svg b/public/icons/paper-plane.svg new file mode 100644 index 00000000..ae798a4e --- /dev/null +++ b/public/icons/paper-plane.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/plus.svg b/public/icons/plus.svg new file mode 100644 index 00000000..1c87eae8 --- /dev/null +++ b/public/icons/plus.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/rocket-lunch.svg b/public/icons/rocket-lunch.svg new file mode 100644 index 00000000..f4a090a7 --- /dev/null +++ b/public/icons/rocket-lunch.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/search.svg b/public/icons/search.svg new file mode 100644 index 00000000..0c9648b3 --- /dev/null +++ b/public/icons/search.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/share.svg b/public/icons/share.svg new file mode 100644 index 00000000..fcd28f5b --- /dev/null +++ b/public/icons/share.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/social-network.svg b/public/icons/social-network.svg new file mode 100644 index 00000000..8bb26207 --- /dev/null +++ b/public/icons/social-network.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/trash.svg b/public/icons/trash.svg new file mode 100644 index 00000000..d6a7d41d --- /dev/null +++ b/public/icons/trash.svg @@ -0,0 +1,2 @@ + + diff --git a/public/icons/user.svg b/public/icons/user.svg new file mode 100644 index 00000000..4d69d08a --- /dev/null +++ b/public/icons/user.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/blocks/features/features.ts b/src/blocks/features/features.ts index 6d72100a..1feb6d5a 100644 --- a/src/blocks/features/features.ts +++ b/src/blocks/features/features.ts @@ -13,7 +13,7 @@ const template = (features: TemplateArgs) => { ${features.map( (feature) => html`
- ${feature.icon} +
${unsafeHTML(feature.textBlock)}
` diff --git a/src/blocks/posts/posts.ts b/src/blocks/posts/posts.ts index b5f36d89..4366d14d 100644 --- a/src/blocks/posts/posts.ts +++ b/src/blocks/posts/posts.ts @@ -31,7 +31,7 @@ export default async function (block: HTMLElement) { const req = await fetch(`${window.hlx.codeBasePath}/query-index.json`); const response = await req.json(); - console.log('response: ', response); + const data = response.data .filter((item) => { return item.path.includes('/posts'); @@ -58,7 +58,6 @@ export default async function (block: HTMLElement) { picture: createOptimizedPicture({ src: data[index].image, alt: data[index].imagealt }), }; }); - console.log('posts: ', posts); block.style.removeProperty('display'); render(template(posts), block); diff --git a/src/components/icon.ts b/src/components/icon.ts new file mode 100644 index 00000000..dd4aee3c --- /dev/null +++ b/src/components/icon.ts @@ -0,0 +1,32 @@ +export class Icon extends HTMLElement { + shadowRoot; + + constructor() { + super(); + this.shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' }); + } + + get name() { + const srcValue = this.getAttribute('name'); + if (!srcValue) { + throw new Error('Icon must have a name attribute'); + } + return srcValue; + } + + connectedCallback() { + console.log('RENDER ICON'); + this.render(); + } + + async render() { + const svg = await this.fetchIcon(); + this.shadowRoot.innerHTML = `${svg}`; + } + + async fetchIcon() { + const response = await fetch(`${window.hlx.codeBasePath}/icons/${this.name}.svg`); + const textResponse = await response.text(); + return textResponse; + } +} diff --git a/src/main.ts b/src/main.ts index eda0e3b8..4c950ab2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import { addClasses } from '../src/utils/addClasses'; import { getMetadata } from '../src/utils/getMetadata'; import { toCamelCase } from '../src/utils/toCamelCase'; import { toClassName } from '../src/utils/toClassName'; +import { Icon } from './components/icon'; type ComponentMapping = { name: string; @@ -155,6 +156,7 @@ class Main { window.hlx.RUM_MASK_URL = 'full'; window.hlx.codeBasePath = ''; window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; + this.registerCustomElements(); const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]') as HTMLScriptElement; if (scriptEl) { @@ -167,6 +169,10 @@ class Main { } } + private registerCustomElements = () => { + customElements.define('icon-component', Icon); + }; + private loadEager = async () => { // TODO: how to support different languages here document.documentElement.lang = 'en'; diff --git a/types/components/icon.d.ts b/types/components/icon.d.ts new file mode 100644 index 00000000..af55daee --- /dev/null +++ b/types/components/icon.d.ts @@ -0,0 +1,8 @@ +export declare class Icon extends HTMLElement { + shadowRoot: any; + constructor(); + get name(): string; + connectedCallback(): void; + render(): Promise; + fetchIcon(): Promise; +}