zudoku 0.3.0-dev.57 → 0.3.0-dev.59

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -0,0 +1,36 @@
+import type { RouteObject } from "react-router-dom";
+import {
+  CommonPlugin,
+  NavigationPlugin,
+  ProfileMenuPlugin,
+} from "../core/plugins.js";
+import { Login } from "./components/Login.js";
+import { Logout } from "./components/Logout.js";
+
+type PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;
+
+export class AuthenticationPlugin implements PluginInterface {
+  constructor(private additionalRoutes: RouteObject[] = []) {}
+  getRoutes() {
+    return [
+      {
+        path: "/logout",
+        element: <Logout />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+      ...this.additionalRoutes,
+    ];
+  }
+
+  getProfileMenuItems() {
+    return [
+      {
+        label: "Logout",
+        path: "/logout",
+      },
+    ];
+  }
+}

package/src/lib/authentication/authentication.ts

@@ -1,11 +1,10 @@
-import { CommonPlugin, NavigationPlugin } from "../core/plugins.js";
+import { DevPortalPlugin } from "../core/plugins.js";
 
-type AuthenticationPlugin = NavigationPlugin & CommonPlugin;
-
-export interface AuthenticationProvider extends AuthenticationPlugin {
+export interface AuthenticationProvider {
   login(): Promise<void>;
   getAccessToken(): Promise<string>;
   logout(): Promise<void>;
+  getAuthenticationPlugin?(): DevPortalPlugin;
 }
 
 /**

package/src/lib/authentication/components/Login.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+
+export const Login = () => {
+  const context = useDevPortal();
+  useEffect(() => {
+    void context.authentication?.login();
+  }, [context.authentication]);
+
+  return null;
+};

package/src/lib/authentication/components/Logout.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useDevPortal } from "../../components/context/DevPortalProvider.js";
+
+export const Logout = () => {
+  const context = useDevPortal();
+  useEffect(() => {
+    void context.authentication?.logout();
+  }, [context.authentication]);
+
+  return null;
+};

package/src/lib/authentication/providers/clerk.tsx

@@ -1,8 +1,42 @@
 import type { Clerk } from "@clerk/clerk-js";
 import { ClerkAuthenticationConfig } from "../../../config/config.js";
 import { AuthenticationProviderInitializer } from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { useAuthState } from "../state.js";
 
+class ClerkAuthPlugin extends AuthenticationPlugin {
+  constructor(private clerk: Promise<Clerk | undefined>) {
+    super();
+  }
+  initialize = async () => {
+    const clerk = await this.clerk;
+
+    if (!clerk) {
+      return;
+    }
+
+    if (clerk.session) {
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        profile: {
+          sub: clerk.session.user.id,
+          name: clerk.session.user.fullName ?? undefined,
+          email: clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: false, // TODO: Check this
+          pictureUrl: clerk.session.user.imageUrl,
+        },
+      });
+    } else {
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: undefined,
+      });
+    }
+  };
+}
+
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
 > = ({ clerkPubKey }) => {
@@ -13,7 +47,8 @@ const clerkAuth: AuthenticationProviderInitializer<
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
-    await clerkApi.load({});
+    await clerkApi.load();
+    return clerkApi;
   })();
 
   async function getAccessToken() {
@@ -29,38 +64,19 @@ const clerkAuth: AuthenticationProviderInitializer<
   }
 
   return {
-    initialize: async () => {
-      await ensureLoaded;
-
-      if (clerkApi.session) {
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile: {
-            sub: clerkApi.session.user.id,
-            name: clerkApi.session.user.fullName ?? undefined,
-            email: clerkApi.session.user.emailAddresses[0]?.emailAddress,
-            emailVerified: false, // TODO: Check this
-            // emailVerified: clerkApi.session.user.hasVerifiedEmailAddress,
-            pictureUrl: clerkApi.session.user.imageUrl,
-          },
-        });
-      } else {
-        useAuthState.setState({
-          isAuthenticated: false,
-          isPending: false,
-          profile: undefined,
-        });
-      }
-    },
     getAccessToken,
     logout: async () => {
       await clerkApi.signOut();
     },
     login: async () => {
-      await clerkApi.redirectToSignIn();
+      await clerkApi.redirectToSignIn({
+        signInForceRedirectUrl: "http://localhost:9000/",
+        signUpForceRedirectUrl: "http://localhost:9000/",
+      });
+    },
+    getAuthenticationPlugin() {
+      return new ClerkAuthPlugin(ensureLoaded);
     },
-    getRoutes: () => [],
   };
 };
 

package/src/lib/authentication/providers/openid.tsx

@@ -1,11 +1,11 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import type { RouteObject } from "react-router-dom";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { Callback } from "../Callback.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, UserProfile } from "../state.js";
@@ -19,6 +19,24 @@ interface TokenState {
   tokenType: string;
 }
 
+class OpenIdAuthPlugin extends AuthenticationPlugin {
+  constructor(
+    private callbackUrlPath: string,
+    private handleCallback: () => Promise<void>,
+  ) {
+    super();
+  }
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: this.callbackUrlPath,
+        element: <Callback handleCallback={this.handleCallback} />,
+      },
+    ];
+  }
+}
+
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
@@ -91,10 +109,6 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
   }
 
-  async initialize() {
-    // No init needed
-  }
-
   async login(): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -207,14 +221,6 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       logoutUrl = redirectUrl;
     }
   }
-  getRoutes(): RouteObject[] {
-    return [
-      {
-        path: this.callbackUrlPath,
-        element: <Callback handleCallback={this.handleCallback} />,
-      },
-    ];
-  }
 
   handleCallback = async (): Promise<void> => {
     const url = new URL(window.location.href);
@@ -305,6 +311,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // Returning true because we are using react query
     // return true;
   };
+
+  getAuthenticationPlugin() {
+    return new OpenIdAuthPlugin(this.callbackUrlPath, () =>
+      this.handleCallback(),
+    );
+  }
 }
 
 const openIDAuth: AuthenticationProviderInitializer<

package/src/lib/authentication/routes.tsx

@@ -0,0 +1,10 @@
+export default [
+  {
+    path: "/logout",
+    element: <div>Logout</div>,
+  },
+  {
+    path: "/login",
+    element: <div>Login</div>,
+  },
+];

package/src/lib/components/Bootstrap.tsx

@@ -5,18 +5,25 @@ import {
   type StaticHandlerContext,
   StaticRouterProvider,
 } from "react-router-dom/server.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 
 const Bootstrap = ({
   router,
+  hydrate = false,
 }: {
+  hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
-}) => (
-  <StrictMode>
-    <HelmetProvider>
-      <RouterProvider router={router} />
-    </HelmetProvider>
-  </StrictMode>
-);
+}) => {
+  return (
+    <StrictMode>
+      <HelmetProvider>
+        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+          <RouterProvider router={router} />
+        </StaggeredRenderContext.Provider>
+      </HelmetProvider>
+    </StrictMode>
+  );
+};
 
 const BootstrapStatic = ({
   router,

package/src/lib/components/DevPortal.tsx

@@ -5,10 +5,13 @@ import {
   Fragment,
   memo,
   type PropsWithChildren,
+  useContext,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { useNavigation } from "react-router-dom";
 import {
   DevPortalContext,
   queryClient,
@@ -16,6 +19,7 @@ import {
 } from "../core/DevPortalContext.js";
 import { hasHead } from "../core/plugins.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { MdxComponents } from "../util/MdxComponents.js";
 import {
   ComponentsProvider,
@@ -46,6 +50,20 @@ const DevPortalInner = ({
     () => ({ ...MdxComponents, ...props.mdx?.components }),
     [props.mdx?.components],
   );
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [didNavigate, setDidNavigate] = useState(false);
+  const staggeredValue = useMemo(
+    () => (didNavigate ? { stagger: true } : { stagger }),
+    [stagger, didNavigate],
+  );
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (didNavigate) {
+      return;
+    }
+    setDidNavigate(true);
+  }, [didNavigate, navigation.location]);
 
   const devPortalContext = useMemo(() => new DevPortalContext(props), [props]);
 
@@ -61,15 +79,17 @@ const DevPortalInner = ({
   return (
     <QueryClientProvider client={queryClient}>
       <Helmet>{heads}</Helmet>
-      <DevPortalProvider value={devPortalContext}>
-        <MDXProvider components={mdxComponents}>
-          <ThemeProvider>
-            <ComponentsProvider value={components}>
-              <ViewportAnchorProvider>{children}</ViewportAnchorProvider>
-            </ComponentsProvider>
-          </ThemeProvider>
-        </MDXProvider>
-      </DevPortalProvider>
+      <StaggeredRenderContext.Provider value={staggeredValue}>
+        <DevPortalProvider value={devPortalContext}>
+          <MDXProvider components={mdxComponents}>
+            <ThemeProvider>
+              <ComponentsProvider value={components}>
+                <ViewportAnchorProvider>{children}</ViewportAnchorProvider>
+              </ComponentsProvider>
+            </ThemeProvider>
+          </MDXProvider>
+        </DevPortalProvider>
+      </StaggeredRenderContext.Provider>
     </QueryClientProvider>
   );
 };

package/src/lib/components/Header.tsx

@@ -1,30 +1,77 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
 
+import { Link } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
+import { isProfileMenuPlugin, NavigationItem } from "../core/plugins.js";
+import { Button } from "../ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
+const RecursiveMenu = ({ item }: { item: NavigationItem }) => {
+  return item.children ? (
+    <DropdownMenuSub key={item.label}>
+      <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          {item.children.map((item, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <RecursiveMenu key={i} item={item} />
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  ) : (
+    <Link to={item.path ?? ""}>
+      <DropdownMenuItem key={item.label}>{item.label}</DropdownMenuItem>
+    </Link>
+  );
+};
+
 export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled, login, logout } = useAuth();
-  const { page } = useDevPortal();
+  const context = useDevPortal();
+  const { page, plugins } = context;
 
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
   return (
     <header className="fixed top-0 w-full z-10 bg-background/80 backdrop-blur">
       <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b border-border px-12 h-[--top-header-height]">
+        <div className="grid grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-12 h-[--top-header-height]">
           <div className="flex items-center gap-3.5">
             {page?.logo && (
-              <img
-                src={isDark ? page.logo.src.dark : page.logo.src.light}
-                alt={page.logo.alt ?? page.pageTitle}
-                style={{ width: page.logo.width }}
-                className="h-10"
-              />
+              <>
+                <img
+                  src={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}
+                  alt={page.logo.alt ?? page.pageTitle}
+                  style={{ width: page.logo.width }}
+                  className={cn("h-10", !isDark && "hidden")}
+                  loading="lazy"
+                />
+              </>
             )}
             <span className="font-bold text-2xl text-foreground/85 tracking-wide">
               {page?.pageTitle}
@@ -37,34 +84,37 @@ export const Header = memo(function HeaderInner() {
                   <SearchIcon size={14} />
                   Search
                 </div>
-                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
+                <kbd className="absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[11px] font-medium opacity-100 sm:flex">
                   ⌘K
                 </kbd>
               </button>*/}
             </div>
 
-            <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {isAuthEnabled && (
-                <>
-                  {isAuthenticated ? (
-                    <button
-                      type="button"
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded text-nowrap"
-                      onClick={logout}
-                    >
-                      Logout {profile?.email ? `(${profile.email})` : null}
-                    </button>
-                  ) : (
-                    <button
-                      type="button"
-                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                      onClick={login}
-                    >
-                      Login
-                    </button>
-                  )}
-                </>
+            <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
+              {isAuthEnabled && !isAuthenticated ? (
+                <Button variant="ghost" asChild>
+                  <Link to="/login">Login</Link>
+                </Button>
+              ) : (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost">
+                      {profile?.email ? `${profile.email}` : "My Account"}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-56">
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {plugins
+                      .filter((p) => isProfileMenuPlugin(p))
+                      .flatMap((p) => p.getProfileMenuItems(context))
+                      .map((i) => (
+                        <RecursiveMenu key={i.label} item={i} />
+                      ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
               )}
+
               <button
                 type="button"
                 aria-label={

package/src/lib/components/InlineCode.tsx

@@ -11,7 +11,7 @@ export const InlineCode = ({
   <code
     className={cn(
       className,
-      "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
+      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
     )}
   >
     {children}

package/src/lib/components/TopNavigation.tsx

@@ -12,7 +12,7 @@ export const TopNavigation = () => {
   }
 
   return (
-    <nav className="border-b border-border text-sm px-12 h-[--top-nav-height]">
+    <nav className="border-b text-sm px-12 h-[--top-nav-height]">
       <ul className="flex flex-row items-center gap-8">
         {navigation.map((item) => (
           <li key={item.label}>

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

@@ -2,6 +2,7 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { traverseNavigation } from "../../util/traverseNavigation.js";
 
 const DevPortalReactContext = createContext<DevPortalContext | undefined>(
   undefined,
@@ -31,8 +32,27 @@ export const useTopNavigationItem = () => {
   const { navigation } = useDevPortal();
   const location = useLocation();
 
-  return navigation.find((item) =>
-    matchPath({ path: item.path, end: false }, location.pathname),
+  // The `/` path needs this logic because it would always match:
+  // Only if a leaf node actually matches the current path it is active
+  for (const item of navigation) {
+    const foundNavItem = traverseNavigation(item, (_node, fullPath) => {
+      if (location.pathname === fullPath) {
+        return item;
+      }
+    });
+
+    if (foundNavItem) {
+      return foundNavItem;
+    }
+  }
+  if (location.pathname === "/") {
+    return navigation.find((item) => item.path === "/");
+  }
+
+  return navigation.find(
+    (item) =>
+      item.path !== "/" &&
+      matchPath({ path: item.path, end: false }, location.pathname),
   );
 };
 

package/src/lib/components/index.ts

@@ -1,7 +1,9 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
+import { Helmet } from "@zudoku/react-helmet-async";
 import { Link as LinkImport } from "react-router-dom";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
+import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
 import {
   Bootstrap as BootstrapImport,
@@ -19,3 +21,5 @@ export const RouterError = /*@__PURE__*/ RouterErrorImport;
 export const ServerError = /*@__PURE__*/ ServerErrorImport;
 export const Bootstrap = /*@__PURE__*/ BootstrapImport;
 export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
+export const Button = /*@__PURE__*/ ButtonImport;
+export const Head = /*@__PURE__*/ Helmet;

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

@@ -114,7 +114,7 @@ export const SideNavigationItem = ({
             {linkContent}
           </Collapsible.Trigger>
           <Collapsible.Content className="CollapsibleContent ms-[calc(var(--padding-nav-item)*1.125)]">
-            <ul className="mt-1 border-border border-l ps-1.5">
+            <ul className="mt-1 border-l ps-1.5">
               {item.children.map((child) => (
                 <SideNavigationItem
                   key={isPathItem(child) ? child.path : child.href}

package/src/lib/core/DevPortalContext.ts

@@ -95,7 +95,7 @@ export type ZudokuContextOptions = {
 };
 
 export class DevPortalContext {
-  private plugins: NonNullable<ZudokuContextOptions["plugins"]> = [];
+  public plugins: NonNullable<ZudokuContextOptions["plugins"]> = [];
   public navigation: ZudokuContextOptions["navigation"];
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];

package/src/lib/core/plugins.ts

@@ -12,6 +12,7 @@ export type PluginNavigationCategory = {
 
 export type DevPortalPlugin =
   | CommonPlugin
+  | ProfileMenuPlugin
   | NavigationPlugin
   | ApiIdentityPlugin;
 
@@ -24,11 +25,26 @@ export interface ApiIdentityPlugin {
   getIdentities: (context: DevPortalContext) => Promise<ApiIdentity[]>;
 }
 
+export interface ProfileMenuPlugin {
+  getProfileMenuItems: (context: DevPortalContext) => NavigationItem[];
+}
+
+export type NavigationItem = {
+  label: string;
+  path?: string;
+  children?: NavigationItem[];
+};
+
 export interface CommonPlugin {
   initialize?: (context: DevPortalContext) => Promise<void> | void;
   getHead?: () => ReactElement | undefined;
 }
 
+export const isProfileMenuPlugin = (
+  obj: DevPortalPlugin,
+): obj is ProfileMenuPlugin =>
+  "getProfileMenuItems" in obj && typeof obj.getProfileMenuItems === "function";
+
 export const isNavigationPlugin = (
   obj: DevPortalPlugin,
 ): obj is NavigationPlugin =>

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

@@ -47,7 +47,7 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
 
   return (
     <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b border-border pb-1">
+      <div className="flex justify-between mb-4 border-b pb-1">
         <h1 className="font-medium text-2xl">New API Key</h1>
       </div>
       <form