docs: show possible similar pages on 404 page (#13840)

* docs: show possible similar pages on 404 page

* fix 404 page in api reference

www/packages/docs-ui/src/components/SimilarPages/index.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import React from "react"
+import { useSimilarPages } from "../../hooks"
+import { H2 } from "../Heading"
+import { MDXComponents } from "../MDXComponents"
+
+const P = MDXComponents.p as React.FC<
+  React.HTMLAttributes<HTMLParagraphElement>
+>
+const Ul = MDXComponents.ul as React.FC<React.HTMLAttributes<HTMLUListElement>>
+const Li = MDXComponents.li as React.FC<React.HTMLAttributes<HTMLLIElement>>
+const A = MDXComponents.a as React.FC<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>
+
+export const SimilarPages = () => {
+  const similarPages = useSimilarPages()
+
+  if (!similarPages.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <H2>Similar Pages</H2>
+      <P>Maybe you&apos;re looking for:</P>
+      <Ul>
+        {similarPages.map((page) => (
+          <Li key={page.id}>
+            <A href={page.url}>{page.title}</A>
+          </Li>
+        ))}
+      </Ul>
+    </div>
+  )
+}

www/packages/docs-ui/src/components/index.ts

@@ -76,6 +76,7 @@ export * from "./Search/Suggestions/Item"
 export * from "./Select"
 export * from "./Sidebar"
 export * from "./Sidebar/Item"
+export * from "./SimilarPages"
 export * from "./SourceCodeLink"
 export * from "./SplitLists"
 export * from "./Table"

www/packages/docs-ui/src/hooks/index.ts

@@ -16,4 +16,5 @@ export * from "./use-request-runner"
 export * from "./use-scroll-utils"
 export * from "./use-search-navigation"
 export * from "./use-select"
+export * from "./use-similar-pages"
 export * from "./use-tabs"

www/packages/docs-ui/src/hooks/use-similar-pages/index.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useSearch } from "../../providers"
+import { useEffect, useState } from "react"
+import { HitType } from "../../components"
+
+type SimilarPage = {
+  id: string
+  title: string
+  url: string
+}
+
+export const useSimilarPages = () => {
+  const pathname = usePathname()
+  const { searchClient, selectedIndex } = useSearch()
+  const [similarPages, setSimilarPages] = useState<SimilarPage[]>([])
+
+  useEffect(() => {
+    void searchClient
+      .search<HitType>({
+        requests: [
+          {
+            query: pathname.split("/").join(" ").trim(),
+            indexName: selectedIndex,
+            hitsPerPage: 3,
+            distinct: true,
+          },
+        ],
+      })
+      .then(({ results }) => {
+        const hits = "hits" in results[0] ? results[0].hits : []
+        const pages = hits.map((hit) => ({
+          id: hit.objectID,
+          title: hit.hierarchy.lvl1 || hit.hierarchy.lvl0 || "Untitled",
+          url: hit.url,
+        }))
+        setSimilarPages(pages)
+      })
+      .catch(() => {
+        setSimilarPages([])
+      })
+  }, [pathname, searchClient])
+
+  return similarPages
+}

www/packages/docs-ui/src/providers/Search/index.tsx

@@ -80,12 +80,10 @@ export const SearchProvider = ({
 
   const modalRef = useRef<HTMLDialogElement | null>(null)
 
-  const searchClient: SearchClient = useMemo(() => {
-    const algoliaClient = algoliasearch(algolia.appId, algolia.apiKey)
-    return {
-      ...algoliaClient,
-    }
-  }, [algolia.appId, algolia.apiKey])
+  const searchClient: SearchClient = useMemo(
+    () => algoliasearch(algolia.appId, algolia.apiKey),
+    [algolia.appId, algolia.apiKey]
+  )
 
   useEffect(() => {
     if (initialDefaultIndex !== selectedIndex) {