Implement Orama search (again)

app/modules/color-scheme/components.tsx

@@ -1,8 +1,9 @@
-import { useLayoutEffect, useMemo } from "react";
+import { useMemo } from "react";
 import type { SerializeFrom } from "@remix-run/node";
 import { useMatches, useNavigation } from "@remix-run/react";
 import type { loader as rootLoader } from "../../root";
 import type { ColorScheme } from "./types";
+import { useLayoutEffect } from "~/ui/utils";
 
 export function useColorScheme(): ColorScheme {
   let rootLoaderData = useMatches()[0].data as SerializeFrom<typeof rootLoader>;
@@ -29,34 +30,31 @@ export function ColorSchemeScript() {
     // we don't want this script to ever change
   );
 
-  if (typeof document !== "undefined") {
-    // eslint-disable-next-line
-    useLayoutEffect(() => {
-      if (colorScheme === "light") {
-        document.documentElement.classList.remove("dark");
-      } else if (colorScheme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else if (colorScheme === "system") {
-        function check(media: MediaQueryList) {
-          if (media.matches) {
-            document.documentElement.classList.add("dark");
-          } else {
-            document.documentElement.classList.remove("dark");
-          }
+  useLayoutEffect(() => {
+    if (colorScheme === "light") {
+      document.documentElement.classList.remove("dark");
+    } else if (colorScheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else if (colorScheme === "system") {
+      function check(media: MediaQueryList) {
+        if (media.matches) {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
         }
+      }
 
-        let media = window.matchMedia("(prefers-color-scheme: dark)");
-        check(media);
+      let media = window.matchMedia("(prefers-color-scheme: dark)");
+      check(media);
 
-        // @ts-expect-error I can't figure out what TypeScript wants here ...
-        media.addEventListener("change", check);
-        // @ts-expect-error
-        return () => media.removeEventListener("change", check);
-      } else {
-        console.error("Impossible color scheme state:", colorScheme);
-      }
-    }, [colorScheme]);
-  }
+      // @ts-expect-error I can't figure out what TypeScript wants here ...
+      media.addEventListener("change", check);
+      // @ts-expect-error
+      return () => media.removeEventListener("change", check);
+    } else {
+      console.error("Impossible color scheme state:", colorScheme);
+    }
+  }, [colorScheme]);
 
   return <script dangerouslySetInnerHTML={{ __html: script }} />;
 }

app/modules/orama-search.tsx

@@ -0,0 +1,140 @@
+import { Suspense, createContext, lazy, useContext, useState } from "react";
+import { useHydrated, useLayoutEffect } from "~/ui/utils";
+
+import "@orama/searchbox/dist/index.css";
+import "@docsearch/css/dist/style.css";
+import "~/styles/orama-search.css";
+import { useColorScheme } from "./color-scheme/components";
+
+const OriginalSearchBox = lazy(() =>
+  import("@orama/searchbox").then((module) => ({
+    default: module.SearchBox,
+  }))
+);
+
+const SearchModalContext = createContext<null | ((show: boolean) => void)>(
+  null
+);
+
+export function SearchModalProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  let [showSearchModal, setShowSearchModal] = useState(false);
+  const isHydrated = useHydrated();
+  const colorScheme = useSearchModalColorScheme();
+
+  return (
+    <SearchModalContext.Provider value={setShowSearchModal}>
+      <Suspense fallback={null}>
+        {isHydrated ? (
+          <OriginalSearchBox
+            cloudConfig={{
+              // The search endpoint for the Orama index
+              url: "https://cloud.orama.run/v1/indexes/react-router-dev-nwm58f",
+              // The public API key for performing search. This is commit-safe.
+              key: "23DOEM1uyLIqnumsPZICJzw2Xn7GSFkj",
+            }}
+            show={showSearchModal}
+            onClose={() => setShowSearchModal(false)}
+            colorScheme={colorScheme}
+            theme="secondary"
+            resultsMap={{
+              description: "section",
+            }}
+            facetProperty="section"
+            searchParams={{
+              threshold: 0,
+            }}
+            searchMode="hybrid"
+            backdrop
+          />
+        ) : null}
+      </Suspense>
+      {children}
+    </SearchModalContext.Provider>
+  );
+}
+
+function useSetShowSearchModal() {
+  let context = useContext(SearchModalContext);
+  if (!context) {
+    throw new Error("useSearchModal must be used within a SearchModalProvider");
+  }
+  return context;
+}
+
+export function SearchButton() {
+  let hydrated = useHydrated();
+  let setShowSearchModal = useSetShowSearchModal();
+
+  if (!hydrated) {
+    return <div className="h-10" />;
+  }
+
+  return (
+    <>
+      <div className="animate-[fadeIn_100ms_ease-in_1]">
+        <button
+          onClick={() => setShowSearchModal(true)}
+          type="button"
+          className="DocSearch DocSearch-Button"
+          aria-label="Search"
+        >
+          <span className="DocSearch-Button-Container">
+            <svg
+              width="20"
+              height="20"
+              className="DocSearch-Search-Icon"
+              viewBox="0 0 20 20"
+            >
+              <path
+                d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+                stroke="currentColor"
+                fill="none"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              ></path>
+            </svg>
+            <span className="DocSearch-Button-Placeholder">Search</span>
+          </span>
+          <span className="DocSearch-Button-Keys">
+            <kbd className="DocSearch-Button-Key">⌘</kbd>
+            <kbd className="DocSearch-Button-Key">K</kbd>
+          </span>
+        </button>
+      </div>
+    </>
+  );
+}
+
+// TODO: integrate this with ColorSchemeScript so we're not setting multiple listeners on the same media query
+function useSearchModalColorScheme() {
+  let colorScheme = useColorScheme();
+  let [systemColorScheme, setSystemColorScheme] = useState<
+    null | "light" | "dark"
+  >(null);
+  useLayoutEffect(() => {
+    if (colorScheme !== "system") {
+      setSystemColorScheme(null);
+      return;
+    }
+    let media = window.matchMedia("(prefers-color-scheme: dark)");
+    let handleMedia = () =>
+      setSystemColorScheme(media.matches ? "dark" : "light");
+    handleMedia();
+    media.addEventListener("change", handleMedia);
+    return () => {
+      media.removeEventListener("change", handleMedia);
+    };
+  }, [colorScheme]);
+  if (colorScheme !== "system") {
+    return colorScheme;
+  }
+  if (systemColorScheme) {
+    return systemColorScheme;
+  }
+  return "dark";
+}

app/routes/$lang.$ref.tsx

@@ -31,7 +31,7 @@ import { getLatestVersion } from "~/modules/gh-docs/.server/tags";
 import { useColorScheme } from "~/modules/color-scheme/components";
 
 import docsStylesheet from "~/styles/docs.css?url";
-import { DocSearch } from "~/modules/docsearch";
+import { SearchModalProvider, SearchButton } from "~/modules/orama-search";
 
 export let links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: docsStylesheet }];
@@ -90,42 +90,44 @@ export default function DocsLayout() {
     !navigation.location.pathname.match(params.ref);
 
   return (
-    <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
-      <div className="sticky top-0 z-20">
-        <Header />
-        <NavMenuMobile />
-      </div>
-      <div
-        className={
-          changingVersions
-            ? "opacity-25 transition-opacity delay-300"
-            : undefined
-        }
-      >
-        <div className="block lg:flex">
-          <NavMenuDesktop />
-          <div
-            className={classNames(
-              // add scroll margin to focused elements so that they aren't
-              // obscured by the sticky header
-              "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
-              // Account for the left navbar
-              "min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))]",
-              "lg:pl-6 xl:pl-10 2xl:pl-12",
-              !changingVersions && navigating
-                ? "opacity-25 transition-opacity delay-300"
-                : "",
-              "flex flex-col"
-            )}
-          >
-            <Outlet />
-            <div className="mt-auto px-4 pt-8 lg:pr-8 xl:pl-0">
-              <Footer />
+    <SearchModalProvider>
+      <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
+        <div className="sticky top-0 z-20">
+          <Header />
+          <NavMenuMobile />
+        </div>
+        <div
+          className={
+            changingVersions
+              ? "opacity-25 transition-opacity delay-300"
+              : undefined
+          }
+        >
+          <div className="block lg:flex">
+            <NavMenuDesktop />
+            <div
+              className={classNames(
+                // add scroll margin to focused elements so that they aren't
+                // obscured by the sticky header
+                "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
+                // Account for the left navbar
+                "min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))]",
+                "lg:pl-6 xl:pl-10 2xl:pl-12",
+                !changingVersions && navigating
+                  ? "opacity-25 transition-opacity delay-300"
+                  : "",
+                "flex flex-col"
+              )}
+            >
+              <Outlet />
+              <div className="mt-auto px-4 pt-8 lg:pr-8 xl:pl-0">
+                <Footer />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </SearchModalProvider>
   );
 }
 
@@ -181,7 +183,7 @@ function Header() {
         <div className="flex items-center gap-2">
           <VersionSelect />
           <ColorSchemeToggle />
-          <DocSearchSection className="lg:hidden" />
+          <SearchButtonSection className="lg:hidden" />
         </div>
       </div>
       <VersionWarning />
@@ -211,7 +213,7 @@ function Header() {
   );
 }
 
-function DocSearchSection({ className }: { className?: string }) {
+function SearchButtonSection({ className }: { className?: string }) {
   return (
     <div
       className={classNames("relative lg:sticky lg:top-0 lg:z-10", className)}
@@ -225,7 +227,7 @@ function DocSearchSection({ className }: { className?: string }) {
           "before:absolute before:bottom-0 before:left-0 before:-z-10 before:hidden before:h-[200%] before:w-full before:bg-inherit lg:before:block"
         )}
       >
-        <DocSearch />
+        <SearchButton />
       </div>
     </div>
   );
@@ -351,7 +353,7 @@ function NavMenuDesktop() {
         "h-[calc(100vh-var(--header-height))]"
       )}
     >
-      <DocSearchSection className="-mx-3" />
+      <SearchButtonSection className="-mx-3" />
       <div className="[&_*:focus]:scroll-mt-[6rem]">
         <Menu />
       </div>

app/ui/utils.ts

@@ -1,4 +1,16 @@
-import { useEffect, useState } from "react";
+import {
+  useEffect,
+  useState,
+  useLayoutEffect as React_useLayoutEffect,
+} from "react";
+
+export const canUseDOM = !!(
+  typeof window !== "undefined" &&
+  window.document &&
+  window.document.createElement
+);
+
+export const useLayoutEffect = canUseDOM ? React_useLayoutEffect : useEffect;
 
 let hydrating = true;