Merge pull request #339 from wpengine/feat-recomendations

feat: Implement recommendations for docs

Author: moonmeister

package.json

@@ -25,8 +25,6 @@
 		"@faustwp/cli": "^3.2.3",
 		"@faustwp/core": "^3.2.3",
 		"@headlessui/react": "^2.2.4",
-		"@heroicons/react": "^2.2.0",
-		"@icons-pack/react-simple-icons": "^13.1.0",
 		"@jsdevtools/rehype-url-inspector": "^2.0.2",
 		"@next/third-parties": "^15.3.4",
 		"@octokit/core": "^7.0.2",
@@ -44,6 +42,8 @@
 		"next-sitemap": "^4.2.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
+		"react-icons": "^5.5.0",
+		"react-intersection-observer": "^9.16.0",
 		"rehype-callouts": "^2.1.0",
 		"rehype-external-links": "^3.0.0",
 		"rehype-pretty-code": "^0.14.1",

pnpm-lock.yaml

@@ -1,11 +1,12 @@
-import { hash } from "node:crypto";
 import { env, exit } from "node:process";
 import { getTextContentFromMd } from "../src/lib/remark-parsing.mjs";
 import {
 	getAllDocMeta,
 	getRawDocContent,
 	getDocUriFromPath,
+	generateDocIdFromUri,
 } from "../src/lib/remote-mdx-files.mjs";
+import { smartSearchConfig } from "../src/lib/smart-search.mjs";
 
 const {
 	NEXT_PUBLIC_SEARCH_ENDPOINT: endpoint,
@@ -24,6 +25,9 @@ async function main() {
 		console.log("Docs Pages collected for indexing:", pages.length);
 
 		await deleteOldDocs();
+
+		await setSearchConfig();
+
 		await sendPagesToEndpoint(pages);
 	} catch (error) {
 		console.error("Error in smartSearchPlugin:", error);
@@ -36,10 +40,10 @@ async function main() {
  * @typedef {object} Page
  * @property {string} id //The unique identifier of the document.
  * @property {object} data //The data to be indexed.
- * @property {string} data.title //The title of the document.
- * @property {string} data.content //The text content of the document.
- * @property {string} data.path //A relative path to the document on the internet.
- * @property {string} data.content_type // The type of content. Always "mdx_doc".
+ * @property {string} data.post_title //The title of the document.
+ * @property {string} data.post_content //The text content of the document.
+ * @property {string} data.post_url //A relative path to the document on the internet.
+ * @property {string} data.post_type // The type of content. Always "mdx_doc".
  * @returns Page[]
  */
 async function collectPages() {
@@ -53,16 +57,16 @@ async function collectPages() {
 
 		const cleanedPath = getDocUriFromPath(entry.path);
 
-		const id = hash("sha-1", `mdx:${cleanedPath}`);
+		const id = generateDocIdFromUri(cleanedPath);
 
 		pages.push({
 			id,
 			data: {
-				title: parsedContent.data.matter.title,
+				post_title: parsedContent.data.matter.title,
 				description: parsedContent.data.matter.description,
-				content: parsedContent.value,
-				path: cleanedPath,
-				content_type: "mdx_doc",
+				post_content: parsedContent.value,
+				post_url: cleanedPath,
+				post_type: "mdx_doc",
 			},
 		});
 	}
@@ -126,7 +130,7 @@ async function deleteOldDocs() {
 			const response = await graphql({
 				query: queryDocuments,
 				variables: {
-					query: 'content_type:"mdx_doc"',
+					query: 'post_type:"mdx_doc"',
 					limit: 10,
 					offset: totalCollected,
 				},
@@ -208,4 +212,34 @@ async function sendPagesToEndpoint(pages) {
 	}
 }
 
+const searchConfigMutation = `
+mutation setSemanticSearchConfiguration($fields: [String!]!, $chunking: ChunkingConfig!) {
+  config {
+    semanticSearch(fields: $fields, chunking: $chunking) {
+      type
+      fields
+      chunking {
+        enabled
+      }
+    }
+  }
+}`;
+
+async function setSearchConfig() {
+	const variables = {
+		fields: smartSearchConfig.fields,
+		chunking: smartSearchConfig.chunking,
+	};
+
+	try {
+		const response = await graphql({ query: searchConfigMutation, variables });
+		console.log(
+			"Search configuration updated successfully.",
+			JSON.stringify(response.data.config.semanticSearch, undefined, 2),
+		);
+	} catch (error) {
+		console.error("Error updating search configuration:", error);
+	}
+}
+
 await main();

scripts/smart-search.mjs

@@ -1,4 +1,4 @@
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { HiOutlineChevronRight } from "react-icons/hi2";
 import Link from "@/components/link";
 
 export default function BlogBreadcrumbs({ currentPostTitle }) {
@@ -13,7 +13,7 @@ export default function BlogBreadcrumbs({ currentPostTitle }) {
 				>
 					<span>Blog</span>
 					<span>
-						<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
+						<HiOutlineChevronRight className="inline h-5 w-10 pl-4 align-text-top" />
 					</span>
 				</Link>
 

src/components/blog-breadcrumbs.jsx

@@ -0,0 +1,33 @@
+import { classNames } from "@/utils/strings";
+
+export default function DocTypeTag(type) {
+	if (!type || !type.type) {
+		return;
+	}
+
+	const theType = type.type || type;
+
+	const config = {
+		name: "Ext",
+		className: "bg-gray-500",
+	};
+
+	if (theType === "mdx_doc") {
+		config.name = "Doc";
+		config.className = "bg-teal-800";
+	} else if (theType === "post" || theType === "page") {
+		config.name = "Blog";
+		config.className = "bg-purple-600";
+	}
+
+	return (
+		<span
+			className={classNames(
+				"mr-2 inline-block rounded px-2 py-1 text-xs font-semibold text-gray-200 uppercase",
+				config.className,
+			)}
+		>
+			{config.name}
+		</span>
+	);
+}

src/components/doc-type-tag.jsx

@@ -1,10 +1,10 @@
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
+import { HiOutlineChevronRight } from "react-icons/hi2";
 import Link from "@/components/link";
 import { sendSelectItemEvent } from "@/lib/analytics.mjs";
-import { normalizeHref } from "@/utils/strings";
+import { classNames, normalizeHref } from "@/utils/strings";
 
-export default function DocsBreadcrumbs({ routes }) {
+export default function DocsBreadcrumbs({ routes, className }) {
 	const generateBreadcrumbs = (breadcrumbRoutes, currentRoute) => {
 		const breadcrumbs = [];
 
@@ -48,37 +48,40 @@ export default function DocsBreadcrumbs({ routes }) {
 	}
 
 	return (
-		<div className="mt-4 mb-7 md:mt-2 md:mb-10">
-			<div className="flex flex-wrap items-center gap-2 text-sm">
-				{breadcrumbLinks.map((breadcrumb, index) =>
-					normalizeHref(breadcrumb.route) === normalizeHref(currentPath) ? (
-						<span key={index}>{breadcrumb.title}</span>
-					) : (
-						<Link
-							key={index}
-							className="font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
-							href={breadcrumb.route}
-							noDefaultStyles
-							aria-label={breadcrumb.title}
-							onClick={() => {
-								sendSelectItemEvent({
-									list: { id: "docs_breadcrumbs", name: "Docs Breadcrumbs" },
-									item: {
-										item_id: breadcrumb.route,
-										item_name: breadcrumb.title,
-										item_category: "mdx_doc",
-									},
-								});
-							}}
-						>
-							<span>{breadcrumb.title}</span>
-							<span>
-								<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
-							</span>
-						</Link>
-					),
-				)}
-			</div>
-		</div>
+		<nav
+			className={classNames(
+				"flex flex-wrap items-center gap-2 text-sm",
+				className,
+			)}
+		>
+			{breadcrumbLinks.map((breadcrumb, index) =>
+				normalizeHref(breadcrumb.route) === normalizeHref(currentPath) ? (
+					<span key={index}>{breadcrumb.title}</span>
+				) : (
+					<Link
+						key={index}
+						className="font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
+						href={breadcrumb.route}
+						noDefaultStyles
+						aria-label={breadcrumb.title}
+						onClick={() => {
+							sendSelectItemEvent({
+								list: { id: "docs_breadcrumbs", name: "Docs Breadcrumbs" },
+								item: {
+									item_id: breadcrumb.route,
+									item_name: breadcrumb.title,
+									item_category: "mdx_doc",
+								},
+							});
+						}}
+					>
+						<span>{breadcrumb.title}</span>
+						<span>
+							<HiOutlineChevronRight className="inline h-5 w-10 pl-4 align-text-top" />
+						</span>
+					</Link>
+				),
+			)}
+		</nav>
 	);
 }