@griddo/cx 1.75.23 → 1.75.26
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/package.json +3 -3
- package/src/components/template.js +170 -27
- package/src/components/seo.js +0 -132
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.75.
|
|
4
|
+
"version": "1.75.26",
|
|
5
5
|
"authors": [
|
|
6
6
|
"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
|
|
7
7
|
"Carlos Torres <carlos.torres@secuoyas.com>",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"react-helmet": "^6.0.0"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@griddo/eslint-config-back": "^1.75.
|
|
68
|
+
"@griddo/eslint-config-back": "^1.75.26",
|
|
69
69
|
"eslint": "^7.5.0",
|
|
70
70
|
"eslint-plugin-node": "^11.1.0",
|
|
71
71
|
"eslint-plugin-react": "7.14.3",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"publishConfig": {
|
|
98
98
|
"access": "public"
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "e870c6671b2c10cf4b9a15f3de4f3c588ea24d34"
|
|
101
101
|
}
|
|
@@ -1,30 +1,177 @@
|
|
|
1
1
|
/* eslint-disable node/no-extraneous-import */
|
|
2
|
-
import
|
|
3
|
-
import { Link, navigate } from 'gatsby';
|
|
2
|
+
import { Page as RenderGriddoPage } from '@griddo/core';
|
|
4
3
|
import {
|
|
5
|
-
generateAutomaticDimensions,
|
|
6
4
|
components,
|
|
7
|
-
|
|
5
|
+
generateAutomaticDimensions,
|
|
8
6
|
SiteProvider,
|
|
7
|
+
templates,
|
|
9
8
|
} from 'components';
|
|
10
|
-
import {
|
|
11
|
-
|
|
9
|
+
import { Link, navigate } from 'gatsby';
|
|
10
|
+
import parse from 'html-react-parser';
|
|
11
|
+
import * as React from 'react';
|
|
12
|
+
import { Helmet } from 'react-helmet';
|
|
12
13
|
import { composeAnalytics } from '../utils/dataLayer';
|
|
13
|
-
import
|
|
14
|
+
import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
|
|
15
|
+
|
|
16
|
+
//
|
|
17
|
+
// Gatsby Head API, almost deprecate Helmet.
|
|
18
|
+
//
|
|
19
|
+
// I put here everything we had in the seo.js component because is easier to
|
|
20
|
+
// access to the `pageContext` prop of the Gatsby `<Head>` component. If this
|
|
21
|
+
// strategy works, maybe we want to isolate `<Head>` in its own file as we did
|
|
22
|
+
// with seo.js.
|
|
23
|
+
//
|
|
24
|
+
export const Head = ({ pageContext }) => {
|
|
25
|
+
// ^^^^^^^^^^^
|
|
26
|
+
// A context object which is passed in during the creation of the page
|
|
27
|
+
const {
|
|
28
|
+
siteMetadata,
|
|
29
|
+
pageMetadata,
|
|
30
|
+
siteOptions,
|
|
31
|
+
locale,
|
|
32
|
+
openGraph,
|
|
33
|
+
fullUrl,
|
|
34
|
+
analyticsDimensions,
|
|
35
|
+
analyticsScript,
|
|
36
|
+
} = pageContext;
|
|
37
|
+
|
|
38
|
+
const metaRobots = cleanCommaSeparated(
|
|
39
|
+
`${pageMetadata?.index},${pageMetadata?.follow},${pageMetadata?.translate},${pageMetadata?.metasAdvanced}`
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
const showMetaRobots =
|
|
43
|
+
siteOptions?.showBasicMetaRobots || metaRobots !== 'index,follow,translate';
|
|
44
|
+
|
|
45
|
+
const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
|
|
46
|
+
|
|
47
|
+
const analyticsSrc =
|
|
48
|
+
(analyticsScript &&
|
|
49
|
+
analyticsScript.startsWith('UA-') &&
|
|
50
|
+
`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
|
|
51
|
+
null;
|
|
52
|
+
|
|
53
|
+
const analyticsCode =
|
|
54
|
+
analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
|
|
55
|
+
? parse(analyticsScript)
|
|
56
|
+
: emptyCodeScript;
|
|
57
|
+
|
|
58
|
+
const fixedAnalyticsCode = Array.isArray(analyticsCode)
|
|
59
|
+
? analyticsCode.find(item => item.type === 'script') || emptyCodeScript
|
|
60
|
+
: analyticsCode;
|
|
61
|
+
|
|
62
|
+
const {
|
|
63
|
+
props: {
|
|
64
|
+
dangerouslySetInnerHTML: { __html: analyticsScriptCode },
|
|
65
|
+
// eslint-disable-next-line no-unused-vars
|
|
66
|
+
children: analyticsScriptChildren,
|
|
67
|
+
...analyticsScriptProps
|
|
68
|
+
},
|
|
69
|
+
} = fixedAnalyticsCode;
|
|
70
|
+
|
|
71
|
+
// Resize favicon
|
|
72
|
+
// If favicon is a Griddo DAM url, returns a griddo image url with params,
|
|
73
|
+
// else (Cloudinary or unkonwn) returns the original favicon url.
|
|
74
|
+
const faviconResized = addGriddoDamParams(
|
|
75
|
+
siteMetadata?.favicon,
|
|
76
|
+
'f/png/w/32/h/32'
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
// Validate options
|
|
80
|
+
const useCanonical =
|
|
81
|
+
!!pageMetadata?.canonical &&
|
|
82
|
+
!(
|
|
83
|
+
siteOptions?.avoidSelfReferenceCanonicals &&
|
|
84
|
+
pageMetadata?.canonical === fullUrl
|
|
85
|
+
);
|
|
86
|
+
const useHrefLangs =
|
|
87
|
+
!(siteOptions?.avoidHrefLangsOnCanonicals && useCanonical) &&
|
|
88
|
+
pageMetadata?.index === 'index' &&
|
|
89
|
+
pageMetadata?.pageLanguages?.length > 1;
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<>
|
|
93
|
+
<title>{pageMetadata?.title}</title>
|
|
94
|
+
<meta name="description" content={pageMetadata?.description} />
|
|
95
|
+
{siteOptions?.useMetaTitle && (
|
|
96
|
+
<meta name="title" content={pageMetadata?.title} />
|
|
97
|
+
)}
|
|
98
|
+
{siteOptions?.useCanonical && (
|
|
99
|
+
<link rel="canonical" href={pageMetadata?.title} />
|
|
100
|
+
)}
|
|
101
|
+
<link rel="icon" href={faviconResized} />
|
|
102
|
+
|
|
103
|
+
{/* Alternate, solo si se indexa la página y tiene traducciones */}
|
|
104
|
+
{useHrefLangs &&
|
|
105
|
+
pageMetadata?.pageLanguages
|
|
106
|
+
.filter(item => item.isLive)
|
|
107
|
+
.map(item => (
|
|
108
|
+
<link
|
|
109
|
+
key={item.pageId}
|
|
110
|
+
rel="alternate"
|
|
111
|
+
href={`${item.url}`}
|
|
112
|
+
hreflang={item.locale?.replace(/_/g, '-')}
|
|
113
|
+
/>
|
|
114
|
+
))}
|
|
115
|
+
|
|
116
|
+
{/* Robots */}
|
|
117
|
+
{showMetaRobots && (
|
|
118
|
+
<meta name="robots" content={pageMetadata?.metaRobots} />
|
|
119
|
+
)}
|
|
120
|
+
|
|
121
|
+
{/* Facebook */}
|
|
122
|
+
<meta property="og:site_name" content={pageMetadata?.title} />
|
|
123
|
+
<meta property="og:locale" content={locale} />
|
|
124
|
+
<meta
|
|
125
|
+
property="og:title"
|
|
126
|
+
content={openGraph?.title || pageMetadata?.title}
|
|
127
|
+
/>
|
|
128
|
+
<meta property="og:type" content={openGraph?.type || 'website'} />
|
|
129
|
+
<meta property="og:description" content={openGraph?.description} />
|
|
130
|
+
<meta property="og:image" content={openGraph?.image} />
|
|
131
|
+
<meta property="og:url" content={pageMetadata?.canonical || fullUrl} />
|
|
132
|
+
|
|
133
|
+
{/* Twitter */}
|
|
134
|
+
<meta property="twitter:card" content="summary_large_image" />
|
|
135
|
+
<meta
|
|
136
|
+
property="twitter:title"
|
|
137
|
+
content={openGraph?.title || pageMetadata?.title}
|
|
138
|
+
/>
|
|
139
|
+
<meta property="twitter:description" content={openGraph?.description} />
|
|
140
|
+
<meta property="twitter:image" content={openGraph?.twitterImage} />
|
|
141
|
+
<meta
|
|
142
|
+
property="twitter:url"
|
|
143
|
+
content={pageMetadata?.canonical || fullUrl}
|
|
144
|
+
/>
|
|
145
|
+
|
|
146
|
+
{/* Data Layer */}
|
|
147
|
+
{/* Solo cuando se ejecuta en el navegador */}
|
|
148
|
+
<script>{`window.dataLayer = window.dataLayer || [];`}</script>
|
|
149
|
+
{typeof window !== 'undefined' && analyticsDimensions && (
|
|
150
|
+
<script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
|
|
151
|
+
)}
|
|
152
|
+
|
|
153
|
+
{/* Analytics with UA- */}
|
|
154
|
+
{analyticsSrc && <script src={analyticsSrc}></script>}
|
|
155
|
+
|
|
156
|
+
{/* {analyticsCode} */}
|
|
157
|
+
{(analyticsScriptProps?.src || analyticsScriptCode) && (
|
|
158
|
+
<script {...analyticsScriptProps} data-griddo-id={fullUrl}>
|
|
159
|
+
{analyticsScriptCode}
|
|
160
|
+
</script>
|
|
161
|
+
)}
|
|
162
|
+
</>
|
|
163
|
+
);
|
|
164
|
+
};
|
|
14
165
|
|
|
15
166
|
export default data => {
|
|
16
167
|
const {
|
|
17
168
|
page: content,
|
|
18
169
|
locale,
|
|
19
|
-
pageMetadata,
|
|
20
|
-
openGraph,
|
|
21
170
|
header,
|
|
22
171
|
footer,
|
|
23
172
|
siteMetadata,
|
|
24
|
-
componentsVersion,
|
|
25
173
|
theme,
|
|
26
174
|
cloudinaryName,
|
|
27
|
-
siteOptions,
|
|
28
175
|
socials,
|
|
29
176
|
siteLangs,
|
|
30
177
|
BUILD_MODE,
|
|
@@ -39,14 +186,14 @@ export default data => {
|
|
|
39
186
|
|
|
40
187
|
const mappedTheme = theme || 'default-theme';
|
|
41
188
|
|
|
42
|
-
const {
|
|
189
|
+
const { analyticsDimensions } = composeAnalytics(
|
|
43
190
|
data,
|
|
44
191
|
generateAutomaticDimensions
|
|
45
192
|
);
|
|
46
193
|
|
|
47
194
|
if (!content.dimensions) content.dimensions = [];
|
|
48
195
|
content.dimensions.values = analyticsDimensions;
|
|
49
|
-
|
|
196
|
+
|
|
50
197
|
return (
|
|
51
198
|
<SiteProvider
|
|
52
199
|
theme={mappedTheme}
|
|
@@ -65,20 +212,16 @@ export default data => {
|
|
|
65
212
|
instance={instance}
|
|
66
213
|
sitePages={sitePages}
|
|
67
214
|
>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
analyticsDimensions={analyticsDimensions}
|
|
79
|
-
analyticsScript={analyticsScript}
|
|
80
|
-
siteOptions={siteOptions}
|
|
81
|
-
/>
|
|
215
|
+
{/*
|
|
216
|
+
Gatsby Head doesn't support anything outside of the <head> tag so we
|
|
217
|
+
need to use Helmet.
|
|
218
|
+
NOTE: I can´t realize why, but the html-lang tag only render in the hydration phase...
|
|
219
|
+
*/}
|
|
220
|
+
<Helmet>
|
|
221
|
+
<html lang={locale} />
|
|
222
|
+
</Helmet>
|
|
223
|
+
|
|
224
|
+
{/* Render every page */}
|
|
82
225
|
<RenderGriddoPage
|
|
83
226
|
content={content}
|
|
84
227
|
header={header}
|
package/src/components/seo.js
DELETED
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Helmet } from 'react-helmet';
|
|
3
|
-
import parse from 'html-react-parser';
|
|
4
|
-
import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
|
|
5
|
-
|
|
6
|
-
export default function SEO(props) {
|
|
7
|
-
const {
|
|
8
|
-
locale,
|
|
9
|
-
openGraph,
|
|
10
|
-
siteMetadata: { favicon },
|
|
11
|
-
pageMetadata: {
|
|
12
|
-
description,
|
|
13
|
-
title,
|
|
14
|
-
index,
|
|
15
|
-
follow,
|
|
16
|
-
translate,
|
|
17
|
-
metasAdvanced,
|
|
18
|
-
pageLanguages,
|
|
19
|
-
canonical,
|
|
20
|
-
},
|
|
21
|
-
fullUrl,
|
|
22
|
-
analyticsDimensions,
|
|
23
|
-
analyticsScript,
|
|
24
|
-
siteOptions: {
|
|
25
|
-
useMetaTitle,
|
|
26
|
-
showBasicMetaRobots,
|
|
27
|
-
avoidHrefLangsOnCanonicals,
|
|
28
|
-
avoidSelfReferenceCanonicals,
|
|
29
|
-
},
|
|
30
|
-
} = props;
|
|
31
|
-
|
|
32
|
-
const metaRobots = cleanCommaSeparated(
|
|
33
|
-
`${index},${follow},${translate},${metasAdvanced}`
|
|
34
|
-
);
|
|
35
|
-
const showMetaRobots =
|
|
36
|
-
showBasicMetaRobots || metaRobots !== 'index,follow,translate';
|
|
37
|
-
|
|
38
|
-
const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
|
|
39
|
-
|
|
40
|
-
const analyticsSrc =
|
|
41
|
-
(analyticsScript &&
|
|
42
|
-
analyticsScript.startsWith('UA-') &&
|
|
43
|
-
`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
|
|
44
|
-
null;
|
|
45
|
-
const analyticsCode =
|
|
46
|
-
analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
|
|
47
|
-
? parse(analyticsScript)
|
|
48
|
-
: emptyCodeScript;
|
|
49
|
-
|
|
50
|
-
const fixedAnalyticsCode = Array.isArray(analyticsCode) ? analyticsCode.find(item => item.type === 'script') || emptyCodeScript : analyticsCode;
|
|
51
|
-
|
|
52
|
-
const {
|
|
53
|
-
props: {
|
|
54
|
-
dangerouslySetInnerHTML: { __html: analyticsScriptCode },
|
|
55
|
-
// eslint-disable-next-line no-unused-vars
|
|
56
|
-
children: analyticsScriptChildren,
|
|
57
|
-
...analyticsScriptProps
|
|
58
|
-
},
|
|
59
|
-
} = fixedAnalyticsCode;
|
|
60
|
-
|
|
61
|
-
// Resize favicon
|
|
62
|
-
// If favicon is a Griddo DAM url, returns a griddo image url with params,
|
|
63
|
-
// else (Cloudinary or unkonwn) returns the original favicon url.
|
|
64
|
-
const faviconResized = addGriddoDamParams(favicon, 'f/png/w/32/h/32');
|
|
65
|
-
|
|
66
|
-
// Validate options
|
|
67
|
-
const useCanonical = !!canonical && !(avoidSelfReferenceCanonicals && canonical === fullUrl);
|
|
68
|
-
const useHrefLangs = !(avoidHrefLangsOnCanonicals && useCanonical) && index === 'index' && pageLanguages?.length > 1;
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<>
|
|
72
|
-
<Helmet title={title}>
|
|
73
|
-
<meta name="description" content={description} />
|
|
74
|
-
{useMetaTitle && <meta name="title" content={title} />}
|
|
75
|
-
{useCanonical && <link rel="canonical" href={canonical} />}
|
|
76
|
-
<link rel="icon" href={faviconResized} />
|
|
77
|
-
|
|
78
|
-
{/* Alternate, solo si se indexa la página y tiene traducciones */}
|
|
79
|
-
{useHrefLangs &&
|
|
80
|
-
pageLanguages
|
|
81
|
-
.filter(item => item.isLive)
|
|
82
|
-
.map(item => (
|
|
83
|
-
<link
|
|
84
|
-
key={item.pageId}
|
|
85
|
-
rel="alternate"
|
|
86
|
-
href={`${item.url}`}
|
|
87
|
-
hreflang={item.locale?.replace(/_/g, '-')}
|
|
88
|
-
/>
|
|
89
|
-
))}
|
|
90
|
-
|
|
91
|
-
{/* Robots */}
|
|
92
|
-
{showMetaRobots && <meta name="robots" content={metaRobots} />}
|
|
93
|
-
|
|
94
|
-
{/* Facebook */}
|
|
95
|
-
<meta property="og:site_name" content={title} />
|
|
96
|
-
<meta property="og:locale" content={locale} />
|
|
97
|
-
<meta property="og:title" content={openGraph.title || title} />
|
|
98
|
-
<meta property="og:type" content={openGraph.type || 'website'} />
|
|
99
|
-
<meta property="og:description" content={openGraph.description} />
|
|
100
|
-
<meta property="og:image" content={openGraph.image} />
|
|
101
|
-
<meta property="og:url" content={canonical || fullUrl} />
|
|
102
|
-
|
|
103
|
-
{/* Twitter */}
|
|
104
|
-
<meta property="twitter:card" content="summary_large_image" />
|
|
105
|
-
<meta property="twitter:title" content={openGraph.title || title} />
|
|
106
|
-
<meta property="twitter:description" content={openGraph.description} />
|
|
107
|
-
<meta property="twitter:image" content={openGraph.twitterImage} />
|
|
108
|
-
<meta property="twitter:url" content={canonical || fullUrl} />
|
|
109
|
-
|
|
110
|
-
{/* Lang */}
|
|
111
|
-
<html lang={locale} />
|
|
112
|
-
|
|
113
|
-
{/* Data Layer */}
|
|
114
|
-
{/* Solo cuando se ejecuta en el navegador */}
|
|
115
|
-
<script>{`window.dataLayer = window.dataLayer || [];`}</script>
|
|
116
|
-
{typeof window !== 'undefined' && analyticsDimensions && (
|
|
117
|
-
<script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
|
|
118
|
-
)}
|
|
119
|
-
|
|
120
|
-
{/* Analytics with UA- */}
|
|
121
|
-
{analyticsSrc && <script src={analyticsSrc}></script>}
|
|
122
|
-
|
|
123
|
-
{/* {analyticsCode} */}
|
|
124
|
-
{(analyticsScriptProps?.src || analyticsScriptCode) && (
|
|
125
|
-
<script {...analyticsScriptProps} data-griddo-id={fullUrl}>
|
|
126
|
-
{analyticsScriptCode}
|
|
127
|
-
</script>
|
|
128
|
-
)}
|
|
129
|
-
</Helmet>
|
|
130
|
-
</>
|
|
131
|
-
);
|
|
132
|
-
}
|