feat(clayui.com): adds implementation to render pages consuming from Liferay

clayui.com/.env.development

@@ -1 +1,3 @@
-GATSBY_CLAY_NIGHTLY=true
+GATSBY_CLAY_NIGHTLY=true
+LIFERAY_HOST=http://127.0.0.1:8080
+LIFERAY_SITE_ID=

clayui.com/gatsby-config.js

@@ -56,6 +56,13 @@ module.exports = {
 			},
 			resolve: 'gatsby-source-filesystem',
 		},
+		{
+			options: {
+				host: process.env.LIFERAY_HOST,
+				siteId: process.env.LIFERAY_SITE_ID,
+			},
+			resolve: 'gatsby-source-liferay',
+		},
 		{
 			options: {
 				extensions: ['.mdx'],

clayui.com/gatsby/createPages.js

@@ -20,19 +20,32 @@ const TAB_MAP_NAME = {
 	markup: 'Markup',
 };
 
+const getFileName = (path) => {
+	const uri = path.split('/');
+
+	return uri[uri.length - 1].replace('.html', '');
+};
+
 const slugWithBar = (path) => {
 	return path.startsWith('/') ? path : `/${path}`;
 };
 
 const getTabs = (permalink, pathGroup) => {
 	const sortTabs = (a) => (a.name === 'API' ? 1 : -1);
+	const fileSlug = getFileName(permalink);
 
 	const tabs = pathGroup.filter(
 		({
 			node: {
-				fields: {mainTabURL},
+				fields: {mainTabURL, slug, type},
 			},
-		}) => mainTabURL === permalink
+		}) => {
+			if (type === 'LiferayDocument') {
+				return slug.substring(1) === fileSlug;
+			}
+
+			return mainTabURL === permalink;
+		}
 	);
 
 	if (tabs.length === 0) {
@@ -48,12 +61,24 @@ const getTabs = (permalink, pathGroup) => {
 			.map(
 				({
 					node: {
-						fields: {slug},
+						fields: {slug, type},
 					},
-				}) => ({
-					href: slug,
-					name: TAB_MAP_NAME[path.basename(slug, '.html')],
-				})
+				}) => {
+					if (type === 'LiferayDocument') {
+						return {
+							href: `${permalink.replace(
+								'.html',
+								''
+							)}/design.html`,
+							name: 'Design',
+						};
+					}
+
+					return {
+						href: slug,
+						name: TAB_MAP_NAME[path.basename(slug, '.html')],
+					};
+				}
 			)
 			.sort(sortTabs),
 	];
@@ -122,19 +147,58 @@ const createDocs = (actions, edges, mdx, pathGroup) => {
 					(slug.includes('docs/') || slug.includes('blog/')) &&
 					layout !== 'redirect'
 				) {
+					const tabs = getTabs(mainTabURL || slug, pathGroup);
+					const fileSlug = getFileName(mainTabURL || slug);
+
+					const pagePathGroup = pathGroup
+						.filter(
+							({
+								node: {
+									fields: {type},
+								},
+							}) => type !== 'LiferayDocument'
+						)
+						.map(
+							({
+								node: {
+									fields: {slug},
+								},
+							}) => slug
+						);
+
+					const designPageData = pathGroup.find(
+						(item) =>
+							item.node.fields.slug.substring(1) === fileSlug
+					);
+					const designPage = tabs.find(
+						(item) => item.name === 'Design'
+					);
+
+					if (designPage) {
+						createPage({
+							component: template,
+							context: {
+								mainTabURL,
+								pageRemote: {
+									html: designPageData.node.fields.html,
+									title: designPageData.node.fields.title,
+								},
+								pathGroup: pagePathGroup,
+								slug: designPage.href,
+								tabs,
+							},
+							path: designPage.href,
+						});
+					}
+
 					createPage({
 						component: template,
 						context: {
 							mainTabURL,
-							pathGroup: pathGroup.map(
-								({
-									node: {
-										fields: {slug},
-									},
-								}) => slug
-							),
+							pageRemote: {},
+							pathGroup: pagePathGroup,
 							slug,
-							tabs: getTabs(mainTabURL || slug, pathGroup),
+							tabs,
 						},
 						path: slug,
 					});
@@ -187,6 +251,17 @@ module.exports = async ({actions, graphql}) => {
 					}
 				}
 			}
+			allLiferayDocument {
+				edges {
+					node {
+						type
+						id
+						title
+						html
+						slug
+					}
+				}
+			}
 		}
 	`).then(async ({data, errors}) => {
 		if (errors) {
@@ -204,11 +279,21 @@ module.exports = async ({actions, graphql}) => {
 			}) => mainTabURL
 		);
 
+		const allDocuments = data.allLiferayDocument.edges.map(({node}) => ({
+			node: {fields: node},
+		}));
+
 		if (data.allMdx.edges) {
-			createDocs(actions, data.allMdx.edges, true, pathGroup);
+			createDocs(actions, data.allMdx.edges, true, [
+				...pathGroup,
+				...allDocuments,
+			]);
 		}
 
-		createDocs(actions, data.allMarkdownRemark.edges, false, pathGroup);
+		createDocs(actions, data.allMarkdownRemark.edges, false, [
+			...pathGroup,
+			...allDocuments,
+		]);
 
 		const newestBlogEntry = await graphql(
 			`

clayui.com/package.json

@@ -49,6 +49,7 @@
 		"classnames": "^2.2.6",
 		"clipboard": "^2.0.4",
 		"dotenv": "^6.0.0",
+		"fetch-undici": "3.x",
 		"gatsby": "^3.14.1",
 		"gatsby-plugin-google-gtag": "^4.3.0",
 		"gatsby-plugin-mdx": "^2.14.0",
@@ -59,6 +60,7 @@
 		"gatsby-remark-prismjs": "^5.11.0",
 		"gatsby-source-filesystem": "^3.14.0",
 		"gatsby-transformer-remark": "^4.11.0",
+		"node-html-parser": "^6.1.12",
 		"prettier": "^1.16.4",
 		"prismjs": "^1.25.0",
 		"react": "^16.12.0",

clayui.com/plugins/gatsby-source-liferay/gatsby-node.js

@@ -0,0 +1,146 @@
+/**
+ * SPDX-FileCopyrightText: © 2024 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+const {Headers, fetch} = require('fetch-undici');
+const {parse} = require('node-html-parser');
+
+const fetchLiferay = async (slug, siteId, host) => {
+	const response = await fetch(
+		new URL(
+			`/o/headless-delivery/v1.0/sites/${siteId}/site-pages${slug}`,
+			host
+		),
+		{
+			headers: new Headers({
+				'User-Agent': 'Clay',
+				'content-type': 'application/json',
+			}),
+		}
+	);
+
+	const {status} = response;
+
+	const responseContentType = response.headers.get('content-type');
+
+	if (!response.ok || status === 204) {
+		const error = await response.text();
+
+		throw new Error('Error calling Liferay fetch.', {cause: error});
+	} else if (response.ok && responseContentType === 'application/json') {
+		return response.json();
+	} else {
+		const data = await response.text();
+
+		return data;
+	}
+};
+
+const convertTimestamps = (nextObj, prevObj, prevKey) => {
+	if (typeof nextObj === `object`) {
+		Object.keys(nextObj).map((key) =>
+			convertTimestamps(nextObj[key], nextObj, key)
+		);
+	} else {
+		if (typeof nextObj === `number` && nextObj >> 0 !== nextObj) {
+			const date = new Date(nextObj);
+			if (date.getTime() === nextObj) {
+				prevObj[prevKey] = date.toISOString().slice(0, 10);
+			}
+		}
+	}
+};
+
+exports.sourceNodes = async (
+	{actions, createContentDigest, createNodeId},
+	{host, siteId}
+) => {
+	const {createNode} = actions;
+
+	try {
+		const {items} = await fetchLiferay('', siteId, host);
+
+		const resources = await Promise.all(
+			items
+				.filter(
+					(resource) => !['Home', 'Search'].includes(resource.title)
+				)
+				.map(async (resource) => {
+					const data = await fetchLiferay(
+						`${resource.friendlyUrlPath}/rendered-page`,
+						siteId,
+						host
+					);
+
+					const html = parse(data);
+					const body = html.getElementById('main-content');
+
+					Array.from(body.querySelectorAll('source,img')).forEach(
+						(element) => {
+							const path =
+								element.getAttribute('src') ||
+								element.getAttribute('srcset');
+							const url = `${host}${path}`;
+
+							if (element.tagName === 'IMG') {
+								element.setAttribute('src', url);
+							} else {
+								element.setAttribute('srcset', url);
+							}
+						}
+					);
+
+					return {
+						dateCreated: resource.dateCreated,
+						dateModified: resource.dateModified,
+						datePublished: resource.datePublished,
+						html: body.innerHTML,
+						id: createNodeId(resource.uuid),
+						liferay_id: resource.uuid,
+						slug: resource.friendlyUrlPath,
+						title: resource.title,
+						type: 'LiferayDocument',
+					};
+				})
+		);
+
+		resources.map((resource) => {
+			convertTimestamps(resource);
+
+			const contentDigest = createContentDigest(resource);
+
+			const node = {
+				...resource,
+				children: [],
+				internal: {
+					contentDigest,
+					type: `LiferayDocument`,
+				},
+				parent: null,
+			};
+
+			createNode(node);
+		});
+	} catch (error) {
+		console.error(error);
+		process.exit(1);
+	}
+};
+
+exports.createSchemaCustomization = async ({actions}) => {
+	const typeDefs = `
+    type LiferayDocument implements Node {
+      title: String
+      slug: String
+      html: String
+      dateCreated: Date @dateformat
+      dateModified: Date @dateformat
+      datePublished: Date @dateformat
+      liferay_id: String
+      type: String
+    }
+  `;
+
+	actions.createTypes(typeDefs);
+};

clayui.com/plugins/gatsby-source-liferay/package.json

@@ -0,0 +1,4 @@
+{
+	"name": "gatsby-source-liferay",
+	"version": "0.0.1"
+}

clayui.com/src/styles/_guide.scss

@@ -87,6 +87,7 @@
 
 			th {
 				padding-left: 0;
+				vertical-align: middle;
 			}
 		}
 

clayui.com/src/templates/docs.js

@@ -165,7 +165,7 @@ export default function Documentation(props) {
 	const {
 		data,
 		location,
-		pageContext: {tabs = [], slug},
+		pageContext: {tabs = [], slug, pageRemote},
 	} = props;
 
 	const {allMarkdownRemark, allMdx, mainTab, pageMd, pageMdx} = data;
@@ -351,7 +351,10 @@ export default function Documentation(props) {
 
 													<CodeClipboard>
 														<Content
-															html={html}
+															html={
+																html ||
+																pageRemote.html
+															}
 															jsx={body}
 														/>
 													</CodeClipboard>