zudoku 0.38.0 → 0.39.1

package/src/app/entry.server.tsx

@@ -14,7 +14,7 @@ import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import { NO_DEHYDRATE } from "../lib/components/cache.js";
-import type { FileWritingResponse } from "../vite/prerender/FileWritingResponse.js";
+import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
 export { getRoutesByConfig };
@@ -25,12 +25,14 @@ export const render = async ({
   response,
   routes,
   basePath,
+  bypassProtection,
 }: {
   template: string;
   request: express.Request | Request;
-  response: express.Response | FileWritingResponse;
+  response: express.Response | PrerenderResponse;
   routes: RouteObject[];
   basePath?: string;
+  bypassProtection?: boolean;
 }) => {
   const { query, dataRoutes } = createStaticHandler(routes, {
     basename: basePath,
@@ -73,6 +75,7 @@ export const render = async ({
       context={context}
       queryClient={queryClient}
       helmetContext={helmetContext}
+      bypassProtection={bypassProtection}
     />
   );
 
@@ -143,7 +146,7 @@ export const render = async ({
 
 export function createFetchRequest(
   req: express.Request,
-  res: express.Response | FileWritingResponse,
+  res: express.Response | PrerenderResponse,
 ): Request {
   const origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying

package/src/app/tailwind.ts

@@ -28,6 +28,20 @@ const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
     content,
     theme: {
       extend: {
+        keyframes: {
+          "bounce-x-start": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(-25%)" },
+          },
+          "bounce-x-end": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(25%)" },
+          },
+        },
+        animation: {
+          "bounce-x-start": "bounce-x-start 1s infinite",
+          "bounce-x-end": "bounce-x-end 1s infinite",
+        },
         fontFamily: {
           sans,
           mono,

package/src/lib/components/Bootstrap.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-router";
 import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { BypassProtectedRoutesContext } from "./context/BypassProtectedRoutesContext.js";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,11 +33,13 @@ const Bootstrap = ({
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-        <HelmetProvider>
-          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider router={router} />
-          </StaggeredRenderContext.Provider>
-        </HelmetProvider>
+        <BypassProtectedRoutesContext value={false}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider router={router} />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </BypassProtectedRoutesContext>
       </HydrationBoundary>
     </QueryClientProvider>
   </StrictMode>
@@ -47,16 +50,20 @@ const BootstrapStatic = ({
   context,
   queryClient,
   helmetContext,
+  bypassProtection = false,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
   queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
+  bypassProtection?: boolean;
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HelmetProvider context={helmetContext}>
-        <StaticRouterProvider router={router} context={context} />
+        <BypassProtectedRoutesContext value={bypassProtection}>
+          <StaticRouterProvider router={router} context={context} />
+        </BypassProtectedRoutesContext>
       </HelmetProvider>
     </QueryClientProvider>
   </StrictMode>

package/src/lib/components/Header.tsx

@@ -69,7 +69,7 @@ export const Header = memo(function HeaderInner() {
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="border-b">
-        <div className="max-w-screen-2xl 2xl:border-x mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height]">
+        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -182,7 +182,7 @@ export const Header = memo(function HeaderInner() {
         </div>
       </div>
       <div className="border-b hidden lg:block">
-        <div className="max-w-screen-2xl mx-auto 2xl:border-x">
+        <div className="max-w-screen-2xl mx-auto border-transparent">
           <Slotlet name="top-navigation-before" />
           <TopNavigation />
           <Slotlet name="top-navigation-after" />

package/src/lib/components/Layout.tsx

@@ -1,7 +1,6 @@
 import { Helmet } from "@zudoku/react-helmet-async";
 import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router";
-import { useSpinDelay } from "spin-delay";
+import { Outlet, useLocation } from "react-router";
 import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -29,13 +28,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     authentication?.onPageLoad?.();
   }, [authentication]);
 
-  // Page transition is happening: https://reactrouter.com/start/framework/pending-navigation
-  const isNavigating = Boolean(useNavigation().location);
-  const showSpinner = useSpinDelay(isNavigating, {
-    delay: 300,
-    minDuration: 500,
-  });
-
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
@@ -61,14 +53,10 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="grid grid-cols-1 grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
-        {showSpinner ? (
-          <LoadingFallback />
-        ) : (
-          <Suspense fallback={<LoadingFallback />}>
-            <Main>{children ?? <Outlet />}</Main>
-          </Suspense>
-        )}
+      <div className="grid grid-cols-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto">
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
       </div>
     </>
   );

package/src/lib/components/Main.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation } from "./context/ZudokuContext.js";
@@ -10,6 +11,7 @@ export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
   const { sidebar } = useCurrentNavigation();
   const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
 
   return (
     <Drawer
@@ -25,7 +27,7 @@ export const Main = ({ children }: PropsWithChildren) => {
       )}
       {hasSidebar && (
         <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b">
-          <DrawerTrigger className="flex items-center gap-2">
+          <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>
           </DrawerTrigger>
@@ -34,8 +36,9 @@ export const Main = ({ children }: PropsWithChildren) => {
       <main
         data-pagefind-body
         className={cn(
-          "h-auto dark:border-white/10 translate-x-0",
-          hasSidebar ? "lg:pl-12" : "col-span-full",
+          "px-4 lg:pe-8 lg:px-8",
+          !hasSidebar && "col-span-full",
+          isNavigating && "animate-pulse",
         )}
       >
         <Slotlet name="zudoku-before-content" />

package/src/lib/components/MobileTopNavigation.tsx

@@ -9,12 +9,13 @@ import {
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
+import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation } = useZudoku();
+  const { topNavigation, options } = useZudoku();
   const { isAuthenticated } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
@@ -28,28 +29,36 @@ export const MobileTopNavigation = () => {
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
         </DrawerTrigger>
+        <PageProgress />
       </div>
       <DrawerContent
         className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Navigation</DrawerTitle>
-          </VisuallyHidden>
-          <Search className="flex p-4" />
-          <ul className="flex flex-col items-center gap-4 p-4">
-            <li>
-              <ThemeSwitch />
-            </li>
-            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-              <li key={item.label}>
-                <button type="button" onClick={() => setDrawerOpen(false)}>
-                  <TopNavItem {...item} />
-                </button>
+        <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
+          <div>
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <Search className="flex p-4" />
+            <ul className="flex flex-col items-center gap-4 p-4">
+              <li>
+                <ThemeSwitch />
               </li>
-            ))}
-          </ul>
+              {topNavigation
+                .filter(isHiddenItem(isAuthenticated))
+                .map((item) => (
+                  <li key={item.label}>
+                    <button type="button" onClick={() => setDrawerOpen(false)}>
+                      <TopNavItem {...item} />
+                    </button>
+                  </li>
+                ))}
+            </ul>
+          </div>
+          {options.page?.showPoweredBy !== false && (
+            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+          )}
         </div>
       </DrawerContent>
     </Drawer>

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,47 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { Link } from "react-router";
+import { cn } from "../util/cn.js";
+import { Button } from "./index.js";
+
+export const Pagination = ({
+  prev,
+  next,
+}: {
+  prev: { to: string; label: string } | undefined;
+  next: { to: string; label: string } | undefined;
+}) => {
+  const linkClass =
+    "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex my-8 -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+      )}
+    >
+      {prev && (
+        <Button variant="ghost" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon
+              className="group-hover:motion-safe:animate-bounce-x-start"
+              size={12}
+            />
+            <span className="truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="truncate ">{next.label}</span>
+            <ArrowRightIcon
+              className="group-hover:motion-safe:animate-bounce-x-end"
+              size={12}
+            />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -1,5 +1,6 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { NavLink, useNavigation } from "react-router";
 import type { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
@@ -20,6 +21,31 @@ export const isHiddenItem =
     );
   };
 
+export const PageProgress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 100);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};
+
 export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
@@ -32,7 +58,7 @@ export const TopNavigation = () => {
 
   return (
     <Suspense>
-      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
+      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm relative">
         <nav className="text-sm">
           <ul className="flex flex-row items-center gap-8">
             {filteredItems.map((item) => (
@@ -44,6 +70,7 @@ export const TopNavigation = () => {
         </nav>
         <Slotlet name="top-navigation-side" />
       </div>
+      <PageProgress />
     </Suspense>
   );
 };

package/src/lib/components/Zudoku.tsx

@@ -30,6 +30,8 @@ import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
 import { SlotletProvider } from "./SlotletProvider.js";
 
+let zudokuContext: ZudokuContext | undefined;
+
 const ZudokoInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
@@ -70,9 +72,9 @@ const ZudokoInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    const [zudokuContext] = useState(
-      () => new ZudokuContext(props, queryClient),
-    );
+    if (!zudokuContext) {
+      zudokuContext = new ZudokuContext(props, queryClient);
+    }
 
     const heads = props.plugins
       ?.flatMap((plugin) =>

package/src/lib/components/context/BypassProtectedRoutesContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const BypassProtectedRoutesContext = createContext(false);

package/src/lib/components/navigation/PoweredByZudoku.tsx

@@ -0,0 +1,23 @@
+import { ChevronRightIcon } from "lucide-react";
+import { cn } from "../../util/cn.js";
+import ZudokuLogo from "./ZudokuLogo.js";
+
+export const PoweredByZudoku = ({ className }: { className?: string }) => (
+  <a
+    href="https://zudoku.dev"
+    target="_blank"
+    rel="noopener noreferrer"
+    className={cn(
+      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-sm h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
+      className,
+    )}
+  >
+    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
+      <ZudokuLogo className="w-3.5 h-3.5 dark:fill-white" />
+      powered by Zudoku
+    </div>
+    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
+      <ChevronRightIcon size={12} absoluteStrokeWidth strokeWidth={1.5} />
+    </div>
+  </a>
+);

package/src/lib/components/navigation/SidebarItem.tsx

@@ -3,14 +3,14 @@ import { ExternalLinkIcon } from "lucide-react";
 import { NavLink, useLocation, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent",
+  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent tabular-nums",
   {
     variants: {
       isActive: {
@@ -21,6 +21,10 @@ export const navigationListItem = cva(
         true: "text-foreground/30",
         false: "",
       },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
     },
     defaultVariants: {
       isActive: false,
@@ -49,8 +53,10 @@ export const SidebarItem = ({
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) => navigationListItem({ isActive })}
-          to={joinPath(item.id)}
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.id)}
           onClick={onRequestClose}
           end
         >

package/src/lib/components/navigation/SidebarWrapper.tsx

@@ -1,5 +1,7 @@
 import { type PropsWithChildren, type Ref } from "react";
 import { cn } from "../../util/cn.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
 
 export const SidebarWrapper = ({
   children,
@@ -8,18 +10,30 @@ export const SidebarWrapper = ({
 }: PropsWithChildren<{
   className?: string;
   ref?: Ref<HTMLDivElement>;
-}>) => (
-  <nav
-    className={cn(
-      "hidden lg:flex h-full scrollbar flex-col overflow-y-auto shrink-0 text-sm border-r pr-6",
-      "sticky top-[--header-height] h-[calc(100vh-var(--header-height))]",
-      "-mx-[--padding-nav-item] max-w-[--side-nav-width] pb-6 pt-[--padding-content-top] scroll-pt-2 gap-2",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-);
+}>) => {
+  const { options } = useZudoku();
+
+  return (
+    <div className="grid sticky top-[--header-height] lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r">
+      <nav
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-[--padding-nav-item] pb-6 pt-[--padding-content-top] scroll-pt-2 gap-1",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+        ref={ref}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.page?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
 
 SidebarWrapper.displayName = "SidebarWrapper";

package/src/lib/{plugins/markdown → components/navigation}/Toc.tsx

@@ -7,9 +7,9 @@ import {
   type CSSProperties,
   type PropsWithChildren,
 } from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
 import { cn } from "../../util/cn.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 
 const DATA_ANCHOR_ATTR = "data-active";
 
@@ -24,23 +24,14 @@ const TocItem = ({
   className?: string;
 }>) => {
   return (
-    <li
-      className={cn(
-        "truncate",
-        isActive
-          ? "text-primary"
-          : "text-foreground/65 dark:text-foreground/75",
-        className,
-      )}
-      title={item.value}
-    >
+    <li className={cn("truncate", className)} title={item.value}>
       <AnchorLink
         to={`#${item.id}`}
         {...{ [DATA_ANCHOR_ATTR]: item.id }}
         className={cn(
           isActive
             ? "text-primary"
-            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
+            : "hover:text-accent-foreground text-muted-foreground",
         )}
       >
         {item.value}
@@ -89,7 +80,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page

package/src/lib/components/navigation/ZudokuLogo.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 132 100"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M80.092 2.963A4.66 4.66 0 0 1 84.449 0h34.049c6.325 0 10.835 6.135 8.948 12.172L116.653 46.71a4.688 4.688 0 0 1-4.474 3.29H75c-5.178 0-7.813 4.687-9.375 9.374-1.288 3.864-11.07 28.963-14.467 37.662A4.66 4.66 0 0 1 46.801 100H12.75c-6.324 0-10.834-6.134-8.947-12.171l10.793-34.54A4.688 4.688 0 0 1 19.071 50H56.25c5.178 0 7.813-4.687 9.375-9.375 1.288-3.864 11.07-28.962 14.467-37.662Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M83.54 57.813a7.813 7.813 0 0 0-7.316 5.07L63.888 95.777c-.766 2.043.744 4.222 2.926 4.222h36.828c5.211 0 9.875-3.232 11.704-8.11l8.821-23.522c1.915-5.107-1.861-10.555-7.315-10.555H83.539ZM29.17 0a12.5 12.5 0 0 0-11.704 8.111l-8.82 23.521c-1.915 5.107 1.86 10.556 7.315 10.556h33.312a7.813 7.813 0 0 0 7.316-5.07L68.924 4.223C69.691 2.18 68.18 0 65.998 0H29.17Z"
+    />
+  </svg>
+);
+
+ZudokuLogo.displayName = "ZudokuLogo";
+
+export default ZudokuLogo;

package/src/lib/core/RouteGuard.tsx

@@ -1,4 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { use } from "react";
 import { matchPath, Outlet, useLocation, useNavigate } from "react-router";
 import {
   Dialog,
@@ -8,21 +10,28 @@ import {
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
 import { useAuth } from "../authentication/hook.js";
+import { BypassProtectedRoutesContext } from "../components/context/BypassProtectedRoutesContext.js";
 import { useZudoku } from "../components/context/ZudokuContext.js";
 import { ZudokuError } from "../util/invariant.js";
 import { useLatest } from "../util/useLatest.js";
 
+export const SEARCH_PROTECTED_SECTION = "protected";
+
 export const RouteGuard = () => {
   const auth = useAuth();
   const zudoku = useZudoku();
   const navigate = useNavigate();
   const location = useLocation();
   const latestPath = useLatest(location.pathname);
+  const shouldBypass = use(BypassProtectedRoutesContext);
+
   const { protectedRoutes = [] } = zudoku.options;
 
-  const isProtected = protectedRoutes.some((path) =>
-    matchPath({ path, end: true }, location.pathname),
-  );
+  const isProtected =
+    !shouldBypass &&
+    protectedRoutes.some((path) =>
+      matchPath({ path, end: true }, location.pathname),
+    );
 
   useQuery({
     queryKey: ["login-redirect"],
@@ -70,5 +79,18 @@ export const RouteGuard = () => {
     });
   }
 
-  return <Outlet />;
+  return (
+    <>
+      {shouldBypass && (
+        <Helmet>
+          <meta
+            name="pagefind"
+            data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
+            content="true"
+          />
+        </Helmet>
+      )}
+      <Outlet />
+    </>
+  );
 };