@griddo/cx 1.75.22 → 1.75.26

package/gatsby-node.js

@@ -50,7 +50,7 @@ exports.onCreateWebpackConfig = ({ actions, plugins, loaders, getConfig }) => {
         test: /\.jsx?$/,
         // Exclude all node_modules from transpilation, except for '@griddo/cx'
         exclude: modulePath =>
-          /node_modules/.test(modulePath) && !/\@griddo\/cx/.test(modulePath),
+          /node_modules/.test(modulePath) && !/@griddo\/cx/.test(modulePath),
       },
     ];
     actions.replaceWebpackConfig(config);
@@ -190,7 +190,7 @@ exports.createPages = async ({ actions }) => {
       // Template data with the distributor data added.
       const distributorTemplate = await DistributorService.getDistributorData(
         page,
-        renderId,
+        renderId
       );
 
       additionalInfo.navigations = NavService.getPageNavigations(page);
@@ -204,27 +204,27 @@ exports.createPages = async ({ actions }) => {
       // Multi-page (pagination) or single-page
       isList
         ? await utils.renderListPages(
-          {
-            rootPage: page,
-            pages: utils.getList(distributorTemplate),
-            isRoot: false,
-            defaultLang,
-            distributorTemplate,
-          },
-          additionalInfo,
-          actions.createPage
-        )
+            {
+              rootPage: page,
+              pages: utils.getList(distributorTemplate),
+              isRoot: false,
+              defaultLang,
+              distributorTemplate,
+            },
+            additionalInfo,
+            actions.createPage
+          )
         : await utils.renderPage(
-          {
-            ...page,
-            template: distributorTemplate,
-            isRoot: false,
-            defaultLang,
-            multiPageElements,
-          },
-          additionalInfo,
-          actions.createPage
-        );
+            {
+              ...page,
+              template: distributorTemplate,
+              isRoot: false,
+              defaultLang,
+              multiPageElements,
+            },
+            additionalInfo,
+            actions.createPage
+          );
 
       buildProcessData[siteId].publishHashes.push(page.hash);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/cx",
   "description": "Griddo SSG based on Gatsby",
-  "version": "1.75.22",
+  "version": "1.75.26",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -65,7 +65,7 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
-    "@griddo/eslint-config-back": "^1.75.22",
+    "@griddo/eslint-config-back": "^1.75.26",
     "eslint": "^7.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d9de71e8a7f6da4e2dedd3d1d8455ba9611e446"
+  "gitHead": "e870c6671b2c10cf4b9a15f3de4f3c588ea24d34"
 }

package/scripts/griddo-exporter.js

@@ -55,9 +55,12 @@ const logWarning = (...message) => helpers.log('warning', ...message);
 // Main Stuff
 // -----------------------------------------------------------------------------
 const runExportDomain = async domain => {
+  const assetPrefix = getAssetPrefix(domain);
+
   const run = getEnvRunner({
     DOMAIN: domain,
-    ASSET_PREFIX: getAssetPrefix(domain),
+    ASSET_PREFIX: assetPrefix,
+    HAS_ASSET_DOMAIN: assetPrefix && assetPrefix !== '',
     RENDERID: new Date().valueOf(),
   });
   const domainDestDirPath = path.resolve(destDirPath, domain);

package/src/components/template.js

@@ -1,30 +1,177 @@
 /* eslint-disable node/no-extraneous-import */
-import * as React from "react";
-import { Link, navigate } from 'gatsby';
+import { Page as RenderGriddoPage } from '@griddo/core';
 import {
-  generateAutomaticDimensions,
   components,
-  templates,
+  generateAutomaticDimensions,
   SiteProvider,
+  templates,
 } from 'components';
-import { Page as RenderGriddoPage } from '@griddo/core';
-
+import { Link, navigate } from 'gatsby';
+import parse from 'html-react-parser';
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
 import { composeAnalytics } from '../utils/dataLayer';
-import Seo from './seo';
+import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
+
+//
+// Gatsby Head API, almost deprecate Helmet.
+//
+// I put here everything we had in the seo.js component because is easier to
+// access to the `pageContext` prop of the Gatsby `<Head>` component. If this
+// strategy works, maybe we want to isolate `<Head>` in its own file as we did
+// with seo.js.
+//
+export const Head = ({ pageContext }) => {
+  //                   ^^^^^^^^^^^
+  // A context object which is passed in during the creation of the page
+  const {
+    siteMetadata,
+    pageMetadata,
+    siteOptions,
+    locale,
+    openGraph,
+    fullUrl,
+    analyticsDimensions,
+    analyticsScript,
+  } = pageContext;
+
+  const metaRobots = cleanCommaSeparated(
+    `${pageMetadata?.index},${pageMetadata?.follow},${pageMetadata?.translate},${pageMetadata?.metasAdvanced}`
+  );
+
+  const showMetaRobots =
+    siteOptions?.showBasicMetaRobots || metaRobots !== 'index,follow,translate';
+
+  const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
+
+  const analyticsSrc =
+    (analyticsScript &&
+      analyticsScript.startsWith('UA-') &&
+      `https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
+    null;
+
+  const analyticsCode =
+    analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
+      ? parse(analyticsScript)
+      : emptyCodeScript;
+
+  const fixedAnalyticsCode = Array.isArray(analyticsCode)
+    ? analyticsCode.find(item => item.type === 'script') || emptyCodeScript
+    : analyticsCode;
+
+  const {
+    props: {
+      dangerouslySetInnerHTML: { __html: analyticsScriptCode },
+      // eslint-disable-next-line no-unused-vars
+      children: analyticsScriptChildren,
+      ...analyticsScriptProps
+    },
+  } = 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(
+    siteMetadata?.favicon,
+    'f/png/w/32/h/32'
+  );
+
+  // Validate options
+  const useCanonical =
+    !!pageMetadata?.canonical &&
+    !(
+      siteOptions?.avoidSelfReferenceCanonicals &&
+      pageMetadata?.canonical === fullUrl
+    );
+  const useHrefLangs =
+    !(siteOptions?.avoidHrefLangsOnCanonicals && useCanonical) &&
+    pageMetadata?.index === 'index' &&
+    pageMetadata?.pageLanguages?.length > 1;
+
+  return (
+    <>
+      <title>{pageMetadata?.title}</title>
+      <meta name="description" content={pageMetadata?.description} />
+      {siteOptions?.useMetaTitle && (
+        <meta name="title" content={pageMetadata?.title} />
+      )}
+      {siteOptions?.useCanonical && (
+        <link rel="canonical" href={pageMetadata?.title} />
+      )}
+      <link rel="icon" href={faviconResized} />
+
+      {/* Alternate, solo si se indexa la página y tiene traducciones */}
+      {useHrefLangs &&
+        pageMetadata?.pageLanguages
+          .filter(item => item.isLive)
+          .map(item => (
+            <link
+              key={item.pageId}
+              rel="alternate"
+              href={`${item.url}`}
+              hreflang={item.locale?.replace(/_/g, '-')}
+            />
+          ))}
+
+      {/* Robots */}
+      {showMetaRobots && (
+        <meta name="robots" content={pageMetadata?.metaRobots} />
+      )}
+
+      {/* Facebook */}
+      <meta property="og:site_name" content={pageMetadata?.title} />
+      <meta property="og:locale" content={locale} />
+      <meta
+        property="og:title"
+        content={openGraph?.title || pageMetadata?.title}
+      />
+      <meta property="og:type" content={openGraph?.type || 'website'} />
+      <meta property="og:description" content={openGraph?.description} />
+      <meta property="og:image" content={openGraph?.image} />
+      <meta property="og:url" content={pageMetadata?.canonical || fullUrl} />
+
+      {/* Twitter */}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta
+        property="twitter:title"
+        content={openGraph?.title || pageMetadata?.title}
+      />
+      <meta property="twitter:description" content={openGraph?.description} />
+      <meta property="twitter:image" content={openGraph?.twitterImage} />
+      <meta
+        property="twitter:url"
+        content={pageMetadata?.canonical || fullUrl}
+      />
+
+      {/* Data Layer */}
+      {/* Solo cuando se ejecuta en el navegador */}
+      <script>{`window.dataLayer = window.dataLayer || [];`}</script>
+      {typeof window !== 'undefined' && analyticsDimensions && (
+        <script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
+      )}
+
+      {/* Analytics with UA- */}
+      {analyticsSrc && <script src={analyticsSrc}></script>}
+
+      {/* {analyticsCode} */}
+      {(analyticsScriptProps?.src || analyticsScriptCode) && (
+        <script {...analyticsScriptProps} data-griddo-id={fullUrl}>
+          {analyticsScriptCode}
+        </script>
+      )}
+    </>
+  );
+};
 
 export default data => {
   const {
     page: content,
     locale,
-    pageMetadata,
-    openGraph,
     header,
     footer,
     siteMetadata,
-    componentsVersion,
     theme,
     cloudinaryName,
-    siteOptions,
     socials,
     siteLangs,
     BUILD_MODE,
@@ -39,14 +186,14 @@ export default data => {
 
   const mappedTheme = theme || 'default-theme';
 
-  const { analyticsScript, analyticsDimensions } = composeAnalytics(
+  const { analyticsDimensions } = composeAnalytics(
     data,
     generateAutomaticDimensions
   );
 
   if (!content.dimensions) content.dimensions = [];
   content.dimensions.values = analyticsDimensions;
-
+  
   return (
     <SiteProvider
       theme={mappedTheme}
@@ -65,20 +212,16 @@ export default data => {
       instance={instance}
       sitePages={sitePages}
     >
-      <Seo
-        siteMetadata={siteMetadata}
-        openGraph={openGraph}
-        locale={locale}
-        pageMetadata={pageMetadata}
-        defaultLang={content.defaultLang}
-        isRoot={content.isRoot}
-        fullPath={content.fullPath}
-        fullUrl={content.fullUrl}
-        componentsVersion={componentsVersion}
-        analyticsDimensions={analyticsDimensions}
-        analyticsScript={analyticsScript}
-        siteOptions={siteOptions}
-      />
+      {/*
+		Gatsby Head doesn't support anything outside of the <head> tag so we
+		need to use Helmet.
+		NOTE: I can´t realize why, but the html-lang tag only render in the hydration phase...
+	  */}
+      <Helmet>
+        <html lang={locale} />
+      </Helmet>
+
+      {/* Render every page */}
       <RenderGriddoPage
         content={content}
         header={header}

package/src/utils/folders.js

@@ -45,6 +45,8 @@ const updateDist = async () => {
   const src = './public';
   const dest = './dist';
 
+  const domainDestPath = `${dest}/${process.env.DOMAIN}`;
+
   const files = fs
     .readdirSync(src)
     .filter(
@@ -62,16 +64,20 @@ const updateDist = async () => {
   const gatsbyStaticDest = `${assetsDest}/static`;
 
   try {
+    fs.mkdirSync(assetsDest, { recursive: true });
     fs.copySync(src, dest);
-    fs.copySync(projectStaticSrc, projectStaticDest);
-    fs.copySync(pageDataSrc, pageDataDest);
-    fs.copySync(gatsbyStaticSrc, gatsbyStaticDest);
-
-    files.map(async file => {
-      const fileSrc = `${src}/${file}`;
-      const fileDest = `${assetsDest}/${file}`;
-      fs.copySync(fileSrc, fileDest);
-    });
+    if (process.env.HAS_ASSET_DOMAIN) {
+      fs.copySync(pageDataSrc, pageDataDest);
+      fs.copySync(projectStaticSrc, projectStaticDest);
+      fs.copySync(gatsbyStaticSrc, gatsbyStaticDest);
+      fs.copySync(projectStaticSrc, domainDestPath);
+
+      files.map(async file => {
+        const fileSrc = `${src}/${file}`;
+        const fileDest = `${assetsDest}/${file}`;
+        fs.copySync(fileSrc, fileDest);
+      });
+    }
 
     if (isGriddoExporter) fs.rmSync(src, { recursive: true });
 

package/src/components/seo.js

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import parse from 'html-react-parser';
-import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
-
-export default function SEO(props) {
-  const {
-    locale,
-    openGraph,
-    siteMetadata: { favicon },
-    pageMetadata: {
-      description,
-      title,
-      index,
-      follow,
-      translate,
-      metasAdvanced,
-      pageLanguages,
-      canonical,
-    },
-    fullUrl,
-    analyticsDimensions,
-    analyticsScript,
-    siteOptions: {
-      useMetaTitle,
-      showBasicMetaRobots,
-      avoidHrefLangsOnCanonicals,
-      avoidSelfReferenceCanonicals,
-    },
-  } = props;
-
-  const metaRobots = cleanCommaSeparated(
-    `${index},${follow},${translate},${metasAdvanced}`
-  );
-  const showMetaRobots =
-    showBasicMetaRobots || metaRobots !== 'index,follow,translate';
-
-  const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
-
-  const analyticsSrc =
-    (analyticsScript &&
-      analyticsScript.startsWith('UA-') &&
-      `https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
-    null;
-  const analyticsCode =
-    analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
-      ? parse(analyticsScript)
-      : emptyCodeScript;
-
-  const fixedAnalyticsCode = Array.isArray(analyticsCode) ? analyticsCode.find(item => item.type === 'script') || emptyCodeScript : analyticsCode;
-
-  const {
-    props: {
-      dangerouslySetInnerHTML: { __html: analyticsScriptCode },
-      // eslint-disable-next-line no-unused-vars
-      children: analyticsScriptChildren,
-      ...analyticsScriptProps
-    },
-  } = 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');
-
-  // Validate options
-  const useCanonical = !!canonical && !(avoidSelfReferenceCanonicals && canonical === fullUrl);
-  const useHrefLangs = !(avoidHrefLangsOnCanonicals && useCanonical) && index === 'index' && pageLanguages?.length > 1;
-
-  return (
-    <>
-      <Helmet title={title}>
-        <meta name="description" content={description} />
-        {useMetaTitle && <meta name="title" content={title} />}
-        {useCanonical && <link rel="canonical" href={canonical} />}
-        <link rel="icon" href={faviconResized} />
-
-        {/* Alternate, solo si se indexa la página y tiene traducciones */}
-        {useHrefLangs &&
-          pageLanguages
-            .filter(item => item.isLive)
-            .map(item => (
-              <link
-                key={item.pageId}
-                rel="alternate"
-                href={`${item.url}`}
-                hreflang={item.locale?.replace(/_/g, '-')}
-              />
-            ))}
-
-        {/* Robots */}
-        {showMetaRobots && <meta name="robots" content={metaRobots} />}
-
-        {/* Facebook */}
-        <meta property="og:site_name" content={title} />
-        <meta property="og:locale" content={locale} />
-        <meta property="og:title" content={openGraph.title || title} />
-        <meta property="og:type" content={openGraph.type || 'website'} />
-        <meta property="og:description" content={openGraph.description} />
-        <meta property="og:image" content={openGraph.image} />
-        <meta property="og:url" content={canonical || fullUrl} />
-
-        {/* Twitter */}
-        <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:title" content={openGraph.title || title} />
-        <meta property="twitter:description" content={openGraph.description} />
-        <meta property="twitter:image" content={openGraph.twitterImage} />
-        <meta property="twitter:url" content={canonical || fullUrl} />
-
-        {/* Lang */}
-        <html lang={locale} />
-
-        {/* Data Layer */}
-        {/* Solo cuando se ejecuta en el navegador */}
-        <script>{`window.dataLayer = window.dataLayer || [];`}</script>
-        {typeof window !== 'undefined' && analyticsDimensions && (
-          <script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
-        )}
-
-        {/* Analytics with UA- */}
-        {analyticsSrc && <script src={analyticsSrc}></script>}
-
-        {/* {analyticsCode} */}
-        {(analyticsScriptProps?.src || analyticsScriptCode) && (
-          <script {...analyticsScriptProps} data-griddo-id={fullUrl}>
-            {analyticsScriptCode}
-          </script>
-        )}
-      </Helmet>
-    </>
-  );
-}