zudoku 0.53.0 → 0.53.1

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 { Fragment, useState } from "react";
+import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
@@ -8,6 +9,7 @@ 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";
@@ -15,13 +17,14 @@ import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { TopNavItem } from "./TopNavigation.js";
+import { TopNavItem, TopNavLink } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { navigation, options } = useZudoku();
-  const { isAuthenticated } = useAuth();
+  const { navigation, options, getProfileMenuItems } = useZudoku();
+  const { isAuthenticated, profile, isAuthEnabled, login } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const accountItems = getProfileMenuItems();
   const filteredItems = navigation.filter(isHiddenItem(isAuthenticated));
 
   return (
@@ -50,9 +53,36 @@ export const MobileTopNavigation = () => {
               <li className="empty:hidden">
                 <Slot.Target name="top-navigation-side" />
               </li>
-              <li>
-                <ThemeSwitch />
-              </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 && (
+                      <Fragment>
+                        <li>
+                          {profile?.name ? `${profile.name}` : "My Account"}
+                          {profile?.email && (
+                            <div className="font-normal text-muted-foreground">
+                              {profile.email}
+                            </div>
+                          )}
+                        </li>
+                      </Fragment>
+                    )
+                  )}
+                </ClientOnly>
+              )}
               {filteredItems.map((item) => (
                 <li key={item.label}>
                   <button type="button" onClick={() => setDrawerOpen(false)}>
@@ -60,6 +90,25 @@ export const MobileTopNavigation = () => {
                   </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>
             </ul>
           </div>
           {options.site?.showPoweredBy !== false && (

package/src/lib/components/TopNavigation.tsx

@@ -1,7 +1,7 @@
 import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
-import { NavLink } from "react-router";
+import { NavLink, NavLinkProps } from "react-router";
 import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
@@ -62,37 +62,53 @@ const getPathForItem = (item: NavigationItem): string => {
   }
 };
 
-export const TopNavItem = (item: NavigationItem) => {
-  const currentNav = useCurrentNavigation();
-  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
-
-  const path = getPathForItem(item);
-
+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 navigation,
-    // the top nav id doesn't necessarily start with the navigation id
     <NavLink
       viewTransition
-      to={path}
       className={({ isActive: isActiveNavLink, isPending }) => {
-        const isActive = isActiveNavLink || isActiveTopNavItem;
+        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",
-          isActive || isPending
+          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",
-                isActive && "after:[view-transition-name:top-nav-underline]",
+                isActiveReal &&
+                  "after:[view-transition-name:top-nav-underline]",
                 isPending && "after:bg-primary/25",
               ]
             : "text-foreground/75 hover:text-foreground",
         );
       }}
+      {...props}
     >
+      {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}
-    </NavLink>
+    </TopNavLink>
   );
 };

package/src/lib/core/ZudokuContext.ts

@@ -18,8 +18,10 @@ import {
   isAuthenticationPlugin,
   isEventConsumerPlugin,
   isNavigationPlugin,
+  isProfileMenuPlugin,
   type NavigationPlugin,
   needsInitialization,
+  ProfileNavigationItem,
   type ZudokuPlugin,
 } from "./plugins.js";
 
@@ -182,6 +184,16 @@ export class ZudokuContext {
     return navigations.flatMap((nav) => nav ?? []);
   };
 
+  getProfileMenuItems = () => {
+    const accountItems = this.plugins
+      .filter((p) => isProfileMenuPlugin(p))
+      .flatMap((p) => p.getProfileMenuItems(this))
+      .sort(sortByCategory(["top", "middle", "bottom"]))
+      .sort((i) => i.weight ?? 0);
+
+    return accountItems;
+  };
+
   signRequest = async (request: Request) => {
     if (!this.authentication) {
       throw new Error("No authentication provider configured");
@@ -190,3 +202,12 @@ export class ZudokuContext {
     return await this.authentication.signRequest(request);
   };
 }
+
+const sortByCategory =
+  (categories: string[]) =>
+  (a: ProfileNavigationItem, b: ProfileNavigationItem) => {
+    const aIndex = categories.indexOf(a.category ?? "middle");
+    const bIndex = categories.indexOf(b.category ?? "middle");
+
+    return aIndex - bIndex;
+  };

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

@@ -154,7 +154,7 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
 
       return data.data.map((consumer) => ({
         id: consumer.id,
-        label: consumer.label ?? consumer.subject ?? "API Key",
+        label: consumer.label || consumer.subject || "API Key",
         apiKeys: consumer.apiKeys.data,
         key: consumer.apiKeys.data.at(0),
       }));

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

@@ -53,10 +53,11 @@ export const MdxPage = ({
   const categoryTitle = useCurrentItem()?.categoryLabel;
 
   const title = frontmatter.title;
+  const description = frontmatter.description ?? excerpt;
   const category = frontmatter.category ?? categoryTitle;
   const hideToc = frontmatter.toc === false || defaultOptions?.toc === false;
   const pageTitle =
-    tableOfContents.find((item) => item.depth === 1)?.value ?? title;
+    title ?? tableOfContents.find((item) => item.depth === 1)?.value;
   const hidePager =
     frontmatter.disable_pager ??
     frontmatter.disablePager ??
@@ -110,7 +111,7 @@ export const MdxPage = ({
     >
       <Helmet>
         <title>{pageTitle}</title>
-        {excerpt && <meta name="description" content={excerpt} />}
+        {description && <meta name="description" content={description} />}
       </Helmet>
       <Typography className="max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)">
         {(category || title) && (

package/src/lib/plugins/openapi/OperationList.tsx

@@ -243,7 +243,7 @@ export const OperationList = ({
                 registerNavigationAnchor
                 className="mb-0"
               >
-                {schema.tag.name ?? "Other endpoints"}
+                {schema.tag.name ?? "Documentation"}
                 {showVersions && (
                   <span className="text-xl text-muted-foreground ms-1.5">
                     {" "}

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

@@ -166,7 +166,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         if (untaggedOperations) {
           categories.push(
             createNavigationCategory({
-              label: "Other endpoints",
+              label: categories.length === 0 ? "Endpoints" : "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
               collapsed: !config.options?.expandAllTags,