zudoku 0.0.0-e2f3304 → 0.0.0-e4b82fa

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

@@ -24,7 +24,7 @@ export const Sidebar = () => {
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none"
+        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
         aria-describedby={undefined}
       >
         <VisuallyHidden>

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

@@ -1,7 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { NavLink } from "react-router-dom";
+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";
@@ -26,6 +26,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -56,46 +57,54 @@ export const SidebarCategory = ({
 
   return (
     <Collapsible.Root
-      className={cn("flex flex-col", level === 0 && "-mx-[--padding-nav-item]")}
+      className="flex flex-col"
       defaultOpen={isDefaultOpen}
       open={open}
       onOpenChange={() => setOpen(true)}
     >
       <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
         <div
-          className={cn(
-            "text-start",
-            navigationListItem({ isActive: false, isTopLevel: level === 0 }),
-            isCollapsible
-              ? "cursor-pointer"
-              : "cursor-default hover:bg-transparent",
-          )}
+          onClick={() => setHasInteracted(true)}
+          className={navigationListItem({
+            isActive: false,
+            isTopLevel: level === 0,
+            className: [
+              "text-start",
+              isCollapsible
+                ? "cursor-pointer"
+                : "cursor-default hover:bg-transparent",
+            ],
+          })}
         >
           {category.icon && (
             <category.icon
               size={16}
-              className="align-[-0.125em] -translate-x-1"
+              className={cn(
+                "align-[-0.125em] -translate-x-1",
+                isActive && "text-primary",
+              )}
             />
           )}
           {category.link?.type === "doc" ? (
             <NavLink
               to={joinPath(topNavItem?.id, category.link.id)}
               className="flex-1"
-              onClick={() => setHasInteracted(true)}
+              onClick={() => {
+                // if it is the current path and closed then open it because there's no path change to trigger the open
+                if (isActive && !open) {
+                  setOpen(true);
+                }
+              }}
             >
-              {({ isActive }) => (
-                <div
-                  className={cn(
-                    "flex items-center gap-2 justify-between w-full",
-                    isActive
-                      ? "text-primary font-medium"
-                      : "text-foreground/80",
-                  )}
-                >
-                  <div className="truncate">{category.label}</div>
-                  {ToggleButton}
-                </div>
-              )}
+              <div
+                className={cn(
+                  "flex items-center gap-2 justify-between w-full",
+                  isActive ? "text-primary" : "text-foreground/80",
+                )}
+              >
+                <div className="truncate">{category.label}</div>
+                {ToggleButton}
+              </div>
             </NavLink>
           ) : (
             <div className="flex items-center justify-between w-full">
@@ -109,10 +118,9 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "ms-[calc(var(--padding-nav-item)*1.125)]",
         )}
       >
-        <ul className="mt-1 border-l ps-2">
+        <ul className="mt-1 border-l ms-0.5">
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -3,7 +3,6 @@ import { ExternalLinkIcon } from "lucide-react";
 import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
@@ -16,7 +15,8 @@ export const navigationListItem = cva(
   {
     variants: {
       isTopLevel: {
-        true: "font-semibold",
+        true: "font-medium -mx-[--padding-nav-item]",
+        false: "-mr-[--padding-nav-item] ml-[--padding-nav-item]",
       },
       isActive: {
         true: "text-primary font-medium",
@@ -27,6 +27,9 @@ export const navigationListItem = cva(
         false: "",
       },
     },
+    defaultVariants: {
+      isActive: false,
+    },
   },
 );
 
@@ -58,7 +61,7 @@ export const SidebarItem = ({
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <span className="truncate" title={item.label}>
+              <span className="truncate flex-1" title={item.label}>
                 {item.label}
               </span>
               <SidebarBadge {...item.badge} />
@@ -73,13 +76,11 @@ export const SidebarItem = ({
         <AnchorLink
           to={{ hash: item.href, search: searchParams.toString() }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
-          className={cn(
-            "flex gap-2.5 justify-between",
-            level === 0 && "-mx-[--padding-nav-item]",
-            navigationListItem({
-              isActive: item.href.slice(1) === activeAnchor,
-            }),
-          )}
+          className={navigationListItem({
+            isActive: item.href.slice(1) === activeAnchor,
+            isTopLevel: level === 0,
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
         >
           {item.badge ? (
             <>
@@ -94,7 +95,9 @@ export const SidebarItem = ({
         </AnchorLink>
       ) : !item.href.startsWith("http") ? (
         <NavLink
-          className={cn("flex gap-2.5 justify-between", navigationListItem())}
+          className={navigationListItem({
+            className: item.badge?.placement !== "start" && "justify-between",
+          })}
           to={item.href}
         >
           {item.badge ? (
@@ -110,10 +113,7 @@ export const SidebarItem = ({
         </NavLink>
       ) : (
         <a
-          className={cn(
-            navigationListItem({ isTopLevel: level === 0 }),
-            "block",
-          )}
+          className={navigationListItem({ isTopLevel: level === 0 })}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
@@ -121,8 +121,7 @@ export const SidebarItem = ({
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
           <span className="whitespace-nowrap">
-            &nbsp;
-            <ExternalLinkIcon className="inline ml-1" size={12} />
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
           </span>
         </a>
       );

package/src/lib/core/DevPortalContext.ts

@@ -51,7 +51,7 @@ type Page = Partial<{
   };
   banner?: {
     message: ReactNode;
-    color?: "note" | "tip" | "info" | "caution" | "danger";
+    color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
     dismissible?: boolean;
   };
 }>;
@@ -60,7 +60,12 @@ export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;
   authentication?: AuthenticationProvider;
-  topNavigation?: Array<{ id: string; label: string; default?: string }>;
+  topNavigation?: Array<{
+    id: string;
+    label: string;
+    default?: string;
+    display?: "auth" | "anon" | "always";
+  }>;
   sidebars?: SidebarConfig;
   plugins?: DevPortalPlugin[];
   slotlets?: Slotlets;

package/src/lib/oas/graphql/index.ts

@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import SchemaBuilder from "@pothos/core";
+import {
+  slugifyWithCounter,
+  type CountableSlugify,
+} from "@sindresorhus/slugify";
 import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
 import { createYoga, type YogaServerOptions } from "graphql-yoga";
 import { LRUCache } from "lru-cache";
 import hashit from "object-hash";
-import slugify from "../../util/slugify.js";
 import {
   HttpMethods,
   validate,
@@ -15,6 +18,7 @@ import {
   type ParameterObject,
   type PathsObject,
   type SchemaObject,
+  type ServerObject,
   type TagObject,
 } from "../parser/index.js";
 
@@ -35,7 +39,12 @@ type OperationLike = {
   path: string;
   method: string;
 };
-export const slugifyOperation = (operation: OperationLike, tag?: string) => {
+
+export const createOperationSlug = (
+  slugify: CountableSlugify,
+  operation: OperationLike,
+  tag?: string,
+) => {
   const summary =
     (operation.summary ?? "") +
     (operation.operationId
@@ -46,13 +55,13 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   return slugify(
     (tag ? tag + "-" : "") +
       (summary || `${operation.method}-${operation.path}`),
-    { lower: true, trim: true },
   );
 };
 
-const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
+const cache = new LRUCache<string, OpenAPIDocument>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
+  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
 });
 
 const builder = new SchemaBuilder<{
@@ -88,6 +97,8 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
 };
 
 const getAllOperations = (paths?: PathsObject, tag?: string) => {
+  const slugify = slugifyWithCounter();
+
   return Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
       if (!value?.[method]) return [];
@@ -109,21 +120,20 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
         ...operationParameters,
       ];
 
+      const slugData = {
+        summary: operation.summary,
+        operationId: operation.operationId,
+        path,
+        method,
+      };
+
       return {
         ...operation,
         method,
         path,
         parameters,
         tags: operation.tags ?? [],
-        slug: slugifyOperation(
-          {
-            summary: operation.summary,
-            operationId: operation.operationId,
-            path,
-            method,
-          },
-          tag,
-        ),
+        slug: createOperationSlug(slugify, slugData, tag),
       };
     }),
   );
@@ -150,6 +160,13 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
   }),
 });
 
+const ServerItem = builder.objectRef<ServerObject>("Server").implement({
+  fields: (t) => ({
+    url: t.exposeString("url"),
+    description: t.exposeString("description", { nullable: true }),
+  }),
+});
+
 const PathItem = builder
   .objectRef<{
     path: string;
@@ -363,6 +380,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   fields: (t) => ({
     openapi: t.string({ resolve: (root) => root.openapi }),
     url: t.string({ resolve: (root) => root.servers?.at(0)?.url ?? "/" }),
+    servers: t.field({
+      type: [ServerItem],
+      resolve: (root) => root.servers ?? [],
+    }),
     title: t.string({ resolve: (root) => root.info.title }),
     version: t.string({ resolve: (root) => root.info.version }),
     description: t.string({
@@ -409,16 +430,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
 
 const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
   const hash = hashit(input);
-
-  if (cache.has(hash)) {
-    return cache.get(hash)!;
-  }
-
-  const schema = validate(input);
-
-  cache.set(hash, schema);
-
-  return schema;
+  return await cache.forceFetch(hash, { context: input });
 };
 
 const SchemaSource = builder.enumType("SchemaType", {

package/src/lib/oas/parser/index.ts

@@ -20,6 +20,7 @@ export type TagObject = DeepOmitReference<OpenAPIV3_1.TagObject>;
 export type ExampleObject = DeepOmitReference<OpenAPIV3_1.ExampleObject>;
 export type EncodingObject = DeepOmitReference<OpenAPIV3_1.EncodingObject>;
 export type SchemaObject = DeepOmitReference<OpenAPIV3_1.SchemaObject>;
+export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ProseClasses } from "../../components/Markdown.js";
+import { cn } from "../../util/cn.js";
+import { useExposedProps } from "../../util/useExposedProps.js";
+import type { CustomPageConfig } from "./index.js";
+
+export const CustomPage = ({
+  element,
+  render,
+  prose = true,
+}: Omit<CustomPageConfig, "path">) => {
+  const slotletProps = useExposedProps();
+  const content = render ? React.createElement(render, slotletProps) : element;
+
+  return (
+    <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import { CustomPage } from "./CustomPage.js";
+
+export type CustomPageConfig = {
+  path: string;
+  prose?: boolean;
+  element?: ReactNode;
+  render?: ComponentType<ExposedComponentProps>;
+};
+
+export const customPagesPlugin = (
+  config: CustomPageConfig[],
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, ...props }) => ({
+        path,
+        element: <CustomPage {...props} />,
+      })),
+  };
+};

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

@@ -1,4 +1,5 @@
 import { useMDXComponents } from "@mdx-js/react";
+import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router-dom";
@@ -11,7 +12,6 @@ import {
 } from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
-import slugify from "../../util/slugify.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
@@ -68,14 +68,16 @@ export const MdxPage = ({
           "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header>
-          {category && <CategoryHeading>{category}</CategoryHeading>}
-          {title && (
-            <Heading level={1} id={slugify(title, { lower: true })}>
-              {title}
-            </Heading>
-          )}
-        </header>
+        {(category || title) && (
+          <header>
+            {category && <CategoryHeading>{category}</CategoryHeading>}
+            {title && (
+              <Heading level={1} id={slugify(title)}>
+                {title}
+              </Heading>
+            )}
+          </header>
+        )}
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />

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

@@ -1,31 +1,95 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useTransition } from "react";
+import { useQuery } from "urql";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
+import { Button } from "../../ui/Button.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
+import { SimpleSelect } from "./SimpleSelect.js";
 
-export const Endpoint = ({ url }: { url: string }) => {
+const ServersQuery = graphql(/* GraphQL */ `
+  query ServersQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+      servers {
+        url
+      }
+    }
+  }
+`);
+
+const CopyButton = ({ url }: { url: string }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <div className="my-4 flex items-center justify-end gap-2 text-sm">
-      <span className="font-medium">Endpoint:</span>
-      <InlineCode className="p-1.5 flex gap-2.5 items-center text-xs">
-        {url}
-        <button
-          onClick={() => {
-            void navigator.clipboard.writeText(url).then(() => {
-              setIsCopied(true);
-              setTimeout(() => setIsCopied(false), 2000);
-            });
-          }}
-          type="button"
-        >
-          {isCopied ? (
-            <CheckIcon className="text-green-600" size={14} />
-          ) : (
-            <CopyIcon size={14} strokeWidth={1.3} />
-          )}
-        </button>
-      </InlineCode>
+    <Button
+      onClick={() => {
+        void navigator.clipboard.writeText(url).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        });
+      }}
+      variant="ghost"
+      size="icon"
+    >
+      {isCopied ? (
+        <CheckIcon className="text-green-600" size={14} />
+      ) : (
+        <CopyIcon size={14} strokeWidth={1.3} />
+      )}
+    </Button>
+  );
+};
+
+const context = { suspense: true } as const;
+
+export const Endpoint = () => {
+  const [result] = useQuery({
+    query: ServersQuery,
+    variables: useOasConfig(),
+    context,
+  });
+  const [, startTransition] = useTransition();
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+
+  if (!result.data) return null;
+
+  const { servers } = result.data.schema;
+
+  if (servers.length === 1) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-sm">Endpoint:</span>
+        <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
+          {servers[0].url}
+        </InlineCode>
+        <CopyButton url={servers[0].url} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="font-medium text-sm">
+        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
+      </span>
+
+      <SimpleSelect
+        className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
+        onChange={(e) =>
+          startTransition(() => {
+            setSelectedServer(e.target.value);
+          })
+        }
+        value={selectedServer ?? result.data.schema.url}
+        showChevrons={servers.length > 1}
+        options={servers.map((server) => ({
+          value: server.url,
+          label: server.url,
+        }))}
+      />
+      <CopyButton url={selectedServer ?? result.data.schema.url} />
     </div>
   );
 };

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

@@ -1,4 +1,5 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
+import { useQuery } from "urql";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
@@ -12,7 +13,6 @@ import { OperationListItem } from "./OperationListItem.js";
 import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {
@@ -133,7 +133,9 @@ export const OperationList = () => {
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
       <hr />
-      <Endpoint url={result.data.schema.url} />
+      <div className="my-4 flex justify-end">
+        <Endpoint />
+      </div>
 
       {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)

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

@@ -3,9 +3,11 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
+  servers,
   operation,
 }: {
   server: string;
+  servers?: string[];
   operation: OperationListItemResult;
 }) => {
   const headers = operation.parameters
@@ -29,6 +31,7 @@ export const PlaygroundDialogWrapper = ({
   return (
     <PlaygroundDialog
       server={server}
+      servers={servers}
       method={operation.method}
       url={operation.path}
       headers={headers}

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

@@ -1,9 +1,8 @@
 import { Outlet } from "react-router-dom";
+import { Provider, Client as UrqlClient } from "urql";
 import { OasConfigProvider } from "./context.js";
 import { OasPluginConfig } from "./interfaces.js";
 
-import { Provider, Client as UrqlClient } from "./util/urql.js";
-
 export function OpenApiRoute({
   config,
   client,