Fixed Search issue in Primitives doc search - Issue #854

.env.development

@@ -1 +1 @@
-NEXT_PUBLIC_ALGOLIA_INDEX_NAME=development_docs
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME=development_docs

.env.production

@@ -1 +1 @@
-NEXT_PUBLIC_ALGOLIA_INDEX_NAME=docs
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME=docs

algolia/.env.example

@@ -1,2 +1,2 @@
 APPLICATION_ID=VXVOLU3YVQ
-API_KEY=
+API_KEY=

algolia/config.json

@@ -1,19 +1,20 @@
 {
-	"index_name": "docs",
-	"start_urls": ["https://www.radix-ui.com/primitives/docs"],
-	"stop_urls": ["https://www.radix-ui.com/primitives/docs/overview/releases"],
-	"selectors": {
-		"lvl0": {
-			"selector": "[data-algolia-lvl0]",
-			"global": true
-		},
-		"lvl1": "[data-algolia-page-scope] h1",
-		"lvl2": "[data-algolia-page-scope] h2",
-		"lvl3": "[data-algolia-page-scope] h3",
-		"lvl4": "[data-algolia-page-scope] h4",
-		"text": "[data-algolia-page-scope] p, [data-algolia-page-scope] li"
-	},
-	"min_indexed_level": 1,
-	"selectors_exclude": ["[data-algolia-exclude]"],
-	"scrape_start_urls": false
+  "index_name": "docs",
+  "start_urls": ["https://www.radix-ui.com/primitives/docs"],
+  "stop_urls": ["https://www.radix-ui.com/primitives/docs/overview/releases"],
+  "selectors": {
+    "lvl0": {
+      "selector": "[data-algolia-lvl0], [data-algolia-page-scope] h1",
+      "global": true,
+      "default_value": "Documentation"
+    },
+    "lvl1": "[data-algolia-page-scope] h1",
+    "lvl2": "[data-algolia-page-scope] h2",
+    "lvl3": "[data-algolia-page-scope] h3",
+    "lvl4": "[data-algolia-page-scope] h4",
+    "text": "[data-algolia-page-scope] p, [data-algolia-page-scope] li"
+  },
+  "min_indexed_level": 1,
+  "selectors_exclude": ["[data-algolia-exclude]"],
+  "scrape_start_urls": false
 }

components/PrimitivesSearch.tsx

@@ -27,7 +27,7 @@ import type {
 	AutocompleteApi as InternalAutocompleteApi,
 } from "@algolia/autocomplete-core";
 import type { Hit, SearchResponse } from "@algolia/client-search";
-
+//Updated new search api key
 const ALGOLIA_APP_ID = "VXVOLU3YVQ";
 const ALGOLIA_PUBLIC_API_KEY = "9d44395c1b7b172ac84b7e5ab80bf8c5";
 
@@ -40,6 +40,7 @@ type SearchItem = SnippetedHit<{
 	objectID: string;
 	type: ContentType;
 	url: string;
+	title: string;
 	hierarchy: {
 		lvl0: string;
 		lvl1: string;
@@ -115,6 +116,7 @@ function PrimitivesSearchRoot({
 										"hierarchy.lvl3",
 										"hierarchy.lvl4",
 										"content",
+										"title",
 									],
 									attributesToSnippet: [
 										`hierarchy.lvl0:${snippetLength}`,
@@ -139,19 +141,20 @@ function PrimitivesSearchRoot({
 							throw error;
 						})
 						.then(({ results }) => {
-							// we only have 1 query, so we  grab the hits from the first result
+							// Uncategorized the hitquery
 							const { hits } = results[0] as SearchResponse<SearchItem>;
-							const sources = groupBy(hits, (hit) => hit.hierarchy.lvl0);
+							const sources = groupBy(hits, (hit) => hit.hierarchy?.lvl0 || "Uncategorized");
 							return Object.entries(sources)
 								.sort(sortSources)
 								.map(([lvl0, items]) => ({
-									onSelect: (params) => {
-										params.setIsOpen(false);
-									},
-									sourceId: lvl0,
-									getItemUrl: ({ item }) => item.url,
-									getItems: () => items,
-								}));
+								onSelect: (params) => {
+									params.setIsOpen(false);
+								},
+								sourceId: lvl0 || "Uncategorized",
+								getItemUrl: ({ item }) => item.url,
+								getItems: () => items,
+							}));
+
 						});
 				},
 			}),
@@ -433,39 +436,50 @@ function ItemTitle(props: ItemTitleProps) {
 }
 
 function ItemBreadcrumb({
-	item,
-	levels,
+  item,
+  levels,
 }: {
-	item: SearchItem;
-	levels: typeof SUPPORTED_LEVELS;
+  item: SearchItem;
+  levels: typeof SUPPORTED_LEVELS;
 }) {
-	const itemLevelIndex =
-		item.type === "content" ? levels.length - 1 : levels.indexOf(item.type);
-	const breadcrumbLevels = levels.slice(0, itemLevelIndex);
-
-	return (
-		<Text size="2" color="gray" as="p">
-			{breadcrumbLevels.map((level, index) => {
-				const heading = item.hierarchy[level];
-				return heading ? (
-					<React.Fragment key={index}>
-						{index > 0 ? (
-							<Box
-								as="span"
-								display="inline"
-								style={{ color: "var(--gray-a11)" }}
-							>
-								<CaretRightIcon style={{ display: "inline-block" }} />
-								{/* Adding a comma to insert a natural break in the speech flow */}
-								<VisuallyHidden.Root>, </VisuallyHidden.Root>
-							</Box>
-						) : null}
-						<Highlight hit={item} attribute={["hierarchy", level]} />
-					</React.Fragment>
-				) : null;
-			})}
-		</Text>
-	);
+  if (!item.hierarchy || typeof item.hierarchy !== "object") {
+
+    const fallbackText = item.title || item.content || "No title available";
+    return (
+      <Text size="2" color="gray" as="p">
+        {fallbackText}
+      </Text>
+    );
+  }
+
+  const itemLevelIndex =
+    item.type === "content" ? levels.length - 1 : levels.indexOf(item.type);
+  const breadcrumbLevels = levels.slice(0, itemLevelIndex);
+
+  return (
+    <Text size="2" color="gray" as="p">
+      {breadcrumbLevels.map((level, index) => {
+        const heading = item.hierarchy[level];
+        if (!heading) return null;
+
+        return (
+          <React.Fragment key={index}>
+            {index > 0 && (
+              <Box
+                as="span"
+                display="inline"
+                style={{ color: "var(--gray-a11)" }}
+              >
+                <CaretRightIcon style={{ display: "inline-block" }} />
+                <VisuallyHidden.Root>, </VisuallyHidden.Root>
+              </Box>
+            )}
+            <Highlight hit={item} attribute={["hierarchy", level]} />
+          </React.Fragment>
+        );
+      })}
+    </Text>
+  );
 }
 
 function Highlight<THit extends SnippetedHit<unknown>>({

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.