@griddo/cx 1.75.178 → 1.75.180

package/src/utils/pages.ts

@@ -0,0 +1,534 @@
+// Types
+import type { Core, Fields } from "@griddo/core";
+import type {
+	APIPageObject,
+	GatsbyPageObject,
+	GriddoListPage,
+	GriddoMultiPage,
+	GriddoSinglePage,
+	MultiPageElements,
+	PageAdditionalInfo,
+} from "../types/pages";
+import type { TemplateWithDistributor } from "../types/templates";
+
+// External libraries
+import dotenv from "dotenv";
+import fs from "fs";
+import path from "path";
+
+// Utils
+import { formatImage } from "../components/utils";
+import { postSearchInfo } from "./searches";
+
+dotenv.config();
+
+// Envs
+const GRIDDO_SEARCH_FEATURE = !!JSON.parse(
+	process.env.GRIDDO_SEARCH_FEATURE || "false"
+);
+const HAS_ASSET_PREFIX = !!process.env.GRIDDO_ASSET_PREFIX;
+
+// Constants
+const DEFAULT_ITEMS_PER_PAGE_FOR_LIST_TEMPLATES = 25;
+const COMPONENT = path.resolve(__dirname, "../../src/components/template.tsx");
+
+/**
+ * Return an OpenGraph object.
+ *
+ * @param props.socialTitle The social title.
+ * @param props.socialDescription The social description.
+ * @param props.socialImage The social image in Cloudinary or DAM url format.
+ */
+function getOpenGraph({
+	socialTitle,
+	socialDescription,
+	socialImage,
+}: Pick<
+	Core.Page,
+	"socialTitle" | "socialDescription" | "socialImage"
+>): Core.Page["openGraph"] {
+	return {
+		type: "website",
+		title: socialTitle,
+		description: socialDescription,
+		image: socialImage ? formatImage(socialImage, 1280, 768) : "",
+		twitterImage: socialImage ? formatImage(socialImage, 1280, 768) : "",
+	};
+}
+
+/**
+ * Get the Page metadata object from a page Object.
+ *
+ * @param params A Page object
+ */
+function getPageMetaData(params: Core.Page): Core.Page["pageMetaData"] {
+	const {
+		title,
+		metaTitle,
+		metaDescription,
+		canonicalURL,
+		locale,
+		url,
+		isIndexed,
+		follow,
+		metasAdvanced,
+		pageLanguages,
+		fullUrl,
+	} = params;
+
+	const metasAdvancedList =
+		metasAdvanced
+			?.split(",")
+			.filter(Boolean)
+			.map((item) => item.trim().toLowerCase()) || [];
+
+	return {
+		title: (metaTitle || title || "").trim(),
+		description: metaDescription,
+		canonical:
+			canonicalURL && canonicalURL.trim() && canonicalURL !== fullUrl
+				? canonicalURL.trim()
+				: isIndexed
+				? fullUrl
+				: undefined,
+		locale,
+		url,
+		index: isIndexed ? "index" : "noindex",
+		follow: follow ? "follow" : "nofollow",
+		translate: metasAdvancedList.includes("notranslate") ? "notranslate" : "",
+		metasAdvanced: metasAdvancedList
+			.filter((item) => item !== "notranslate")
+			.join(),
+		pageLanguages,
+	};
+}
+
+/**
+ * Create a page object to be processes by Gatsby `createPage()`
+ *
+ * @param page A page object ready to pass as content of the `pageContext` to use in the React template.
+ * @param additionalInfo Additional page info to pass as content of `pageContext` to  use in the React template.
+ */
+async function createGatsbyPageObject(
+	page: GriddoSinglePage | GriddoListPage | GriddoMultiPage,
+	additionalInfo: PageAdditionalInfo
+): Promise<GatsbyPageObject> {
+	// Extract some props from page
+	const {
+		id,
+		title,
+		fullPath,
+		language: languageId,
+		breadcrumb,
+		socialDescription,
+		socialImage,
+		socialTitle,
+	} = page;
+
+	// Extract some props from additionalInfo
+	const {
+		baseUrl,
+		BUILD_MODE,
+		cloudinaryName,
+		griddoVersion,
+		siteLangs,
+		siteMetadata,
+		siteOptions,
+		siteScript,
+		siteSlug,
+		socials,
+		theme,
+		navigations: { header, footer },
+	} = additionalInfo;
+
+	// Update page object
+	page = {
+		...page,
+		breadcrumb,
+		siteSlug,
+		apiUrl: baseUrl,
+		publicApiUrl: additionalInfo.publicBaseUrl,
+		instance: additionalInfo.instance,
+	};
+
+	const filepath = `${fullPath?.domain}${fullPath?.compose}`;
+	const foundLanguage = siteLangs.find(({ id }) => id === page?.language);
+	const locale = foundLanguage?.locale.replace(/_/g, "-");
+
+	// Page Metadata
+	const pageMetadata = getPageMetaData(page);
+
+	// Opengraph
+	const openGraph = getOpenGraph({
+		socialDescription,
+		socialImage,
+		socialTitle,
+	});
+
+	const pageObjectForGatsby = {
+		matchPath: "",
+		path: filepath,
+		component: COMPONENT,
+		size: 0,
+		context: {
+			// Page
+			id,
+			title,
+			fullPath,
+			locale,
+			languageId,
+			theme,
+
+			// PARA <Helmet />
+			siteMetadata,
+			pageMetadata,
+			openGraph,
+			socials,
+			siteLangs,
+			cloudinaryName,
+			siteOptions,
+			BUILD_MODE,
+			griddoVersion,
+			siteScript,
+
+			// Navigation sections
+			header,
+			footer,
+
+			// Page template
+			page,
+		},
+	};
+
+	const assetPrefix =
+		fullPath?.domain.startsWith("/pro-") && HAS_ASSET_PREFIX
+			? process.env.GRIDDO_ASSET_PREFIX
+			: undefined;
+
+	if (assetPrefix) {
+		pageObjectForGatsby.matchPath = fullPath?.compose as string;
+	}
+
+	if (GRIDDO_SEARCH_FEATURE) {
+		const exportFile = path.resolve(
+			__dirname,
+			"../../dist/",
+			`./${filepath}index.html`
+		);
+		const content = fs.existsSync(exportFile)
+			? fs.readFileSync(exportFile).toString()
+			: "";
+
+		await postSearchInfo({
+			title,
+			description: openGraph.description || "",
+			image: openGraph.image || "",
+			pageId: id,
+			languageId,
+			// Dont know if page.template_id is something old
+			// template: page.template_id || page?.template?.templateType || null,
+			template: page?.template?.templateType || null,
+			siteId: page.site,
+			url: page.fullUrl,
+			content,
+		});
+	}
+
+	return pageObjectForGatsby;
+}
+
+/**
+ * Create a single Griddo page object.
+ *
+ * @param page A Griddo single page object.
+ * @param additionalInfo Additional page info.
+ */
+async function createGriddoSinglePage(
+	page: GriddoSinglePage,
+	additionalInfo: PageAdditionalInfo
+) {
+	return await createGatsbyPageObject(page, additionalInfo);
+}
+
+/**
+ * Create multiples pages from one page as list paginated pages
+ */
+async function createGriddoListPages(
+	{
+		page,
+		pages,
+		isRoot = false,
+		defaultLang,
+		template,
+		totalQueriedItems,
+	}: GriddoListPage,
+	additionalInfo: PageAdditionalInfo
+) {
+	const allPages = pages.map(async (dataInPage, idx) => {
+		const isFirstPage = idx === 0;
+		const pageNumber = idx + 1;
+		const { domainUrl, compose } = page.fullPath;
+
+		const paginatedPage = {
+			...page,
+			fullPath: {
+				...page.fullPath,
+				// Add a page number (tailPageNumber) from page 2 onwards
+				compose: addPageNumberToUrl(compose, pageNumber, {
+					addEndingSlash: true,
+				}),
+			},
+			fullUrl: addPageNumberToUrl(page.fullUrl, pageNumber, {
+				addEndingSlash: true,
+			}),
+			slug: addPageNumberToUrl(page.slug, pageNumber),
+			title: addPageNumberToTitle(page.title, pageNumber),
+			metaTitle: addPageNumberToTitle(page.metaTitle || "", pageNumber),
+			disableHrefLangs: pageNumber > 1,
+			template: {
+				...template,
+				isFirstPage,
+				pageNumber,
+				totalPages: pages.length,
+				// The base link, without page number to use in <Pagination />
+				// component.
+				baseLink: `${domainUrl}${compose}`,
+				queriedItems: dataInPage,
+				totalQueriedItems: totalQueriedItems?.length,
+			},
+			isRoot,
+			defaultLang,
+		};
+
+		return await createGatsbyPageObject(paginatedPage, additionalInfo);
+	});
+
+	return Promise.all(allPages);
+}
+
+/**
+ * Create multiples pages from a MultiPage module
+ *
+ * @param page A Griddo Multipage object.
+ * @param additionalInfo Additional page info.
+ */
+function createGriddoMultiPages(
+	page: GriddoMultiPage,
+	additionalInfo: PageAdditionalInfo
+) {
+	const { multiPageElements: multiPageElementsBulk, ...cleanPage } = page;
+	// TODO: Use structuredClone() when node 18 is available.
+	const multiPageElements: MultiPageElements = JSON.parse(
+		JSON.stringify(multiPageElementsBulk)
+	);
+
+	// si no hay un elemento sin slug, como mínimo hay que dibujar una página principal para el conjunto de páginas
+	if (
+		!multiPageElements.find(
+			({ sectionSlug }: { sectionSlug: string }) => sectionSlug === "/"
+		)
+	) {
+		// @ts-expect-error
+		multiPageElements.push({});
+	}
+
+	// Creates each page based on `multiPageElements` from the schema.
+	const allPages = multiPageElements.map(async (pageElement) => {
+		// TODO: Use structuredClone() when node 18 is available.
+		const paginatedPage: APIPageObject = JSON.parse(JSON.stringify(cleanPage));
+		const {
+			sectionSlug = "/",
+			title: bulkTitle = "",
+			metaTitle = "",
+			metaDescription = "",
+		} = pageElement;
+		const title = typeof bulkTitle === "string" ? bulkTitle : bulkTitle.content;
+		const compose = paginatedPage.fullPath.compose || "";
+		const fullUrl = paginatedPage.fullUrl.endsWith("/")
+			? paginatedPage.fullUrl.slice(0, -1)
+			: paginatedPage.fullUrl;
+		const rightSectionSlug = sectionSlug?.replace(/\//g, "");
+		const slash = compose.endsWith("/") ? "" : "/";
+		const newCompose = `${compose}${slash}${rightSectionSlug}`;
+
+		if (title.trim()) {
+			paginatedPage.title = title;
+		}
+
+		if (metaDescription.trim()) {
+			paginatedPage.metaDescription = metaDescription;
+		}
+
+		paginatedPage.fullUrl = `${fullUrl}/${rightSectionSlug}`;
+		paginatedPage.fullPath.compose = newCompose;
+		paginatedPage.slug = newCompose;
+		paginatedPage.template.activeSectionSlug = sectionSlug;
+		paginatedPage.template.activeSectionBase = fullUrl;
+		paginatedPage.metaTitle =
+			metaTitle.trim() || title.trim() || paginatedPage.metaTitle;
+
+		return await createGatsbyPageObject(paginatedPage, additionalInfo);
+	});
+
+	return Promise.all(allPages);
+}
+
+/**
+ * Get the multi pages elements.
+ *
+ * @param page The page to get the multipage parts.
+ */
+function getMultiPageElements(page: TemplateWithDistributor) {
+	const multiPageElements = new Promise((resolve) => {
+		// Recursive
+		const getMultiPageComponent = (
+			// No puede ser Core.Page['template'] porque a medida que va bajando en
+			// el árbol ya no es la estructura de un template.
+			template: Record<string, any>,
+			level = 0
+		) => {
+			// If it doesn't have a "template strcuture"
+			if (!template || typeof template !== "object") return;
+
+			// For each prop in the "template"
+			for (const key in template) {
+				const currentComponent = template[key];
+				const isValidComponent =
+					currentComponent || typeof currentComponent === "object";
+				const hasGriddoMultiPageProp = JSON.stringify(
+					currentComponent
+				).includes('"hasGriddoMultiPage":true');
+
+				if (!isValidComponent) continue;
+
+				if (!hasGriddoMultiPageProp) continue;
+
+				const { component, hasGriddoMultiPage, elements } = currentComponent;
+
+				if (component && hasGriddoMultiPage) resolve(elements || []);
+
+				// Recursive call
+				getMultiPageComponent(currentComponent, level + 1);
+			}
+
+			// resolve promise when...
+			if (!level) resolve(null);
+		};
+
+		getMultiPageComponent([page]); // ==> En array para que también revise la propia template como objeto.
+	});
+
+	return multiPageElements as Promise<MultiPageElements>;
+}
+
+// -----------------------------------------------------------------------------
+// Private functions
+// -----------------------------------------------------------------------------
+
+/**
+ * Get `itemsPerPage` elements from the `items` using as offset `page` number.
+ * It's a kind of paginator for an array.
+ *
+ * @param itemsPerPage The items per page.
+ * @param items An array of items, the queriedData.
+ * @param page The page to be returned.
+ *
+ * @example
+ * getPage(3, ["a", "b", "c", "d", "e", "f", "g", "h"], 2)
+ * // -> ["d", "e", "f"]
+ */
+function getPage(
+	itemsPerPage: number,
+	items: Array<Fields.QueriedDataItem>,
+	page: number
+) {
+	return items?.slice(itemsPerPage * (page - 1), itemsPerPage * page);
+}
+
+/**
+ * Takes an array of items and split it grouping in arrays of pages based on `itemsPerPage`.
+ *
+ * @param itemsPerPage The items per page.
+ * @param items An array of items, the queriedData.
+ *
+ * @example
+ * getPageCluster(3, ["a", "b", "c", "d", "e", "f", "g", "h"])
+ * // -> [["a", "b", "c"], ["d", "e", "f"], ["g", "h"]]
+ */
+function getPageCluster(
+	itemsPerPage: number,
+	items: Array<Fields.QueriedDataItem>
+) {
+	const totalPagesCount = Math.ceil(items.length / itemsPerPage) || 1;
+	const pageNumbers = Array.from({ length: totalPagesCount }, (_, i) => i + 1);
+
+	return pageNumbers?.map((pageNumber) =>
+		getPage(itemsPerPage, items, pageNumber)
+	);
+}
+
+/**
+ * Takes a template object and split the whole queriedItems into separated queriedItems to use in Griddo static list templates.
+ *
+ * @param listTemplate A template schema with the distributor data included.
+ */
+function getPaginatedPages(listTemplate: TemplateWithDistributor) {
+	const items = listTemplate.queriedItems || [];
+	const itemsPerPage =
+		listTemplate?.itemsPerPage || DEFAULT_ITEMS_PER_PAGE_FOR_LIST_TEMPLATES;
+	const pageClusters = getPageCluster(itemsPerPage, items);
+
+	return pageClusters;
+}
+
+/**
+ * Adds a number to an URL adding optionally an ending slash.
+ *
+ * @param url The url.
+ * @param pageNumber A number to be added to the url.
+ * @param options.addEndingSlash Boolean that indicates if return the final url with an end slash or not.
+ *
+ * @example
+ * addPageNumberToUrl("web.com", 3) // "web.com/3"
+ * addPageNumberToUrl("web.com", 3, { addEndingSlash: true }) // "web.com/3/"
+ */
+
+function addPageNumberToUrl(
+	url: string,
+	pageNumber: number,
+	options?: { addEndingSlash: boolean }
+) {
+	const trailingSlash = url.endsWith("/") ? "" : "/";
+	const endingSlash = options?.addEndingSlash ? "/" : "";
+
+	if (pageNumber <= 1) {
+		return `${url}${endingSlash}`;
+	}
+
+	return `${url}${trailingSlash}${pageNumber}${endingSlash}`;
+}
+
+/**
+ * Adds a number to an string with the format "string - number"
+ *
+ * @param title The title
+ * @param pageNumber A number to be added to the title.
+ *
+ * @example
+ * addPageNumberToTitle("The page", 3) // "The page - 3"
+ */
+function addPageNumberToTitle(title: string, pageNumber: number) {
+	if (!title || pageNumber <= 1) {
+		return title;
+	}
+
+	return `${title} - ${pageNumber}`;
+}
+
+export {
+	createGriddoListPages,
+	createGriddoMultiPages,
+	createGriddoSinglePage,
+	getMultiPageElements,
+	getPaginatedPages,
+};

package/src/utils/searches.ts

@@ -0,0 +1,102 @@
+// Types
+import type { PostSearchInfoProps } from "../types/global";
+
+// API
+import { post } from "./api";
+
+// Envs
+const API_URL = process.env.API_URL as string;
+
+/**
+ * Save in the BBDD the content of a page parsed without HTML tags.
+ *
+ * @param props Object with parts of the final page object to be saved in the BBDD.
+ */
+async function postSearchInfo(props: PostSearchInfoProps) {
+	const {
+		title,
+		description,
+		image,
+		pageId,
+		languageId,
+		siteId,
+		url,
+		content,
+		template,
+	} = props;
+
+	const response = await post({
+		endpoint: `${API_URL}/search`,
+		body: {
+			title,
+			description,
+			image,
+			pageId,
+			languageId,
+			siteId,
+			url,
+			template,
+			content: prepareHTMLContentForSearch(content),
+		},
+	});
+
+	return response;
+}
+
+/**
+ * Remove the every cntent inside some HTML tags including them.
+ *
+ * @param content A string with the content.
+ */
+function prepareHTMLContentForSearch(content: string) {
+	const noTagsContent = removeHTMLTags(
+		["meta", "link", "style", "script", "noscript", "nav", "header", "footer"],
+		content
+	);
+	const plainTextContent = stripHTMLTags(noTagsContent);
+
+	return stripSpaces(plainTextContent);
+}
+
+/**
+ * Removes (replacing with empty string) the content for the HTML tags and the tags themself from the content string.
+ *
+ * @param tags An array of HTML tags without the <>.
+ * @param content The content string.
+ */
+function removeHTMLTags(tags: Array<string>, content: string) {
+	let filteredContent = content;
+
+	tags.forEach((tag) => {
+		filteredContent = filteredContent
+			// eslint-disable-next-line no-useless-escape
+			.replace(new RegExp(`<${tag}.*?>.*?<\/${tag}>`, "gis"), " ")
+			.replace(new RegExp(`(<${tag}([^>]+)>)`, "gis"), " ");
+	});
+
+	return filteredContent;
+}
+
+/**
+ * Remove every HTML tags from the content
+ *
+ * @param content The string to be processed.
+ * @param replaceWith The string to replace the remove HTML tags.
+ */
+function stripHTMLTags(content: string) {
+	return content.replace(/(<([^>]+)>)/gis, " ");
+}
+
+/**
+ * Removes duplicate whitespaces
+ *
+ * @param str The string to remove white spaces
+ *
+ * @example
+ * stripSpaces("   Lorem     ipsum  dolor ") // " Lorem ipsum dolor "
+ */
+function stripSpaces(str: string) {
+	return str.replace(/\s+/g, " ");
+}
+
+export { postSearchInfo };