@griddo/cx 10.7.3 → 10.7.4

package/build/utils/images.d.ts

@@ -0,0 +1,12 @@
+import type { Fields } from "@griddo/core";
+/**
+ * Format Cloudinary or DAM URL
+ *
+ * @param image The image url
+ * @param width With of the image
+ * @param height Height of the image
+ * @param format Format of the image
+ * @returns A composed URL for the Cloudinary or DAM service
+ */
+declare function formatImage(image: Fields.Image | string, width: number, height: number, format?: string): string | null;
+export { formatImage };

package/build/utils/pages.d.ts

@@ -1,6 +1,6 @@
+import type { Fields } from "@griddo/core";
 import type { GriddoListPage, GriddoMultiPage, GriddoPageObject, GriddoSinglePage, MultiPageElements, PageAdditionalInfo } from "../types/pages";
 import type { TemplateWithDistributor } from "../types/templates";
-import type { Fields } from "@griddo/core";
 /**
  * Create a single Griddo page object.
  *

package/exporter/adapters/gatsby/utils.ts

@@ -1,5 +1,3 @@
-import type { Fields } from "@griddo/core";
-
 import { spawnSync } from "node:child_process";
 import path from "node:path";
 
@@ -42,56 +40,6 @@ function getGatsbyAssetPrefixWithDomain(domain: string) {
 	return assetPrefixWithDomain;
 }
 
-/**
- * Format Cloudinary or DAM URL
- *
- * @param image The image url
- * @param width With of the image
- * @param height Height of the image
- * @param format Format of the image
- * @returns A composed URL for the Cloudinary or DAM service
- */
-function formatImage(
-	image: Fields.Image | string,
-	width: number,
-	height: number,
-	format = "jpg",
-) {
-	const url = typeof image === "string" ? image : image?.url;
-
-	if (!url) {
-		return null;
-	}
-
-	const isCloudinary = url.split("/")[2].includes("cloudinary.com");
-
-	return isCloudinary
-		? addCloudinaryParams(url, `c_fill,w_${width},h_${height}`)
-		: addGriddoDamParams(url, `f/${format}/w/${width}/h/${height}`);
-}
-
-/**
- * Format Griddo DAM image url.
- */
-function addGriddoDamParams(image: string, params: string) {
-	const urlParts = image.split("/");
-	const imagePath = urlParts.slice(0, -1).join("/");
-	const imageName = urlParts.slice(-1)[0];
-
-	return `${imagePath}/${params}/${imageName}`;
-}
-
-/**
- * Take a cloudinary url and add query params.
- */
-function addCloudinaryParams(image: string, params: string) {
-	const plainUrl = image.replace("https://", "");
-	const head = plainUrl.split("/").slice(0, 4).join("/");
-	const fullId = plainUrl.replace(head, "");
-
-	return `https://${head}/${params}${fullId}`;
-}
-
 /**
  * Spawn a new node process `yarn gatsby-build`
  * @note This proccess (`yarn gatsby-build`) can not access to the custom Griddo
@@ -191,7 +139,6 @@ async function legacy__createDistFromGatsbyPublic(
 }
 
 export {
-	formatImage,
 	getGatsbyAssetPrefixWithDomain,
 	legacy__createDistFromGatsbyPublic,
 	runGatsbyBuildCommand,

package/exporter/index.ts

@@ -5,13 +5,10 @@
  * This file exports functions to use in both: adapters and SSG's frameworks.
  * Turning CX basically in a javascript library.
  *
- * # Browser context.
- * There is another export in the `/browser` directory to use exclusivelly in
+ * # React
+ * There is another export in the `/react` directory to use exclusivelly in
  * the browser context where nodejs (path, fs, etc..) is not available.
  *
- * # Render script (bin)
- * The binary file of the package is `run-start-render.ts`.
- *
  * # Separate scripts.
  * There are some separate .ts files as build-complete.ts or reset-render.ts
  * that are intended to be used by infra via npm script like `npm run

package/exporter/react/Favicon/index.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { formatImage } from "./utils";
+
+function Favicon({ url }: { url: string | undefined }) {
+	if (!url) {
+		return null;
+	}
+
+	return (
+		<>
+			<link
+				rel="icon"
+				type="image/png"
+				sizes="48x48"
+				href={formatImage(url, { width: 48, height: 48, format: "png" })}
+			/>
+			<link
+				rel="icon"
+				type="image/png"
+				sizes="192x192"
+				href={formatImage(url, { width: 192, height: 192, format: "png" })}
+			/>
+			<link
+				rel="apple-touch-icon"
+				sizes="180x180"
+				href={formatImage(url, { width: 180, height: 180, format: "png" })}
+			/>
+			<link
+				rel="icon"
+				type="image/svg+xml"
+				href={formatImage(url, { format: "svg" })}
+			/>
+		</>
+	);
+}
+
+export { Favicon };

package/exporter/react/Favicon/utils.ts

@@ -0,0 +1,60 @@
+/**
+ * Format Cloudinary or DAM URL
+ */
+function formatImage(
+	url: string,
+	options?: {
+		format?: string;
+		width?: number;
+		height?: number;
+	},
+) {
+	const { format, height, width } = options || {};
+
+	if (!url) {
+		return "";
+	}
+
+	const isCloudinary = url.split("/")[2].includes("cloudinary.com");
+	const isDAM = !isCloudinary;
+
+	if (isCloudinary) {
+		const _w = width ? `,w_${width}` : "";
+		const _h = height ? `,h_${height}` : "";
+
+		return addCloudinaryParams(url, `c_fill${_w}${_h}`);
+	}
+
+	if (isDAM) {
+		const _w = width ? `/w/${width}` : "";
+		const _h = height ? `/h/${height}` : "";
+
+		return addGriddoDamParams(url, `f/${format}${_w}${_h}`);
+	}
+
+	return "";
+}
+
+/**
+ * Format Griddo DAM image url.
+ */
+function addGriddoDamParams(url: string, params: string) {
+	const urlParts = url.split("/");
+	const urlWithoutImageName = urlParts.slice(0, -1).join("/");
+	const imageName = urlParts.slice(-1)[0];
+
+	return `${urlWithoutImageName}/${params}/${imageName}`;
+}
+
+/**
+ * Take a cloudinary url and add query params.
+ */
+function addCloudinaryParams(image: string, params: string) {
+	const plainUrl = image.replace("https://", "");
+	const head = plainUrl.split("/").slice(0, 4).join("/");
+	const fullId = plainUrl.replace(head, "");
+
+	return `https://${head}/${params}${fullId}`;
+}
+
+export { formatImage };

package/exporter/react/GriddoIntegrations/index.tsx

@@ -1,15 +1,14 @@
-import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
+import type { Dimensions } from "../../types/pages";
 
 import { generateAutomaticDimensions } from "@griddo-instance";
 import parse from "html-react-parser";
 import * as React from "react";
-
 import {
 	composeAnalytics,
 	filterBodyIntegrationFromPosition,
 	filterHeadIntegrations,
-} from "../../utils/integrations";
+} from "./utils";
 
 export interface GriddoIntegrationsProps {
 	integrations?: Array<Core.PageIntegration>;

package/exporter/{utils/integrations.ts → react/GriddoIntegrations/utils.ts}

@@ -1,5 +1,5 @@
-import type { Dimensions } from "../types/pages";
 import type { Core } from "@griddo/core";
+import { Dimensions } from "../../types/pages";
 
 /**
  * Return true if the argument is an object (not null)

package/exporter/react/index.tsx

@@ -1,3 +1,4 @@
+import { Favicon } from "./Favicon";
 import { GriddoIntegrations } from "./GriddoIntegrations";
 
-export { GriddoIntegrations };
+export { Favicon, GriddoIntegrations };

package/{src/utils.ts → exporter/utils/images.ts}

@@ -1,25 +1,5 @@
-// Only browser environment code, not node.
-//
-// Don't write node code (fs, path, etc..) in this file because is imported by
-// `template.tsx` in a browser environment and node doesn't exist there.
-// If you need to write utils, for example for `gatsby-node.ts` that uses node
-// packages write them in `gatsby-node-utils.ts`.
-//
-// NOTE: Browserify doesn't work with the mixture of typescript + webpack 5 + SSR
-
 import type { Fields } from "@griddo/core";
 
-/**
- * Sanitize a string separated by commas.
- */
-function cleanCommaSeparated(str: string) {
-	return str
-		.split(",")
-		.map((item) => item.trim())
-		.filter(Boolean)
-		.join(",");
-}
-
 /**
  * Format Cloudinary or DAM URL
  *
@@ -70,4 +50,4 @@ function addCloudinaryParams(image: string, params: string) {
 	return `https://${head}/${params}${fullId}`;
 }
 
-export { cleanCommaSeparated, formatImage };
+export { formatImage };

package/exporter/utils/pages.ts

@@ -1,3 +1,4 @@
+import type { Core, Fields } from "@griddo/core";
 import type {
 	APIPageObject,
 	GriddoListPage,
@@ -9,11 +10,9 @@ import type {
 	PageAdditionalInfo,
 } from "../types/pages";
 import type { TemplateWithDistributor } from "../types/templates";
-import type { Core, Fields } from "@griddo/core";
 
 import dotenv from "dotenv";
-
-import { formatImage } from "../adapters/gatsby/utils";
+import { formatImage } from "./images";
 
 dotenv.config();
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/cx",
 	"description": "Griddo SSG based on Gatsby",
-	"version": "10.7.3",
+	"version": "10.7.4",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -47,7 +47,7 @@
 		"@babel/preset-env": "^7.14.5",
 		"@babel/preset-react": "^7.14.5",
 		"@babel/preset-typescript": "^7.16.5",
-		"@griddo/core": "10.7.3",
+		"@griddo/core": "10.7.4",
 		"@svgr/webpack": "^5.5.0",
 		"babel-loader": "^8.0.6",
 		"babel-plugin-transform-runtime": "^6.23.0",
@@ -115,5 +115,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e4765708d342635b3d58af6605256d90671d2ef3"
+	"gitHead": "ffe5e36398cb00a902d9c47002278e8008b62a01"
 }

package/src/components/Head.tsx

@@ -2,8 +2,7 @@ import type { CustomHeadProps } from "../types";
 
 import * as React from "react";
 
-import { GriddoIntegrations } from "../../build/react";
-import { cleanCommaSeparated, formatImage } from "../utils";
+import { Favicon, GriddoIntegrations } from "../../build/react";
 
 /**
  * Gatsby Head API
@@ -36,9 +35,6 @@ const Head = (props: CustomHeadProps) => {
 		!!metaRobots &&
 		(siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
 
-	// Resize favicon
-	const faviconResized = formatImage(siteMetadata?.favicon, 32, 32, "png");
-
 	// Validate options
 	const cleanPageLanguages =
 		pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
@@ -73,7 +69,6 @@ const Head = (props: CustomHeadProps) => {
 		<>
 			{/* Uncomment with Gatsby 5.5.0 */}
 			{/* <html lang={locale} /> */}
-
 			{!!pageMetadata?.title && <title>{pageMetadata?.title}</title>}
 			{!!pageMetadata?.description && (
 				<meta name="description" content={pageMetadata?.description} />
@@ -82,7 +77,9 @@ const Head = (props: CustomHeadProps) => {
 				<meta name="title" content={pageMetadata?.title} />
 			)}
 			{useCanonical && <link rel="canonical" href={pageMetadata?.canonical} />}
-			{!!faviconResized && <link rel="icon" href={faviconResized} />}
+
+			{/* Favicon images */}
+			<Favicon url={siteMetadata?.favicon} />
 
 			{/* Alternate, solo si se indexa la página y tiene traducciones */}
 			{hrefLangXDefaultUrl && (
@@ -146,6 +143,7 @@ const Head = (props: CustomHeadProps) => {
 				<meta name="keywords" content={pageMetadata.metaKeywords} />
 			)}
 
+			{/* Integrations */}
 			<GriddoIntegrations
 				id={fullUrl}
 				location="head"
@@ -158,4 +156,12 @@ const Head = (props: CustomHeadProps) => {
 	);
 };
 
+function cleanCommaSeparated(str: string) {
+	return str
+		.split(",")
+		.map((item) => item.trim())
+		.filter(Boolean)
+		.join(",");
+}
+
 export { Head };

package/build/browser/index.d.ts

@@ -1,5 +0,0 @@
-import type { Core } from "@griddo/core";
-declare function filterBodyIntegrationFromPosition(integrations: Array<Core.PageIntegration>, position: "start" | "end"): string[];
-declare function filterHeadIntegrations(integrations: Array<Core.PageIntegration>): string[];
-declare function filterPositionIntegrations(integrations: Array<Core.PageIntegration>, position: "head" | "start" | "end"): string[];
-export { filterBodyIntegrationFromPosition, filterHeadIntegrations, filterPositionIntegrations, };

package/build/browser/index.js

@@ -1,2 +0,0 @@
-"use strict";var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var n in t)o(e,n,{get:t[n],enumerable:!0})},y=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!l.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(a=i(t,r))||a.enumerable});return e};var s=e=>y(o({},"__esModule",{value:!0}),e);var I={};u(I,{filterBodyIntegrationFromPosition:()=>d,filterHeadIntegrations:()=>c,filterPositionIntegrations:()=>g});module.exports=s(I);function d(e,t){return e?.filter(n=>n.contentBody!==null&&n.contentBody!==""&&n.contentBodyPosition===t).map(n=>n.contentBody)||[]}function c(e){return e?.filter(t=>t.contentHead!==null&&t.contentHead!=="").map(t=>t.contentHead)||[]}function g(e,t){switch(t){case"head":return c(e);default:return d(e,t)}}0&&(module.exports={filterBodyIntegrationFromPosition,filterHeadIntegrations,filterPositionIntegrations});
-//# sourceMappingURL=index.js.map

package/build/browser/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../exporter/browser/index.ts"],
-  "sourcesContent": ["import type { Core } from \"@griddo/core\";\n\nfunction filterBodyIntegrationFromPosition(\n\tintegrations: Array<Core.PageIntegration>,\n\tposition: \"start\" | \"end\",\n) {\n\treturn (\n\t\tintegrations\n\t\t\t?.filter(\n\t\t\t\t(integration) =>\n\t\t\t\t\tintegration.contentBody !== null &&\n\t\t\t\t\tintegration.contentBody !== \"\" &&\n\t\t\t\t\tintegration.contentBodyPosition === position,\n\t\t\t)\n\t\t\t.map((integration) => integration.contentBody!) || []\n\t);\n}\n\nfunction filterHeadIntegrations(integrations: Array<Core.PageIntegration>) {\n\treturn (\n\t\tintegrations\n\t\t\t?.filter(\n\t\t\t\t(integration) =>\n\t\t\t\t\tintegration.contentHead !== null && integration.contentHead !== \"\",\n\t\t\t)\n\t\t\t.map((integration) => integration.contentHead!) || []\n\t);\n}\n\nfunction filterPositionIntegrations(\n\tintegrations: Array<Core.PageIntegration>,\n\tposition: \"head\" | \"start\" | \"end\",\n) {\n\tswitch (position) {\n\t\tcase \"head\":\n\t\t\treturn filterHeadIntegrations(integrations);\n\t\tdefault:\n\t\t\treturn filterBodyIntegrationFromPosition(integrations, position);\n\t}\n}\n\nexport {\n\tfilterBodyIntegrationFromPosition,\n\tfilterHeadIntegrations,\n\tfilterPositionIntegrations,\n};\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uCAAAE,EAAA,2BAAAC,EAAA,+BAAAC,IAAA,eAAAC,EAAAL,GAEA,SAASE,EACRI,EACAC,EACC,CACD,OACCD,GACG,OACAE,GACAA,EAAY,cAAgB,MAC5BA,EAAY,cAAgB,IAC5BA,EAAY,sBAAwBD,CACtC,EACC,IAAKC,GAAgBA,EAAY,WAAY,GAAK,CAAC,CAEvD,CAEA,SAASL,EAAuBG,EAA2C,CAC1E,OACCA,GACG,OACAE,GACAA,EAAY,cAAgB,MAAQA,EAAY,cAAgB,EAClE,EACC,IAAKA,GAAgBA,EAAY,WAAY,GAAK,CAAC,CAEvD,CAEA,SAASJ,EACRE,EACAC,EACC,CACD,OAAQA,EAAU,CACjB,IAAK,OACJ,OAAOJ,EAAuBG,CAAY,EAC3C,QACC,OAAOJ,EAAkCI,EAAcC,CAAQ,CACjE,CACD",
-  "names": ["browser_exports", "__export", "filterBodyIntegrationFromPosition", "filterHeadIntegrations", "filterPositionIntegrations", "__toCommonJS", "integrations", "position", "integration"]
-}

package/exporter/browser/README.md

@@ -1,3 +0,0 @@
-# browser code
-
-browser/index.ts can't contain nodejs code, only browser compatible.

package/exporter/browser/index.ts

@@ -1,46 +0,0 @@
-import type { Core } from "@griddo/core";
-
-function filterBodyIntegrationFromPosition(
-	integrations: Array<Core.PageIntegration>,
-	position: "start" | "end",
-) {
-	return (
-		integrations
-			?.filter(
-				(integration) =>
-					integration.contentBody !== null &&
-					integration.contentBody !== "" &&
-					integration.contentBodyPosition === position,
-			)
-			.map((integration) => integration.contentBody!) || []
-	);
-}
-
-function filterHeadIntegrations(integrations: Array<Core.PageIntegration>) {
-	return (
-		integrations
-			?.filter(
-				(integration) =>
-					integration.contentHead !== null && integration.contentHead !== "",
-			)
-			.map((integration) => integration.contentHead!) || []
-	);
-}
-
-function filterPositionIntegrations(
-	integrations: Array<Core.PageIntegration>,
-	position: "head" | "start" | "end",
-) {
-	switch (position) {
-		case "head":
-			return filterHeadIntegrations(integrations);
-		default:
-			return filterBodyIntegrationFromPosition(integrations, position);
-	}
-}
-
-export {
-	filterBodyIntegrationFromPosition,
-	filterHeadIntegrations,
-	filterPositionIntegrations,
-};