@griddo/cx 1.75.179 → 1.75.181

package/scripts/griddo-exporter.ts

@@ -0,0 +1,305 @@
+#!/usr/bin/env node
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable node/shebang */
+
+require("dotenv").config();
+
+// External libraries
+import chalk from "chalk";
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import pkgDir from "pkg-dir";
+
+// Utils
+import { initCache } from "../src/utils/cache";
+import { findDomains } from "../src/utils/domains";
+import { exporterLogo as splash } from "../src/utils/shared";
+
+// Envs
+const artifactsArchivable = ["dist", "assets", "apiCache", ".cache"];
+const artifactsDisposable = ["public", ".store"];
+
+// Where we are going to find export folders
+const execBasePath = pkgDir.sync()!;
+
+// Where we are going to find archived exports
+const exportArchiveBasePath = path.resolve(execBasePath, "exports/sites");
+
+// Where we are going to run the export command
+const workingPath = pkgDir.sync(__dirname)!;
+
+// Types
+type Env = Record<string, unknown>;
+
+// -----------------------------------------------------------------------------
+// Process Runner
+// -----------------------------------------------------------------------------
+const getEnvRunner = (env: Env) => (command: string) => runner(command, env);
+
+const runner = (command: string, env: Env = {}) =>
+	// TODO: Cuando esto falle, ejecutar `cleanAfterFail`
+	execSync(command, {
+		cwd: workingPath,
+		stdio: "inherit",
+		env: {
+			...process.env,
+			...env,
+			GRIDDO_EXPORTER: "true",
+		},
+	});
+
+const getAssetPrefix = (domain: string) => {
+	// TODO: Usar asset_prefix del dominio
+	if (!process.env.GRIDDO_ASSET_PREFIX || !domain) return "";
+
+	if (!domain.startsWith("pro-")) return "";
+
+	return `${process.env.GRIDDO_ASSET_PREFIX}/${domain}`;
+};
+
+// -----------------------------------------------------------------------------
+// Loggers
+// -----------------------------------------------------------------------------
+const logError = (...message: Array<any>) => console.log(...message);
+const logInfo = (...message: Array<any>) => console.log(...message);
+const logSuccess = (...message: Array<any>) => console.log(...message);
+const logWarning = (...message: Array<any>) => console.log(...message);
+
+// -----------------------------------------------------------------------------
+// Main Stuff
+// -----------------------------------------------------------------------------
+const domainExport = async (domain: string) => {
+	const runner = getDomainRunner(domain);
+	runner.init();
+	runner.restoreArtifacts();
+	runner.runExporter();
+	runner.archiveArtifacts();
+};
+
+const launchExports = async () => {
+	splash();
+	initCache();
+
+	const domains = await findDomains();
+
+	for (const domain of domains) {
+		logInfo(`️🚢 Exporting domain ${chalk.underline(domain)}`);
+		await domainExport(domain);
+	}
+};
+
+const getDomainRunner = (domain: string) => {
+	const assetPrefix = getAssetPrefix(domain);
+
+	const run = getEnvRunner({
+		DOMAIN: domain,
+		ASSET_PREFIX: assetPrefix,
+		HAS_ASSET_DOMAIN: assetPrefix && assetPrefix !== "",
+		RENDERID: new Date().valueOf(),
+	});
+
+	const init = () => {
+		logInfo(`🚀 Initializing ${chalk.underline(domain)} exporter`);
+
+		cleanDirtyArtifactPaths();
+		createBaseExportPaths();
+	};
+
+	const getArtifactPaths = (artifact = "") => {
+		const domainExportArchiveBasePath = path.resolve(
+			exportArchiveBasePath,
+			domain
+		);
+		const currentExportArchivePath = path.resolve(
+			domainExportArchiveBasePath,
+			artifact
+		);
+		const currentExportBackupPath = `${currentExportArchivePath}-BACKUP`;
+		const currentExportWorkingPath = path.resolve(workingPath, artifact);
+
+		return {
+			domainExportArchiveBasePath,
+			currentExportArchivePath,
+			currentExportBackupPath,
+			currentExportWorkingPath,
+		};
+	};
+
+	const cleanDirtyArtifactPaths = () => {
+		for (const artifact of [...artifactsArchivable, ...artifactsDisposable]) {
+			const { currentExportWorkingPath } = getArtifactPaths(artifact);
+
+			if (fs.existsSync(currentExportWorkingPath)) {
+				logWarning(`🧹 Cleanup dirty ${chalk.gray(currentExportWorkingPath)}`);
+				run(`rm -rf ${currentExportWorkingPath}`);
+			}
+		}
+	};
+
+	const createBaseExportPaths = () => {
+		const { domainExportArchiveBasePath } = getArtifactPaths();
+
+		if (!fs.existsSync(domainExportArchiveBasePath)) {
+			logInfo(`✨ Creating ${domainExportArchiveBasePath}`);
+			run(`mkdir -p ${domainExportArchiveBasePath}`);
+		}
+	};
+
+	const archiveExportArtifact = (artifact: string) => {
+		const { currentExportArchivePath, currentExportWorkingPath } =
+			getArtifactPaths(artifact);
+
+		logInfo(
+			`🚚 Moving files from ${chalk.gray(
+				currentExportWorkingPath
+			)} to ${chalk.gray(currentExportArchivePath)}`
+		);
+		run(`mv ${currentExportWorkingPath} ${currentExportArchivePath}`);
+	};
+
+	const archiveArtifacts = () => {
+		for (const artifact of artifactsArchivable) {
+			const { currentExportWorkingPath, currentExportArchivePath } =
+				getArtifactPaths(artifact);
+
+			if (!fs.existsSync(currentExportWorkingPath)) {
+				logError(
+					"📁 Source directory has not been created:",
+					currentExportWorkingPath
+				);
+				continue;
+			}
+
+			try {
+				createArtifactBackup(artifact);
+				archiveExportArtifact(artifact);
+				deleteArtifactBackup(artifact);
+			} catch (error) {
+				logError(
+					`🚚 Error moving files to ${currentExportArchivePath}`,
+					error.message
+				);
+				restoreArtifactBackup(artifact);
+				continue;
+			}
+		}
+	};
+
+	const restoreArtifacts = () => {
+		for (const artifact of artifactsArchivable) {
+			const { currentExportArchivePath, currentExportWorkingPath } =
+				getArtifactPaths(artifact);
+
+			if (fs.existsSync(currentExportArchivePath)) {
+				logWarning(`️♻️  Restoring ${chalk.gray(currentExportArchivePath)}`);
+				run(`cp -R ${currentExportArchivePath} ${currentExportWorkingPath}`);
+			}
+		}
+
+		moveDistToPublic();
+	};
+
+	const createArtifactBackup = (artifact: string) => {
+		const { currentExportArchivePath, currentExportBackupPath } =
+			getArtifactPaths(artifact);
+
+		if (fs.existsSync(currentExportArchivePath)) {
+			logInfo(`💿 Creating backup of ${chalk.gray(currentExportArchivePath)}`);
+			run(`mv ${currentExportArchivePath} ${currentExportBackupPath}`);
+		}
+	};
+
+	const restoreArtifactBackup = (artifact: string) => {
+		const { currentExportArchivePath, currentExportBackupPath } =
+			getArtifactPaths(artifact);
+
+		if (fs.existsSync(currentExportBackupPath)) {
+			logWarning(
+				`️♻️  Restoring backup ${chalk.gray(currentExportArchivePath)}`
+			);
+			run(`mv ${currentExportBackupPath} ${currentExportArchivePath}`);
+		}
+	};
+
+	const deleteArtifactBackup = (artifact: string) => {
+		const { currentExportArchivePath, currentExportBackupPath } =
+			getArtifactPaths(artifact);
+
+		logWarning(`️❌ Removing backup ${chalk.gray(currentExportArchivePath)}`);
+		run(`rm -rf ${currentExportBackupPath}`);
+	};
+
+	const runExporter = () => {
+		console.log(`\n${chalk.black(chalk.bgGreen(" Gatsby (start) "))}\n`);
+
+		run("yarn export");
+		logSuccess("Your sites have been exported correctly");
+
+		console.log(`\n${chalk.black(chalk.bgGreen(" Gatsby (end) "))}\n`);
+
+		removeDisposableArtifacts();
+	};
+
+	// TODO: Hacer que infra tire de `public` en vez de `dist` y quitar esto
+	const moveDistToPublic = () => {
+		const { currentExportWorkingPath: distPath } = getArtifactPaths("dist");
+		const { currentExportWorkingPath: publicPath } = getArtifactPaths("public");
+
+		if (fs.existsSync(distPath)) {
+			logWarning(
+				`🚚 Moving ${chalk.gray(distPath)} to ${chalk.gray(publicPath)}`
+			);
+			run(`mv ${distPath} ${publicPath}`);
+		}
+	};
+
+	// TODO: Esto no debería hacerse desde infra
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const movePublicToDist = () => {
+		const { currentExportWorkingPath: publicPath } = getArtifactPaths("public");
+		const { currentExportWorkingPath: distPath } = getArtifactPaths("dist");
+
+		if (fs.existsSync(publicPath)) {
+			logWarning(`🚚 Moving ${publicPath} to ${distPath}`);
+			run(`mv ${publicPath} ${distPath}`);
+		}
+	};
+
+	const removeDisposableArtifacts = () => {
+		for (const artifact of artifactsDisposable) {
+			const { currentExportWorkingPath: artifactPath } =
+				getArtifactPaths(artifact);
+
+			if (fs.existsSync(artifactPath)) {
+				logWarning(`❌ Removing ${chalk.gray(artifactPath)}`);
+				run(`rm -rf ${artifactPath}`);
+			}
+		}
+	};
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const cleanAfterFail = () => {
+		cleanDirtyArtifactPaths();
+	};
+
+	return {
+		init,
+		getArtifactPaths,
+		archiveExportArtifact,
+		archiveArtifacts,
+		restoreArtifacts,
+		createArtifactBackup,
+		restoreArtifactBackup,
+		deleteArtifactBackup,
+		runExporter,
+	};
+};
+
+console.clear();
+
+launchExports().catch((err) => {
+	console.error("❌ ERROR", err?.stdout?.toString() || err);
+	process.exit(1);
+});

package/src/components/Head.tsx

@@ -0,0 +1,207 @@
+// Types
+import type { CustomHeadProps } from "./types";
+
+// Instance elements
+import {
+	generateAutomaticDimensions,
+	// @ts-ignore
+} from "components";
+
+// External libraries
+import parse from "html-react-parser";
+import * as React from "react";
+
+// Utils
+import { cleanCommaSeparated, composeAnalytics, formatImage } from "./utils";
+
+/**
+ * Gatsby Head API
+ * https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+const Head = (props: CustomHeadProps) => {
+	const {
+		pageContext: {
+			griddoVersion,
+			locale,
+			openGraph,
+			page: { disableHrefLangs, fullUrl, defaultLang },
+			pageMetadata,
+			siteMetadata,
+			siteOptions,
+		},
+	} = props;
+
+	const metaRobots = cleanCommaSeparated(
+		`${pageMetadata?.index},${pageMetadata?.follow},${pageMetadata?.translate},${pageMetadata?.metasAdvanced}`
+	);
+
+	const showMetaRobots =
+		!!metaRobots &&
+		(siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
+
+	const { analyticsScript, analyticsDimensions } = composeAnalytics(
+		props,
+		generateAutomaticDimensions
+	);
+
+	const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
+
+	const analyticsSrc =
+		(analyticsScript &&
+			analyticsScript.startsWith("UA-") &&
+			`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
+		null;
+
+	const analyticsCode =
+		analyticsScript && !analyticsSrc && analyticsScript.includes("<script")
+			? parse(analyticsScript)
+			: emptyCodeScript;
+
+	const fixedAnalyticsCode = Array.isArray(analyticsCode)
+		? analyticsCode.find((item) => item.type === "script") || emptyCodeScript
+		: analyticsCode;
+
+	const {
+		// TODO: Type this correctly
+		props: {
+			dangerouslySetInnerHTML: { __html: analyticsScriptCode },
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			children: analyticsScriptChildren,
+			...analyticsScriptProps
+		},
+	} = fixedAnalyticsCode as {
+		// TODO: Fix this custom inline weird type
+		props: {
+			dangerouslySetInnerHTML: { __html: React.ReactNode };
+			children: unknown;
+			src: string;
+		};
+	};
+
+	// Resize favicon
+	const faviconResized = formatImage(siteMetadata?.favicon, 32, 32, "png");
+
+	// Validate options
+	const cleanPageLanguages =
+		pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
+
+	const useCanonical =
+		!!pageMetadata?.canonical &&
+		!(
+			siteOptions?.avoidSelfReferenceCanonicals &&
+			pageMetadata?.canonical === fullUrl
+		);
+
+	const useHrefLangs =
+		!(
+			siteOptions?.avoidHrefLangsOnCanonicals &&
+			useCanonical &&
+			pageMetadata?.canonical !== fullUrl
+		) &&
+		pageMetadata?.index === "index" &&
+		cleanPageLanguages.length > 1 &&
+		!disableHrefLangs;
+
+	const defaultLangId = defaultLang?.id || null;
+	const hrefLangXDefaultUrl =
+		(useHrefLangs &&
+			!siteOptions?.avoidHrefLangXDefault &&
+			defaultLangId &&
+			cleanPageLanguages.find((item) => item.languageId === defaultLangId)
+				?.url) ||
+		null;
+
+	const currentTime = new Date().toString();
+
+	return (
+		<>
+			{/* Uncomment with Gatsby 5.5.0 */}
+			{/* <html lang={locale} /> */}
+
+			{!!pageMetadata?.title && <title>{pageMetadata?.title}</title>}
+			{!!pageMetadata?.description && (
+				<meta name="description" content={pageMetadata?.description} />
+			)}
+			{siteOptions?.useMetaTitle && (
+				<meta name="title" content={pageMetadata?.title} />
+			)}
+			{useCanonical && <link rel="canonical" href={pageMetadata?.canonical} />}
+			{!!faviconResized && <link rel="icon" href={faviconResized} />}
+
+			{/* Alternate, solo si se indexa la página y tiene traducciones */}
+			{hrefLangXDefaultUrl && (
+				<link rel="alternate" href={hrefLangXDefaultUrl} hrefLang="x-default" />
+			)}
+			{useHrefLangs &&
+				cleanPageLanguages.map((item) => (
+					<link
+						key={item.pageId}
+						rel="alternate"
+						href={`${item.url}`}
+						hrefLang={item.locale?.replace(/_/g, "-")}
+					/>
+				))}
+
+			{/* Robots */}
+			{showMetaRobots && <meta name="robots" content={metaRobots} />}
+
+			{/* 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} @ ${currentTime}}`}
+				/>
+			)}
+
+			{/* Data Layer */}
+			<script>{"window.dataLayer = window.dataLayer || [];"}</script>
+			{analyticsDimensions && (
+				<script>{`const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && window.dataLayer && window.dataLayer.push(newDataLayer);`}</script>
+			)}
+
+			{/* Analytics with UA- */}
+			{analyticsSrc && <script src={analyticsSrc}></script>}
+
+			{/* {analyticsCode} */}
+			{(analyticsScriptProps?.src || analyticsScriptCode) && (
+				<script {...analyticsScriptProps} data-griddo-id={fullUrl}>
+					{analyticsScriptCode}
+				</script>
+			)}
+		</>
+	);
+};
+
+export { Head };

package/src/components/template.tsx

@@ -0,0 +1,90 @@
+// Types
+import type { Core } from "@griddo/core";
+import type { TemplateProps } from "./types";
+
+// Components and functions
+import { Page as RenderGriddoPage } from "@griddo/core";
+import { Link, navigate } from "gatsby";
+
+// Instance elements
+import {
+	components,
+	SiteProvider,
+	templates,
+	// @ts-ignore
+} from "components";
+
+// External libraries
+import * as React from "react";
+import { Helmet } from "react-helmet";
+
+// Gatsby Head
+export { Head } from "./Head";
+
+const Template = (data: TemplateProps) => {
+	const {
+		pageContext: {
+			BUILD_MODE,
+			cloudinaryName,
+			locale,
+			page,
+			siteLangs,
+			siteMetadata,
+			sitePages,
+			socials,
+			theme,
+		},
+	} = data;
+
+	const library = {
+		components,
+		templates,
+	};
+
+	const mappedTheme = theme || "default-theme";
+
+	const header = data.pageContext.header as Core.HeaderModule;
+	const footer = data.pageContext.footer as Core.FooterModule;
+
+	return (
+		<SiteProvider
+			apiUrl={page.apiUrl}
+			buildMode={BUILD_MODE}
+			cloudinaryCloudName={cloudinaryName}
+			instance={page.instance}
+			linkComponent={Link}
+			location={data.location}
+			navigate={navigate}
+			publicApiUrl={page.publicApiUrl}
+			renderer="gatsby"
+			siteId={page.site}
+			siteLangs={siteLangs}
+			siteMetadata={siteMetadata}
+			sitePages={sitePages}
+			socials={socials}
+			theme={mappedTheme}
+		>
+			{/*
+			Gatsby <Head> doesn't support anything outside of the <head> so we need to use <Helmet>
+			!! Support for editing <html> and <body> was added in gatsby@5.5.0. !!
+			TODO: Remove <Helmet> in Gatsby 5.5.0
+			*/}
+			<Helmet>
+				<html lang={locale} />
+			</Helmet>
+
+			{/* Render every page */}
+			<RenderGriddoPage
+				apiUrl={page.apiUrl}
+				content={page}
+				footer={footer}
+				header={header}
+				languageId={page.language}
+				library={library}
+				pageLanguages={page.pageLanguages}
+			/>
+		</SiteProvider>
+	);
+};
+
+export default Template;

package/src/components/types.ts

@@ -0,0 +1,35 @@
+import type { Core } from "@griddo/core";
+import type { HeadProps } from "gatsby";
+import type { AllPagesResponse } from "../types/api";
+import type { GatsbyPageObject } from "../types/pages";
+
+export interface CustomHeadProps extends HeadProps {
+	pageContext: GatsbyPageObject["context"] & {
+		page: Core.Page & {
+			defaultLang: { id: number };
+			dimensions: { values: Record<string, unknown> };
+			disableHrefLangs: Array<number>;
+		};
+	};
+}
+
+export interface TemplateProps extends Omit<GatsbyPageObject, "context"> {
+	pageContext: GatsbyPageObject["context"] & {
+		page: Core.Page;
+		sitePages: AllPagesResponse;
+	};
+	location: {
+		pathname: string;
+		search: string;
+		hash: string;
+	};
+}
+
+export interface HtmlProps {
+	body: string;
+	bodyAttributes: React.HtmlHTMLAttributes<HTMLBodyElement>;
+	headComponents: React.ReactNode;
+	htmlAttributes: React.HtmlHTMLAttributes<HTMLHtmlElement>;
+	postBodyComponents: React.ReactNode;
+	preBodyComponents: React.ReactNode;
+}