@griddo/cx 11.9.9-rc.0 → 11.9.9-rc.2

package/gatsby-browser.tsx

@@ -2,6 +2,7 @@ import type { GatsbyBrowser } from "gatsby";
 
 import { SessionProvider } from "@griddo/core";
 import { browser } from "@griddo-instance";
+import * as React from "react";
 
 export const disableCorePrefetching = () => {
 	if (browser.disableCorePrefetching) {
@@ -21,7 +22,9 @@ export const onInitialClientRender = () => {
 	}
 };
 
-export const onPostPrefetchPathname: GatsbyBrowser["onPostPrefetchPathname"] = (props) => {
+export const onPostPrefetchPathname: GatsbyBrowser["onPostPrefetchPathname"] = (
+	props,
+) => {
 	if (browser.onPostPrefetchPathname) {
 		browser.onPostPrefetchPathname(props);
 	}
@@ -33,61 +36,75 @@ export const onPreRouteUpdate: GatsbyBrowser["onPreRouteUpdate"] = (props) => {
 	}
 };
 
-export const onPrefetchPathname: GatsbyBrowser["onPrefetchPathname"] = (props) => {
+export const onPrefetchPathname: GatsbyBrowser["onPrefetchPathname"] = (
+	props,
+) => {
 	if (browser.onPrefetchPathname) {
 		browser.onPrefetchPathname(props);
 	}
 };
 
-export const onRouteUpdateDelayed: GatsbyBrowser["onRouteUpdateDelayed"] = (props) => {
+export const onRouteUpdateDelayed: GatsbyBrowser["onRouteUpdateDelayed"] = (
+	props,
+) => {
 	if (browser.onServiceWorkerActive) {
 		browser.onRouteUpdateDelayed(props);
 	}
 };
 
-export const onServiceWorkerActive: GatsbyBrowser["onServiceWorkerActive"] = (props) => {
+export const onServiceWorkerActive: GatsbyBrowser["onServiceWorkerActive"] = (
+	props,
+) => {
 	if (browser.onServiceWorkerActive) {
 		browser.onServiceWorkerActive(props);
 	}
 };
 
-export const onServiceWorkerInstalled: GatsbyBrowser["onServiceWorkerInstalled"] = (props) => {
-	if (browser.onServiceWorkerInstalled) {
-		browser.onServiceWorkerInstalled(props);
-	}
-};
-
-export const onServiceWorkerRedundant: GatsbyBrowser["onServiceWorkerRedundant"] = (props) => {
-	if (browser.onServiceWorkerRedundant) {
-		browser.onServiceWorkerRedundant(props);
-	}
-};
-
-export const onServiceWorkerUpdateFound: GatsbyBrowser["onServiceWorkerUpdateFound"] = (props) => {
-	if (browser.onServiceWorkerUpdateFound) {
-		browser.onServiceWorkerUpdateFound(props);
-	}
-};
-
-export const onServiceWorkerUpdateReady: GatsbyBrowser["onServiceWorkerUpdateReady"] = (props) => {
-	if (browser.onServiceWorkerUpdateReady) {
-		browser.onServiceWorkerUpdateReady(props);
-	}
-};
-
-export const registerServiceWorker: GatsbyBrowser["registerServiceWorker"] = () => {
-	if (browser.registerServiceWorker) {
-		return browser.registerServiceWorker();
-	}
-};
-
-export const replaceHydrateFunction: GatsbyBrowser["replaceHydrateFunction"] = () => {
-	if (browser.replaceHydrateFunction) {
-		return browser.replaceHydrateFunction();
-	}
-};
-
-export const shouldUpdateScroll: GatsbyBrowser["shouldUpdateScroll"] = (props) => {
+export const onServiceWorkerInstalled: GatsbyBrowser["onServiceWorkerInstalled"] =
+	(props) => {
+		if (browser.onServiceWorkerInstalled) {
+			browser.onServiceWorkerInstalled(props);
+		}
+	};
+
+export const onServiceWorkerRedundant: GatsbyBrowser["onServiceWorkerRedundant"] =
+	(props) => {
+		if (browser.onServiceWorkerRedundant) {
+			browser.onServiceWorkerRedundant(props);
+		}
+	};
+
+export const onServiceWorkerUpdateFound: GatsbyBrowser["onServiceWorkerUpdateFound"] =
+	(props) => {
+		if (browser.onServiceWorkerUpdateFound) {
+			browser.onServiceWorkerUpdateFound(props);
+		}
+	};
+
+export const onServiceWorkerUpdateReady: GatsbyBrowser["onServiceWorkerUpdateReady"] =
+	(props) => {
+		if (browser.onServiceWorkerUpdateReady) {
+			browser.onServiceWorkerUpdateReady(props);
+		}
+	};
+
+export const registerServiceWorker: GatsbyBrowser["registerServiceWorker"] =
+	() => {
+		if (browser.registerServiceWorker) {
+			return browser.registerServiceWorker();
+		}
+	};
+
+export const replaceHydrateFunction: GatsbyBrowser["replaceHydrateFunction"] =
+	() => {
+		if (browser.replaceHydrateFunction) {
+			return browser.replaceHydrateFunction();
+		}
+	};
+
+export const shouldUpdateScroll: GatsbyBrowser["shouldUpdateScroll"] = (
+	props,
+) => {
 	if (browser.shouldUpdateScroll) {
 		return browser.shouldUpdateScroll(props);
 	}

package/gatsby-config.ts

@@ -1,26 +1,33 @@
 import type { GatsbyConfig } from "gatsby";
 
-import { resolveComponentsPath } from "@griddo/cx";
+import { resolveComponentsPath, verboseLog } from "@griddo/cx";
+import dotenv from "dotenv";
+
+dotenv.config();
 
 /**
  * Este process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN se lee porque
- * se ha introducido en el spawnSync del la función gatsbyBuild.
+ * se ha introducido en el spawnSync del la función runGatsbyBuildCommand.
  *
  *	...
- *	env: {
- *		...process.env,
+ *	env: Object.assign(process.env, {
+ *		GRIDDO_EXPORTER: "true",
  *		SPAWN_ASSET_PREFIX_WITH_DOMAIN: assetPrefixWithDomain, <--------------
  *		NODE_OPTIONS: undefined,
- *	},
+ *	}),
+ *
+ * @see runGatsbyBuildCommand()
+ * @todo quiar el `... || undefined`
  */
-const griddoAssetPrefixWithDomain = process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN || undefined;
+const griddoAssetPrefixWithDomain =
+	process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN || undefined;
 
-if (process.env.GRIDDO_SSG_VERBOSE_LOGS) {
-	console.log(`set config.assetPrefix=${griddoAssetPrefixWithDomain}`);
-}
+verboseLog(`set config.assetPrefix=${griddoAssetPrefixWithDomain}`);
 
 // Gatsby configuration file from client
-const { plugins, ...gatsbyConfig } = require(resolveComponentsPath("builder.config.js"));
+const { plugins, ...gatsbyConfig } = require(
+	resolveComponentsPath("builder.config.js"),
+);
 
 const config: GatsbyConfig = {
 	// Client config

package/gatsby-node.ts

@@ -1,34 +1,49 @@
-import type { GatsbyNode } from "gatsby";
 import type { GatsbyPageObject } from "./src/types";
+import type { GatsbyNode } from "gatsby";
 
 import path from "node:path";
 
-import { addLogToBuffer, isComponentLibrary } from "@griddo/cx";
+import {
+	buildLog,
+	debugLog,
+	envs,
+	getBuildPagesFromStore,
+	getConfig,
+	pageSizeLog,
+	verboseLog,
+} from "@griddo/cx";
 
-import { getBuildPagesFromStore, pageSizeLog } from "./src/gatsby-node-utils";
+import { gatsbyRegister } from "./exporter/registers";
+import { insertAlert } from "./exporter/utils/alerts";
+
+const showGriddoBuildLogs = envs.GRIDDO_BUILD_LOGS;
 
 // process.env available through gatsbyBuildCommand.
-const showGriddoBuildLogs = JSON.parse(process.env.GRIDDO_BUILD_LOGS || "false");
-const showSSGVerboseLogs = JSON.parse(process.env.GRIDDO_VERBOSE_SSG || "false");
 const assetPrefixWithDomain = process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN;
-const needsAssetDomainPrefix = !!assetPrefixWithDomain && assetPrefixWithDomain !== "";
-const nodeOptions = process.env.NODE_OPTIONS;
+const sendAlertActive = JSON.parse(process.env.GRIDDO_ALERT_FEATURE || "false");
+const avoidMatchPath = JSON.parse(
+	process.env.GRIDDO_EXPERIMENTAL_DO_NOT_USE_MATCH_PATH || "false",
+);
+const useMatchPaths = !avoidMatchPath;
+const needsAssetDomainPrefix =
+	!!assetPrefixWithDomain && assetPrefixWithDomain !== "";
 
-const template = path.resolve("./src/components/template.tsx");
-const dbFilePath = isComponentLibrary
-	? path.resolve(__dirname, "../../..", ".griddo/cache/db.json")
-	: path.resolve(__dirname, "../..", ".griddo/cache/db.json");
+const { __ssg } = getConfig().paths();
+const template = path.join(__ssg, "src/components/template.tsx");
 
 const pages = getBuildPagesFromStore<GatsbyPageObject>({
 	withSizeProp: showGriddoBuildLogs,
-	dbFilePath,
 });
 
 const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
-	if (showSSGVerboseLogs) {
-		console.log(`read assetPrefixWithDomain=${assetPrefixWithDomain}`);
-		console.log(`set needsAssetDomainPrefix=${needsAssetDomainPrefix}`);
-		console.log(`using NODE_OPTIONS in gatsby-node.ts: ${nodeOptions}`);
+	verboseLog(`read assetPrefixWithDomain=${assetPrefixWithDomain}`);
+	verboseLog(`set needsAssetDomainPrefix=${needsAssetDomainPrefix}`);
+	console.log(
+		`using this NODE_OPTIONS in gatsby-node.ts: ${process.env.NODE_OPTIONS}`,
+	);
+
+	if (avoidMatchPath) {
+		console.log(`[!] GRIDDO EXPERIMENTAL: Avoiding use of matchPath`);
 	}
 
 	for await (const page of pages) {
@@ -36,16 +51,60 @@ const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
 			return;
 		}
 
+		const matchPath =
+			needsAssetDomainPrefix && useMatchPaths
+				? page.context.fullPath.compose
+				: "";
+
 		page.component = template;
+		page.matchPath = matchPath;
 
 		actions.createPage(page);
 
+		const path = page.path;
+		const id = page.context.id;
+		const size = pageSizeLog(Math.round(page.size || 0));
+
+		if (sendAlertActive && page.size) {
+			const pageMaxSizeReached =
+				page.size >
+				Number.parseInt(process.env.GRIDDO_SSG_MAX_PAGE_SIZE || "524288") /
+					1024;
+
+			if (pageMaxSizeReached) {
+				gatsbyRegister.insert("GATSBY_PAGE_SIZE_TOO_BIG", {
+					path: page.path,
+					size: `${Math.round(page.size)}KB`,
+				});
+			}
+		}
+
 		if (showGriddoBuildLogs) {
-			const id = page.context.id;
-			const path = page.path;
-			const size = pageSizeLog(Math.round(page.size || 0));
-			addLogToBuffer(`Creating page ${path} - ${id} - ${size}`);
+			buildLog(`Creating page ${path} - ${id} - ${size}`);
+		}
+	}
+
+	if (sendAlertActive) {
+		const registerContent = gatsbyRegister.get("GATSBY_PAGE_SIZE_TOO_BIG");
+
+		if (registerContent.entries.length < 1) {
+			return;
 		}
+
+		debugLog("\nRender register report\n");
+		debugLog(registerContent);
+		debugLog();
+
+		await insertAlert({
+			description: "Render register report",
+			area: "Griddo",
+			level: "W",
+			fullData: {
+				output: registerContent,
+				date: new Date().toISOString(),
+			},
+			instantNotification: false,
+		});
 	}
 };
 

package/gatsby-ssr.tsx

@@ -1,9 +1,8 @@
 import type { GatsbySSR } from "gatsby";
 
-import * as React from "react";
-
 import { SessionProvider } from "@griddo/core";
 import { ssr } from "@griddo-instance";
+import * as React from "react";
 
 export const wrapPageElement: GatsbySSR["wrapPageElement"] = (props) => {
 	if (ssr.wrapPageElement) {

package/package.json

@@ -1,9 +1,13 @@
 {
 	"name": "@griddo/cx",
 	"description": "Griddo SSG based on Gatsby",
-	"version": "11.9.9-rc.0",
+	"version": "11.9.9-rc.2",
 	"authors": [
-		"Hisco <francis.vega@griddo.io>"
+		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
+		"Diego M. Béjar <diego.bejar@secuoyas.com>",
+		"Francis Vega <francis.vega@secuoyas.com>",
+		"Gonzalo Hernández <gonzalo.hernandez@secuoyas.com>",
+		"Sergio Ródenas <sergio.rodenas@secuoyas.com>"
 	],
 	"license": "UNLICENSED",
 	"homepage": "https://griddo.io",
@@ -11,6 +15,10 @@
 		"type": "git",
 		"url": "https://github.com/griddo/griddo"
 	},
+	"bin": {
+		"griddo-cx": "./start-render.js",
+		"griddo-start-render": "./start-render.js"
+	},
 	"exports": {
 		".": {
 			"import": "./build/index.js",
@@ -27,69 +35,100 @@
 		"// NPM": "",
 		"prepare": "yarn run build",
 		"// BUILD": "",
-		"build": "rm -rf build && sh ./exporter/build.sh",
-		"build:debug": "rm -rf build && sh ./exporter/build.sh --debug",
+		"build": "sh ./exporter/build.sh",
+		"build:debug": "sh ./exporter/build.sh --debug",
 		"// TESTS": "",
-		"test": "npm run test:compile && npm run test:create-render-fixtures && node --env-file=.env --test ./build/__tests__/* && npm run test:remove-render-fixtures",
-		"test-exporter": "npm run test:compile && node --env-file=.env --test ./build/__tests__exporter__/",
-		"test:create-render-fixtures": "node --env-file=.env ./build/__tests__/utils/create-fixtures",
-		"test:remove-render-fixtures": "node --env-file=.env ./build/__tests__/utils/remove-fixtures",
-		"test:compile": "tsgo --project tsconfig.tests.json",
+		"test": "NODE_OPTIONS='--import tsx' env-cmd node --test ./__tests__/*",
+		"test:create-render-fixtures": "env-cmd tsx ./__tests__/utils/create-fixtures.ts",
+		"test:remove-render-fixtures": "env-cmd tsx ./__tests__/utils/remove-fixtures.ts",
 		"// INFRA SCRIPTS": "",
-		"prepare-domains-render": "node ./build/commands/prepare-domains-render",
-		"start-render": "node ./build/commands/start-render",
-		"end-render": "node ./build/commands/end-render",
-		"upload-search-content": "node ./build/commands/upload-search-content",
-		"reset-render": "node ./build/commands/reset-render",
-		"// ONLY LOCAL SCRIPTS": "",
-		"prepare-assets-directory": "node ./build/commands/prepare-assets-directory",
-		"create-rollback-copy": "rm -rf ../../exports-backup && cp -r ../../exports ../../exports-backup",
-		"render": "npm run build && node --env-file=.env cli.mjs render",
-		"// LINTER & FORMATTER": "",
-		"lint": "biome check --write",
-		"format": "biome format --write",
-		"flint": "npm run lint && npm run format",
-		"ts-lint": "tsgo --noEmit",
-		"watch:ts-lint": "tsc --noEmit --watch"
+		"upload-search-content": "node ./build/upload-search-content.js",
+		"complete-render": "node ./build/end-render.js",
+		"end-render": "node ./build/end-render.js",
+		"start-render": "node ./build/start-render.js",
+		"reset-render": "node ./build/reset-render.js",
+		"prepare-domains-render": "node ./build/prepare-domains-render.js",
+		"// SSG": "",
+		"clean": "gatsby clean; rm -rf assets .cx-cache caches store apiCache build .render-sentinel",
+		"gatsby-build": "gatsby telemetry --disable && gatsby build --prefix-paths",
+		"// LINTER": "",
+		"run:ts-lint": "tsc --noEmit",
+		"watch:ts-lint": "tsc --noEmit --watch",
+		"run:eslint": "eslint .",
+		"run:lint": "yarn run:ts-lint && yarn run:eslint",
+		"// FORMATTER": "",
+		"run:format": "prettier --write ."
 	},
 	"dependencies": {
-		"gatsby": "5.15.0",
-		"typescript": "4.9.5"
+		"@babel/core": "7.26.0",
+		"@babel/plugin-transform-class-properties": "7.25.9",
+		"@babel/preset-env": "7.26.0",
+		"@babel/preset-react": "7.26.3",
+		"@babel/preset-typescript": "7.26.0",
+		"@griddo/core": "11.9.9-rc.2",
+		"@svgr/webpack": "5.5.0",
+		"axios": "1.7.9",
+		"babel-loader": "9.2.1",
+		"babel-plugin-transform-runtime": "6.23.0",
+		"babel-polyfill": "6.26.0",
+		"dotenv": "16.4.5",
+		"esbuild": "0.24.0",
+		"find-up": "5.0.0",
+		"fs-extra": "11.2.0",
+		"gatsby": "5.14.0",
+		"gatsby-plugin-svgr-loader": "0.1.0",
+		"html-react-parser": "5.2.0",
+		"js2xmlparser": "5.0.0",
+		"kleur": "4.1.5",
+		"p-limit": "3.1.0",
+		"path-browserify": "1.0.1",
+		"pkg-dir": "5.0.0",
+		"typescript": "5.7.2",
+		"webpack": "5.76.1"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.2.6",
-		"@types/node": "20.19.4",
-		"@typescript/native-preview": "latest",
-		"cheerio": "1.1.2",
-		"esbuild": "0.25.11",
-		"p-limit": "7.2.0"
+		"@types/cheerio": "0.22.35",
+		"@types/eslint": "8.56.10",
+		"@types/fs-extra": "11.0.4",
+		"@types/node": "20.17.10",
+		"@types/webpack": "5.28.5",
+		"@typescript-eslint/eslint-plugin": "^8.0.0",
+		"@typescript-eslint/parser": "^8.0.0",
+		"cheerio": "1.0.0",
+		"eslint": "^9.0.0",
+		"eslint-plugin-import": "2.31.0",
+		"eslint-plugin-node": "11.1.0",
+		"eslint-plugin-react": "7.37.4",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-testing-library": "^6.2.0",
+		"globals": "^16.0.0",
+		"prettier": "3.4.2"
 	},
 	"peerDependencies": {
-		"@griddo/core": "*",
+		"@types/react": ">=18 <19",
+		"@types/react-dom": ">=18 <19",
 		"react": ">=18 <19",
 		"react-dom": ">=18 <19"
 	},
 	"engines": {
-		"node": ">=20.19"
+		"node": ">=20"
 	},
 	"files": [
 		"build",
 		"exporter",
 		"src",
-		"react",
+		"cx.config.d.ts",
+		"cx.config.js",
 		"gatsby-browser.tsx",
 		"gatsby-config.ts",
 		"gatsby-node.ts",
 		"gatsby-ssr.tsx",
 		"global.d.ts",
-		"tsconfig.commands.json",
-		"tsconfig.exporter.json",
-		"tsconfig.json",
-		"plugins",
-		"cli.mjs"
+		"start-render.js",
+		"tsconfig.json"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "df9f9d683ad5f84b7f209c28b352c1b43d6d684f"
+	"gitHead": "40e12cbab48091331921da9166d2acd62906854a"
 }

package/src/README.md

@@ -0,0 +1,7 @@
+# Griddo CX + Gatsby
+
+The `/src` dir and almost every file in the root dir is now 100% Gatsby related code along with the historical `/public`, `/dist`, `/apiCache`, `/store`, etc.. render dirs.
+
+Griddo CX code (the business logic) is now in `/exporter` dir.
+
+In the future, Griddo CX and Gatsby will split int their own packages dirs inside the mono-repo.

package/src/components/Head.tsx

@@ -1,14 +1,7 @@
 import type { CustomHeadProps } from "../types";
 
-import { GriddoFavicon, GriddoIntegrations, GriddoOpenGraph } from "@griddo/cx/react";
-
-function cleanCommaSeparated(str: string) {
-	return str
-		.split(",")
-		.map((item) => item.trim())
-		.filter(Boolean)
-		.join(",");
-}
+import { Favicon, GriddoIntegrations } from "@griddo/cx/react";
+import * as React from "react";
 
 /**
  * Gatsby Head API
@@ -19,7 +12,13 @@ const Head = (props: CustomHeadProps) => {
 		pageContext: {
 			locale,
 			openGraph,
-			page: { disableHrefLangs, fullUrl, defaultLang, integrations = [], dimensions },
+			page: {
+				disableHrefLangs,
+				fullUrl,
+				defaultLang,
+				integrations = [],
+				dimensions,
+			},
 			pageMetadata,
 			siteMetadata,
 			siteOptions,
@@ -32,13 +31,19 @@ const Head = (props: CustomHeadProps) => {
 	);
 
 	const showMetaRobots =
-		!!metaRobots && (siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
+		!!metaRobots &&
+		(siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
 
-	const cleanPageLanguages = pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
+	// Validate options
+	const cleanPageLanguages =
+		pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
 
 	const useCanonical =
 		!!pageMetadata?.canonical &&
-		!(siteOptions?.avoidSelfReferenceCanonicals && pageMetadata?.canonical === fullUrl);
+		!(
+			siteOptions?.avoidSelfReferenceCanonicals &&
+			pageMetadata?.canonical === fullUrl
+		);
 
 	const useHrefLangs =
 		!(
@@ -55,7 +60,8 @@ const Head = (props: CustomHeadProps) => {
 		(useHrefLangs &&
 			!siteOptions?.avoidHrefLangXDefault &&
 			defaultLangId &&
-			cleanPageLanguages.find((item) => item.languageId === defaultLangId)?.url) ||
+			cleanPageLanguages.find((item) => item.languageId === defaultLangId)
+				?.url) ||
 		null;
 
 	return (
@@ -66,12 +72,15 @@ const Head = (props: CustomHeadProps) => {
 			{!!pageMetadata?.description && (
 				<meta name="description" content={pageMetadata?.description} />
 			)}
-			{siteOptions?.useMetaTitle && <meta name="title" content={pageMetadata?.title} />}
+			{siteOptions?.useMetaTitle && (
+				<meta name="title" content={pageMetadata?.title} />
+			)}
 			{useCanonical && <link rel="canonical" href={pageMetadata?.canonical} />}
 
-			<GriddoFavicon url={siteMetadata?.favicon} />
+			{/* Favicon images */}
+			<Favicon url={siteMetadata?.favicon} />
 
-			{/* Alternate, only if the page is indexed and has translations */}
+			{/* Alternate, solo si se indexa la página y tiene traducciones */}
 			{hrefLangXDefaultUrl && (
 				<link rel="alternate" href={hrefLangXDefaultUrl} hrefLang="x-default" />
 			)}
@@ -88,23 +97,51 @@ const Head = (props: CustomHeadProps) => {
 			{/* Robots */}
 			{showMetaRobots && <meta name="robots" content={metaRobots} />}
 
-			{/* Griddo Metadatos */}
-			{<meta name="griddo-render-date" content={new Date().toISOString()} />}
+			{/* Open Graph */}
+			{!!siteMetadata?.title && (
+				<meta property="og:site_name" content={siteMetadata?.title} />
+			)}
+			{!!locale && <meta property="og:locale" content={locale} />}
+			{(!!openGraph?.title || !!pageMetadata?.title) && (
+				<meta
+					property="og:title"
+					content={openGraph?.title || pageMetadata?.title}
+				/>
+			)}
+			<meta property="og:type" content={openGraph?.type || "website"} />
+			{(!!openGraph?.description || !!pageMetadata?.description) && (
+				<meta
+					property="og:description"
+					content={openGraph?.description || pageMetadata?.description}
+				/>
+			)}
+			{!!openGraph?.image && (
+				<meta property="og:image" content={openGraph?.image} />
+			)}
+			<meta
+				property="og:url"
+				content={pageMetadata?.canonical || fullUrl || ""}
+			/>
+
+			{/* Twitter */}
+			<meta property="twitter:card" content="summary_large_image" />
+			{!!openGraph?.twitterImage && (
+				<meta property="twitter:image" content={openGraph?.twitterImage} />
+			)}
+
+			{/* Debug */}
+			{/* {!siteOptions?.avoidDebugMetas && (
+				<meta
+					property="debug"
+					content={`Griddo v${griddoVersion} @ ${renderDate}}`}
+				/>
+			)} */}
 
 			{/* Keywords */}
 			{siteOptions?.useMetaKeywords && !!pageMetadata?.metaKeywords && (
 				<meta name="keywords" content={pageMetadata.metaKeywords} />
 			)}
 
-			{/* Open Graph */}
-			<GriddoOpenGraph
-				openGraph={openGraph}
-				pageMetadata={pageMetadata}
-				siteMetadata={siteMetadata}
-				locale={locale}
-				fullUrl={fullUrl}
-			/>
-
 			{/* Integrations */}
 			<GriddoIntegrations
 				id={fullUrl}
@@ -118,4 +155,12 @@ const Head = (props: CustomHeadProps) => {
 	);
 };
 
+function cleanCommaSeparated(str: string) {
+	return str
+		.split(",")
+		.map((item) => item.trim())
+		.filter(Boolean)
+		.join(",");
+}
+
 export { Head };