zudoku 0.0.0-f3f6db5 → 0.0.0-f40ea27

package/src/lib/components/TopNavigation.tsx

@@ -1,92 +1,98 @@
 import { cx } from "class-variance-authority";
+import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
-import { NavLink, useNavigation } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import { NavLink } from "react-router";
+import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
-import { ZudokuError } from "../util/invariant.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { traverseSidebar } from "./navigation/utils.js";
-
-export const isHiddenItem =
-  (isAuthenticated?: boolean) =>
-  (item: { display?: "auth" | "anon" | "always" }) => {
-    return (
-      (item.display === "auth" && isAuthenticated) ||
-      (item.display === "anon" && !isAuthenticated) ||
-      !item.display ||
-      item.display === "always"
-    );
-  };
+import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
+import { Slot } from "./Slot.js";
 
 export const TopNavigation = () => {
-  const { topNavigation } = useZudoku();
+  const { navigation } = useZudoku();
   const { isAuthenticated } = useAuth();
 
-  // Hide top nav if there is only one item
-  if (topNavigation.length <= 1) {
+  const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
+
+  if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
   }
 
   return (
     <Suspense>
-      <nav className="hidden lg:block text-sm px-12 h-[--top-nav-height]">
-        <ul className="flex flex-row items-center gap-8">
-          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-            <li key={item.id}>
-              <TopNavItem {...item} />
-            </li>
-          ))}
-        </ul>
-      </nav>
+      <div className="items-center justify-between px-8 h-(--top-nav-height) hidden lg:flex text-sm relative">
+        <nav className="text-sm">
+          <ul className="flex flex-row items-center gap-8">
+            {filteredItems.map((item) => (
+              <li key={item.label + item.type}>
+                <TopNavItem {...item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <Slot.Target name="top-navigation-side" />
+      </div>
+      {/* <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;
-
-  // 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 joinPath(item.id);
-        })
-      : joinPath(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);
+      }
 
-  if (!first) {
-    throw new ZudokuError("Page not found.", {
-      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
-    });
+      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 isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
+
+  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/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/Zudoku.tsx

@@ -1,8 +1,8 @@
 import { MDXProvider } from "@mdx-js/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ThemeProvider } from "next-themes";
 import {
-  Fragment,
   memo,
   type PropsWithChildren,
   useContext,
@@ -11,9 +11,12 @@ import {
   useState,
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router";
+import { Outlet, useLocation, useNavigation } from "react-router";
 import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
-import { ZudokuContext, ZudokuContextOptions } from "../core/ZudokuContext.js";
+import {
+  ZudokuContext,
+  type ZudokuContextOptions,
+} from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -22,9 +25,12 @@ import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
 } from "./context/ComponentsContext.js";
+import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
+import { SlotProvider } from "./context/SlotProvider.js";
 import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
-import { SlotletProvider } from "./SlotletProvider.js";
+
+let zudokuContext: ZudokuContext | undefined;
 
 const ZudokoInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
@@ -33,6 +39,7 @@ const ZudokoInner = memo(
       [props.overrides],
     );
 
+    const location = useLocation();
     const mdxComponents = useMemo(() => {
       const componentsFromPlugins = (props.plugins ?? [])
         .filter(isMdxProviderPlugin)
@@ -56,6 +63,7 @@ const ZudokoInner = memo(
       [stagger, didNavigate],
     );
     const navigation = useNavigation();
+    const queryClient = useQueryClient();
 
     useEffect(() => {
       if (didNavigate) {
@@ -64,29 +72,32 @@ const ZudokoInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    const [zudokuContext] = useState(() => new ZudokuContext(props));
+    zudokuContext ??= new ZudokuContext(props, queryClient);
 
     const heads = props.plugins
-      ?.filter(hasHead)
+      ?.flatMap((plugin) =>
+        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+      )
       // eslint-disable-next-line react/no-array-index-key
-      .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (
       <>
-        <Helmet>{heads}</Helmet>
+        {heads}
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
-            <MDXProvider components={mdxComponents}>
-              <ThemeProvider attribute="class" disableTransitionOnChange>
-                <ComponentsProvider value={components}>
-                  <SlotletProvider slotlets={props.slotlets}>
+            <RouterEventsEmitter />
+            <SlotProvider slots={props.slots ?? props.UNSAFE_slotlets}>
+              <MDXProvider components={mdxComponents}>
+                <ThemeProvider attribute="class" disableTransitionOnChange>
+                  <ComponentsProvider value={components}>
                     <ViewportAnchorProvider>
                       {children ?? <Outlet />}
                     </ViewportAnchorProvider>
-                  </SlotletProvider>
-                </ComponentsProvider>
-              </ThemeProvider>
-            </MDXProvider>
+                  </ComponentsProvider>
+                </ThemeProvider>
+              </MDXProvider>
+            </SlotProvider>
           </ZudokuProvider>
         </StaggeredRenderContext.Provider>
       </>

package/src/lib/components/cache.ts

@@ -13,3 +13,11 @@ export const useCache = () => {
     },
   };
 };
+
+/**
+ * If a query has this key in its queryKey, it will not put its result in the dehydrated state in the SSR.
+ *
+ * This is useful if the query should only be suspended and not included in the initial HTML response.
+ * (e.g. too large in size, or not needed for the initial page load)
+ */
+export const NO_DEHYDRATE = "no-dehydrate";

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

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

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

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLocation, type Location } from "react-router";
+import { useZudoku } from "./ZudokuContext.js";
+
+export const RouterEventsEmitter = () => {
+  const location = useLocation();
+  const zudoku = useZudoku();
+  const previousLocation = useRef<Location | undefined>(undefined);
+
+  useEffect(() => {
+    zudoku.emitEvent("location", {
+      from: previousLocation.current,
+      to: location,
+    });
+    previousLocation.current = location;
+  }, [zudoku, location]);
+
+  return null;
+};

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

@@ -0,0 +1,149 @@
+import {
+  createContext,
+  Fragment,
+  use,
+  useMemo,
+  useRef,
+  type ComponentType,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import { createStore, useStore } from "zustand";
+import {
+  useExposedProps,
+  type ExposedComponentProps,
+} from "../../util/useExposedProps.js";
+
+export type SlotType = ReactNode | ComponentType<ExposedComponentProps>;
+
+type SlotItem = {
+  id: string;
+  content: SlotType;
+  type: "prepend" | "replace" | "append";
+  sequence: number;
+};
+
+type SlotStoreState = {
+  items: Map<string, SlotItem[]>;
+  // to guarantee the order of the items when appending/prepending
+  sequences: Map<string, number>;
+  getItems: (name: string) => SlotItem[];
+  setSlot: (
+    id: string,
+    name: string,
+    content: SlotType,
+    type: "prepend" | "replace" | "append",
+  ) => void;
+  clearSlot: (id: string, name: string) => void;
+};
+
+export type SlotStore = ReturnType<typeof createSlotStore>;
+
+const createSlotStore = ({
+  slots = {},
+}: {
+  slots?: Record<string, SlotType>;
+} = {}) => {
+  const initialItems = new Map(
+    Object.entries(slots).map(([id, content]) => [
+      id,
+      [{ id, content, type: "replace", sequence: 0 } satisfies SlotItem],
+    ]),
+  );
+  const EMPTY_ITEMS: SlotItem[] = [];
+
+  return createStore<SlotStoreState>()((set, get) => ({
+    items: initialItems,
+    sequences: new Map(),
+    getItems: (name) => get().items.get(name) ?? EMPTY_ITEMS,
+    setSlot: (id, name, content, type) =>
+      set((state) => {
+        if (content == null) return state;
+
+        const items = new Map(state.items);
+        const sequences = new Map(state.sequences);
+        const existing = items.get(name) ?? [];
+        const filtered = existing.filter((item) => item.id !== id);
+
+        const currentSequence = sequences.get(name) ?? 0;
+        const newSequence = currentSequence + 1;
+        sequences.set(name, newSequence);
+
+        const newItem = {
+          id,
+          content,
+          type,
+          // Use negative sequence values for "prepend" to ensure they are sorted before positive values for "append".
+          sequence: type === "prepend" ? -newSequence : newSequence,
+        } satisfies SlotItem;
+
+        if (type === "replace") {
+          const nonReplaceItems = filtered.filter(
+            (item) => item.type !== "replace",
+          );
+          items.set(name, [...nonReplaceItems, newItem]);
+        } else {
+          items.set(name, [...filtered, newItem]);
+        }
+
+        return { items, sequences };
+      }),
+    clearSlot: (id, name) =>
+      set((state) => {
+        const items = new Map(state.items);
+        const sequences = new Map(state.sequences);
+        const existing = items.get(name) ?? [];
+        const filtered = existing.filter((item) => item.id !== id);
+
+        if (filtered.length === 0) {
+          items.delete(name);
+          sequences.delete(name);
+        } else {
+          items.set(name, filtered);
+        }
+        return { items, sequences };
+      }),
+  }));
+};
+
+const SlotContext = createContext(createSlotStore());
+
+export const SlotProvider = ({
+  children,
+  slots,
+}: PropsWithChildren<{
+  slots?: Record<string, SlotType>;
+}>) => {
+  const store = useRef<SlotStore>(createSlotStore({ slots })).current;
+  return <SlotContext value={store}>{children}</SlotContext>;
+};
+
+export function useSlotContext<T>(selector: (state: SlotStoreState) => T): T {
+  const store = use(SlotContext);
+  return useStore(store, selector);
+}
+
+const ORDER = ["prepend", "replace", "append"] as const;
+
+export const useRenderSlot = (name: string) => {
+  const exposedProps = useExposedProps();
+  const items = useSlotContext((s) => s.getItems(name));
+
+  return useMemo(() => {
+    if (items.length === 0) return [];
+
+    return items
+      .toSorted((a, b) => {
+        const typeOrder = ORDER.indexOf(a.type) - ORDER.indexOf(b.type);
+        if (typeOrder !== 0) return typeOrder;
+        return a.sequence - b.sequence;
+      })
+      .map((item) =>
+        typeof item.content === "function" ? (
+          <item.content key={item.id} {...exposedProps} />
+        ) : (
+          <Fragment key={item.id}>{item.content}</Fragment>
+        ),
+      );
+  }, [items, exposedProps]);
+};

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

@@ -1,12 +1,12 @@
 import {
-  type ReactNode,
   createContext,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -16,21 +16,14 @@ type AnchorContextType = {
   unobserve: (element: HTMLElement | null) => void;
 };
 
-const ViewportAnchorContext = createContext<AnchorContextType | undefined>(
-  undefined,
-);
+const ViewportAnchorContext = createContext<AnchorContextType>({
+  activeAnchor: "",
+  setActiveAnchor: () => {},
+  observe: () => {},
+  unobserve: () => {},
+});
 
-export const useViewportAnchor = () => {
-  const context = useContext(ViewportAnchorContext);
-
-  if (!context) {
-    throw new Error(
-      "useViewportAnchor must be used within a CurrentAnchorProvider",
-    );
-  }
-
-  return context;
-};
+export const useViewportAnchor = () => use(ViewportAnchorContext);
 
 export const useRegisterAnchorElement = () => {
   const elementRef = useRef<HTMLElement | null>(null);
@@ -55,11 +48,7 @@ export const useRegisterAnchorElement = () => {
   return { ref: setRef };
 };
 
-export const ViewportAnchorProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
+export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
   const [activeAnchor, setActiveAnchor] = useState("");
   const observerRef = useRef<IntersectionObserver | null>(null);
   const registeredElements = useRef(new Set<HTMLElement>());
@@ -75,9 +64,7 @@ export const ViewportAnchorProvider = ({
         }
       },
       {
-        // 115px is the height of the sticky header
-        // see --header-height in `main.css`
-        rootMargin: "115px 0px -80% 0px",
+        rootMargin: "0px 0px -80% 0px",
         threshold: 0.75,
       },
     );
@@ -100,14 +87,11 @@ export const ViewportAnchorProvider = ({
         window.innerHeight + window.scrollY >= document.body.scrollHeight;
 
       if (hasReachedTop) {
-        // reset the active anchor when we reach the top
         setActiveAnchor("");
       } else if (hasReachedBottom) {
-        requestIdleCallback(() => {
-          // set the last anchor when we reach the bottom
-          const lastItem = Array.from(elements).pop();
-          setActiveAnchor(lastItem?.id ?? "");
-        });
+        const lastItem = Array.from(elements).pop();
+        const lastId = lastItem?.id ?? "";
+        setActiveAnchor(lastId);
       }
     };
 

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

@@ -1,10 +1,12 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
-import { joinPath } from "../../util/joinPath.js";
+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,
@@ -25,39 +27,74 @@ export const useApiIdentities = () => {
 
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: [CACHE_KEYS.API_IDENTITIES],
+    queryKey: CACHE_KEYS.API_IDENTITIES,
   });
 };
 
+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 } = useZudoku();
+  const { getPluginNavigation, navigation, options } = useZudoku();
   const location = useLocation();
+  const auth = useAuth();
 
-  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
-    return traverseSidebar(sidebar, (item) => {
-      const itemId =
-        item.type === "doc"
-          ? joinPath(item.id)
-          : item.type === "category" && item.link
-            ? joinPath(item.link.id)
-            : undefined;
-
-      if (itemId === location.pathname) {
-        return item;
-      }
-    });
+  const isProtectedRoute = options.protectedRoutes?.some((route) =>
+    matchPath(route, location.pathname),
+  );
+
+  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));
 
   const { data } = useSuspenseQuery({
-    queryFn: () => getPluginSidebar(location.pathname),
-    queryKey: ["plugin-sidebar", location.pathname],
+    queryFn: () => getPluginNavigation(location.pathname),
+    queryKey: ["plugin-navigation", location.pathname],
   });
 
+  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: [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
-    topNavItem: currentTopNavItem,
+    navigation: hasNavigation
+      ? []
+      : [...(navItem?.type === "category" ? navItem.items : []), ...data],
+    topNavItem,
   };
 };