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/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
+}