zudoku 0.0.0-f01b653 → 0.0.0-f0602bf

package/src/lib/components/TopNavigation.tsx

@@ -1,44 +1,64 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { NavLink, useNavigation } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import type { TopNavigationItem } from "../../config/validators/validate.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";
+import { isHiddenItem, traverseSidebar } from "./navigation/utils.js";
+import { Slot } from "./Slot.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"
-    );
-  };
+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();
 
-  // Hide top nav if there is only one item
-  if (topNavigation.length <= 1) {
+  const filteredItems = topNavigation.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 border-b 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.id}>
+                <TopNavItem {...item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <Slot.Target name="top-navigation-side" />
+      </div>
+      <PageProgress />
     </Suspense>
   );
 };
@@ -62,15 +82,10 @@ export const TopNavItem = ({
     defaultLink ??
     (currentSidebar
       ? traverseSidebar(currentSidebar, (item) => {
-          if (item.type === "doc") return joinPath(item.id);
+          if (item.type === "doc") return joinUrl(item.id);
         })
-      : joinPath(id));
-
-  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.`,
-    });
-  }
+      : joinUrl(id)) ??
+    joinUrl(id);
 
   return (
     // We don't use isActive here because it has to be inside the sidebar,
@@ -78,7 +93,7 @@ export const TopNavItem = ({
     <NavLink
       className={({ isPending }) =>
         cx(
-          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          "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",

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

@@ -0,0 +1,23 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+export const CACHE_KEYS = Object.freeze({
+  API_IDENTITIES: ["api-identities"],
+});
+
+export const useCache = () => {
+  const queryClient = useQueryClient();
+
+  return {
+    invalidateCache: async (key: keyof typeof CACHE_KEYS) => {
+      await queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] });
+    },
+  };
+};
+
+/**
+ * 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,14 +48,11 @@ 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>());
+  const pendingElements = useRef(new Set<HTMLElement>());
 
   useEffect(() => {
     observerRef.current = new IntersectionObserver(
@@ -74,13 +64,18 @@ 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,
       },
     );
 
+    // Process any elements that tried to register before observer was ready
+    pendingElements.current.forEach((element) => {
+      registeredElements.current.add(element);
+      observerRef.current?.observe(element);
+    });
+    pendingElements.current.clear();
+
     return () => observerRef.current?.disconnect();
   }, []);
 
@@ -92,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);
       }
     };
 
@@ -114,14 +106,22 @@ export const ViewportAnchorProvider = ({
   const observeFns = useMemo(() => {
     return {
       observe: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
+        if (!element) return;
+
+        if (!observerRef.current) {
+          pendingElements.current.add(element);
+          return;
+        }
+
         registeredElements.current.add(element);
         observerRef.current.observe(element);
       },
       unobserve: (element: HTMLElement | null) => {
-        if (!element || !observerRef.current) return;
+        if (!element) return;
+
+        pendingElements.current.delete(element);
         registeredElements.current.delete(element);
-        observerRef.current.unobserve(element);
+        observerRef.current?.unobserve(element);
       },
     };
   }, []);
@@ -132,8 +132,6 @@ export const ViewportAnchorProvider = ({
   );
 
   return (
-    <ViewportAnchorContext.Provider value={value}>
-      {children}
-    </ViewportAnchorContext.Provider>
+    <ViewportAnchorContext value={value}>{children}</ViewportAnchorContext>
   );
 };

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

@@ -1,8 +1,10 @@
 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 { 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";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -21,23 +23,29 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: ["api-identities"],
+    queryKey: CACHE_KEYS.API_IDENTITIES,
   });
 };
 
 export const useCurrentNavigation = () => {
-  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
+  const { getPluginSidebar, sidebars, topNavigation, options } = useZudoku();
   const location = useLocation();
+  const auth = useAuth();
+
+  const isProtectedRoute = options.protectedRoutes?.some((route) =>
+    matchPath(route, location.pathname),
+  );
 
-  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+  let currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
     return traverseSidebar(sidebar, (item) => {
       const itemId =
         item.type === "doc"
-          ? joinPath(item.id)
+          ? joinUrl(item.id)
           : item.type === "category" && item.link
-            ? joinPath(item.link.id)
+            ? joinUrl(item.link.id)
             : undefined;
 
       if (itemId === location.pathname) {
@@ -49,13 +57,26 @@ export const useCurrentNavigation = () => {
     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],
   });
 
+  const hideSidebar =
+    auth.isAuthEnabled && !auth.isAuthenticated && isProtectedRoute;
+
   return {
-    sidebar: [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
+    sidebar: hideSidebar
+      ? []
+      : [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
     topNavItem: currentTopNavItem,
   };
 };

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

@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
+import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 
 export const ZudokuProvider = ({
@@ -12,7 +13,7 @@ export const ZudokuProvider = ({
       await context.initialize();
       return true;
     },
-    queryKey: ["zudoku-initialize"],
+    queryKey: ["zudoku-initialize", NO_DEHYDRATE],
   });
 
   return (