zudoku 0.47.2 → 0.48.0

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

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
   PencilLineIcon,
-  RotateCwIcon,
+  RefreshCwIcon,
   TrashIcon,
   XIcon,
 } from "lucide-react";
@@ -278,18 +278,19 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                   <div className="flex justify-end">
                     {service.updateConsumer && (
                       <Button
-                        size="icon"
                         variant="ghost"
                         onClick={() =>
                           handleStartEdit(consumers.id, consumers.label)
                         }
                         className={cn(
+                          "flex gap-2",
                           editingConsumerId === consumers.id &&
                             "opacity-0! pointer-events-none",
                         )}
                         disabled={editingConsumerId === consumers.id}
                       >
                         <PencilLineIcon size={16} />
+                        Edit label
                       </Button>
                     )}
                     {service.rollKey && (
@@ -299,9 +300,9 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                             title="Roll this key"
                             variant="ghost"
                             disabled={rollKeyMutation.isPending}
-                            className="flex items-center gap-1"
+                            className="flex items-center gap-2"
                           >
-                            <RotateCwIcon
+                            <RefreshCwIcon
                               size={16}
                               className={
                                 rollKeyMutation.isPending
@@ -309,7 +310,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                                   : undefined
                               }
                             />
-                            Roll
+                            Roll key
                           </Button>
                         </DialogTrigger>
                         <DialogContent>

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,6 +1,8 @@
 import { type ComponentType, type ReactNode } from "react";
 import type { RouteObject } from "react-router";
-import type { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { traverseNavigation } from "../../components/navigation/utils.js";
+import type { NavigationPlugin } from "../../core/plugins.js";
 import type { ExposedComponentProps } from "../../util/useExposedProps.js";
 import { CustomPage } from "./CustomPage.js";
 
@@ -12,13 +14,20 @@ export type CustomPageConfig = {
 };
 
 export const customPagesPlugin = (
-  config: CustomPageConfig[],
-): ZudokuPlugin & NavigationPlugin => {
-  return {
-    getRoutes: (): RouteObject[] =>
-      config.map(({ path, ...props }) => ({
-        path,
-        element: <CustomPage {...props} />,
-      })),
-  };
-};
+  navigation: NavigationItem[] = [],
+): NavigationPlugin => ({
+  getRoutes: (): RouteObject[] => {
+    const customPages: RouteObject[] = [];
+
+    traverseNavigation(navigation, (item) => {
+      if (item.type === "custom-page") {
+        customPages.push({
+          path: item.path,
+          element: <CustomPage {...item} />,
+        });
+      }
+    });
+
+    return customPages;
+  },
+});

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

@@ -25,12 +25,12 @@ declare global {
 
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
-    <Heading level={2} id={id} registerSidebarAnchor>
+    <Heading level={2} id={id} registerNavigationAnchor>
       {children}
     </Heading>
   ),
   h3: ({ children, id }) => (
-    <Heading level={3} id={id} registerSidebarAnchor>
+    <Heading level={3} id={id} registerNavigationAnchor>
       {children}
     </Heading>
   ),
@@ -58,7 +58,10 @@ export const MdxPage = ({
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
   const hidePager =
-    frontmatter.disablePager ?? defaultOptions?.disablePager ?? false;
+    frontmatter.disable_pager ??
+    frontmatter.disablePager ??
+    defaultOptions?.disablePager ??
+    false;
 
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??

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

@@ -1,10 +1,8 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
 import { type JSX } from "react";
-import type { RouteObject } from "react-router";
 import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
-import { DocResolver } from "./resolver.js";
 
 export interface MarkdownPluginOptions extends ZudokuDocsConfig {
   fileImports: Record<string, () => Promise<MDXImport>>;
@@ -20,6 +18,7 @@ export type Frontmatter = {
   category?: string;
   toc?: boolean;
   disablePager?: boolean;
+  disable_pager?: boolean;
 };
 
 export type MDXImport = {
@@ -30,47 +29,27 @@ export type MDXImport = {
 };
 
 export const markdownPlugin = (
-  options: MarkdownPluginOptions[],
+  options: MarkdownPluginOptions,
 ): ZudokuPlugin => ({
   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
-                  file={file}
-                  mdxComponent={Component}
-                  {...props}
-                  defaultOptions={defaultOptions}
-                />
-              ),
-            };
-          },
-        };
-        routeMap.set(routePath, route);
+    return Object.entries(options.fileImports).map(
+      ([routePath, importPromise]) => ({
+        path: routePath,
+        lazy: async () => {
+          const { MdxPage } = await import("./MdxPage.js");
+          const { default: Component, ...props } = await importPromise();
+          return {
+            element: (
+              <MdxPage
+                file={routePath}
+                mdxComponent={Component}
+                {...props}
+                defaultOptions={options.defaultOptions}
+              />
+            ),
+          };
+        },
       }),
     );
-    return [...routeMap.values()];
   },
 });

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

@@ -241,7 +241,7 @@ export const OperationList = ({
               <Heading
                 level={1}
                 id="description"
-                registerSidebarAnchor
+                registerNavigationAnchor
                 className="mb-0"
               >
                 {schema.tag.name ?? "Other endpoints"}

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

@@ -53,7 +53,7 @@ export const OperationListItem = ({
         <Heading
           level={2}
           id={operation.slug}
-          registerSidebarAnchor
+          registerNavigationAnchor
           className="break-all col-span-full"
         >
           {operation.summary}

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

@@ -83,7 +83,7 @@ export function SchemaList() {
               <Heading
                 level={1}
                 id="schemas"
-                registerSidebarAnchor
+                registerNavigationAnchor
                 className="mb-0"
               >
                 Schemas
@@ -129,7 +129,7 @@ export function SchemaList() {
           {schemas.map((schema) => (
             <Collapsible key={schema.name} className="group" defaultOpen>
               <Heading
-                registerSidebarAnchor
+                registerNavigationAnchor
                 level={2}
                 className="flex items-center gap-1 justify-between w-fit"
                 id={slugify(schema.name)}

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -19,7 +19,7 @@ type Documents = {
   "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.GetSchemasDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetSidebarOperationsDocument;
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
 };
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
@@ -34,8 +34,8 @@ const documents: Documents = {
     types.GetSchemasDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
-    types.GetSidebarOperationsDocument,
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
+    types.GetNavigationOperationsDocument,
 };
 
 /**
@@ -78,8 +78,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetSidebarOperationsDocument;
+  source: "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetNavigationOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -374,12 +374,12 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetSidebarOperationsQueryVariables = Exact<{
+export type GetNavigationOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
 }>;
 
-export type GetSidebarOperationsQuery = {
+export type GetNavigationOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
@@ -642,8 +642,8 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetSidebarOperationsDocument = new TypedDocumentString(`
-    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsDocument = new TypedDocumentString(`
+    query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
     tags {
       slug
@@ -665,6 +665,6 @@ export const GetSidebarOperationsDocument = new TypedDocumentString(`
   }
 }
     `) as unknown as TypedDocumentString<
-  GetSidebarOperationsQuery,
-  GetSidebarOperationsQueryVariables
+  GetNavigationOperationsQuery,
+  GetNavigationOperationsQueryVariables
 >;

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

@@ -7,16 +7,16 @@ import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
 import { createQuery } from "./client/useCreateQuery.js";
-import type { GetSidebarOperationsQuery as GetSidebarOperationsQueryResult } from "./graphql/graphql.js";
+import type { GetNavigationOperationsQuery as GetNavigationOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { createSidebarCategory } from "./util/createSidebarCategory.js";
+import { createNavigationCategory } from "./util/createNavigationCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-export const GetSidebarOperationsQuery = graphql(`
-  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsQuery = graphql(`
+  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       tags {
         slug
@@ -40,14 +40,14 @@ export const GetSidebarOperationsQuery = graphql(`
 `);
 
 export type OperationResult =
-  GetSidebarOperationsQueryResult["schema"]["tags"][number]["operations"][number];
+  GetNavigationOperationsQueryResult["schema"]["tags"][number]["operations"][number];
 
 export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
 export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
-  const basePath = joinUrl(config.navigationId ?? "/reference");
+  const basePath = joinUrl(config.path);
   const client = new GraphQLClient(config);
 
   return {
@@ -117,7 +117,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path, context) => {
+    getNavigation: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -133,7 +133,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const query = createQuery(client, GetSidebarOperationsQuery, {
+        const query = createQuery(client, GetNavigationOperationsQuery, {
           type,
           input,
         });
@@ -150,7 +150,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           const isCollapsible =
             tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
-          return createSidebarCategory({
+          return createNavigationCategory({
             label: tag.name,
             path: categoryPath,
             operations: tag.operations,
@@ -165,7 +165,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
 
         if (untaggedOperations) {
           categories.push(
-            createSidebarCategory({
+            createNavigationCategory({
               label: "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
@@ -178,7 +178,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           categories.push({
             type: "link" as const,
             label: "Schemas",
-            href: joinUrl(basePath, versionParam, "~schemas"),
+            to: joinUrl(basePath, versionParam, "~schemas"),
           });
         }
 

package/src/lib/plugins/openapi/interfaces.ts

@@ -32,7 +32,7 @@ type Content = {
   examples?: Array<Example> | null;
 };
 
-export type transformExamples = (options: {
+export type TransformExamplesFn = (options: {
   content: Content[];
   context: ZudokuContext;
   auth: AuthState;
@@ -42,7 +42,7 @@ export type transformExamples = (options: {
 
 type BaseOasConfig = {
   server?: string;
-  navigationId?: string;
+  path?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
   schemaImports?: SchemaImports;
@@ -52,7 +52,7 @@ type BaseOasConfig = {
     disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
-    transformExamples?: transformExamples;
+    transformExamples?: TransformExamplesFn;
   };
 };
 

package/src/lib/plugins/openapi/util/{createSidebarCategory.tsx → createNavigationCategory.tsx}

@@ -1,8 +1,8 @@
-import type { SidebarItem } from "../../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../../config/validators/NavigationSchema.js";
 import type { OperationResult } from "../index.js";
 import { MethodColorMap } from "./methodColorMap.js";
 
-export const createSidebarCategory = ({
+export const createNavigationCategory = ({
   label,
   path,
   operations,
@@ -14,12 +14,13 @@ export const createSidebarCategory = ({
   operations: OperationResult[];
   collapsible?: boolean;
   collapsed?: boolean;
-}): SidebarItem => ({
+}): NavigationItem => ({
   type: "category",
   label,
   link: {
     type: "doc" as const,
-    id: path,
+    path,
+    file: path,
     label,
   },
   collapsible,
@@ -27,7 +28,7 @@ export const createSidebarCategory = ({
   items: operations.map((operation) => ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
-    href: `${path}#${operation.slug}`,
+    to: `${path}#${operation.slug}`,
     badge: {
       label: operation.method,
       color: MethodColorMap[operation.method.toLowerCase()]!,

package/src/lib/plugins/openapi/util/getRoutes.tsx

@@ -12,7 +12,7 @@ import type { GraphQLClient } from "../client/GraphQLClient.js";
 import { useCreateQuery } from "../client/useCreateQuery.js";
 import { useOasConfig } from "../context.js";
 import {
-  GetSidebarOperationsQuery,
+  GetNavigationOperationsQuery,
   type OpenApiPluginOptions,
   UNTAGGED_PATH,
 } from "../index.js";
@@ -71,7 +71,7 @@ const NonTagPagesOperationList = ({
   const { type, input } = useOasConfig();
   const { tag: currentTag } = useParams();
   const location = useLocation();
-  const query = useCreateQuery(GetSidebarOperationsQuery, { type, input });
+  const query = useCreateQuery(GetNavigationOperationsQuery, { type, input });
   const {
     data: { schema },
   } = useSuspenseQuery(query);

package/src/lib/plugins/openapi/util/methodColorMap.tsx

@@ -1,4 +1,4 @@
-import { ColorMap } from "../../../components/navigation/SidebarBadge.js";
+import { type ColorMap } from "../../../components/navigation/NavigationBadge.js";
 
 export const MethodColorMap: Record<string, keyof typeof ColorMap> = {
   get: "green",

package/src/lib/util/useScrollToAnchor.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useLocation } from "react-router";
 import { useViewportAnchor } from "../components/context/ViewportAnchorContext.js";
-import { DATA_ANCHOR_ATTR } from "../components/navigation/SidebarItem.js";
+import { DATA_ANCHOR_ATTR } from "../components/navigation/NavigationItem.js";
 import { scrollIntoViewIfNeeded } from "./scrollIntoViewIfNeeded.js";
 
 export const useScrollToHash = () => {
@@ -11,8 +11,8 @@ export const useScrollToHash = () => {
     (hash: string) => {
       const cleanHash = hash.replace(/^#/, "");
 
-      // Operation list items might have subdivisions that the sidebar doesn't show.
-      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.
+      // Operation list items might have subdivisions that the navigation doesn't show.
+      // The subdivisions are separated by a slash so we need to remove everything before the slash to get the navigation correct item.
       const linkHash = cleanHash.split("/").at(0)!;
       const element = document.getElementById(decodeURIComponent(cleanHash));