zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

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,21 +9,27 @@ 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";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { PageProgress, TopNavItem } from "./TopNavigation.js";
+import { TopNavItem, TopNavLink } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation, options } = useZudoku();
-  const { isAuthenticated } = useAuth();
+  const { navigation, options, getProfileMenuItems } = useZudoku();
+  const { isAuthenticated, profile, isAuthEnabled, login } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
+
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "left" : "right"}
+      direction={options.site?.dir === "rtl" ? "left" : "right"}
       open={drawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -43,21 +50,68 @@ export const MobileTopNavigation = () => {
             </VisuallyHidden>
             <Search className="flex p-4" />
             <ul className="flex flex-col items-center gap-4 p-4">
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </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)}>
+                    <TopNavItem {...item} />
+                  </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>
-              {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 && (
+          {options.site?.showPoweredBy !== false && (
             <PoweredByZudoku className="grow-0 justify-center gap-1" />
           )}
         </div>

package/src/lib/components/NotFoundPage.tsx

@@ -3,13 +3,13 @@ import { Link, useParams } from "react-router";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { DeveloperHint } from "./DeveloperHint.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const NotFoundPage = () => {
   const params = useParams();
 
   return (
-    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
+    <Typography className="h-full pt-(--padding-content-top)">
       <CategoryHeading>404</CategoryHeading>
       <Heading level={1} className="flex gap-3.5 items-center">
         Page not found
@@ -28,6 +28,6 @@ export const NotFoundPage = () => {
         menu to find the correct page.
       </p>
       <Link to="/">Go back home</Link>
-    </div>
+    </Typography>
   );
 };

package/src/lib/components/PageProgress.tsx

@@ -0,0 +1,28 @@
+import { useNProgress } from "@tanem/react-nprogress";
+import { useEffect, useState } from "react";
+import { useNavigation } from "react-router";
+
+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), 200);
+
+    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}%`,
+      }}
+    />
+  );
+};

package/src/lib/components/Pagination.tsx

@@ -22,20 +22,21 @@ export const Pagination = ({
         prev ? "justify-between" : "justify-end",
         className,
       )}
+      data-pagefind-ignore="all"
     >
       {prev && (
         <Button variant="ghost" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
-            <ArrowLeftIcon size={12} />
-            <span className="truncate">{prev.label}</span>
+            <ArrowLeftIcon size={14} strokeWidth={2.5} />
+            <span className="text-lg 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 size={12} />
+            <span className="text-lg truncate">{next.label}</span>
+            <ArrowRightIcon size={14} strokeWidth={2.5} />
           </Link>
         </Button>
       )}

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,44 +1,19 @@
-import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { Suspense, useEffect, useState } from "react";
-import { NavLink, useNavigation } from "react-router";
-import type { TopNavigationItem } from "../../config/validators/validate.js";
+import { deepEqual } from "fast-equals";
+import { Suspense } from "react";
+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";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { isHiddenItem, traverseSidebar } from "./navigation/utils.js";
+import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
 import { Slot } from "./Slot.js";
 
-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 { navigation } = useZudoku();
   const { isAuthenticated } = useAuth();
 
-  const filteredItems = topNavigation.filter(isHiddenItem(isAuthenticated));
+  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
@@ -50,7 +25,7 @@ export const TopNavigation = () => {
         <nav className="text-sm">
           <ul className="flex flex-row items-center gap-8">
             {filteredItems.map((item) => (
-              <li key={item.id}>
+              <li key={item.label + item.type}>
                 <TopNavItem {...item} />
               </li>
             ))}
@@ -58,50 +33,82 @@ export const TopNavigation = () => {
         </nav>
         <Slot.Target name="top-navigation-side" />
       </div>
-      <PageProgress />
+      {/* <PageProgress /> */}
     </Suspense>
   );
 };
 
-export const TopNavItem = ({
-  id,
-  label,
-  default: defaultLink,
-}: TopNavigationItem) => {
-  const { sidebars } = useZudoku();
-  const currentSidebar = sidebars[id];
-  const currentNav = useCurrentNavigation();
-  const isNavigating = Boolean(useNavigation().location);
-  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
+const getPathForItem = (item: NavigationItem): string => {
+  switch (item.type) {
+    case "doc":
+      return joinUrl(item.path);
+    case "link":
+      return item.to;
+    case "category": {
+      if (item.link?.path) {
+        return joinUrl(item.link.path);
+      }
 
-  // TODO: This is a bit of a hack to get the first link in the sidebar
-  // We should really process this when we load the config so we can validate
-  // that the sidebar is actually set. In this case we just fall back to linking
-  // to the id if we can't resolve a sidebar.
-  const first =
-    defaultLink ??
-    (currentSidebar
-      ? traverseSidebar(currentSidebar, (item) => {
-          if (item.type === "doc") return joinUrl(item.id);
-        })
-      : joinUrl(id)) ??
-    joinUrl(id);
+      return (
+        traverseNavigationItem(item, (child) => {
+          if (child.type !== "category") {
+            return getPathForItem(child);
+          }
+        }) ?? ""
+      );
+    }
+    case "custom-page":
+      return item.path;
+  }
+};
 
+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 sidebar,
-    // the top nav id doesn't necessarily start with the sidebar id
     <NavLink
-      className={({ isPending }) =>
-        cx(
-          "block lg:py-3.5 font-medium -mb-px",
-          isActive || isPending
-            ? "border-primary text-foreground"
-            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-        )
-      }
-      to={first}
+      viewTransition
+      className={({ isActive: isActiveNavLink, isPending }) => {
+        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",
+          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",
+                isActiveReal &&
+                  "after:[view-transition-name:top-nav-underline]",
+                isPending && "after:bg-primary/25",
+              ]
+            : "text-foreground/75 hover:text-foreground",
+        );
+      }}
+      {...props}
     >
-      {label}
+      {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}
+    </TopNavLink>
+  );
+};

package/src/lib/components/Typography.tsx

@@ -0,0 +1,14 @@
+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 Typography = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return <div className={cn(ProseClasses, className)}>{children}</div>;
+};

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

@@ -1,11 +1,12 @@
 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";
-import { traverseSidebar } from "../navigation/utils.js";
+import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
   undefined,
@@ -30,8 +31,22 @@ export const useApiIdentities = () => {
   });
 };
 
+const getItemPath = (item: NavigationItem) => {
+  switch (item.type) {
+    case "doc":
+      return joinUrl(item.path);
+    case "category":
+      return item.link ? joinUrl(item.link.path) : undefined;
+    case "link":
+      return item.to;
+    case "custom-page":
+      return item.path;
+    default:
+      return undefined;
+  }
+};
 export const useCurrentNavigation = () => {
-  const { getPluginSidebar, sidebars, topNavigation, options } = useZudoku();
+  const { getPluginNavigation, navigation, options } = useZudoku();
   const location = useLocation();
   const auth = useAuth();
 
@@ -39,44 +54,47 @@ export const useCurrentNavigation = () => {
     matchPath(route, location.pathname),
   );
 
-  let currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
-    return traverseSidebar(sidebar, (item) => {
-      const itemId =
-        item.type === "doc"
-          ? joinUrl(item.id)
-          : item.type === "category" && item.link
-            ? joinUrl(item.link.id)
-            : undefined;
-
-      if (itemId === location.pathname) {
-        return item;
-      }
-    });
+  const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (getItemPath(item) === location.pathname) {
+      return parentCategories.at(0) ?? item;
+    }
   });
-  const currentTopNavItem =
-    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
-    topNavigation.find((item) => matchPath(item.id, location.pathname));
-
-  if (
-    currentTopNavItem &&
-    !currentSidebarItem &&
-    currentTopNavItem.id in sidebars
-  ) {
-    currentSidebarItem = ["", sidebars[currentTopNavItem.id]!];
-  }
 
   const { data } = useSuspenseQuery({
-    queryFn: () => getPluginSidebar(location.pathname),
-    queryKey: ["plugin-sidebar", location.pathname],
+    queryFn: () => getPluginNavigation(location.pathname),
+    queryKey: ["plugin-navigation", location.pathname],
   });
 
-  const hideSidebar =
+  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) ?? [];
+    });
+
+    // Find top-level nav item that matches any plugin base path
+    topNavItem = navigation
+      .flatMap((item) => {
+        const itemPath = getItemPath(item);
+        return itemPath ? [{ item, path: itemPath }] : [];
+      })
+      .sort((a, b) => b.path.length - a.path.length)
+      .find(({ path }) => {
+        return pluginBasePaths.some(
+          (basePath) =>
+            matchPath({ path, end: false }, basePath) ??
+            matchPath({ path: basePath, end: false }, path),
+        );
+      })?.item;
+  }
+
+  const hasNavigation =
     auth.isAuthEnabled && !auth.isAuthenticated && isProtectedRoute;
 
   return {
-    sidebar: hideSidebar
+    navigation: hasNavigation
       ? []
-      : [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
-    topNavItem: currentTopNavItem,
+      : [...(navItem?.type === "category" ? navItem.items : []), ...data],
+    topNavItem,
   };
 };

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
+import { type ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 

package/src/lib/components/index.ts

@@ -23,24 +23,16 @@ import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
 import { StatusPage as StatusPageImport } from "./StatusPage.js";
+import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
 export const Layout = /*@__PURE__*/ LayoutImport;
 export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;
 export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
 export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
-
 export const Head = /*@__PURE__*/ Helmet;
-
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useAuth = /*@__PURE__*/ useAuthImport;
-export const useCache = /*@__PURE__*/ useCacheImport;
-export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
-export const Zudoku = /*@__PURE__*/ ZudokuImport;
-
 export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
@@ -48,5 +40,19 @@ export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
-export const useTheme = /*@__PURE__*/ useThemeImport;
 export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
+export const Zudoku = /*@__PURE__*/ ZudokuImport;
+export const Typography = /*@__PURE__*/ TypographyImport;
+
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useAuth = /*@__PURE__*/ useAuthImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useCache = /*@__PURE__*/ useCacheImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useTheme = /*@__PURE__*/ useThemeImport;

package/src/lib/components/navigation/{Sidebar.tsx → Navigation.tsx}

@@ -1,42 +1,44 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { Slot } from "../Slot.js";
-import { SidebarItem } from "./SidebarItem.js";
-import { SidebarWrapper } from "./SidebarWrapper.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { NavigationWrapper } from "./NavigationWrapper.js";
 
-export const Sidebar = ({
+export const Navigation = ({
   onRequestClose,
-  sidebar,
+  navigation,
 }: {
   onRequestClose?: () => void;
-  sidebar: SidebarItemType[];
+  navigation: NavigationItemType[];
 }) => (
   <>
-    <SidebarWrapper>
+    <NavigationWrapper>
       <Slot.Target name="navigation-before" />
-      {sidebar.map((item) => (
-        <SidebarItem
+      {navigation.map((item) => (
+        <NavigationItem
           key={
-            ("id" in item ? item.id : "") +
-            ("href" in item ? item.href : "") +
-            item.label
+            item.type +
+            (item.label ?? "") +
+            ("path" in item ? item.path : "") +
+            ("file" in item ? item.file : "") +
+            ("to" in item ? item.to : "")
           }
           item={item}
         />
       ))}
       <Slot.Target name="navigation-after" />
-    </SidebarWrapper>
+    </NavigationWrapper>
     <DrawerContent
       className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
       aria-describedby={undefined}
     >
       <div className="p-4 overflow-y-auto overscroll-none">
         <VisuallyHidden>
-          <DrawerTitle>Sidebar</DrawerTitle>
+          <DrawerTitle>Navigation</DrawerTitle>
         </VisuallyHidden>
-        {sidebar.map((item) => (
-          <SidebarItem
+        {navigation.map((item) => (
+          <NavigationItem
             key={item.label}
             item={item}
             onRequestClose={onRequestClose}

package/src/lib/components/navigation/{SidebarBadge.tsx → NavigationBadge.tsx}

@@ -22,7 +22,7 @@ export const ColorMapInvert = {
   outline: "",
 };
 
-export const SidebarBadge = ({
+export const NavigationBadge = ({
   color,
   label,
   className,