@griddo/cx 1.67.6 → 1.67.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/cx",
   "description": "Griddo SSG based on Gatsby",
-  "version": "1.67.6",
+  "version": "1.67.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -64,7 +64,7 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
-    "@griddo/eslint-config-back": "^1.67.6",
+    "@griddo/eslint-config-back": "^1.67.9",
     "eslint": "^7.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -96,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2269a483e2cf3876f692331469b2402af3bb0e48"
+  "gitHead": "5532ae88c11fc5cc89e7bd78f56269e8ca9c710b"
 }

package/src/components/seo.js

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import parse from 'html-react-parser';
-
-const cleanCommaSeparated = x =>
-  x
-    .split(',')
-    .map(item => item.trim())
-    .filter(item => !!item)
-    .join(',');
+import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
 
 export default function SEO(props) {
   const {
@@ -36,6 +30,8 @@ export default function SEO(props) {
   const showMetaRobots =
     showBasicMetaRobots || metaRobots !== 'index,follow,translate';
 
+  const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
+
   const analyticsSrc =
     (analyticsScript &&
       analyticsScript.startsWith('UA-') &&
@@ -44,7 +40,9 @@ export default function SEO(props) {
   const analyticsCode =
     analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
       ? parse(analyticsScript)
-      : { props: { dangerouslySetInnerHTML: {} } };
+      : emptyCodeScript;
+
+  const fixedAnalyticsCode = Array.isArray(analyticsCode) ? analyticsCode.find(item => item.type === 'script') || emptyCodeScript : analyticsCode;
 
   const {
     props: {
@@ -53,7 +51,12 @@ export default function SEO(props) {
       children: analyticsScriptChildren,
       ...analyticsScriptProps
     },
-  } = analyticsCode;
+  } = fixedAnalyticsCode;
+
+  // Resize favicon
+  // If favicon is a Griddo DAM url, returns a griddo image url with params,
+  // else (Cloudinary or unkonwn) returns the original favicon url.
+  const faviconResized = addGriddoDamParams(favicon, 'f/png/w/32/h/32');
 
   return (
     <>
@@ -61,7 +64,7 @@ export default function SEO(props) {
         <meta name="description" content={description} />
         <meta name="title" content={title} />
         {canonical && <link rel="canonical" href={canonical} />}
-        <link rel="icon" href={favicon} />
+        <link rel="icon" href={faviconResized} />
 
         {/* Alternate */}
         {pageLanguages?.length > 1 &&
@@ -108,9 +111,9 @@ export default function SEO(props) {
 
         {/* Data Layer */}
         {/* Solo cuando se ejecuta en el navegador */}
-        {
-          typeof (window) !== 'undefined' && <script>{`const newDataLayer = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
-        }
+        {typeof window !== 'undefined' && analyticsDimensions && (
+          <script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
+        )}
       </Helmet>
     </>
   );

package/src/components/template.js

@@ -32,11 +32,6 @@ export default data => {
     sitePages,
   } = data.pageContext;
 
-  const { analyticsScript, analyticsDimensions } = composeAnalytics(
-    data,
-    generateAutomaticDimensions
-  );
-
   const library = {
     components,
     templates,
@@ -44,6 +39,11 @@ export default data => {
 
   const mappedTheme = theme || 'default-theme';
 
+  const { analyticsScript, analyticsDimensions } = composeAnalytics(
+    data,
+    generateAutomaticDimensions
+  );
+
   if (!content.dimensions) content.dimensions = [];
   content.dimensions.values = analyticsDimensions;
 

package/src/services/navigation.js

@@ -15,13 +15,13 @@ class NavigationService {
   get navigations() {
     return this._navigations
   }
- 
+
   getDefaultFooters() {
     const safeFooters = [...this.navigations.footers];
     const defaultFooters = safeFooters.filter(footer => !!footer.setAsDefault);
     const defaultFootersByLang = defaultFooters.reduce((prev, footer) => {
       const { language } = footer;
-      return {...prev, [language]: footer };
+      return { ...prev, [language]: footer };
     }, {});
     return defaultFootersByLang;
   }
@@ -31,7 +31,7 @@ class NavigationService {
     const defaultHeaders = safeHeaders.filter(header => !!header.setAsDefault);
     const defaultHeadersByLang = defaultHeaders.reduce((prev, header) => {
       const { language } = header;
-      return {...prev, [language]: header };
+      return { ...prev, [language]: header };
     }, {});
     return defaultHeadersByLang;
   }
@@ -48,10 +48,10 @@ class NavigationService {
     return pageFooter;
   }
 
-  getPageNavigations (page) {
-    const { header: headerID, footer: footerID, language } = page;
-    const header = !!headerID ? this.getPageHeader(headerID): this._defaultHeaders[language];
-    const footer = !!footerID ? this.getPageFooter(footerID): this._defaultFooters[language];
+  getPageNavigations(page) {
+    const { header: headerID, footer: footerID, language } = page;
+    const header = headerID ? this.getPageHeader(headerID) : (headerID === 0 ? null : this._defaultHeaders[language]);
+    const footer = footerID ? this.getPageFooter(footerID) : (footerID === 0 ? null : this._defaultFooters[language]);
 
     return {
       header,

package/src/utils/helpers.js

@@ -9,11 +9,9 @@ const log = (state, message, data) => {
   LOGS !== false &&
     state !== 'error' &&
     console.log(
-      `${chalk[color[state]](msg[state])} ${message} ${data ? JSON.stringify(
-        data,
-        null,
-        2
-      ) : ''}`
+      `${chalk[color[state]](msg[state])} ${message} ${
+        data ? JSON.stringify(data, null, 2) : ''
+      }`
     );
 };
 
@@ -23,10 +21,10 @@ const addCloudinaryParams = (socialImage, params) => {
   const plainUrl = socialImage.url.replace('https://', '');
   const head = plainUrl.split('/').slice(0, 4).join('/');
   const fullId = plainUrl.replace(head, '');
-  return `https://${head}/${params}${fullId}`;;
+  return `https://${head}/${params}${fullId}`;
 };
 
-const getPageMetaData = (params) => {
+const getPageMetaData = params => {
   const {
     title,
     metaTitle,
@@ -39,13 +37,18 @@ const getPageMetaData = (params) => {
     metasAdvanced,
     pageLanguages,
     fullUrl,
-    noTranslate
+    noTranslate,
   } = params;
 
   return {
     title: metaTitle || title,
     description: metaDescription,
-    canonical: (canonicalURL && canonicalURL !== fullUrl) ? canonicalURL : (isIndexed ? fullUrl : null),
+    canonical:
+      canonicalURL && canonicalURL !== fullUrl
+        ? canonicalURL
+        : isIndexed
+        ? fullUrl
+        : null,
     locale,
     url,
     index: isIndexed ? 'index' : 'noindex',
@@ -66,32 +69,54 @@ const getOpenGraph = ({
   title: socialTitle || title,
   description: socialDescription,
   image: addCloudinaryParams(socialImage, 'c_fill,w_1024,h_512'),
-  twitterImage: addCloudinaryParams(socialImage, 'c_fill,w_1024,h_512')
+  twitterImage: addCloudinaryParams(socialImage, 'c_fill,w_1024,h_512'),
 });
 
-const getMultiPageElements = (distributorTemplate) => new Promise((resolve) => {
-  const getMultiPageComponent = (template, level = 0) => {
-    if (!template || typeof (template) !== 'object') return;
-    for (let key in template) {
-      const currentComponent = template[key];
-      if (!currentComponent || typeof (currentComponent) !== 'object') continue;
-      if (!JSON.stringify(currentComponent).includes('"hasGriddoMultiPage":true')) continue;
-      const {
-        component,
-        hasGriddoMultiPage,
-        elements,
-      } = currentComponent;
-      if (component && hasGriddoMultiPage) {
-        resolve(elements || []);
+const getMultiPageElements = distributorTemplate =>
+  new Promise(resolve => {
+    const getMultiPageComponent = (template, level = 0) => {
+      if (!template || typeof template !== 'object') return;
+      for (let key in template) {
+        const currentComponent = template[key];
+        if (!currentComponent || typeof currentComponent !== 'object') continue;
+        if (
+          !JSON.stringify(currentComponent).includes(
+            '"hasGriddoMultiPage":true'
+          )
+        )
+          continue;
+        const { component, hasGriddoMultiPage, elements } = currentComponent;
+        if (component && hasGriddoMultiPage) {
+          resolve(elements || []);
+        }
+        getMultiPageComponent(currentComponent, level + 1);
       }
-      getMultiPageComponent(currentComponent, level + 1);
-    }
-    if (!level) resolve(null);
-  };
-  getMultiPageComponent([distributorTemplate]);
-});
+      if (!level) resolve(null);
+    };
+    getMultiPageComponent([distributorTemplate]);
+  });
+
+const cleanCommaSeparated = x =>
+  x
+    .split(',')
+    .map(item => item.trim())
+    .filter(item => !!item)
+    .join(',');
+
+const isGriddoDamImage = url => !url?.includes('/res.cloudinary.com');
+
+const addGriddoDamParams = (url, params) => {
+  if (!url) return url;
+  if (!isGriddoDamImage(url)) return url;
+  // eslint-disable-next-line no-unused-vars
+  const [_, id] = url.split('//')[1].split('/');
+  const head = url.split(id)[0];
+  return `${head}${params}/${id}`;
+};
 
 exports.getOpenGraph = getOpenGraph;
 exports.getPageMetaData = getPageMetaData;
 exports.log = log;
-exports.getMultiPageElements = getMultiPageElements;
+exports.getMultiPageElements = getMultiPageElements;
+exports.cleanCommaSeparated = cleanCommaSeparated;
+exports.addGriddoDamParams = addGriddoDamParams;