fix

fern-api · Oct 30, 2024 · 8f72ec7 · 8f72ec7
1 parent 73c4710
commit 8f72ec7
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 30 deletions.
diff --git a/packages/ui/fern-docs-search-server/package.json b/packages/ui/fern-docs-search-server/package.json
@@ -47,6 +47,7 @@
     "@fern-ui/fern-docs-utils": "workspace:*",
     "algoliasearch": "^5.10.2",
     "es-toolkit": "^1.24.0",
+    "html-entities": "^2.5.2",
     "pnpm": "^9.12.1",
     "ts-essentials": "^10.0.1",
     "zod": "^3.23.8"

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
@@ -1,4 +1,5 @@
 import { isMdxExpression, isMdxJsxElement, mdastToString, toTree, visit } from "@fern-ui/fern-docs-mdx";
+import { decode } from "html-entities";
 
 interface PreparedMdxContent {
     content: string | undefined;
@@ -44,13 +45,20 @@ export function prepareMdxContent(content: string): PreparedMdxContent {
             return index;
         }
 
+        if (node.type === "text" || node.type === "html") {
+            // replace all html entities with their corresponding characters
+            node.value = decode(node.value);
+        }
+
         return true;
     });
+
     const stringifiedContent = mdastToString(tree, {
         includeHtml: false,
         includeImageAlt: true,
         preserveNewlines: true,
     }).trim();
+
     return {
         content: stringifiedContent.length > 0 ? stringifiedContent : undefined,
         code_snippets: code_snippets.length > 0 ? code_snippets : undefined,

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
@@ -51,7 +51,6 @@ export function DesktopInstantSearch({
                     restrictHighlightAndSnippetArrays={true}
                     distinct={true}
                     attributesToSnippet={["description:20", "content:20"]}
-                    hitsPerPage={100}
                     ignorePlurals
                 />
                 <DesktopSearchForm

diff --git a/packages/ui/fern-docs-search-ui/src/components/shared/ArrowTurnDownLeftIcon.tsx b/packages/ui/fern-docs-search-ui/src/components/shared/ArrowTurnDownLeftIcon.tsx
@@ -1,23 +1,21 @@
-import { ReactElement, SVGProps, forwardRef } from "react";
+import { SVGProps, forwardRef } from "react";
 
-export const ArrowTurnDownLeftIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
-    (props, ref): ReactElement<SVGProps<SVGSVGElement>> => (
-        <svg
-            ref={ref}
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="arrow-turn-down-left"
-            className="svg-inline--fa fa-arrow-turn-down-left"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            {...props}
-        >
-            <path
-                fill="currentColor"
-                d="M448 64c0-17.7 14.3-32 32-32s32 14.3 32 32V224c0 53-43 96-96 96H109.3l73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 256H416c17.7 0 32-14.3 32-32V64z"
-            />
-        </svg>
-    ),
-);
+export const ArrowTurnDownLeftIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+    <svg
+        ref={ref}
+        aria-hidden="true"
+        focusable="false"
+        data-prefix="fas"
+        data-icon="arrow-turn-down-left"
+        className="svg-inline--fa fa-arrow-turn-down-left"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        {...props}
+    >
+        <path
+            fill="currentColor"
+            d="M448 64c0-17.7 14.3-32 32-32s32 14.3 32 32V224c0 53-43 96-96 96H109.3l73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 256H416c17.7 0 32-14.3 32-32V64z"
+        />
+    </svg>
+));
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
@@ -61,7 +61,7 @@ function MarkdownHitContent({ hit }: { hit: MarkdownRecordHit }): ReactElement {
             <Snippet
                 attribute={hit._highlightResult?.description ? "description" : "content"}
                 hit={hit}
-                className="text-sm leading-snug line-clamp-2"
+                className="text-sm leading-snug line-clamp-2 text-black/50"
                 classNames={{
                     highlighted: "font-bold bg-transparent",
                 }}

diff --git a/packages/ui/fern-docs-search-ui/src/components/shared/RegularFileLinesIcon.tsx b/packages/ui/fern-docs-search-ui/src/components/shared/RegularFileLinesIcon.tsx
@@ -0,0 +1,21 @@
+import { SVGProps, forwardRef } from "react";
+
+export const RegularFileLinesIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
+    <svg
+        ref={ref}
+        aria-hidden="true"
+        focusable="false"
+        data-prefix="far"
+        data-icon="file-lines"
+        className="svg-inline--fa fa-file-lines"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 384 512"
+        {...props}
+    >
+        <path
+            fill="currentColor"
+            d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24H264c13.3 0 24-10.7 24-24s-10.7-24-24-24H120zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24H264c13.3 0 24-10.7 24-24s-10.7-24-24-24H120z"
+        />
+    </svg>
+));
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
@@ -8,6 +8,7 @@ import { AlgoliaRecordHit } from "../types";
 import { ArrowTurnDownLeftIcon } from "./ArrowTurnDownLeftIcon";
 import { HitContent } from "./HitContent";
 import { LinkComponentType } from "./LinkComponent";
+import { RegularFileLinesIcon } from "./RegularFileLinesIcon";
 import { SegmentedHitsRadioGroup } from "./SegmentedHitsRadioGroup";
 
 interface HitProps {
@@ -25,6 +26,10 @@ function Hit({ hit, LinkComponent }: HitProps): ReactElement | null {
             className="mx-2 p-2 rounded-md hover:bg-[#CCC]/30 data-[state=checked]:bg-[#CCC]/30 text-left block"
         >
             <LinkComponent hit={{ pathname: hit.pathname ?? "", hash: hit.hash ?? "" }} className="flex gap-2">
+                <div className="shrink-0 py-1">
+                    <RegularFileLinesIcon className="size-4 text-[#969696]" />
+                </div>
+
                 <div className="flex-1">
                     <HitContent hit={hit as MarkRequired<AlgoliaRecordHit, "type">} />
                 </div>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml