diff --git a/app/modules/search/ab-session.server.ts b/app/modules/search/ab-session.server.ts
new file mode 100644
index 00000000..787c6516
--- /dev/null
+++ b/app/modules/search/ab-session.server.ts
@@ -0,0 +1,46 @@
+import { createCookieSessionStorage } from "@remix-run/node";
+
+export let unencryptedSession = createCookieSessionStorage({
+ cookie: {
+ name: "ab_session",
+ path: "/",
+ sameSite: "lax",
+ expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7), // 1 week
+ },
+});
+
+const SESSION_KEY = "ab-docsearch-bucket";
+
+export async function bucketUser(request: Request) {
+ let session = await unencryptedSession.getSession(
+ request.headers.get("Cookie")
+ );
+
+ let { searchParams } = new URL(request.url);
+ let bucket = searchParams.get("bucket");
+
+ // if the bucket isn't being overridden by a query parameter, use the session
+ if (!isBucketValue(bucket)) {
+ bucket = session.get(SESSION_KEY);
+ }
+
+ // if no bucket in the session, assign the user
+ if (!isBucketValue(bucket)) {
+ bucket = Math.random() > 0.5 ? "orama" : "docsearch";
+ }
+
+ let safeBucket = isBucketValue(bucket) ? bucket : "docsearch";
+
+ session.set(SESSION_KEY, safeBucket);
+
+ return {
+ bucket: safeBucket,
+ headers: {
+ "Set-Cookie": await unencryptedSession.commitSession(session),
+ },
+ };
+}
+
+function isBucketValue(bucket: any): bucket is "docsearch" | "orama" {
+ return bucket === "docsearch" || bucket === "orama";
+}
diff --git a/app/modules/search/docsearch.tsx b/app/modules/search/docsearch.tsx
new file mode 100644
index 00000000..10606cc3
--- /dev/null
+++ b/app/modules/search/docsearch.tsx
@@ -0,0 +1,37 @@
+import type { DocSearchProps } from "@docsearch/react";
+import { useHydrated } from "~/ui/utils";
+import { Suspense, lazy } from "react";
+
+const OriginalDocSearch = lazy(() =>
+ import("@docsearch/react").then((module) => ({
+ default: module.DocSearch,
+ }))
+);
+
+let docSearchProps = {
+ appId: "RB6LOUCOL0",
+ indexName: "reactrouter",
+ apiKey: "b50c5d7d9f4610c9785fa945fdc97476",
+} satisfies DocSearchProps;
+
+// TODO: Refactor a bit when we add Vite with css imports per component
+// This will allow us to have two versions of the component, one that has
+// the button with display: none, and the other with button styles
+export function DocSearch() {
+ let hydrated = useHydrated();
+
+ if (!hydrated) {
+ // The Algolia doc search container is hard-coded at 40px. It doesn't
+ // render anything on the server, so we get a mis-match after hydration.
+ // This placeholder prevents layout shift when the search appears.
+ return ;
+ }
+
+ return (
+ }>
+
+
+
+
+ );
+}
diff --git a/app/modules/search/index.tsx b/app/modules/search/index.tsx
index f1a57553..a9680b7d 100644
--- a/app/modules/search/index.tsx
+++ b/app/modules/search/index.tsx
@@ -1,19 +1,25 @@
-import { Suspense, createContext, lazy, useContext, useState } from "react";
-import { useHydrated, useLayoutEffect } from "~/ui/utils";
+import { Suspense, lazy } from "react";
+import { type loader as rootLoader } from "~/root";
+import { useHydrated } from "~/ui/utils";
+import { useRouteLoaderData } from "@remix-run/react";
-import "@orama/searchbox/dist/index.css";
import "@docsearch/css/dist/style.css";
-import "~/styles/orama-search.css";
-import { useColorScheme } from "~/modules/color-scheme/components";
+import "~/styles/search.css";
-const OriginalSearchBox = lazy(() =>
- import("@orama/searchbox").then((module) => ({
- default: module.SearchBox,
+const DocSearchButton = lazy(() =>
+ import("./docsearch").then((module) => ({
+ default: module.DocSearch,
}))
);
-
-const SearchModalContext = createContext void)>(
- null
+const OramaSearchButton = lazy(() =>
+ import("./orama").then((module) => ({
+ default: module.SearchButton,
+ }))
+);
+const OramaSearch = lazy(() =>
+ import("./orama").then((module) => ({
+ default: module.SearchModalProvider,
+ }))
);
export function SearchModalProvider({
@@ -21,124 +27,45 @@ export function SearchModalProvider({
}: {
children: React.ReactNode;
}) {
- let [showSearchModal, setShowSearchModal] = useState(false);
- const isHydrated = useHydrated();
- const colorScheme = useSearchModalColorScheme();
+ let bucket = useBucket();
- return (
-
+ if (bucket === "orama") {
+ return (
- {isHydrated ? (
- setShowSearchModal(false)}
- colorScheme={colorScheme}
- theme="secondary"
- themeConfig={{
- light: {
- "--background-color-fourth": "#f7f7f7",
- },
- dark: {
- "--background-color-fourth": "#383838",
- },
- }}
- resultsMap={{
- description: "content",
- }}
- facetProperty="section"
- backdrop
- />
- ) : null}
+ {children}
- {children}
-
- );
-}
-
-function useSetShowSearchModal() {
- let context = useContext(SearchModalContext);
- if (!context) {
- throw new Error("useSearchModal must be used within a SearchModalProvider");
+ );
}
- return context;
+
+ return <>{children};
}
export function SearchButton() {
let hydrated = useHydrated();
- let setShowSearchModal = useSetShowSearchModal();
+ let bucket = useBucket();
if (!hydrated) {
+ // The Algolia doc search container is hard-coded at 40px. It doesn't
+ // render anything on the server, so we get a mis-match after hydration.
+ // This placeholder prevents layout shift when the search appears.
return ;
}
return (
- <>
+ }>
-
+ {bucket === "orama" ?
:
}
+
+