🔎 Fix bugs in static search (#475)

.changeset/odd-queens-change.md

@@ -0,0 +1,6 @@
+---
+'@myst-theme/providers': patch
+'@myst-theme/site': patch
+---
+
+add useNavigateProvider

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 ?? {};

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?.();
         }
       }

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