From 22caec73d97298e25a6829d1fa4e8fa3b6811b72 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Tue, 24 Sep 2024 12:09:16 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20Fix=20bugs=20in=20static=20searc?=
 =?UTF-8?q?h?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/odd-queens-change.md               |  6 ++++++
 packages/providers/src/theme.tsx              | 20 ++++++++++++++++---
 .../site/src/components/Navigation/Search.tsx | 11 ++++++----
 packages/site/src/pages/Root.tsx              |  3 +++
 4 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/odd-queens-change.md

diff --git a/.changeset/odd-queens-change.md b/.changeset/odd-queens-change.md
new file mode 100644
index 00000000..3e343489
--- /dev/null
+++ b/.changeset/odd-queens-change.md
@@ -0,0 +1,6 @@
+---
+'@myst-theme/providers': patch
+'@myst-theme/site': patch
+---
+
+add useNavigateProvider
diff --git a/packages/providers/src/theme.tsx b/packages/providers/src/theme.tsx
index 1745b414..f9739f61 100644
--- a/packages/providers/src/theme.tsx
+++ b/packages/providers/src/theme.tsx
@@ -53,6 +53,7 @@ type ThemeContextType = {
   top?: number;
   Link?: Link;
   NavLink?: NavLink;
+  navigate?: (to: string) => void;
 };
 
 const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined);
@@ -64,22 +65,24 @@ export function ThemeProvider({
   children,
   renderers,
   Link,
-  top,
   NavLink,
+  navigate,
+  top,
 }: {
   theme: Theme | null;
   setTheme: SetThemeType;
   children: React.ReactNode;
   renderers?: NodeRenderers;
   Link?: Link;
-  top?: number;
   NavLink?: NavLink;
+  navigate?: (to: string) => void;
+  top?: number;
 }) {
   const validatedRenderers = validateRenderers(renderers);
 
   return (
     <ThemeContext.Provider
-      value={{ theme, setTheme, renderers: validatedRenderers, Link, NavLink, top }}
+      value={{ theme, setTheme, renderers: validatedRenderers, Link, NavLink, navigate, top }}
     >
       {children}
     </ThemeContext.Provider>
@@ -131,6 +134,17 @@ export function useNavLinkProvider(): NavLink {
   return NavLink ?? HtmlNavLink;
 }
 
+export function useNavigateProvider(): (to: string) => void {
+  const context = React.useContext(ThemeContext);
+  const { navigate } = context ?? {};
+  return (
+    navigate ??
+    ((to: string) => {
+      window.location.href = to;
+    })
+  );
+}
+
 export function useThemeTop(): number {
   const context = React.useContext(ThemeContext);
   const { top } = context ?? {};
diff --git a/packages/site/src/components/Navigation/Search.tsx b/packages/site/src/components/Navigation/Search.tsx
index aa713f30..dba7c498 100644
--- a/packages/site/src/components/Navigation/Search.tsx
+++ b/packages/site/src/components/Navigation/Search.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useCallback, useRef, forwardRef } from 'react';
 import type { KeyboardEventHandler, Dispatch, SetStateAction, FormEvent, MouseEvent } from 'react';
-import { useNavigate, useFetcher } from '@remix-run/react';
+import { useFetcher } from '@remix-run/react';
 import {
   ArrowTurnDownLeftIcon,
   MagnifyingGlassIcon,
@@ -20,6 +20,7 @@ import {
   useLinkProvider,
   withBaseurl,
   useBaseurl,
+  useNavigateProvider,
 } from '@myst-theme/providers';
 
 /**
@@ -182,6 +183,7 @@ function SearchResultItem({
   closeSearch?: () => void;
 }) {
   const { hierarchy, type, url, queries } = result;
+  const baseurl = useBaseurl();
   const Link = useLinkProvider();
 
   // Render the icon
@@ -219,7 +221,7 @@ function SearchResultItem({
   return (
     <Link
       className="block px-1 py-2 text-gray-700 rounded shadow-md dark:text-white group-aria-selected:bg-blue-600 group-aria-selected:text-white dark:shadow-none dark:bg-stone-800"
-      to={url}
+      to={withBaseurl(url, baseurl)}
       // Close the main search on click
       onClick={closeSearch}
     >
@@ -415,7 +417,8 @@ function SearchForm({
     setQuery(event.target.value);
   }, []);
   // Handle item selection
-  const navigate = useNavigate();
+  const navigate = useNavigateProvider();
+  const baseurl = useBaseurl();
 
   // Handle item selection and navigation
   const handleSearchKeyPress = useCallback<KeyboardEventHandler<HTMLInputElement>>(
@@ -434,7 +437,7 @@ function SearchForm({
 
         const url = searchResults[selectedIndex]?.url;
         if (url) {
-          navigate(url);
+          navigate(withBaseurl(url, baseurl));
           closeSearch?.();
         }
       }
diff --git a/packages/site/src/pages/Root.tsx b/packages/site/src/pages/Root.tsx
index fa33f478..72d49976 100644
--- a/packages/site/src/pages/Root.tsx
+++ b/packages/site/src/pages/Root.tsx
@@ -20,6 +20,7 @@ import {
   NavLink,
   useRouteError,
   isRouteErrorResponse,
+  useNavigate,
 } from '@remix-run/react';
 import {
   DEFAULT_NAV_HEIGHT,
@@ -53,6 +54,7 @@ export function Document({
   top?: number;
   renderers?: NodeRenderers;
 }) {
+  const navigate = useNavigate();
   const links = staticBuild
     ? {
         Link: (props: any) => <Link {...{ ...props, reloadDocument: true }} />,
@@ -61,6 +63,7 @@ export function Document({
     : {
         Link: Link as any,
         NavLink: NavLink as any,
+        navigate,
       };
 
   // (Local) theme state driven by SSR and cookie/localStorage