micro improvements

fern-api · Oct 29, 2024 · 30c3c35 · 30c3c35
1 parent 25af7e3
commit 30c3c35
Show file tree

Hide file tree

Showing 11 changed files with 2,555 additions and 2,478 deletions.
diff --git a/packages/ui/fern-docs-search-server/src/algolia/__test__/__snapshots__/humanloop.json b/packages/ui/fern-docs-search-server/src/algolia/__test__/__snapshots__/humanloop.json
diff --git a/packages/ui/fern-docs-search-server/src/algolia/records/__test__/prepare-mdx-content.test.ts b/packages/ui/fern-docs-search-server/src/algolia/records/__test__/prepare-mdx-content.test.ts
@@ -77,4 +77,14 @@ Be sure to save the generated token - it won't be displayed after you leave the
           Value 1 Value 2 Value 3"
         `);
     });
+
+    it("should strip math nodes but keep the content", () => {
+        const content = "$x^2$";
+        const result = prepareMdxContent(content);
+        expect(result.content).toBe("x^2");
+
+        const content2 = "$$x^2$$";
+        const result2 = prepareMdxContent(content2);
+        expect(result2.content).toBe("x^2");
+    });
 });
diff --git a/packages/ui/fern-docs-search-server/src/algolia/records/prepare-mdx-content.ts b/packages/ui/fern-docs-search-server/src/algolia/records/prepare-mdx-content.ts
@@ -12,6 +12,7 @@ export function maybePrepareMdxContent(content: string | undefined): Partial<Pre
     return prepareMdxContent(content);
 }
 
+// TODO: this function needs to be updated to handle markdown snippets imported via mdxjsEsm
 export function prepareMdxContent(content: string): PreparedMdxContent {
     const tree = toTree(content).mdast;
     const code_snippets: PreparedMdxContent["code_snippets"] = [];

diff --git a/packages/ui/fern-docs-search-server/src/algolia/types.ts b/packages/ui/fern-docs-search-server/src/algolia/types.ts
@@ -2,8 +2,8 @@ import { z } from "zod";
 
 // in order of priority:
 export const SEARCHABLE_ATTRIBUTES = [
-    "page_title",
     "level_title",
+    "page_title",
     "description",
     "payload_description",
     "request_description",
@@ -21,6 +21,14 @@ export const SEARCHABLE_ATTRIBUTES = [
     "response_type",
     "status_code",
     "parameter_type",
+
+    // hierarchy (in descending order of priority)
+    "hierarchy.h6.title",
+    "hierarchy.h5.title",
+    "hierarchy.h4.title",
+    "hierarchy.h3.title",
+    "hierarchy.h2.title",
+    "hierarchy.h1.title",
 ] as const;
 
 // these are metadata fields that we do not want to include in the search hits:

diff --git a/packages/ui/fern-docs-search-server/src/trigger/algolia-indexer-task.ts b/packages/ui/fern-docs-search-server/src/trigger/algolia-indexer-task.ts
@@ -50,6 +50,7 @@ export const algoliaIndexerTask = task({
                 ),
                 unretrievableAttributes: [...UNRETRIEVABLE_ATTRIBUTES],
                 attributeForDistinct: "pathname",
+                enableRules: true,
             },
         });
 

diff --git a/packages/ui/fern-docs-search-ui/package.json b/packages/ui/fern-docs-search-ui/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@algolia/autocomplete-core": "^1.17.6",
     "@fern-ui/fern-docs-search-server": "workspace:*",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "algoliasearch": "^5.10.2",
     "es-toolkit": "^1.24.0",

diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/DesktopInstantSearch.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/DesktopInstantSearch.tsx
@@ -16,15 +16,14 @@ interface DesktopInstantSearchProps {
 
 export function DesktopInstantSearch({ appId, apiKey }: DesktopInstantSearchProps): ReactElement {
     const ref = useRef(algoliasearch(appId, apiKey));
-    const containerRef = useRef<HTMLDivElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         ref.current.setClientApiKey({ apiKey });
     }, [apiKey]);
 
-    useTrapFocus({ container: containerRef.current });
+    useTrapFocus({ container: formRef.current });
 
     return (
         <div className="w-96">
@@ -37,25 +36,32 @@ export function DesktopInstantSearch({ appId, apiKey }: DesktopInstantSearchProp
                     restrictHighlightAndSnippetArrays={true}
                     distinct={true}
                     attributesToSnippet={["description:10", "content:16"]}
+                    ignorePlurals
+                    removeStopWords
                 />
-                <div
+                <form
                     className="flex flex-col gap-2 border border-[#DBDBDB] rounded-lg overflow-hidden bg-[#F2F2F2]/30 backdrop-blur-xl"
-                    ref={containerRef}
+                    ref={formRef}
+                    onSubmit={(event) => {
+                        event.preventDefault();
+                    }}
                 >
-                    <DesktopSearchBox
-                        formClassName="p-4"
-                        inputClassName="w-full focus:outline-none bg-transparent text-lg placeholder:text-[#969696]"
-                        placeholder="Search"
-                        autoFocus
-                        formRef={formRef}
-                        inputRef={inputRef}
+                    <div
+                        className="p-4 border-b border-[#DBDBDB]"
                         onClick={() => {
                             inputRef.current?.focus();
                         }}
-                        isFromSelection={false}
-                    />
+                    >
+                        <DesktopSearchBox
+                            inputClassName="w-full focus:outline-none bg-transparent text-lg placeholder:text-[#969696]"
+                            placeholder="Search"
+                            autoFocus
+                            inputRef={inputRef}
+                            isFromSelection={false}
+                        />
+                    </div>
                     <SegmentedHits />
-                </div>
+                </form>
             </InstantSearchNext>
         </div>
     );

diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/DesktopSearchBox.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/DesktopSearchBox.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { MutableRefObject, ReactElement } from "react";
 import { useEffect } from "react";
@@ -10,13 +12,10 @@ export type SearchBoxTranslations = Partial<{
 interface DesktopSearchBoxProps {
     autoFocus: boolean;
     inputRef: MutableRefObject<HTMLInputElement | null>;
-    formRef: MutableRefObject<HTMLFormElement | null>;
-    formClassName: string;
     inputClassName: string;
     placeholder: string;
     isFromSelection: boolean;
     translations?: SearchBoxTranslations;
-    onClick: () => void;
 }
 
 export function DesktopSearchBox({ translations = {}, ...props }: DesktopSearchBoxProps): ReactElement {
@@ -37,14 +36,7 @@ export function DesktopSearchBox({ translations = {}, ...props }: DesktopSearchB
     }, [props.isFromSelection, props.inputRef]);
 
     return (
-        <form
-            ref={props.formRef}
-            className={props.formClassName}
-            onSubmit={(event) => {
-                event.preventDefault();
-            }}
-            onClick={props.onClick}
-        >
+        <>
             <VisuallyHidden.Root>
                 <label>{searchInputLabel}</label>
             </VisuallyHidden.Root>
@@ -64,6 +56,6 @@ export function DesktopSearchBox({ translations = {}, ...props }: DesktopSearchB
                     refine(e.target.value);
                 }}
             />
-        </form>
+        </>
     );
 }
diff --git a/packages/ui/fern-docs-search-ui/src/components/shared/HitContent.tsx b/packages/ui/fern-docs-search-ui/src/components/shared/HitContent.tsx
@@ -5,7 +5,7 @@ import {
 } from "@fern-ui/fern-docs-search-server/src/algolia/types";
 import { Hit } from "algoliasearch/lite";
 import { ReactElement } from "react";
-import { Snippet } from "react-instantsearch";
+import { Highlight, Snippet } from "react-instantsearch";
 import { MarkRequired, UnreachableCaseError } from "ts-essentials";
 import { AlgoliaRecordHit, MarkdownRecordHit } from "../types";
 
@@ -29,12 +29,7 @@ function HierarchyBreadcrumb({
         breadcrumb.push(pageTitle);
     }
 
-    headingLevels.slice(0, headingLevels.indexOf(level)).forEach((level) => {
-        const { title } = hierarchy[level] ?? {};
-        if (title) {
-            breadcrumb.push(title);
-        }
-    });
+    headingLevels.slice(0, headingLevels.indexOf(level));
 
     return (
         <div className="text-xs text-[#969696]">
@@ -50,13 +45,17 @@ function HierarchyBreadcrumb({
 
 function MarkdownHitContent({ hit }: { hit: MarkdownRecordHit }): ReactElement {
     return (
-        <div>
-            <div>
-                <span>{hit.level_title ?? hit.page_title}</span>
-            </div>
+        <div className="flex flex-col gap-1">
+            <Highlight
+                attribute={hit._highlightResult.level_title ? "level_title" : "page_title"}
+                hit={hit}
+                classNames={{
+                    highlighted: "font-bold bg-transparent",
+                }}
+            />
             <HierarchyBreadcrumb pageTitle={hit.page_title} hierarchy={hit.hierarchy} level={hit.level} />
             <Snippet
-                attribute="content"
+                attribute={hit._highlightResult.description ? "description" : "content"}
                 hit={hit}
                 className="text-sm leading-snug block"
                 classNames={{

diff --git a/packages/ui/fern-docs-search-ui/src/components/shared/SegmentedHits.tsx b/packages/ui/fern-docs-search-ui/src/components/shared/SegmentedHits.tsx
@@ -1,4 +1,5 @@
 import { VisibleAlgoliaRecord } from "@fern-ui/fern-docs-search-server/src/algolia/types";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 import { last, uniq } from "es-toolkit/array";
 import Link from "next/link";
 import { ReactElement } from "react";
@@ -12,9 +13,14 @@ function Hit({ hit }: { hit: AlgoliaRecordHit }): ReactElement | null {
         return null;
     }
     return (
-        <Link href={`${hit.pathname ?? ""}${hit.hash ?? ""}`} className="block mx-2 p-2 rounded-md hover:bg-[#CCC]/30">
-            <HitContent hit={hit as MarkRequired<AlgoliaRecordHit, "type">} />
-        </Link>
+        <RadioGroup.Item
+            value={hit.objectID}
+            className="mx-2 p-2 rounded-md hover:bg-[#CCC]/30 data-[state=checked]:bg-[#CCC]/30 text-left block"
+        >
+            <Link href={`${hit.pathname ?? ""}${hit.hash ?? ""}`} className="block w-full" tabIndex={-1}>
+                <HitContent hit={hit as MarkRequired<AlgoliaRecordHit, "type">} />
+            </Link>
+        </RadioGroup.Item>
     );
 }
 
@@ -42,14 +48,14 @@ export function SegmentedHits(): ReactElement {
     });
 
     return (
-        <>
+        <RadioGroup.Root>
             {uniq(segments).map((segment) => (
-                <section key={segment}>
+                <section key={segment} className="mb-2 flex flex-col justify-stretch">
                     <h6 className="text-xs font-bold text-[#969696] px-4 my-1">{segment}</h6>
 
                     {segmentedHits[segment]?.map((hit) => <Hit key={hit.objectID} hit={hit} />)}
                 </section>
             ))}
-        </>
+        </RadioGroup.Root>
     );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ export const algoliaIndexerTask = task({ @@
                     ),
                     unretrievableAttributes: [...UNRETRIEVABLE_ATTRIBUTES],
                     attributeForDistinct: "pathname",
+                    enableRules: true,
                 },
             });
@@ Expand Down @@