feat: improve docs search

components/ui/Autocomplete.tsx

@@ -29,7 +29,11 @@ import { MenuItem } from "@telegraph/menu";
 import { Tag } from "@telegraph/tag";
 import { Code, Text } from "@telegraph/typography";
 
-import { DocsSearchItem, EndpointSearchItem } from "@/types";
+import {
+  DocsSearchItem,
+  EndpointSearchItem,
+  EnhancedDocsSearchItem,
+} from "@/types";
 
 import { useInkeepModal } from "../AiChatButton";
 import { useAskAi } from "../AskAiContext";
@@ -62,7 +66,9 @@ function createAskAiPrompt(query: string): string {
   return `Can you tell me about ${query}`;
 }
 
-type ResultItem = (DocsSearchItem & BaseItem) | (EndpointSearchItem & BaseItem);
+type ResultItem =
+  | (EnhancedDocsSearchItem & BaseItem)
+  | (EndpointSearchItem & BaseItem);
 
 const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || "";
 const algoliaSearchApiKey =
@@ -175,6 +181,9 @@ const DocsSearchResult = ({
   const href = `/${item.path}`;
   const isApiRef = isApiReferencePath(item.path);
 
+  const enhancedItem = item as EnhancedDocsSearchItem;
+  const showPageTitle = !enhancedItem.isPageLevel && enhancedItem.pageTitle;
+
   const content = (
     <Box w="full" h="full" px="2" py="2">
       <Text as="p" size="2" color="default" weight="regular">
@@ -193,6 +202,7 @@ const DocsSearchResult = ({
         )}
       </Text>
       <Text as="span" size="1" color="gray" weight="regular">
+        {showPageTitle ? `${enhancedItem.pageTitle} · ` : ""}
         {item.section}
       </Text>
     </Box>
@@ -823,7 +833,7 @@ const Autocomplete = () => {
                                   />
                                 ) : (
                                   <DocsSearchResult
-                                    item={item as DocsSearchItem}
+                                    item={item as EnhancedDocsSearchItem}
                                     onClick={() => autocomplete.setQuery("")}
                                   />
                                 )}

lib/content.server.ts

@@ -1,16 +1,9 @@
 import fs from "fs";
 import path from "path";
-import algoliasearch from "algoliasearch";
-import type { FrontMatter, DocsSearchItem } from "../types";
 
 export const CONTENT_DIR = "content/";
 export const DOCS_FILE_EXTENSIONS = [".mdx", ".md"];
 
-/**
- * This is to index our .md and .mdx file content.
- * API/mAPI reference content is indexed at script/indexApisForSearch.ts.
- */
-
 export const getAllFilesInDir = (
   directory: string,
   files: string[] = [],
@@ -31,48 +24,5 @@ export const getAllFilesInDir = (
 };
 
 export function makeIdFromPath(resourcePath) {
-  return resourcePath.replace(/\.mdx?$/, "").replace("/index", "");
-}
-
-export async function generateAlgoliaIndex(frontmatter: FrontMatter) {
-  const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? "";
-  const algoliaAdminApiKey = process.env.ALGOLIA_ADMIN_API_KEY ?? "";
-  const algoliaIndexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME ?? "";
-
-  if (algoliaAppId && algoliaAdminApiKey && algoliaIndexName) {
-    const client = algoliasearch(algoliaAppId, algoliaAdminApiKey);
-    const index = client.initIndex(algoliaIndexName);
-
-    try {
-      // Notes:
-      // Algolia recommends saving objects in batches because of efficiency.
-      // Our markdown processor doesn't provide a callback to subscribe to that
-      // gets called after finishing with all elements.
-      //
-      // Given we only have ~40 items to be indexed right now, we are just saving
-      // entries one by one.
-      const object: DocsSearchItem = {
-        // The path to the page will be the identifier in Algolia.
-        objectID: frontmatter.id,
-        path: frontmatter.id,
-        title: frontmatter.title,
-        section: frontmatter.section,
-        // Once we add tags are added to pages, Algolia records
-        // will be updated with them, so we can enhance the search experience
-        tags: frontmatter.tags || [],
-        // Saving a content page, not an API endpoint
-        contentType: "document",
-        // Saving to the pages index
-        index: "pages",
-      };
-
-      await index.saveObject(object);
-    } catch (e) {
-      console.error(e);
-    }
-  } else {
-    console.info(
-      "Algolia configuration variables not present. Skipping indexing.",
-    );
-  }
+  return resourcePath.replace(/\.mdx?$/, "").replace(/\/index$/, "");
 }

package.json

@@ -16,10 +16,11 @@
     "generate-llms": "yarn run open-api-to-md && tsx scripts/generateApiMarkdown.ts && tsx scripts/generateLlmsTxt.ts",
     "generate-reference-md": "tsx scripts/generateApiMarkdown.ts",
     "index-apis": "tsx scripts/indexApisForSearch.ts",
+    "index-docs": "tsx scripts/indexDocsForSearch.ts",
     "open-api-to-md": "bash scripts/openApiToMd.sh",
     "split-specs": "tsx scripts/splitOpenApiSpec.ts",
     "predev": "yarn split-specs && yarn generate-llms",
-    "prebuild": "yarn split-specs && yarn generate-llms && yarn index-apis"
+    "prebuild": "yarn split-specs && yarn generate-llms && yarn index-docs && yarn index-apis"
   },
   "dependencies": {
     "@algolia/autocomplete-js": "^1.6.3",

pages/[...slug].tsx

@@ -14,7 +14,6 @@ import {
   CONTENT_DIR,
   DOCS_FILE_EXTENSIONS,
   makeIdFromPath,
-  generateAlgoliaIndex,
 } from "../lib/content.server";
 import eventPayload from "../data/code/sources/eventPayload";
 import datadogDashboardJson from "../content/integrations/extensions/datadog_dashboard.json";
@@ -96,9 +95,6 @@ export async function getStaticProps({ params: { slug } }) {
   // Extend frontmatter
   mdxSource.frontmatter.id = makeIdFromPath(slug.join(sep));
 
-  // Index page in algolia
-  await generateAlgoliaIndex(mdxSource.frontmatter);
-
   return { props: { source: mdxSource, sourcePath, typedocs } };
 }