@griddo/cx 1.66.4 → 1.66.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/gatsby-ssr.js CHANGED
@@ -1,75 +1,24 @@
1
1
  /* eslint-disable node/no-missing-require */
2
2
  import * as React from 'react';
3
- import parse from 'html-react-parser';
4
- const { ssr, generateAutomaticDimensions = null } = require('components');
5
-
6
- let analyticsScript = [];
7
- let analyticsDimensions = [];
3
+ const { ssr } = require('components');
8
4
 
9
5
  export const wrapPageElement = ({ props }) => {
10
6
  if (ssr.wrapPageElement) {
11
7
  return ssr.wrapPageElement(props);
12
8
  }
13
- const {
14
- pageContext: {
15
- siteScript: siteScriptBulk,
16
- page: {
17
- dimensions
18
- }
19
- }
20
- } = props;
21
-
22
- //Añadir el script. Dependiendo de si lo que recibe es el trackingId o el script
23
- const siteScript = siteScriptBulk ? siteScriptBulk.trim() : "";
24
- const src = `https://www.googletagmanager.com/gtag/js?id=${siteScript}`;
25
- const scriptCode = siteScript.includes('<script') ? [parse(siteScript)] : [<script async key="site-script" dangerouslySetInnerHTML={{ __html: siteScript }} />]
26
-
27
- analyticsScript = siteScript && siteScript.startsWith('UA-') ?
28
- [<script async src={src}></script>]
29
- :
30
- (siteScript ? scriptCode : []);
31
- ;
32
-
33
- //Las dimensiones o DataLayer
34
- const dynamicValuePrefix = '__SCRIPT:';
35
- const dimensionValues = dimensions?.values || {};
36
- const automaticDimensionValues = generateAutomaticDimensions ? generateAutomaticDimensions(props) : {};
37
- const allDimensionsValues = {
38
- ...dimensionValues,
39
- ...automaticDimensionValues,
40
- };
41
- const allDimensions = [];
42
- for (const dimension of Object.keys(allDimensionsValues)) {
43
- const dimensionValue = allDimensionsValues[dimension];
44
- allDimensions.push(`"${dimension}":${dimensionValue?.startsWith(dynamicValuePrefix) ? `${dimensionValue.slice(dynamicValuePrefix.length, dimensionValue.endsWith(';') ? -1 : dimensionValue.length)}` : `"${dimensionValue}"`}`);
45
- }
46
-
47
- analyticsDimensions = allDimensions.length ?
48
- [<script
49
- async
50
- key="site-script"
51
- dangerouslySetInnerHTML={{
52
- __html: `dataLayer.push({${allDimensions.join(',')}})`
53
- }} />]
54
- :
55
- []
56
- ;
57
9
  };
58
10
 
59
11
  export const onRenderBody = props => {
60
12
  if (ssr.onRenderBody) {
61
13
  ssr.onRenderBody(props);
62
14
  }
63
- const { setHeadComponents, setPostBodyComponents } = props;
15
+ const { setHeadComponents } = props;
64
16
 
65
17
  const additionalHeadComponents = [
66
18
  <script>window.dataLayer = window.dataLayer || [];</script>,
67
19
  ];
68
20
 
69
- const additionalBodyComponents = [...analyticsScript, ...analyticsDimensions];
70
-
71
21
  setHeadComponents([...additionalHeadComponents]);
72
- setPostBodyComponents([...additionalBodyComponents]);
73
22
  };
74
23
 
75
24
  export const onPreRenderHTML = props => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@griddo/cx",
3
3
  "description": "Griddo SSG based on Gatsby",
4
- "version": "1.66.4",
4
+ "version": "1.66.7",
5
5
  "authors": [
6
6
  "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
7
7
  "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -64,7 +64,7 @@
64
64
  "react-helmet": "^6.0.0"
65
65
  },
66
66
  "devDependencies": {
67
- "@griddo/eslint-config-back": "^1.66.4",
67
+ "@griddo/eslint-config-back": "^1.66.7",
68
68
  "eslint": "^7.5.0",
69
69
  "eslint-plugin-node": "^11.1.0",
70
70
  "eslint-plugin-react": "7.14.3",
@@ -96,5 +96,5 @@
96
96
  "publishConfig": {
97
97
  "access": "public"
98
98
  },
99
- "gitHead": "c293929f75ccb107b7ab790583cf3624bb9dc866"
99
+ "gitHead": "492d4611398f8d06adc680637e8d5ee3fe57c6bf"
100
100
  }
@@ -39,29 +39,16 @@ try {
39
39
  if (fs.existsSync(cxDirSource)) {
40
40
  // TODO: Use proper tools instead of execSync to delete and move files
41
41
  try {
42
- if (fs.existsSync(cxDirDest)) {
43
- console.log(chalk.blue("Creando backup de " + cxDirDest + "..."));
44
- execSync(`mv ${cxDirDest} ${cxDirDest}-BACKUP`);
45
- }
46
- //execSync(`mkdir -p ${cxDirDest}`);
47
- console.log(chalk.blue("Moviendo ficheros de " + cxDirSource + " a " + cxDirDest + "..."));
48
- execSync(`mv ${cxDirSource} ${cxDirDest}`, {
42
+ execSync(`mkdir -p ${cxDirDest}`);
43
+ execSync(`cp -r ${cxDirSource}/* ${cxDirDest}/`, {
49
44
  cwd: workingDirPath,
50
45
  });
51
- console.log(chalk.blue("Eliminando backup de " + cxDirDest + "..."));
52
- execSync(`rm -rf ${cxDirDest}-BACKUP`);
53
46
  } catch {
54
47
  console.log(
55
48
  chalk.red(` Error moving files to ${cxDirDest}`),
56
49
  componentDir,
57
50
  error.message
58
51
  );
59
- if (fs.existsSync(cxDirDest + "-BACKUP")) {
60
- console.log(chalk.blue("Restaurando " + cxDirDest + "..."));
61
- execSync(`mv ${cxDirDest}-BACKUP ${cxDirDest}`, {
62
- cwd: workingDirPath,
63
- });
64
- }
65
52
  continue;
66
53
  }
67
54
  } else {
@@ -81,4 +68,4 @@ try {
81
68
  console.log(chalk.red('ERROR'), err?.stdout?.toString());
82
69
  console.log(chalk.red('ERROR'), err.message);
83
70
  process.exit(1);
84
- }
71
+ }
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { Helmet } from 'react-helmet';
3
+ import parse from 'html-react-parser';
3
4
 
4
5
  const cleanCommaSeparated = x =>
5
6
  x
@@ -25,6 +26,8 @@ export default function SEO(props) {
25
26
  },
26
27
  fullUrl,
27
28
  showBasicMetaRobots,
29
+ analyticsDimensions,
30
+ analyticsScript,
28
31
  } = props;
29
32
 
30
33
  const metaRobots = cleanCommaSeparated(
@@ -33,45 +36,79 @@ export default function SEO(props) {
33
36
  const showMetaRobots =
34
37
  showBasicMetaRobots || metaRobots !== 'index,follow,translate';
35
38
 
39
+ const analyticsSrc =
40
+ (analyticsScript &&
41
+ analyticsScript.startsWith('UA-') &&
42
+ `https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
43
+ null;
44
+ const analyticsCode =
45
+ analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
46
+ ? parse(analyticsScript)
47
+ : { props: { dangerouslySetInnerHTML: {} } };
48
+
49
+ const {
50
+ props: {
51
+ dangerouslySetInnerHTML: { __html: analyticsScriptCode },
52
+ // eslint-disable-next-line no-unused-vars
53
+ children: analyticsScriptChildren,
54
+ ...analyticsScriptProps
55
+ },
56
+ } = analyticsCode;
57
+
36
58
  return (
37
- <Helmet title={title}>
38
- <meta name="description" content={description} />
39
- <meta name="title" content={title} />
40
- {canonical && <link rel="canonical" href={canonical} />}
41
- <link rel="icon" href={favicon} />
59
+ <>
60
+ <Helmet title={title}>
61
+ <meta name="description" content={description} />
62
+ <meta name="title" content={title} />
63
+ {canonical && <link rel="canonical" href={canonical} />}
64
+ <link rel="icon" href={favicon} />
65
+
66
+ {/* Alternate */}
67
+ {pageLanguages?.length > 1 &&
68
+ pageLanguages.map(item => (
69
+ <link
70
+ key={item.pageId}
71
+ rel="alternate"
72
+ href={`${item.url}`}
73
+ hreflang={item.locale?.replace(/_/g, '-')}
74
+ />
75
+ ))}
76
+
77
+ {/* Robots */}
78
+ {showMetaRobots && <meta name="robots" content={metaRobots} />}
79
+
80
+ {/* Facebook */}
81
+ <meta property="og:site_name" content={title} />
82
+ <meta property="og:locale" content={locale} />
83
+ <meta property="og:title" content={openGraph.title || title} />
84
+ <meta property="og:type" content={openGraph.type || 'website'} />
85
+ <meta property="og:url" content={canonical || fullUrl} />
86
+ <meta property="og:description" content={openGraph.description} />
87
+ <meta property="og:image" content={openGraph.image} />
42
88
 
43
- {/* Alternate */}
44
- {pageLanguages?.length > 1 &&
45
- pageLanguages.map(item => (
46
- <link
47
- key={item.pageId}
48
- rel="alternate"
49
- href={`${item.url}`}
50
- hreflang={item.locale?.replace(/_/g, '-')}
51
- />
52
- ))}
89
+ {/* Twitter */}
90
+ <meta property="twitter:card" content="summary_large_image" />
91
+ <meta property="twitter:url" content={canonical || fullUrl} />
92
+ <meta property="twitter:title" content={openGraph.title || title} />
93
+ <meta property="twitter:description" content={openGraph.description} />
94
+ <meta property="twitter:image" content={openGraph.twitterImage} />
53
95
 
54
- {/* Robots */}
55
- {showMetaRobots && <meta name="robots" content={metaRobots} />}
96
+ {/* Lang */}
97
+ <html lang={locale} />
56
98
 
57
- {/* Facebook */}
58
- <meta property="og:site_name" content={title} />
59
- <meta property="og:locale" content={locale} />
60
- <meta property="og:title" content={openGraph.title || title} />
61
- <meta property="og:type" content={openGraph.type || 'website'} />
62
- <meta property="og:url" content={canonical || fullUrl} />
63
- <meta property="og:description" content={openGraph.description} />
64
- <meta property="og:image" content={openGraph.image} />
99
+ {/* Analytics with UA- */}
100
+ {analyticsSrc && <script src={analyticsSrc}></script>}
65
101
 
66
- {/* Twitter */}
67
- <meta property="twitter:card" content="summary_large_image" />
68
- <meta property="twitter:url" content={canonical || fullUrl} />
69
- <meta property="twitter:title" content={openGraph.title || title} />
70
- <meta property="twitter:description" content={openGraph.description} />
71
- <meta property="twitter:image" content={openGraph.twitterImage} />
102
+ {/* {analyticsCode} */}
103
+ {(analyticsScriptProps?.src || analyticsScriptCode) && (
104
+ <script {...analyticsScriptProps} data-griddo-id={fullUrl}>
105
+ {analyticsScriptCode}
106
+ </script>
107
+ )}
72
108
 
73
- {/* Lang */}
74
- <html lang={locale} />
75
- </Helmet>
109
+ {/* Data Layer */}
110
+ <script>{`window.dataLayer && window.dataLayer.push(${analyticsDimensions})`}</script>
111
+ </Helmet>
112
+ </>
76
113
  );
77
114
  }
@@ -2,7 +2,14 @@
2
2
  import * as React from 'react';
3
3
  import { Link, navigate } from 'gatsby';
4
4
  import Seo from './seo';
5
- import { components, templates, SiteProvider } from 'components';
5
+ import { composeAnalytics } from '../utils/dataLayer';
6
+ import {
7
+ generateAutomaticDimensions,
8
+ components,
9
+ templates,
10
+ SiteProvider,
11
+ } from 'components';
12
+
6
13
  import { Page as RenderGriddoPage } from '@griddo/core';
7
14
 
8
15
  export default data => {
@@ -25,6 +32,11 @@ export default data => {
25
32
  sitePages,
26
33
  } = data.pageContext;
27
34
 
35
+ const { analyticsScript, analyticsDimensions } = composeAnalytics(
36
+ data,
37
+ generateAutomaticDimensions
38
+ );
39
+
28
40
  const library = {
29
41
  components,
30
42
  templates,
@@ -60,6 +72,8 @@ export default data => {
60
72
  fullUrl={content.fullUrl}
61
73
  componentsVersion={componentsVersion}
62
74
  showBasicMetaRobots={showBasicMetaRobots}
75
+ analyticsDimensions={analyticsDimensions}
76
+ analyticsScript={analyticsScript}
63
77
  />
64
78
 
65
79
  {/*
@@ -0,0 +1,47 @@
1
+ // import parse from 'html-react-parser';
2
+
3
+ const composeAnalytics = (page, generateAutomaticDimensions = null) => {
4
+ const {
5
+ pageContext: {
6
+ siteScript: siteScriptBulk,
7
+ page: { dimensions },
8
+ },
9
+ } = page;
10
+
11
+ const analyticsScript = siteScriptBulk ? siteScriptBulk.trim() : '';
12
+
13
+ //Las dimensiones o DataLayer
14
+ const dynamicValuePrefix = '__SCRIPT:';
15
+ const dimensionValues = dimensions?.values || {};
16
+ const automaticDimensionValues = generateAutomaticDimensions
17
+ ? generateAutomaticDimensions(page)
18
+ : {};
19
+ const allDimensionsValues = {
20
+ ...dimensionValues,
21
+ ...automaticDimensionValues,
22
+ };
23
+ const allDimensions = [];
24
+ for (const dimension of Object.keys(allDimensionsValues)) {
25
+ const dimensionValue = allDimensionsValues[dimension];
26
+ allDimensions.push(
27
+ `"${dimension}":${
28
+ dimensionValue?.startsWith(dynamicValuePrefix)
29
+ ? `${dimensionValue.slice(
30
+ dynamicValuePrefix.length,
31
+ dimensionValue.endsWith(';') ? -1 : dimensionValue.length
32
+ )}`
33
+ : `"${dimensionValue}"`
34
+ }`
35
+ );
36
+ }
37
+
38
+ const analyticsDimensions = allDimensions.length
39
+ ? `{${allDimensions.join(',')}}`
40
+ : null;
41
+ return {
42
+ analyticsScript,
43
+ analyticsDimensions,
44
+ };
45
+ };
46
+
47
+ export { composeAnalytics };
@@ -1,4 +1,6 @@
1
1
  const path = require('path');
2
+ const fs = require('fs-extra');
3
+ const { postSearchInfo } = require('./searches');
2
4
  const helpers = require('./helpers.js');
3
5
 
4
6
  async function renderPage(page, additionalInfo, createPage) {
@@ -25,7 +27,7 @@ async function renderSinglePage(page, additionalInfo, createPage) {
25
27
  showBasicMetaRobots,
26
28
  BUILD_MODE,
27
29
  sitePages,
28
- siteScript
30
+ siteScript,
29
31
  } = additionalInfo;
30
32
 
31
33
  // 3 - Build final page object
@@ -91,7 +93,30 @@ async function renderSinglePage(page, additionalInfo, createPage) {
91
93
 
92
94
  if (assetPrefix) mappedPage.matchPath = fullPath.compose;
93
95
 
94
- return createPage(mappedPage);
96
+ const exportFile = path.resolve(
97
+ __dirname,
98
+ '../../dist/',
99
+ `./${filepath}index.html`
100
+ );
101
+
102
+ createPage(mappedPage);
103
+
104
+ const content = fs.existsSync(exportFile)
105
+ ? fs.readFileSync(exportFile).toString()
106
+ : '';
107
+
108
+ await postSearchInfo({
109
+ title,
110
+ description: openGraph.description,
111
+ image: openGraph.image,
112
+ pageId: id,
113
+ languageId,
114
+ siteId: page.site,
115
+ url: page.fullUrl,
116
+ content,
117
+ });
118
+
119
+ return content;
95
120
  }
96
121
 
97
122
  async function renderListPages(
@@ -152,15 +177,17 @@ async function renderMultiplePages(page, additionalInfo, createPage) {
152
177
  ? paginatedPage.fullUrl.slice(0, -1)
153
178
  : paginatedPage.fullUrl;
154
179
  const rightSectionSlug = sectionSlug?.replace(/\//g, '');
155
- const newCompose = `${compose}${compose.endsWith('/') ? '' : '/'
156
- }${rightSectionSlug}`;
180
+ const newCompose = `${compose}${
181
+ compose.endsWith('/') ? '' : '/'
182
+ }${rightSectionSlug}`;
157
183
  paginatedPage.fullUrl = `${fullUrl}/${rightSectionSlug}`;
158
184
  paginatedPage.fullPath.compose = newCompose;
159
185
  paginatedPage.slug = newCompose;
160
186
  paginatedPage.template.activeSectionSlug = sectionSlug;
161
187
  paginatedPage.template.activeSectionBase = fullUrl;
162
188
  if (title.trim()) paginatedPage.title = title;
163
- paginatedPage.metaTitle = metaTitle.trim() || title.trim() || paginatedPage.metaTitle;
189
+ paginatedPage.metaTitle =
190
+ metaTitle.trim() || title.trim() || paginatedPage.metaTitle;
164
191
  if (metaDescription.trim()) paginatedPage.metaDescription = metaDescription;
165
192
  await renderSinglePage(paginatedPage, additionalInfo, createPage);
166
193
  }
@@ -0,0 +1,60 @@
1
+ const { post } = require('../api');
2
+
3
+ const baseURL = process.env.API_URL;
4
+
5
+ async function postSearchInfo({
6
+ title,
7
+ description,
8
+ image,
9
+ pageId,
10
+ languageId,
11
+ siteId,
12
+ url,
13
+ content,
14
+ }) {
15
+ const response = await post(`${baseURL}/search`, {
16
+ title,
17
+ description,
18
+ image,
19
+ pageId,
20
+ languageId,
21
+ siteId,
22
+ url,
23
+ content: prepareHTMLContentForSearch(content),
24
+ });
25
+
26
+ return response;
27
+ }
28
+
29
+ function prepareHTMLContentForSearch(content) {
30
+ const noTagsContent = removeHTMLTags(
31
+ ['meta', 'link', 'style', 'script', 'noscript', 'nav', 'header', 'footer'],
32
+ content,
33
+ ' '
34
+ );
35
+ const plainTextContent = stripHTMLTags(noTagsContent, ' ');
36
+
37
+ return stripSpaces(plainTextContent);
38
+ }
39
+
40
+ function removeHTMLTags(tags, content, replaceWith = '') {
41
+ let filteredContent = content;
42
+
43
+ tags.map(tag => {
44
+ filteredContent = filteredContent
45
+ .replace(new RegExp(`<${tag}.*?>.*?<\/${tag}>`, 'gis'), replaceWith)
46
+ .replace(new RegExp(`(<${tag}([^>]+)>)`, 'gis'), replaceWith);
47
+ });
48
+
49
+ return filteredContent;
50
+ }
51
+
52
+ function stripHTMLTags(content = '', replaceWith = '') {
53
+ return content.replace(/(<([^>]+)>)/gis, replaceWith);
54
+ }
55
+
56
+ function stripSpaces(str) {
57
+ return str.replace(/\s+/gis, ' ');
58
+ }
59
+
60
+ exports.postSearchInfo = postSearchInfo;