@griddo/cx 1.75.33 → 1.75.35
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 +96 -66
- package/src/utils/helpers.js +18 -15
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.35",
|
|
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.35",
|
|
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": "b07f3c7a091191e2bcc82ff31bb034456d68f4d0"
|
|
101
101
|
}
|
|
@@ -11,7 +11,7 @@ import parse from 'html-react-parser';
|
|
|
11
11
|
import * as React from 'react';
|
|
12
12
|
import { Helmet } from 'react-helmet';
|
|
13
13
|
import { composeAnalytics } from '../utils/dataLayer';
|
|
14
|
-
import {
|
|
14
|
+
import { formatImage, cleanCommaSeparated } from '../utils/helpers';
|
|
15
15
|
|
|
16
16
|
//
|
|
17
17
|
// Gatsby Head API, almost deprecate Helmet.
|
|
@@ -21,29 +21,36 @@ import { addGriddoDamParams, cleanCommaSeparated } from '../utils/helpers';
|
|
|
21
21
|
// strategy works, maybe we want to isolate `<Head>` in its own file as we did
|
|
22
22
|
// with seo.js.
|
|
23
23
|
//
|
|
24
|
-
export const Head =
|
|
24
|
+
export const Head = data => {
|
|
25
25
|
// ^^^^^^^^^^^
|
|
26
26
|
// A context object which is passed in during the creation of the page
|
|
27
27
|
const {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
pageContext: {
|
|
29
|
+
siteMetadata,
|
|
30
|
+
pageMetadata,
|
|
31
|
+
siteOptions,
|
|
32
|
+
locale,
|
|
33
|
+
openGraph,
|
|
34
|
+
componentsVersion,
|
|
35
|
+
griddoVersion,
|
|
36
|
+
page: {
|
|
37
|
+
fullUrl,
|
|
38
|
+
},
|
|
39
39
|
},
|
|
40
|
-
} =
|
|
40
|
+
} = data;
|
|
41
41
|
|
|
42
42
|
const metaRobots = cleanCommaSeparated(
|
|
43
43
|
`${pageMetadata?.index},${pageMetadata?.follow},${pageMetadata?.translate},${pageMetadata?.metasAdvanced}`
|
|
44
44
|
);
|
|
45
45
|
|
|
46
|
-
const showMetaRobots =
|
|
46
|
+
const showMetaRobots =
|
|
47
|
+
!!metaRobots &&
|
|
48
|
+
(siteOptions?.showBasicMetaRobots || metaRobots !== 'index,follow');
|
|
49
|
+
|
|
50
|
+
const { analyticsScript, analyticsDimensions } = composeAnalytics(
|
|
51
|
+
data,
|
|
52
|
+
generateAutomaticDimensions
|
|
53
|
+
);
|
|
47
54
|
|
|
48
55
|
const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
|
|
49
56
|
|
|
@@ -72,15 +79,11 @@ export const Head = ({ pageContext }) => {
|
|
|
72
79
|
} = fixedAnalyticsCode;
|
|
73
80
|
|
|
74
81
|
// Resize favicon
|
|
75
|
-
|
|
76
|
-
// else (Cloudinary or unkonwn) returns the original favicon url.
|
|
77
|
-
const faviconResized = addGriddoDamParams(
|
|
78
|
-
siteMetadata?.favicon,
|
|
79
|
-
'f/png/w/32/h/32'
|
|
80
|
-
);
|
|
82
|
+
const faviconResized = formatImage(siteMetadata?.favicon, 32, 32, 'png');
|
|
81
83
|
|
|
82
84
|
// Validate options
|
|
83
|
-
const cleanPageLanguages =
|
|
85
|
+
const cleanPageLanguages =
|
|
86
|
+
pageMetadata?.pageLanguages?.filter(item => item.isLive) || [];
|
|
84
87
|
|
|
85
88
|
const useCanonical =
|
|
86
89
|
!!pageMetadata?.canonical &&
|
|
@@ -101,57 +104,82 @@ export const Head = ({ pageContext }) => {
|
|
|
101
104
|
return (
|
|
102
105
|
<>
|
|
103
106
|
{!!pageMetadata?.title && <title>{pageMetadata?.title}</title>}
|
|
104
|
-
{!!pageMetadata?.description &&
|
|
107
|
+
{!!pageMetadata?.description && (
|
|
108
|
+
<meta name="description" content={pageMetadata?.description} />
|
|
109
|
+
)}
|
|
105
110
|
{siteOptions?.useMetaTitle && (
|
|
106
111
|
<meta name="title" content={pageMetadata?.title} />
|
|
107
112
|
)}
|
|
108
|
-
{useCanonical &&
|
|
109
|
-
<link rel="canonical" href={pageMetadata?.canonical} />
|
|
110
|
-
)}
|
|
113
|
+
{useCanonical && <link rel="canonical" href={pageMetadata?.canonical} />}
|
|
111
114
|
{!!faviconResized && <link rel="icon" href={faviconResized} />}
|
|
112
115
|
|
|
113
116
|
{/* Alternate, solo si se indexa la página y tiene traducciones */}
|
|
114
117
|
{useHrefLangs &&
|
|
115
|
-
cleanPageLanguages
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
))}
|
|
118
|
+
cleanPageLanguages.map(item => (
|
|
119
|
+
<link
|
|
120
|
+
key={item.pageId}
|
|
121
|
+
rel="alternate"
|
|
122
|
+
href={`${item.url}`}
|
|
123
|
+
hreflang={item.locale?.replace(/_/g, '-')}
|
|
124
|
+
/>
|
|
125
|
+
))}
|
|
124
126
|
|
|
125
127
|
{/* Robots */}
|
|
126
|
-
{showMetaRobots &&
|
|
127
|
-
<meta name="robots" content={metaRobots} />
|
|
128
|
-
)}
|
|
128
|
+
{showMetaRobots && <meta name="robots" content={metaRobots} />}
|
|
129
129
|
|
|
130
130
|
{/* Facebook */}
|
|
131
|
-
{!!siteMetadata?.title &&
|
|
131
|
+
{!!siteMetadata?.title && (
|
|
132
|
+
<meta property="og:site_name" content={siteMetadata?.title} />
|
|
133
|
+
)}
|
|
132
134
|
{!!locale && <meta property="og:locale" content={locale} />}
|
|
133
|
-
{(!!openGraph?.title || !!pageMetadata?.title) &&
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
{(!!openGraph?.title || !!pageMetadata?.title) && (
|
|
136
|
+
<meta
|
|
137
|
+
property="og:title"
|
|
138
|
+
content={openGraph?.title || pageMetadata?.title}
|
|
139
|
+
/>
|
|
140
|
+
)}
|
|
137
141
|
<meta property="og:type" content={openGraph?.type || 'website'} />
|
|
138
|
-
{(!!openGraph?.description || !!pageMetadata?.description) &&
|
|
139
|
-
|
|
142
|
+
{(!!openGraph?.description || !!pageMetadata?.description) && (
|
|
143
|
+
<meta
|
|
144
|
+
property="og:description"
|
|
145
|
+
content={openGraph?.description || pageMetadata?.description}
|
|
146
|
+
/>
|
|
147
|
+
)}
|
|
148
|
+
{!!openGraph?.image && (
|
|
149
|
+
<meta property="og:image" content={openGraph?.image} />
|
|
150
|
+
)}
|
|
140
151
|
<meta property="og:url" content={pageMetadata?.canonical || fullUrl} />
|
|
141
152
|
|
|
142
153
|
{/* Twitter */}
|
|
143
154
|
<meta property="twitter:card" content="summary_large_image" />
|
|
144
|
-
{(!!openGraph?.title || !!pageMetadata?.title) &&
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
155
|
+
{(!!openGraph?.title || !!pageMetadata?.title) && (
|
|
156
|
+
<meta
|
|
157
|
+
property="twitter:title"
|
|
158
|
+
content={openGraph?.title || pageMetadata?.title}
|
|
159
|
+
/>
|
|
160
|
+
)}
|
|
161
|
+
{(!!openGraph?.description || pageMetadata?.description) && (
|
|
162
|
+
<meta
|
|
163
|
+
property="twitter:description"
|
|
164
|
+
content={openGraph?.description || pageMetadata?.description}
|
|
165
|
+
/>
|
|
166
|
+
)}
|
|
167
|
+
{(!!openGraph?.twitterImage || !!openGraph?.image) && (
|
|
168
|
+
<meta
|
|
169
|
+
property="twitter:image"
|
|
170
|
+
content={openGraph?.twitterImage || openGraph?.image}
|
|
171
|
+
/>
|
|
172
|
+
)}
|
|
150
173
|
<meta
|
|
151
174
|
property="twitter:url"
|
|
152
175
|
content={pageMetadata?.canonical || fullUrl}
|
|
153
176
|
/>
|
|
154
|
-
{!siteOptions?.avoidDebugMetas &&
|
|
177
|
+
{!siteOptions?.avoidDebugMetas && (
|
|
178
|
+
<meta
|
|
179
|
+
property="debug"
|
|
180
|
+
content={`Components v${componentsVersion} by Griddo v${griddoVersion} @ ${new Date()}`}
|
|
181
|
+
/>
|
|
182
|
+
)}
|
|
155
183
|
|
|
156
184
|
{/* Data Layer */}
|
|
157
185
|
{/* Solo cuando se ejecuta en el navegador */}
|
|
@@ -175,19 +203,21 @@ export const Head = ({ pageContext }) => {
|
|
|
175
203
|
|
|
176
204
|
export default data => {
|
|
177
205
|
const {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
206
|
+
pageContext: {
|
|
207
|
+
page: content,
|
|
208
|
+
locale,
|
|
209
|
+
header,
|
|
210
|
+
footer,
|
|
211
|
+
siteMetadata,
|
|
212
|
+
theme,
|
|
213
|
+
cloudinaryName,
|
|
214
|
+
socials,
|
|
215
|
+
siteLangs,
|
|
216
|
+
BUILD_MODE,
|
|
217
|
+
page: { site: siteId, apiUrl, publicApiUrl, instance },
|
|
218
|
+
sitePages,
|
|
219
|
+
},
|
|
220
|
+
} = data;
|
|
191
221
|
|
|
192
222
|
const library = {
|
|
193
223
|
components,
|
|
@@ -243,4 +273,4 @@ export default data => {
|
|
|
243
273
|
/>
|
|
244
274
|
</SiteProvider>
|
|
245
275
|
);
|
|
246
|
-
};
|
|
276
|
+
};
|
package/src/utils/helpers.js
CHANGED
|
@@ -24,9 +24,23 @@ const log = (state, message, data) => {
|
|
|
24
24
|
);
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
+
// Format image
|
|
28
|
+
const formatImage = (image, width, height, format = 'jpg') => {
|
|
29
|
+
const url = image?.url || image;
|
|
30
|
+
if (!url) return null;
|
|
31
|
+
return url.split('/')[2].includes('cloudinary.com')
|
|
32
|
+
? addCloudinaryParams(url, `c_fill,w_${width},h_${height}`)
|
|
33
|
+
: addGriddoDamParams(url, `f/${format}/w/${width}/h/${height}`);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
// Format Griddo DAM image
|
|
37
|
+
const addGriddoDamParams = (image, params) => {
|
|
38
|
+
const splittedUrl = image.split('/');
|
|
39
|
+
return `${splittedUrl.slice(0,-1).join('/')}/${params}/${splittedUrl.slice(-1)[0]}`;
|
|
40
|
+
};
|
|
41
|
+
|
|
27
42
|
// Take a cloudinary url and add query params
|
|
28
43
|
const addCloudinaryParams = (socialImage, params) => {
|
|
29
|
-
if (!socialImage) return null;
|
|
30
44
|
const plainUrl = socialImage.url.replace('https://', '');
|
|
31
45
|
const head = plainUrl.split('/').slice(0, 4).join('/');
|
|
32
46
|
const fullId = plainUrl.replace(head, '');
|
|
@@ -82,8 +96,8 @@ const getOpenGraph = ({
|
|
|
82
96
|
type: 'website',
|
|
83
97
|
title: socialTitle || title,
|
|
84
98
|
description: socialDescription,
|
|
85
|
-
image:
|
|
86
|
-
twitterImage:
|
|
99
|
+
image: formatImage(socialImage, 1280,768),
|
|
100
|
+
twitterImage: formatImage(socialImage, 1280, 768),
|
|
87
101
|
});
|
|
88
102
|
|
|
89
103
|
const getMultiPageElements = distributorTemplate =>
|
|
@@ -117,20 +131,9 @@ const cleanCommaSeparated = x =>
|
|
|
117
131
|
.filter(item => !!item)
|
|
118
132
|
.join(',');
|
|
119
133
|
|
|
120
|
-
const isGriddoDamImage = url => !url?.includes('/res.cloudinary.com');
|
|
121
|
-
|
|
122
|
-
const addGriddoDamParams = (url, params) => {
|
|
123
|
-
if (!url) return url;
|
|
124
|
-
if (!isGriddoDamImage(url)) return url;
|
|
125
|
-
// eslint-disable-next-line no-unused-vars
|
|
126
|
-
const [_, id] = url.split('//')[1].split('/');
|
|
127
|
-
const head = url.split(id)[0];
|
|
128
|
-
return `${head}${params}/${id}`;
|
|
129
|
-
};
|
|
130
|
-
|
|
131
134
|
exports.getOpenGraph = getOpenGraph;
|
|
132
135
|
exports.getPageMetaData = getPageMetaData;
|
|
133
136
|
exports.log = log;
|
|
134
137
|
exports.getMultiPageElements = getMultiPageElements;
|
|
135
138
|
exports.cleanCommaSeparated = cleanCommaSeparated;
|
|
136
|
-
exports.
|
|
139
|
+
exports.formatImage = formatImage;
|