zudoku 0.13.6 → 0.14.0

package/src/app/main.tsx

@@ -1,4 +1,4 @@
-import { redirect, type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router-dom";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
@@ -9,11 +9,9 @@ import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import { DevPortal, Layout, RouterError } from "zudoku/components";
-import { isNavigationPlugin } from "zudoku/internal";
 import type { ZudokuConfig } from "../config/config.js";
-import { traverseSidebar } from "../lib/components/navigation/utils.js";
 import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
-import { joinPath } from "../lib/util/joinPath.js";
+import { isNavigationPlugin } from "../lib/core/plugins.js";
 
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
@@ -67,9 +65,7 @@ export const convertZudokuConfigToOptions = (
   };
 };
 
-export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
-  const options = convertZudokuConfigToOptions(config);
-
+export const getRoutesByOptions = (options: ZudokuContextOptions) => {
   const allPlugins = [
     ...(options.plugins ? options.plugins : []),
     ...(options.authentication?.getAuthenticationPlugin
@@ -77,27 +73,8 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       : []),
   ];
 
-  const topNavRedirects =
-    options.topNavigation?.flatMap((topNavItem) => {
-      if (!options.sidebars?.[topNavItem.id]) return [];
-
-      const first =
-        topNavItem.default ??
-        traverseSidebar(options.sidebars[topNavItem.id], (item) => {
-          if (item.type === "doc") return joinPath(topNavItem.id, item.id);
-        });
-
-      if (!first) return [];
-
-      return {
-        path: topNavItem.id,
-        loader: () => redirect(joinPath(first)),
-      } satisfies RouteObject;
-    }) ?? [];
-
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat(topNavRedirects)
     .concat({
       path: "*",
       loader: () => {
@@ -105,6 +82,13 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       },
     });
 
+  return routes;
+};
+
+export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
+  const options = convertZudokuConfigToOptions(config);
+  const routes = getRoutesByOptions(options);
+
   return [
     {
       element: (

package/src/app/standalone.tsx

@@ -16,7 +16,7 @@ if (!root) {
 themeToggle();
 
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0].innerText;
+const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes

package/src/lib/components/Header.tsx

@@ -70,14 +70,22 @@ export const Header = memo(function HeaderInner() {
                 {page?.logo && (
                   <>
                     <img
-                      src={page.logo.src.light}
+                      src={
+                        /https?:\/\//.test(page.logo.src.light)
+                          ? page.logo.src.light
+                          : import.meta.env.BASE_URL + page.logo.src.light
+                      }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
                       className={cn("h-10", isDark && "hidden")}
                       loading="lazy"
                     />
                     <img
-                      src={page.logo.src.dark}
+                      src={
+                        /https?:\/\//.test(page.logo.src.dark)
+                          ? page.logo.src.dark
+                          : import.meta.env.BASE_URL + page.logo.src.dark
+                      }
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
                       className={cn("h-10", !isDark && "hidden")}

package/src/lib/components/SyntaxHighlight.tsx

@@ -46,6 +46,10 @@ type SyntaxHighlightProps = {
   language?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
@@ -61,7 +65,7 @@ export const SyntaxHighlight = ({
   return (
     <Highlight
       theme={isDark ? themes.vsDark : themes.github}
-      language={language}
+      language={remapLang[language] ?? language}
       {...props}
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (

package/src/lib/components/TopNavigation.tsx

@@ -1,8 +1,11 @@
 import { cx } from "class-variance-authority";
-import { NavLink } from "react-router-dom";
-
+import { Suspense } from "react";
+import { Link } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
-import { useZudoku } from "./context/ZudokuContext.js";
+import { TopNavigationItem } from "../../config/validators/validate.js";
+import { joinPath } from "../util/joinPath.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { traverseSidebar } from "./navigation/utils.js";
 
 export const isHiddenItem =
   (isAuthenticated?: boolean) =>
@@ -25,26 +28,57 @@ export const TopNavigation = () => {
   }
 
   return (
-    <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.label}>
-            <NavLink
-              className={({ isActive }) =>
-                cx(
-                  "block py-3.5 font-medium -mb-px border-b-2",
-                  isActive
-                    ? "border-primary text-foreground"
-                    : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-                )
-              }
-              to={item.id}
-            >
-              {item.label}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <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>
+    </Suspense>
+  );
+};
+
+const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+  const { sidebars } = useZudoku();
+  const nav = useCurrentNavigation();
+  const currentSidebar = sidebars[id];
+
+  // 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));
+
+  if (!first) {
+    throw new Error(
+      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
+    );
+  }
+
+  // Manually set the active sidebar based on our logic of what is active
+  const isActive = nav.data.topNavItem?.id === id;
+
+  return (
+    <Link
+      className={cx(
+        "block py-3.5 font-medium -mb-px border-b-2",
+        isActive
+          ? "border-primary text-foreground"
+          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+      )}
+      to={first}
+    >
+      {label}
+    </Link>
   );
 };

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

@@ -1,7 +1,9 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { joinPath } from "../../util/joinPath.js";
+import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<DevPortalContext | undefined>(
   undefined,
@@ -25,34 +27,40 @@ export const useApiIdentities = () => {
   });
 };
 
-export const useTopNavigationItem = () => {
-  const { topNavigation } = useZudoku();
+export const useCurrentNavigation = () => {
+  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
   const location = useLocation();
 
-  const firstPart = location.pathname.split("/").at(1);
-  if (!firstPart) return;
+  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;
 
-  return topNavigation.find((item) => item.id === firstPart);
-};
-
-export const useNavigation = () => {
-  const { getPluginSidebar, sidebars } = useZudoku();
-  const navItem = useTopNavigationItem();
-  const path = navItem?.id;
-  const currentSidebar = path ? (sidebars[path] ?? []) : [];
-  const location = useLocation();
+      if (itemId === location.pathname) {
+        return item;
+      }
+    });
+  });
+  const currentTopNavItem =
+    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
+    topNavigation.find((item) => matchPath(item.id, location.pathname));
 
   return useSuspenseQuery({
     queryFn: async () => {
-      const pluginSidebar = path
-        ? await getPluginSidebar(path)
-        : await getPluginSidebar(location.pathname);
+      const pluginSidebar = await getPluginSidebar(location.pathname);
 
       return {
-        items: [...currentSidebar, ...pluginSidebar],
-        currentTopNavItem: navItem,
+        sidebar: [
+          ...(currentSidebarItem ? currentSidebarItem[1] : []),
+          ...pluginSidebar,
+        ],
+        topNavItem: currentTopNavItem,
       };
     },
-    queryKey: ["navigation", path],
+    queryKey: ["navigation", location.pathname],
   });
 };

package/src/lib/components/navigation/Sidebar.tsx

@@ -2,23 +2,23 @@ import { useRef } from "react";
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { useNavigation } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = () => {
   const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useNavigation();
+  const navigation = useCurrentNavigation();
 
   return (
     <>
       <SidebarWrapper
         ref={navRef}
-        pushMainContent={navigation.data.items.length > 0}
+        pushMainContent={navigation.data.sidebar.length > 0}
       >
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
         <Slotlet name="zudoku-after-navigation" />
@@ -30,7 +30,7 @@ export const Sidebar = () => {
         <VisuallyHidden>
           <DrawerTitle>Sidebar</DrawerTitle>
         </VisuallyHidden>
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
       </DrawerContent>

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -5,7 +5,6 @@ import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
@@ -16,7 +15,6 @@ export const SidebarCategory = ({
   category: SidebarItemCategory;
   level: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
 
@@ -26,7 +24,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
+  const isActive = useMatch(category.link?.id ?? "");
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -87,7 +85,7 @@ export const SidebarCategory = ({
           )}
           {category.link?.type === "doc" ? (
             <NavLink
-              to={joinPath(topNavItem?.id, category.link.id)}
+              to={joinPath(category.link.id)}
               className="flex-1"
               onClick={() => {
                 // if it is the current path and closed then open it because there's no path change to trigger the open

package/src/lib/components/navigation/SidebarItem.tsx

@@ -6,7 +6,6 @@ import type { SidebarItem as SidebarItemType } from "../../../config/validators/
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
@@ -43,7 +42,6 @@ export const SidebarItem = ({
   basePath?: string;
   level?: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -56,7 +54,7 @@ export const SidebarItem = ({
           className={({ isActive }) =>
             navigationListItem({ isActive, isTopLevel: level === 0 })
           }
-          to={joinPath(topNavItem?.id, item.id)}
+          to={joinPath(item.id)}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (

package/src/lib/components/navigation/utils.ts

@@ -4,7 +4,7 @@ import type {
   SidebarItemCategory,
 } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem, useZudoku } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
 export type TraverseCallback<T> = (
   item: SidebarItem,
@@ -42,15 +42,12 @@ export const traverseSidebarItem = <T>(
 
 export const useCurrentItem = () => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
-  const { sidebars } = useZudoku();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+
+  const currentSidebar = nav.data.sidebar;
 
   return traverseSidebar(currentSidebar, (item) => {
-    if (
-      item.type === "doc" &&
-      joinPath(topNavItem?.id, item.id) === location.pathname
-    ) {
+    if (item.type === "doc" && joinPath(item.id) === location.pathname) {
       return item;
     }
   });
@@ -58,18 +55,17 @@ export const useCurrentItem = () => {
 
 export const useIsCategoryOpen = (category: SidebarItemCategory) => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
 
   return traverseSidebarItem(category, (item) => {
     if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinPath(topNavItem?.id, item.link.id);
+      const categoryLinkPath = joinPath(item.link.id);
       if (categoryLinkPath === location.pathname) {
         return true;
       }
     }
 
     if (item.type === "doc") {
-      const docPath = joinPath(topNavItem?.id, item.id);
+      const docPath = joinPath(item.id);
       if (docPath === location.pathname) {
         return true;
       }
@@ -82,9 +78,8 @@ export const usePrevNext = (): {
   next?: { label: string; id: string };
 } => {
   const currentId = useLocation().pathname;
-  const { sidebars } = useZudoku();
-  const topNavItem = useTopNavigationItem();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+  const currentSidebar = nav.data.sidebar;
 
   let prev;
   let next;
@@ -94,9 +89,9 @@ export const usePrevNext = (): {
   traverseSidebar(currentSidebar, (item) => {
     const itemId =
       item.type === "doc"
-        ? joinPath(topNavItem?.id, item.id)
+        ? joinPath(item.id)
         : item.type === "category" && item.link
-          ? joinPath(topNavItem?.id, item.link.id)
+          ? joinPath(item.link.id)
           : undefined;
 
     if (!itemId) return;

package/src/lib/core/DevPortalContext.ts

@@ -1,6 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
+import { TopNavigationItem } from "../../config/validators/validate.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
 import { Slotlets } from "../components/SlotletProvider.js";
@@ -60,12 +61,7 @@ export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;
   authentication?: AuthenticationProvider;
-  topNavigation?: Array<{
-    id: string;
-    label: string;
-    default?: string;
-    display?: "auth" | "anon" | "always";
-  }>;
+  topNavigation?: TopNavigationItem[];
   sidebars?: SidebarConfig;
   plugins?: DevPortalPlugin[];
   slotlets?: Slotlets;
@@ -77,7 +73,7 @@ export type ZudokuContextOptions = {
 
 export class DevPortalContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: NonNullable<ZudokuContextOptions["sidebars"]>;
+  public sidebars: SidebarConfig;
   public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];

package/src/lib/core/plugins.ts

@@ -11,6 +11,8 @@ export type DevPortalPlugin =
   | ApiIdentityPlugin
   | SearchProviderPlugin;
 
+export type { RouteObject };
+
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
   getSidebar?: (path: string) => Promise<Sidebar>;

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
 import {
   Select,
   SelectContent,
@@ -9,7 +8,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../components/Select.js";
+} from "zudoku/ui/Select.js";
+import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { ApiKeyService } from "./index.js";

package/src/lib/plugins/markdown/index.tsx

@@ -1,13 +1,13 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
+import { RouteObject } from "react-router-dom";
+import { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { DevPortalPlugin } from "../../core/plugins.js";
-import { generateRoutes } from "./generateRoutes.js";
+import { DocResolver } from "./resolver.js";
 
-export type MarkdownPluginOptions = {
-  markdownFiles: Record<string, () => Promise<MDXImport>>;
-  defaultOptions?: MarkdownPluginDefaultOptions;
-  filesPath: string;
-};
+export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  fileImports: Record<string, () => Promise<MDXImport>>;
+}
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
   "toc" | "disablePager"
@@ -27,10 +27,47 @@ export type MDXImport = {
   default: (props: MDXProps) => JSX.Element;
 };
 
-export const markdownPlugin = ({
-  markdownFiles,
-  defaultOptions,
-  filesPath,
-}: MarkdownPluginOptions): DevPortalPlugin => ({
-  getRoutes: () => generateRoutes(markdownFiles, filesPath, defaultOptions),
+export const markdownPlugin = (
+  options: MarkdownPluginOptions[],
+): DevPortalPlugin => ({
+  getRoutes: () => {
+    const routeMap = new Map<string, RouteObject>();
+    options.forEach(({ fileImports, files, defaultOptions }) =>
+      Object.entries(fileImports).flatMap(([file, importPromise]) => {
+        const routePath = DocResolver.resolveRoutePath({
+          filesGlob: files,
+          fsPath: file,
+        });
+
+        if (!routePath) return [];
+
+        if (routeMap.has(routePath)) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,
+          );
+          return [];
+        }
+
+        const route: RouteObject = {
+          path: routePath,
+          lazy: async () => {
+            const { MdxPage } = await import("./MdxPage.js");
+            const { default: Component, ...props } = await importPromise();
+            return {
+              element: (
+                <MdxPage
+                  mdxComponent={Component}
+                  {...props}
+                  defaultOptions={defaultOptions}
+                />
+              ),
+            };
+          },
+        };
+        routeMap.set(routePath, route);
+      }),
+    );
+    return [...routeMap.values()];
+  },
 });