zudoku 0.0.0-fdfe742 → 0.0.0-fe92c9e1

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 { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
@@ -8,21 +9,30 @@ 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 { shouldShowItem } 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 context = useZudoku();
+  const authState = useAuth();
+
+  const { navigation, options, getProfileMenuItems } = context;
+  const { isAuthenticated, profile, isAuthEnabled } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(shouldShowItem(authState, context));
+
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "left" : "right"}
+      direction={options.site?.dir === "rtl" ? "left" : "right"}
       open={drawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -43,21 +53,66 @@ 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 && (
+                      <li>
+                        {profile?.name ? `${profile.name}` : "My Account"}
+                        {profile?.email && (
+                          <div className="font-normal text-muted-foreground">
+                            {profile.email}
+                          </div>
+                        )}
+                      </li>
+                    )
+                  )}
+                </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
@@ -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
@@ -28,6 +29,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/PathRenderer.tsx

@@ -22,7 +22,7 @@ export const PathRenderer = ({
     matches.forEach((match) => {
       const [originalValue, name] = match;
       if (!name) return;
-      const startIndex = match.index!;
+      const startIndex = match.index;
 
       if (startIndex > lastIndex) {
         elements.push(
@@ -50,7 +50,7 @@ export const PathRenderer = ({
     }
 
     return (
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
       <Fragment key={`${part}-${i}`}>
         {elements}
         {i < arr.length - 1 && "/"}

package/src/lib/components/Search.tsx

@@ -28,7 +28,7 @@ export const Search = ({ className }: { className?: string }) => {
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [isOpen, setIsOpen]);
+  }, [isOpen]);
 
   const searchPlugin = ctx.plugins.find(isSearchPlugin);
 

package/src/lib/components/Slot.test.tsx

@@ -1,18 +1,18 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   act,
+  type RenderResult,
   screen,
   render as testRender,
-  type RenderResult,
 } from "@testing-library/react";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 import { ZudokuContext } from "../core/ZudokuContext.js";
-import { Slot } from "./Slot.js";
 import { SlotProvider } from "./context/SlotProvider.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
+import { Slot } from "./Slot.js";
 
 /**
  * @vitest-environment happy-dom
@@ -196,12 +196,10 @@ describe("Slot", () => {
       expect(screen.getByText("Source content")).toBeInTheDocument();
 
       rerender(
-        <>
-          <Slot.Target
-            name="footer-after"
-            fallback={<div>Fallback content</div>}
-          />
-        </>,
+        <Slot.Target
+          name="footer-after"
+          fallback={<div>Fallback content</div>}
+        />,
       );
 
       expect(screen.getByText("Fallback content")).toBeInTheDocument();
@@ -374,11 +372,13 @@ describe("Slot", () => {
       await render(
         <>
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Source key={name} name={name as any}>
               <div>Content {name}</div>
             </Slot.Source>
           ))}
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Target key={name} name={name as any} />
           ))}
         </>,

package/src/lib/components/Slot.tsx

@@ -1,8 +1,8 @@
-import { useId, useLayoutEffect, type ReactNode } from "react";
+import { type ReactNode, useId, useLayoutEffect } from "react";
 import {
+  type SlotType,
   useRenderSlot,
   useSlotContext,
-  type SlotType,
 } from "./context/SlotProvider.js";
 
 // This is to augment the type of the Slot component with custom slot names

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 { shouldShowItem, 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 { isAuthenticated } = useAuth();
-
-  const filteredItems = topNavigation.filter(isHiddenItem(isAuthenticated));
+  const context = useZudoku();
+  const { navigation } = context;
+  const auth = useAuth();
+  const filteredItems = navigation.filter(shouldShowItem(auth, context));
 
   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 typography";
+
+export const Typography = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return <div className={cn(ProseClasses, className)}>{children}</div>;
+};

package/src/lib/components/Zudoku.tsx

@@ -32,7 +32,7 @@ import { ZudokuProvider } from "./context/ZudokuProvider.js";
 
 let zudokuContext: ZudokuContext | undefined;
 
-const ZudokoInner = memo(
+const ZudokuInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
       () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
@@ -66,7 +66,7 @@ const ZudokoInner = memo(
     const queryClient = useQueryClient();
 
     useEffect(() => {
-      if (didNavigate) {
+      if (didNavigate || !navigation.location) {
         return;
       }
       setDidNavigate(true);
@@ -78,7 +78,7 @@ const ZudokoInner = memo(
       ?.flatMap((plugin) =>
         hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
       )
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
       .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (
@@ -105,12 +105,12 @@ const ZudokoInner = memo(
   },
 );
 
-ZudokoInner.displayName = "ZudokoInner";
+ZudokuInner.displayName = "ZudokuInner";
 
 const Zudoku = (props: ZudokuContextOptions) => {
   return (
     <ErrorBoundary FallbackComponent={TopLevelError}>
-      <ZudokoInner {...props} />
+      <ZudokuInner {...props} />
     </ErrorBoundary>
   );
 };

package/src/lib/components/cache.ts

@@ -1,17 +1,21 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
 
 export const CACHE_KEYS = Object.freeze({
   API_IDENTITIES: ["api-identities"],
 });
 
+type CacheKey = keyof typeof CACHE_KEYS;
+
 export const useCache = () => {
   const queryClient = useQueryClient();
+  const invalidateCache = useCallback(
+    (key: CacheKey) =>
+      queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] }),
+    [queryClient],
+  );
 
-  return {
-    invalidateCache: async (key: keyof typeof CACHE_KEYS) => {
-      await queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] });
-    },
-  };
+  return { invalidateCache };
 };
 
 /**

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

@@ -1,8 +1,8 @@
 import {
-  createContext,
-  useContext,
   type ComponentProps,
   type ComponentType,
+  createContext,
+  useContext,
 } from "react";
 import { Header } from "../Header.js";
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useLocation, type Location } from "react-router";
+import { type Location, useLocation } from "react-router";
 import { useZudoku } from "./ZudokuContext.js";
 
 export const RouterEventsEmitter = () => {

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

@@ -1,17 +1,17 @@
 import {
+  type ComponentType,
   createContext,
   Fragment,
+  type PropsWithChildren,
+  type ReactNode,
   use,
   useMemo,
   useRef,
-  type ComponentType,
-  type PropsWithChildren,
-  type ReactNode,
 } from "react";
 import { createStore, useStore } from "zustand";
 import {
-  useExposedProps,
   type ExposedComponentProps,
+  useExposedProps,
 } from "../../util/useExposedProps.js";
 
 export type SlotType = ReactNode | ComponentType<ExposedComponentProps>;

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

@@ -1,12 +1,12 @@
 import {
   createContext,
+  type PropsWithChildren,
   use,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -128,7 +128,7 @@ export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
 
   const value = useMemo(
     () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, setActiveAnchor, observeFns],
+    [activeAnchor, observeFns],
   );
 
   return (