zudoku 0.47.1 → 0.48.0

package/src/lib/components/Main.tsx

@@ -4,13 +4,13 @@ import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Sidebar } from "./navigation/Sidebar.js";
+import { Navigation } from "./navigation/Navigation.js";
 import { Slot } from "./Slot.js";
 
 export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
-  const { sidebar } = useCurrentNavigation();
-  const hasSidebar = sidebar.length > 0;
+  const { navigation } = useCurrentNavigation();
+  const hasNavigation = navigation.length > 0;
   const isNavigating = useNavigation().state === "loading";
   const { options } = useZudoku();
 
@@ -20,13 +20,13 @@ export const Main = ({ children }: PropsWithChildren) => {
       open={isDrawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
-      {hasSidebar && (
-        <Sidebar
+      {hasNavigation && (
+        <Navigation
           onRequestClose={() => setDrawerOpen(false)}
-          sidebar={sidebar}
+          navigation={navigation}
         />
       )}
-      {hasSidebar && (
+      {hasNavigation && (
         <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
@@ -38,7 +38,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         data-pagefind-body
         className={cn(
           "px-4 lg:pe-8 lg:px-8",
-          !hasSidebar && "col-span-full",
+          !hasNavigation && "col-span-full",
           isNavigating && "animate-pulse",
         )}
       >

package/src/lib/components/MobileTopNavigation.tsx

@@ -11,15 +11,19 @@ import {
 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 } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation, options } = useZudoku();
+  const { navigation, options } = useZudoku();
   const { isAuthenticated } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
+
   return (
     <Drawer
       direction={options.page?.dir === "rtl" ? "left" : "right"}
@@ -43,18 +47,19 @@ 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>
               <li>
                 <ThemeSwitch />
               </li>
-              {topNavigation
-                .filter(isHiddenItem(isAuthenticated))
-                .map((item) => (
-                  <li key={item.label}>
-                    <button type="button" onClick={() => setDrawerOpen(false)}>
-                      <TopNavItem {...item} />
-                    </button>
-                  </li>
-                ))}
+              {filteredItems.map((item) => (
+                <li key={item.label}>
+                  <button type="button" onClick={() => setDrawerOpen(false)}>
+                    <TopNavItem {...item} />
+                  </button>
+                </li>
+              ))}
             </ul>
           </div>
           {options.page?.showPoweredBy !== false && (

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/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 } 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,66 @@ 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 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);
+      }
+
+      return (
+        traverseNavigationItem(item, (child) => {
+          if (child.type !== "category") {
+            return getPathForItem(child);
+          }
+        }) ?? ""
+      );
+    }
+    case "custom-page":
+      return item.path;
+  }
+};
+
+export const TopNavItem = (item: NavigationItem) => {
   const currentNav = useCurrentNavigation();
-  const isNavigating = Boolean(useNavigation().location);
-  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
+  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
 
-  // 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);
+  const path = getPathForItem(item);
 
   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
+    // 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
-      className={({ isPending }) =>
-        cx(
-          "block lg:py-3.5 font-medium -mb-px",
+      viewTransition
+      to={path}
+      className={({ isActive: isActiveNavLink, isPending }) => {
+        const isActive = isActiveNavLink || isActiveTopNavItem;
+        return cx(
+          "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
           isActive || isPending
-            ? "border-primary text-foreground"
-            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-        )
-      }
-      to={first}
+            ? [
+                "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]",
+                isPending && "after:bg-primary/25",
+              ]
+            : "text-foreground/75 hover:text-foreground",
+        );
+      }}
     >
-      {label}
+      {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+      {item.label}
     </NavLink>
   );
 };

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/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,

package/src/lib/components/navigation/{SidebarCategory.tsx → NavigationCategory.tsx}

@@ -4,17 +4,17 @@ import { ChevronRightIcon } from "lucide-react";
 import { memo, useEffect, useState } from "react";
 import { NavLink, useLocation, useMatch } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
-import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { SidebarItem } from "./SidebarItem.js";
+import { NavigationItem } from "./NavigationItem.js";
 import { navigationListItem, useIsCategoryOpen } from "./utils.js";
 
-const SidebarCategoryInner = ({
+const NavigationCategoryInner = ({
   category,
   onRequestClose,
 }: {
-  category: SidebarItemCategory;
+  category: NavigationCategoryType;
   onRequestClose?: () => void;
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
@@ -27,11 +27,11 @@ const SidebarCategoryInner = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(category.link?.id ?? "");
+  const isActive = useMatch(category.link?.path ?? "");
 
   useEffect(() => {
-    // this is triggered when an item from the sidebar is clicked
-    // and the sidebar, enclosing this item, is not opened
+    // this is triggered when an item from the navigation is clicked
+    // and the navigation, enclosing this item, is not opened
     if (isCategoryOpen) {
       setOpen(true);
     }
@@ -85,7 +85,7 @@ const SidebarCategoryInner = ({
         {category.link?.type === "doc" ? (
           <NavLink
             to={{
-              pathname: joinUrl(category.link.id),
+              pathname: joinUrl(category.link.path),
               search: location.search,
             }}
             className={styles}
@@ -123,11 +123,13 @@ const SidebarCategoryInner = ({
       >
         <ul className="relative after:absolute after:-start-(--padding-nav-item) after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
           {category.items.map((item) => (
-            <SidebarItem
+            <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 : "")
               }
               onRequestClose={onRequestClose}
               item={item}
@@ -139,6 +141,6 @@ const SidebarCategoryInner = ({
   );
 };
 
-export const SidebarCategory = memo(SidebarCategoryInner, deepEqual);
+export const NavigationCategory = memo(NavigationCategoryInner, deepEqual);
 
-SidebarCategory.displayName = "SidebarCategory";
+NavigationCategory.displayName = "NavigationCategory";

package/src/lib/components/navigation/{SidebarItem.tsx → NavigationItem.tsx}

@@ -8,13 +8,13 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "zudoku/ui/Tooltip.js";
-import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.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 { SidebarBadge } from "./SidebarBadge.js";
-import { SidebarCategory } from "./SidebarCategory.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
 import { navigationListItem } from "./utils.js";
 
 const TruncatedLabel = ({
@@ -65,11 +65,11 @@ const TruncatedLabel = ({
 
 export const DATA_ANCHOR_ATTR = "data-anchor";
 
-export const SidebarItem = ({
+export const NavigationItem = ({
   item,
   onRequestClose,
 }: {
-  item: SidebarItemType;
+  item: NavigationItemType;
   onRequestClose?: () => void;
 }) => {
   const location = useLocation();
@@ -78,23 +78,26 @@ export const SidebarItem = ({
   switch (item.type) {
     case "category":
       return (
-        <SidebarCategory category={item} onRequestClose={onRequestClose} />
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
       );
     case "doc":
       return (
         <NavLink
+          viewTransition
           className={({ isActive, isPending }) =>
             navigationListItem({ isActive, isPending })
           }
-          to={joinUrl(item.id)}
+          to={joinUrl(item.path)}
           onClick={onRequestClose}
           end
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <TruncatedLabel label={item.label} className="flex-1" />
-              <SidebarBadge {...item.badge} />
+              {item.label && (
+                <TruncatedLabel label={item.label} className="flex-1" />
+              )}
+              <NavigationBadge {...item.badge} />
             </>
           ) : (
             item.label
@@ -102,24 +105,26 @@ export const SidebarItem = ({
         </NavLink>
       );
     case "link":
-      return !item.href.startsWith("http") ? (
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : item.path;
+      return !href.startsWith("http") ? (
         <AnchorLink
           to={{
-            pathname: item.href.split("#")[0],
-            hash: item.href.split("#")[1],
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
             search: location.search,
           }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href === [location.pathname, activeAnchor].join("#"),
+            isActive: href === [location.pathname, activeAnchor].join("#"),
           })}
           onClick={onRequestClose}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <TruncatedLabel label={item.label} />
-              <SidebarBadge {...item.badge} />
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
             </>
           ) : (
             <span className="break-all">{item.label}</span>
@@ -128,7 +133,7 @@ export const SidebarItem = ({
       ) : (
         <a
           className={navigationListItem()}
-          href={item.href}
+          href={href}
           target="_blank"
           rel="noopener noreferrer"
           onClick={onRequestClose}
@@ -141,5 +146,6 @@ export const SidebarItem = ({
           </span>
         </a>
       );
+    }
   }
 };