zudoku 0.0.0-f5761c9 → 0.0.0-ff3bc72

package/lib/zudoku.plugin-api-keys.js

@@ -1,13 +1,13 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as x, R as f } from "./SlotletProvider-CULK8zmk.js";
-import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-DulGxZh-.js";
+import { S as x, R as f } from "./SlotletProvider-D3UD5Go3.js";
+import { u as g, a as d, I as j, S as v, b as w, c as b, d as k, e as K, f as m } from "./Input-CtVUl3eT.js";
 import { a as N, L as u, O as I } from "./index-BG0g4WW0.js";
 import { u as h, a as E, b as S } from "./ZudokuContext-cr-pTRY1.js";
-import { B as l, m as A } from "./index-BfA1oLPP.js";
-import { D as C } from "./DeveloperHint-CZ4VwuKw.js";
+import { B as l, m as A } from "./index-Dolisrci.js";
+import { D as C } from "./DeveloperHint-YeWHKvyr.js";
 import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
 import { useState as p } from "react";
-import { a as T } from "./Markdown-BUUIyZbc.js";
+import { a as T } from "./Markdown-DapSf3wG.js";
 function c(t, s) {
   if (t)
     return;

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-BUUIyZbc.js";
+import { P as o } from "./Markdown-DapSf3wG.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const x = (t, e, n) => Object.entries(t).flatMap(([a, p]) => {
   return s ? {
     path: s,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-COBmXj_4.js"), { default: m, ...l } = await p();
+      const { MdxPage: i } = await import("./MdxPage-BqBWsXZ1.js"), { default: m, ...l } = await p();
       return {
         element: /* @__PURE__ */ u.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,12 +1,12 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as u } from "./index-BuA1OA5H.js";
+import { o as u } from "./index-BlJ2rj99.js";
 import "./urql-YhcsXYy8.js";
 import "./ZudokuContext-cr-pTRY1.js";
 import "lucide-react";
 import "zudoku/openapi-worker";
-import "./index-BfA1oLPP.js";
-import "./ErrorPage-C5Pnyfbg.js";
-import "./Markdown-BUUIyZbc.js";
+import "./index-Dolisrci.js";
+import "./ErrorPage-CsZAN_za.js";
+import "./Markdown-DapSf3wG.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-D2p7Olpn.js";
 import "./index-BG0g4WW0.js";

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-f5761c9",
+  "version": "0.0.0-ff3bc72",
   "type": "module",
+  "homepage": "https://zudoku.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zuplo/zudoku.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zuplo/zudoku/issues"
+  },
+  "description": "Framework for building high quality, interactive API documentation.",
   "files": [
     "dist",
     "lib",

package/src/lib/authentication/state.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 export const useAuthState = create<AuthState>(() => ({
   isPending: false,
@@ -19,3 +20,19 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: string | boolean | undefined;
 }
+
+interface SelectedServerState {
+  selectedServer?: string;
+  setSelectedServer: (newServer: string) => void;
+}
+
+export const useSelectedServerStore = create<SelectedServerState>()(
+  persist(
+    (set) => ({
+      selectedServer: undefined,
+      setSelectedServer: (newServer: string) =>
+        set({ selectedServer: newServer }),
+    }),
+    { name: "zudoku-selected-server" },
+  ),
+);

package/src/lib/components/Banner.tsx

@@ -9,7 +9,7 @@ const COLOR_MAP = {
   tip: "bg-green-600",
   caution: "bg-orange-500",
   danger: "bg-rose-500",
-};
+} as const;
 
 export const Banner = () => {
   const { page } = useZudoku();
@@ -19,12 +19,22 @@ export const Banner = () => {
     return <style>{`:root { --banner-height: 0px; }`}</style>;
   }
 
+  const mappedColor =
+    page.banner.color && page.banner.color in COLOR_MAP
+      ? COLOR_MAP[page.banner.color as keyof typeof COLOR_MAP]
+      : !page.banner.color
+        ? "bg-primary"
+        : undefined;
+
+  const style = !mappedColor ? { backgroundColor: page.banner.color } : {};
+
   return (
     <div
       className={cn(
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
-        page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
+        mappedColor,
       )}
+      style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (

package/src/lib/components/ErrorPage.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { Link } from "react-router-dom";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
 import { ProseClasses } from "./Markdown.js";
@@ -22,7 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-      <Link to="/">Go back home</Link>
     </div>
   );
 };

package/src/lib/components/InlineCode.tsx

@@ -4,11 +4,21 @@ import { cn } from "../util/cn.js";
 export const InlineCode = ({
   className,
   children,
+  selectOnClick,
 }: {
   className?: string;
   children: ReactNode;
+  selectOnClick?: boolean;
 }) => (
   <code
+    onClick={(e) => {
+      if (!selectOnClick) return;
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(e.currentTarget);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }}
     className={cn(
       "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
       className,

package/src/lib/components/Layout.tsx

@@ -53,7 +53,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
         <Suspense
           fallback={
-            <main className="grid h-full place-items-center">
+            <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
               <Spinner />
             </main>
           }

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;
   };
 }>;

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

@@ -18,6 +18,7 @@ import {
   type ParameterObject,
   type PathsObject,
   type SchemaObject,
+  type ServerObject,
   type TagObject,
 } from "../parser/index.js";
 
@@ -57,9 +58,10 @@ export const createOperationSlug = (
   );
 };
 
-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<{
@@ -158,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;
@@ -371,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({
@@ -417,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/openapi/Endpoint.tsx

@@ -1,31 +1,95 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useTransition } from "react";
+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";
+import { useQuery } from "./util/urql.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

@@ -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/Sidecar.tsx

@@ -1,6 +1,7 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -65,6 +66,9 @@ export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url
+      servers {
+        url
+      }
     }
   }
 `);
@@ -135,6 +139,8 @@ export const Sidecar = ({
     );
   });
 
+  const { selectedServer } = useSelectedServerStore();
+
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema
       ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
@@ -143,7 +149,7 @@ export const Sidecar = ({
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
       url:
-        (result.data?.schema.url ?? "") +
+        (selectedServer ?? result.data?.schema.url ?? "") +
         operation.path.replaceAll("{", ":").replaceAll("}", ""),
       postData: example
         ? {
@@ -160,7 +166,13 @@ export const Sidecar = ({
     });
 
     return getConverted(snippet, selectedLang);
-  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
+  }, [
+    selectedServer,
+    selectedLang,
+    operation.method,
+    operation.path,
+    requestBodyContent,
+  ]);
 
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -175,6 +187,9 @@ export const Sidecar = ({
           </span>
           <PlaygroundDialogWrapper
             server={result.data?.schema.url ?? ""}
+            servers={
+              result.data?.schema.servers.map((server) => server.url) ?? []
+            }
             operation={operation}
           />
         </SidecarBox.Head>

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

@@ -7,6 +7,7 @@ export const SimpleSelect = ({
   onChange,
   className,
   options,
+  showChevrons = true,
 }: {
   value: string;
   onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -15,12 +16,14 @@ export const SimpleSelect = ({
     value: string;
     label: string;
   }[];
+  showChevrons?: boolean;
 }) => (
-  <div className={cn("grid", className)}>
+  <div className="grid">
     <select
       className={cn(
         "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
+        className,
       )}
       value={value}
       onChange={onChange}
@@ -31,7 +34,12 @@ export const SimpleSelect = ({
         </option>
       ))}
     </select>
-    <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
+    <div
+      className={cn(
+        !showChevrons && "hidden",
+        "row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none",
+      )}
+    >
       <ChevronsUpDownIcon size={14} />
     </div>
   </div>

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

@@ -13,11 +13,13 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
+  "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
+    types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
+  "\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 GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
@@ -37,6 +39,12 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * 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 ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -53,8 +61,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 getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n",
-): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */