@gudhub/ssg-web-components-library 1.0.101 → 1.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.101",
+  "version": "1.0.103",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/image-component/image-component.js

@@ -44,7 +44,10 @@ class ImageComponent extends GHComponent {
         const getAppAndFileIds = (url) => {
             if (!url) return;
 
-            const cleanUrl = url.split('?')[0].replace(/\/+$/, ''); // remove query & trailing slash
+            const cleanUrl = decodeURIComponent(url)
+                .split('?')[0]
+                .replace(/\/+$/, ''); // remove query & trailing slash
+
             const parts = cleanUrl.split('/');
 
             const appId = parts[parts.length - 2];
@@ -75,16 +78,13 @@ class ImageComponent extends GHComponent {
                 }
             }
 
-            const normalizeUrlPath = (value) =>
-                value ? value.trim().replace(/\s+/g, '-') : value;
-
-            this.generatedImageSrc = normalizeUrlPath(relativeImagePath);
+            this.generatedImageSrc = this.normalizeUrlPath(relativeImagePath);
 
             // Download image from GudHub (this.dataUrl) to cache (this.generatedImageSrc)
             if (window?.imagesRegeneration) {
                 if (this.generatedImageSrc && this.dataUrl) {
                     try {
-                        await fetch(`${this.generatedImageSrc}?source=${normalizeUrlPath(this.dataUrl)}&mode=ssr`);
+                        await fetch(`${this.generatedImageSrc}?source=${encodeURIComponent(this.dataUrl)}&mode=ssr`);
                         this.src = this.generatedImageSrc;
                     } catch (error) {
                         console.error('Failed to fetch generatedImageSrc:', error);
@@ -177,7 +177,7 @@ class ImageComponent extends GHComponent {
         const fallbackSrc = this.getAttribute('src');
         const dataMaxWidth = parseInt(this.getAttribute('data-max-width'), 10);
     
-        const src = dataSrc && dataUrl ? dataSrc : fallbackSrc;
+        const src = this.normalizeUrlPath(dataSrc && dataUrl ? dataSrc : fallbackSrc);
         if (!src) {
             console.warn('No valid image source found.');
             return;
@@ -242,6 +242,20 @@ class ImageComponent extends GHComponent {
         source.setAttribute('type', type);
         return source;
     }
+
+    normalizeUrlPath = (value) => {
+        if (!value) return value;
+
+        return value
+            .normalize('NFD')                    // separate diacritics
+            .replace(/[\u0300-\u036f]/g, '')     // remove diacritics
+            .replace(/[()]/g, '')                // remove brackets
+            .replace(/[^a-zA-Z0-9/._-]+/g, '-')  // replace special chars with -
+            .replace(/-+/g, '-')                 // collapse multiple -
+            .replace(/\/-+/g, '/')               // avoid "/-"
+            .replace(/^-|-$/g, '')               // trim -
+            .toLowerCase();
+    };
 }
 
 if (!window.customElements.get('image-component')) {

package/src/components/meta/meta-tag.js

@@ -99,18 +99,16 @@ class MetaTag extends GHComponent {
         // fieldId = fieldId.field_id;
         // value = item.fields.find(findedField => findedField.field_id == fieldId).field_value;
 
-
         let titleValue = item.fields.find(findedField => findedField.field_id == titleId).field_value;
         let descriptionValue = item.fields.find(findedField => findedField.field_id == descriptionId).field_value;
         let slugValue = item.fields.find(findedField => findedField.field_id == slugId).field_value;
-        let imageValue = !slugValue.includes('/blog/') ? item.fields.find(findedField => findedField.field_id == imageUrl).field_value : false;
+        let imageValue = (!slugValue.includes('/blog/') && !slugValue.includes('/service-areas/')) ? item.fields.find(findedField => findedField.field_id == imageUrl).field_value : false;
 
         // value = isNaN(value) ? value : await this.getContent(`https://gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${value}.html`);
         titleValue = isNaN(titleValue) ? titleValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${titleValue}.html`);
         descriptionValue = isNaN(descriptionValue) ? descriptionValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${descriptionValue}.html`);
         slugValue = isNaN(slugValue) ? slugValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${slugValue}.html`);
-        imageValue = !slugValue.includes('/blog/') ? isNaN(imageValue) ? imageValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig() .chapters[chapter].app_id}/${imageValue}.html`) : false;
-
+        imageValue = (!slugValue.includes('/blog/') && !slugValue.includes('/service-areas/')) ? isNaN(imageValue) ? imageValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig() .chapters[chapter].app_id}/${imageValue}.html`) : false;
         
         //TITLE
         if ( !document.querySelector('title') ) {
@@ -142,7 +140,7 @@ class MetaTag extends GHComponent {
         }
         
 
-        if (!slugValue.includes('/blog/')) {
+        if ((!slugValue.includes('/blog/') && !slugValue.includes('/service-areas/'))) {
             if ( !document.querySelector('[name="twitter:image"]') ) {
                 const twitterMetaSiteImage = document.createElement('meta');
                 twitterMetaSiteImage.setAttribute('name', 'twitter:image');