zudoku 0.0.0-f40ea27 → 0.0.0-f42e3678

package/src/lib/authentication/providers/openid.tsx

@@ -1,5 +1,6 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
+import { ErrorBoundary } from "react-error-boundary";
 import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -9,6 +10,7 @@ import {
 } from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
+import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
@@ -113,25 +115,41 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -187,8 +205,11 @@ export class OpenIDAuthenticationProvider
     sessionStorage.setItem(STATE_KEY, state);
     authorizationUrl.searchParams.set("state", state);
 
-    // now redirect the user to authorizationUrl.href
-    location.href = authorizationUrl.href;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {
@@ -423,7 +444,11 @@ export class OpenIDAuthenticationProvider
         path: OPENID_CALLBACK_PATH,
         element: (
           <ClientOnly>
-            <CallbackHandler handleCallback={this.handleCallback} />
+            <ErrorBoundary
+              fallbackRender={({ error }) => <OAuthErrorPage error={error} />}
+            >
+              <CallbackHandler handleCallback={this.handleCallback} />
+            </ErrorBoundary>
           </ClientOnly>
         ),
       },

package/src/lib/components/Banner.tsx

@@ -34,7 +34,6 @@ export const Banner = () => {
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
-      data-pagefind-ignore="all"
       style={style}
     >
       <div className="w-full">{page.banner.message}</div>

package/src/lib/components/CategoryHeading.tsx

@@ -9,7 +9,10 @@ export const CategoryHeading = ({
   className?: string;
 }) => {
   return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
+    <div
+      className={cx("text-sm font-semibold text-primary mb-2", className)}
+      data-pagefind-ignore="all"
+    >
       {children}
     </div>
   );

package/src/lib/components/Header.tsx

@@ -81,13 +81,16 @@ export const Header = memo(function HeaderInner() {
   const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
 
   return (
-    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header
+      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      data-pagefind-ignore="all"
+    >
       <Banner />
       <div className={cn(borderBottom, "relative")}>
         <PageProgress />
         <div className="max-w-screen-2xl mx-auto flex items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
-            <Link to="/">
+            <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
                 {site?.logo && (
                   <>

package/src/lib/components/Heading.tsx

@@ -66,7 +66,7 @@ export const Heading = ({
   return (
     <Component
       className={heading({
-        className: cn(className, "flex items-center gap-[0.33em]"),
+        className: cn("flex items-center gap-[0.33em]", className),
         level,
       })}
       ref={registerNavigationAnchor ? ref : undefined}

package/src/lib/components/Markdown.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from "react";
-import { MarkdownHooks, type Components } from "react-markdown";
+import ReactMarkdown, { type Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { createConfiguredShikiRehypePlugins } from "../shiki.js";
@@ -35,13 +35,13 @@ export const Markdown = memo(
 
     return (
       <Typography className={className}>
-        <MarkdownHooks
+        <ReactMarkdown
           remarkPlugins={remarkPlugins}
           rehypePlugins={rehypePlugins}
           components={mdComponents}
         >
           {content}
-        </MarkdownHooks>
+        </ReactMarkdown>
       </Typography>
     );
   },

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { MenuIcon } from "lucide-react";
-import { useState } from "react";
+import { Fragment, useState } from "react";
+import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
@@ -8,6 +9,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { isHiddenItem } from "./navigation/utils.js";
@@ -15,14 +17,18 @@ import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { TopNavItem } from "./TopNavigation.js";
+import { TopNavItem, TopNavLink } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { navigation, options } = useZudoku();
-  const { isAuthenticated } = useAuth();
+  const context = useZudoku();
+  const authState = useAuth();
+
+  const { navigation, options, getProfileMenuItems } = context;
+  const { isAuthenticated, profile, isAuthEnabled } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(isHiddenItem(authState, context));
 
   return (
     <Drawer
@@ -50,9 +56,36 @@ export const MobileTopNavigation = () => {
               <li className="empty:hidden">
                 <Slot.Target name="top-navigation-side" />
               </li>
-              <li>
-                <ThemeSwitch />
-              </li>
+
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
+                >
+                  {!isAuthenticated ? (
+                    <li>
+                      <TopNavLink
+                        to="/signin"
+                        onClick={() => setDrawerOpen(false)}
+                      >
+                        Login
+                      </TopNavLink>
+                    </li>
+                  ) : (
+                    Object.values(getProfileMenuItems()).length > 0 && (
+                      <Fragment>
+                        <li>
+                          {profile?.name ? `${profile.name}` : "My Account"}
+                          {profile?.email && (
+                            <div className="font-normal text-muted-foreground">
+                              {profile.email}
+                            </div>
+                          )}
+                        </li>
+                      </Fragment>
+                    )
+                  )}
+                </ClientOnly>
+              )}
               {filteredItems.map((item) => (
                 <li key={item.label}>
                   <button type="button" onClick={() => setDrawerOpen(false)}>
@@ -60,6 +93,25 @@ export const MobileTopNavigation = () => {
                   </button>
                 </li>
               ))}
+              {isAuthEnabled && isAuthenticated && accountItems.length > 0 && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
+                >
+                  {accountItems.map((i) => (
+                    <li key={i.label}>
+                      <TopNavLink
+                        to={i.path ?? ""}
+                        onClick={() => setDrawerOpen(false)}
+                      >
+                        {i.label}
+                      </TopNavLink>
+                    </li>
+                  ))}
+                </ClientOnly>
+              )}
+              <li>
+                <ThemeSwitch />
+              </li>
             </ul>
           </div>
           {options.site?.showPoweredBy !== false && (

package/src/lib/components/NotFoundPage.tsx

@@ -18,9 +18,10 @@ export const NotFoundPage = () => {
       <DeveloperHint>
         Start by adding a file at{" "}
         <code>
-          {"{PROJECT_ROOT}"}/{params["*"]}.mdx
+          {"{DOCUMENT_ROOT}"}/{params["*"]}.mdx
         </code>{" "}
-        and add some content to make this error go away.
+        and add some content to make this error go away. By default{" "}
+        <code>DOCUMENT_ROOT</code> is the `pages` directory.
       </DeveloperHint>
       <p>
         It seems that the page you are looking for does not exist or may have

package/src/lib/components/Pagination.tsx

@@ -22,6 +22,7 @@ export const Pagination = ({
         prev ? "justify-between" : "justify-end",
         className,
       )}
+      data-pagefind-ignore="all"
     >
       {prev && (
         <Button variant="ghost" asChild>

package/src/lib/components/StatusPage.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { ErrorPage } from "./ErrorPage.js";
+import { NotFoundPage } from "./NotFoundPage.js";
 
 type StatusPageProps = {
   statusCode: number;
@@ -79,6 +80,10 @@ const getDefaultContent = (
 };
 
 export const StatusPage = ({ statusCode, message }: StatusPageProps) => {
+  if (statusCode === 404) {
+    return <NotFoundPage />;
+  }
+
   const defaultContent = getDefaultContent(statusCode);
 
   return (

package/src/lib/components/TopNavigation.tsx

@@ -1,7 +1,7 @@
 import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
-import { NavLink } from "react-router";
+import { NavLink, type NavLinkProps } from "react-router";
 import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
@@ -10,10 +10,10 @@ import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
 import { Slot } from "./Slot.js";
 
 export const TopNavigation = () => {
-  const { navigation } = useZudoku();
-  const { isAuthenticated } = useAuth();
-
-  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
+  const context = useZudoku();
+  const { navigation } = context;
+  const auth = useAuth();
+  const filteredItems = navigation.filter(isHiddenItem(auth, context));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
@@ -62,37 +62,53 @@ const getPathForItem = (item: NavigationItem): string => {
   }
 };
 
-export const TopNavItem = (item: NavigationItem) => {
-  const currentNav = useCurrentNavigation();
-  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
-
-  const path = getPathForItem(item);
-
+export const TopNavLink = ({
+  isActive,
+  children,
+  ...props
+}: {
+  isActive?: boolean;
+  children: React.ReactNode;
+} & NavLinkProps) => {
   return (
-    // We don't use isActive here because it has to be inside the navigation,
-    // the top nav id doesn't necessarily start with the navigation id
     <NavLink
       viewTransition
-      to={path}
       className={({ isActive: isActiveNavLink, isPending }) => {
-        const isActive = isActiveNavLink || isActiveTopNavItem;
+        const isActiveReal = isActiveNavLink || isActive;
         return cx(
           "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
-          isActive || isPending
+          isActiveReal || isPending
             ? [
                 "text-foreground",
                 // underline with view transition animation
                 "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0",
                 "after:h-0.5 after:bg-primary",
-                isActive && "after:[view-transition-name:top-nav-underline]",
+                isActiveReal &&
+                  "after:[view-transition-name:top-nav-underline]",
                 isPending && "after:bg-primary/25",
               ]
             : "text-foreground/75 hover:text-foreground",
         );
       }}
+      {...props}
     >
+      {children}
+    </NavLink>
+  );
+};
+
+export const TopNavItem = (item: NavigationItem) => {
+  const currentNav = useCurrentNavigation();
+  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
+
+  const path = getPathForItem(item);
+
+  return (
+    // We don't use isActive here because it has to be inside the navigation,
+    // the top nav id doesn't necessarily start with the navigation id
+    <TopNavLink to={path} isActive={isActiveTopNavItem}>
       {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
       {item.label}
-    </NavLink>
+    </TopNavLink>
   );
 };

package/src/lib/components/Typography.tsx

@@ -1,7 +1,7 @@
 import { cn } from "../util/cn.js";
 
 // other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral";
+export const ProseClasses = "prose dark:prose-invert prose-neutral typography";
 
 export const Typography = ({
   children,

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

@@ -2,7 +2,6 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
 import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
-import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS } from "../cache.js";
@@ -45,14 +44,28 @@ const getItemPath = (item: NavigationItem) => {
       return undefined;
   }
 };
+
+const extractAllPaths = (items: NavigationItem[]) => {
+  const paths = new Set<string>();
+
+  const collectPaths = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const itemPath = getItemPath(item)?.split("?").at(0)?.split("#").at(0);
+
+      if (itemPath) paths.add(itemPath);
+      if (item.type === "category") {
+        collectPaths(item.items);
+      }
+    }
+  };
+  collectPaths(items);
+
+  return [...paths];
+};
+
 export const useCurrentNavigation = () => {
-  const { getPluginNavigation, navigation, options } = useZudoku();
+  const { getPluginNavigation, navigation } = useZudoku();
   const location = useLocation();
-  const auth = useAuth();
-
-  const isProtectedRoute = options.protectedRoutes?.some((route) =>
-    matchPath(route, location.pathname),
-  );
 
   const navItem = traverseNavigation(navigation, (item, parentCategories) => {
     if (getItemPath(item) === location.pathname) {
@@ -67,12 +80,8 @@ export const useCurrentNavigation = () => {
 
   let topNavItem = navItem;
   if (!navItem && data.length > 0) {
-    // Extract base paths from plugin navigation items
-    const pluginBasePaths = data.flatMap((item) => {
-      return getItemPath(item)?.split("?").at(0)?.split("#").at(0) ?? [];
-    });
+    const pluginBasePaths = extractAllPaths(data);
 
-    // Find top-level nav item that matches any plugin base path
     topNavItem = navigation
       .flatMap((item) => {
         const itemPath = getItemPath(item);
@@ -88,13 +97,11 @@ export const useCurrentNavigation = () => {
       })?.item;
   }
 
-  const hasNavigation =
-    auth.isAuthEnabled && !auth.isAuthenticated && isProtectedRoute;
-
   return {
-    navigation: hasNavigation
-      ? []
-      : [...(navItem?.type === "category" ? navItem.items : []), ...data],
+    navigation: [
+      ...(navItem?.type === "category" ? navItem.items : []),
+      ...data,
+    ],
     topNavItem,
   };
 };

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

@@ -9,13 +9,15 @@ import {
   TooltipTrigger,
 } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { useAuth } from "../../authentication/hook.js";
 import { cn } from "../../util/cn.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
-import { navigationListItem } from "./utils.js";
+import { isHiddenItem, navigationListItem } from "./utils.js";
 
 const TruncatedLabel = ({
   label,
@@ -74,6 +76,12 @@ export const NavigationItem = ({
 }) => {
   const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
+  const auth = useAuth();
+  const context = useZudoku();
+
+  if (!isHiddenItem(auth, context)(item)) {
+    return null;
+  }
 
   switch (item.type) {
     case "category":

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

@@ -19,7 +19,10 @@ export const NavigationWrapper = ({
   }, []);
 
   return (
-    <div className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r">
+    <div
+      className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r"
+      data-pagefind-ignore="all"
+    >
       <nav
         ref={navRef}
         className={cn(

package/src/lib/components/navigation/utils.ts

@@ -4,6 +4,8 @@ import type {
   NavigationCategory,
   NavigationItem,
 } from "../../../config/validators/NavigationSchema.js";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
@@ -133,14 +135,18 @@ export const navigationListItem = cva(
 );
 
 export const isHiddenItem =
-  (isAuthenticated?: boolean) =>
+  (auth: UseAuthReturn, context: ZudokuContext) =>
   (item: NavigationItem): boolean => {
+    if (typeof item.display === "function") {
+      return item.display({ context, auth });
+    }
+
     if (item.display === "hide") return false;
     if (!item.label) return false;
 
     return (
-      (item.display === "auth" && isAuthenticated) ||
-      (item.display === "anon" && !isAuthenticated) ||
+      (item.display === "auth" && auth.isAuthenticated) ||
+      (item.display === "anon" && !auth.isAuthenticated) ||
       !item.display ||
       item.display === "always"
     );

package/src/lib/core/RouteGuard.tsx

@@ -24,14 +24,18 @@ export const RouteGuard = () => {
   const location = useLocation();
   const latestPath = useLatest(location.pathname);
   const shouldBypass = use(BypassProtectedRoutesContext);
+  const { protectedRoutes } = zudoku.options;
 
-  const { protectedRoutes = [] } = zudoku.options;
+  const authCheckFn =
+    !shouldBypass && protectedRoutes
+      ? Object.entries(protectedRoutes).find(([path]) =>
+          matchPath({ path, end: true }, location.pathname),
+        )?.[1]
+      : undefined;
 
-  const isProtected =
-    !shouldBypass &&
-    protectedRoutes.some((path) =>
-      matchPath({ path, end: true }, location.pathname),
-    );
+  const isProtectedRoute = authCheckFn !== undefined;
+  const needsToSignIn =
+    isProtectedRoute && !authCheckFn({ auth, context: zudoku });
 
   useQuery({
     queryKey: ["login-redirect"],
@@ -42,14 +46,10 @@ export const RouteGuard = () => {
       });
       return true;
     },
-    enabled:
-      typeof window !== "undefined" &&
-      isProtected &&
-      !auth.isPending &&
-      !auth.isAuthenticated,
+    enabled: typeof window !== "undefined" && needsToSignIn && !auth.isPending,
   });
 
-  if (isProtected && !auth.isAuthenticated) {
+  if (needsToSignIn) {
     return (
       <Dialog
         open={true}
@@ -71,7 +71,7 @@ export const RouteGuard = () => {
     );
   }
 
-  if (isProtected && !auth.isAuthEnabled) {
+  if (isProtectedRoute && !auth.isAuthEnabled) {
     throw new ZudokuError("Authentication is not enabled", {
       title: "Authentication is not enabled",
       developerHint: