zudoku 0.0.0-eff6f9b → 0.0.0-f114fe8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/dist/config/config.d.ts +2 -1
  2. package/dist/config/validators/InputSidebarSchema.d.ts +1 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/lib/authentication/state.d.ts +16 -0
  5. package/dist/lib/authentication/state.js +5 -0
  6. package/dist/lib/authentication/state.js.map +1 -1
  7. package/dist/lib/components/ErrorPage.js +1 -2
  8. package/dist/lib/components/ErrorPage.js.map +1 -1
  9. package/dist/lib/components/InlineCode.d.ts +2 -1
  10. package/dist/lib/components/InlineCode.js +9 -1
  11. package/dist/lib/components/InlineCode.js.map +1 -1
  12. package/dist/lib/components/Layout.js +1 -1
  13. package/dist/lib/components/Layout.js.map +1 -1
  14. package/dist/lib/oas/graphql/index.d.ts +2 -1
  15. package/dist/lib/oas/graphql/index.js +21 -9
  16. package/dist/lib/oas/graphql/index.js.map +1 -1
  17. package/dist/lib/oas/parser/index.d.ts +1 -0
  18. package/dist/lib/oas/parser/index.js.map +1 -1
  19. package/dist/lib/plugins/markdown/MdxPage.js +2 -2
  20. package/dist/lib/plugins/markdown/MdxPage.js.map +1 -1
  21. package/dist/lib/plugins/openapi/Endpoint.d.ts +1 -3
  22. package/dist/lib/plugins/openapi/Endpoint.js +46 -8
  23. package/dist/lib/plugins/openapi/Endpoint.js.map +1 -1
  24. package/dist/lib/plugins/openapi/OperationList.js +1 -1
  25. package/dist/lib/plugins/openapi/OperationList.js.map +1 -1
  26. package/dist/lib/plugins/openapi/PlaygroundDialogWrapper.d.ts +2 -1
  27. package/dist/lib/plugins/openapi/PlaygroundDialogWrapper.js +2 -2
  28. package/dist/lib/plugins/openapi/PlaygroundDialogWrapper.js.map +1 -1
  29. package/dist/lib/plugins/openapi/Sidecar.js +14 -3
  30. package/dist/lib/plugins/openapi/Sidecar.js.map +1 -1
  31. package/dist/lib/plugins/openapi/SimpleSelect.d.ts +2 -1
  32. package/dist/lib/plugins/openapi/SimpleSelect.js +1 -1
  33. package/dist/lib/plugins/openapi/SimpleSelect.js.map +1 -1
  34. package/dist/lib/plugins/openapi/graphql/gql.d.ts +10 -2
  35. package/dist/lib/plugins/openapi/graphql/gql.js +2 -1
  36. package/dist/lib/plugins/openapi/graphql/gql.js.map +1 -1
  37. package/dist/lib/plugins/openapi/graphql/graphql.d.ts +26 -0
  38. package/dist/lib/plugins/openapi/graphql/graphql.js +87 -0
  39. package/dist/lib/plugins/openapi/graphql/graphql.js.map +1 -1
  40. package/dist/lib/plugins/openapi/index.js +2 -1
  41. package/dist/lib/plugins/openapi/index.js.map +1 -1
  42. package/dist/lib/plugins/openapi/playground/Playground.d.ts +2 -1
  43. package/dist/lib/plugins/openapi/playground/Playground.js +13 -5
  44. package/dist/lib/plugins/openapi/playground/Playground.js.map +1 -1
  45. package/dist/lib/plugins/openapi/playground/ResponseTab.js +1 -1
  46. package/dist/lib/plugins/openapi/playground/ResponseTab.js.map +1 -1
  47. package/dist/lib/plugins/openapi/playground/createUrl.js +3 -1
  48. package/dist/lib/plugins/openapi/playground/createUrl.js.map +1 -1
  49. package/dist/vite/config.d.ts +1 -1
  50. package/dist/vite/config.js +19 -15
  51. package/dist/vite/config.js.map +1 -1
  52. package/dist/vite/dev-server.js +1 -1
  53. package/dist/vite/dev-server.js.map +1 -1
  54. package/dist/vite/plugin-api.js +4 -7
  55. package/dist/vite/plugin-api.js.map +1 -1
  56. package/dist/vite/plugin-config-reload.js +9 -4
  57. package/dist/vite/plugin-config-reload.js.map +1 -1
  58. package/dist/vite/plugin-frontmatter.d.ts +2 -0
  59. package/dist/vite/plugin-frontmatter.js +30 -0
  60. package/dist/vite/plugin-frontmatter.js.map +1 -0
  61. package/dist/vite/plugin-sidebar.js +14 -1
  62. package/dist/vite/plugin-sidebar.js.map +1 -1
  63. package/dist/vite/plugin.js +2 -2
  64. package/dist/vite/plugin.js.map +1 -1
  65. package/lib/{AuthenticationPlugin-gtf8JS3V.js → AuthenticationPlugin-Bx9FK124.js} +2 -2
  66. package/lib/{AuthenticationPlugin-gtf8JS3V.js.map → AuthenticationPlugin-Bx9FK124.js.map} +1 -1
  67. package/lib/{CategoryHeading-XnFqN2lJ.js → CategoryHeading-ovR-zHRq.js} +2 -2
  68. package/lib/{CategoryHeading-XnFqN2lJ.js.map → CategoryHeading-ovR-zHRq.js.map} +1 -1
  69. package/lib/{DeveloperHint-FBb2uXJe.js → DeveloperHint-YeWHKvyr.js} +2 -2
  70. package/lib/{DeveloperHint-FBb2uXJe.js.map → DeveloperHint-YeWHKvyr.js.map} +1 -1
  71. package/lib/ErrorPage-CsZAN_za.js +16 -0
  72. package/lib/ErrorPage-CsZAN_za.js.map +1 -0
  73. package/lib/{Input-B1kkVL1R.js → Input-CtVUl3eT.js} +4 -4
  74. package/lib/{Input-B1kkVL1R.js.map → Input-CtVUl3eT.js.map} +1 -1
  75. package/lib/{Markdown-B4aR03g6.js → Markdown-DapSf3wG.js} +795 -793
  76. package/lib/Markdown-DapSf3wG.js.map +1 -0
  77. package/lib/{MdxPage-BcftTg5g.js → MdxPage-BqBWsXZ1.js} +23 -23
  78. package/lib/MdxPage-BqBWsXZ1.js.map +1 -0
  79. package/lib/{OperationList-Da36LrGl.js → OperationList-CYrmxPa8.js} +150 -108
  80. package/lib/OperationList-CYrmxPa8.js.map +1 -0
  81. package/lib/{Route-CWj1ECzh.js → Route-Q5mqNQrv.js} +2 -2
  82. package/lib/{Route-CWj1ECzh.js.map → Route-Q5mqNQrv.js.map} +1 -1
  83. package/lib/{SidebarBadge-DdvT2qep.js → SidebarBadge-Dx7jtnoA.js} +3 -3
  84. package/lib/{SidebarBadge-DdvT2qep.js.map → SidebarBadge-Dx7jtnoA.js.map} +1 -1
  85. package/lib/{SlotletProvider-DJMaOUDs.js → SlotletProvider-D3UD5Go3.js} +4 -4
  86. package/lib/{SlotletProvider-DJMaOUDs.js.map → SlotletProvider-D3UD5Go3.js.map} +1 -1
  87. package/lib/{ZudokuContext-em1gHkIY.js → ZudokuContext-cr-pTRY1.js} +4 -4
  88. package/lib/{ZudokuContext-em1gHkIY.js.map → ZudokuContext-cr-pTRY1.js.map} +1 -1
  89. package/lib/assets/{worker-TYRbYl6N.js → worker-Bcj4NA2p.js} +3429 -1350
  90. package/lib/assets/worker-Bcj4NA2p.js.map +1 -0
  91. package/lib/{index-DIkaYL-l.js → index-BlJ2rj99.js} +1775 -1644
  92. package/lib/index-BlJ2rj99.js.map +1 -0
  93. package/lib/index-Bn6Lc9tq.js +9 -0
  94. package/lib/index-Bn6Lc9tq.js.map +1 -0
  95. package/lib/{index-B_9xr661.js → index-BngPzhKn.js} +3 -3
  96. package/lib/{index-B_9xr661.js.map → index-BngPzhKn.js.map} +1 -1
  97. package/lib/{index-BoXX7LeD.js → index-Dolisrci.js} +4 -4
  98. package/lib/{index-BoXX7LeD.js.map → index-Dolisrci.js.map} +1 -1
  99. package/lib/index-LNp6rxyU.js +2094 -0
  100. package/lib/index-LNp6rxyU.js.map +1 -0
  101. package/lib/joinPath-B7kNnUX4.js +8 -0
  102. package/lib/joinPath-B7kNnUX4.js.map +1 -0
  103. package/lib/state-hNe1dw4B.js +548 -0
  104. package/lib/state-hNe1dw4B.js.map +1 -0
  105. package/lib/{utils-DtEHoAvg.js → utils-ByIc_KIM.js} +100 -103
  106. package/lib/utils-ByIc_KIM.js.map +1 -0
  107. package/lib/zudoku.auth-auth0.js +1 -1
  108. package/lib/zudoku.auth-clerk.js +2 -2
  109. package/lib/zudoku.auth-openid.js +5 -5
  110. package/lib/zudoku.components.js +42 -41
  111. package/lib/zudoku.components.js.map +1 -1
  112. package/lib/zudoku.openapi-worker.js +731 -723
  113. package/lib/zudoku.openapi-worker.js.map +1 -1
  114. package/lib/zudoku.plugin-api-keys.js +6 -6
  115. package/lib/zudoku.plugin-custom-page.js +1 -1
  116. package/lib/zudoku.plugin-markdown.js +1 -1
  117. package/lib/zudoku.plugin-openapi.js +7 -6
  118. package/lib/zudoku.plugin-openapi.js.map +1 -1
  119. package/package.json +12 -3
  120. package/src/lib/authentication/state.ts +17 -0
  121. package/src/lib/components/ErrorPage.tsx +0 -2
  122. package/src/lib/components/InlineCode.tsx +10 -0
  123. package/src/lib/components/Layout.tsx +1 -1
  124. package/src/lib/oas/graphql/index.ts +32 -12
  125. package/src/lib/oas/parser/index.ts +1 -0
  126. package/src/lib/plugins/markdown/MdxPage.tsx +2 -2
  127. package/src/lib/plugins/openapi/Endpoint.tsx +86 -22
  128. package/src/lib/plugins/openapi/OperationList.tsx +3 -1
  129. package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx +3 -0
  130. package/src/lib/plugins/openapi/Sidecar.tsx +17 -2
  131. package/src/lib/plugins/openapi/SimpleSelect.tsx +10 -2
  132. package/src/lib/plugins/openapi/graphql/gql.ts +11 -3
  133. package/src/lib/plugins/openapi/graphql/graphql.ts +113 -1
  134. package/src/lib/plugins/openapi/index.tsx +2 -1
  135. package/src/lib/plugins/openapi/playground/Playground.tsx +39 -5
  136. package/src/lib/plugins/openapi/playground/ResponseTab.tsx +0 -1
  137. package/src/lib/plugins/openapi/playground/createUrl.ts +6 -1
  138. package/dist/lib/util/slugify.d.ts +0 -2
  139. package/dist/lib/util/slugify.js +0 -3
  140. package/dist/lib/util/slugify.js.map +0 -1
  141. package/dist/vite/plugin-icons.d.ts +0 -3
  142. package/dist/vite/plugin-icons.js +0 -47
  143. package/dist/vite/plugin-icons.js.map +0 -1
  144. package/lib/ErrorPage-knunPbKI.js +0 -18
  145. package/lib/ErrorPage-knunPbKI.js.map +0 -1
  146. package/lib/Markdown-B4aR03g6.js.map +0 -1
  147. package/lib/MdxPage-BcftTg5g.js.map +0 -1
  148. package/lib/OperationList-Da36LrGl.js.map +0 -1
  149. package/lib/assets/worker-TYRbYl6N.js.map +0 -1
  150. package/lib/index-DIkaYL-l.js.map +0 -1
  151. package/lib/slugify-DbLhpSPt.js +0 -28
  152. package/lib/slugify-DbLhpSPt.js.map +0 -1
  153. package/lib/state-BUM4jc0J.js +0 -288
  154. package/lib/state-BUM4jc0J.js.map +0 -1
  155. package/lib/utils-DtEHoAvg.js.map +0 -1
  156. package/src/lib/util/slugify.ts +0 -3
@@ -1,13 +1,13 @@
1
1
  import { j as e } from "./jsx-runtime-B6kdoens.js";
2
- import { S as x, R as f } from "./SlotletProvider-DJMaOUDs.js";
3
- 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-B1kkVL1R.js";
2
+ import { S as x, R as f } from "./SlotletProvider-D3UD5Go3.js";
3
+ 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";
4
4
  import { a as N, L as u, O as I } from "./index-BG0g4WW0.js";
5
- import { u as h, a as E, b as S } from "./ZudokuContext-em1gHkIY.js";
6
- import { B as l, m as A } from "./index-BoXX7LeD.js";
7
- import { D as C } from "./DeveloperHint-FBb2uXJe.js";
5
+ import { u as h, a as E, b as S } from "./ZudokuContext-cr-pTRY1.js";
6
+ import { B as l, m as A } from "./index-Dolisrci.js";
7
+ import { D as C } from "./DeveloperHint-YeWHKvyr.js";
8
8
  import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
9
9
  import { useState as p } from "react";
10
- import { a as T } from "./Markdown-B4aR03g6.js";
10
+ import { a as T } from "./Markdown-DapSf3wG.js";
11
11
  function c(t, s) {
12
12
  if (t)
13
13
  return;
@@ -1,5 +1,5 @@
1
1
  import { j as m } from "./jsx-runtime-B6kdoens.js";
2
- import { P as o } from "./Markdown-B4aR03g6.js";
2
+ import { P as o } from "./Markdown-DapSf3wG.js";
3
3
  const l = (s) => ({
4
4
  getRoutes: () => s.map(({ path: e, element: t }) => ({
5
5
  path: e,
@@ -6,7 +6,7 @@ const x = (t, e, n) => Object.entries(t).flatMap(([a, p]) => {
6
6
  return s ? {
7
7
  path: s,
8
8
  lazy: async () => {
9
- const { MdxPage: i } = await import("./MdxPage-BcftTg5g.js"), { default: m, ...l } = await p();
9
+ const { MdxPage: i } = await import("./MdxPage-BqBWsXZ1.js"), { default: m, ...l } = await p();
10
10
  return {
11
11
  element: /* @__PURE__ */ u.jsx(
12
12
  i,
@@ -1,15 +1,16 @@
1
1
  import "./jsx-runtime-B6kdoens.js";
2
- import { o as s } from "./index-DIkaYL-l.js";
2
+ import { o as u } from "./index-BlJ2rj99.js";
3
3
  import "./urql-YhcsXYy8.js";
4
- import "./ZudokuContext-em1gHkIY.js";
4
+ import "./ZudokuContext-cr-pTRY1.js";
5
5
  import "lucide-react";
6
6
  import "zudoku/openapi-worker";
7
- import "./index-BoXX7LeD.js";
8
- import "./ErrorPage-knunPbKI.js";
9
- import "./Markdown-B4aR03g6.js";
7
+ import "./index-Dolisrci.js";
8
+ import "./ErrorPage-CsZAN_za.js";
9
+ import "./Markdown-DapSf3wG.js";
10
+ import "./joinPath-B7kNnUX4.js";
10
11
  import "./router-D2p7Olpn.js";
11
12
  import "./index-BG0g4WW0.js";
12
13
  export {
13
- s as openApiPlugin
14
+ u as openApiPlugin
14
15
  };
15
16
  //# sourceMappingURL=zudoku.plugin-openapi.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
1
+ {"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,7 +1,16 @@
1
1
  {
2
2
  "name": "zudoku",
3
- "version": "0.0.0-eff6f9b",
3
+ "version": "0.0.0-f114fe8",
4
4
  "type": "module",
5
+ "homepage": "https://zudoku.dev",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/zuplo/zudoku.git"
9
+ },
10
+ "bugs": {
11
+ "url": "https://github.com/zuplo/zudoku/issues"
12
+ },
13
+ "description": "Framework for building high quality, interactive API documentation.",
5
14
  "files": [
6
15
  "dist",
7
16
  "lib",
@@ -102,6 +111,7 @@
102
111
  "@radix-ui/react-select": "2.1.1",
103
112
  "@radix-ui/react-visually-hidden": "1.1.0",
104
113
  "@sentry/node": "8.11.0",
114
+ "@sindresorhus/slugify": "2.2.1",
105
115
  "@stefanprobst/rehype-extract-toc": "2.2.0",
106
116
  "@tailwindcss/typography": "0.5.13",
107
117
  "@tanstack/react-query": "5.50.1",
@@ -111,7 +121,7 @@
111
121
  "chokidar": "^3.6.0",
112
122
  "class-variance-authority": "0.7.0",
113
123
  "dotenv": "16.4.5",
114
- "express": "4.19.2",
124
+ "express": "4.20.0",
115
125
  "glob": "^11.0.0",
116
126
  "graphql": "16.9.0",
117
127
  "graphql-type-json": "0.3.2",
@@ -147,7 +157,6 @@
147
157
  "rollup": "^4.21.2",
148
158
  "semver": "7.6.2",
149
159
  "sitemap": "^8.0.0",
150
- "slugify": "1.6.6",
151
160
  "strip-ansi": "7.1.0",
152
161
  "tailwind-merge": "2.5.2",
153
162
  "tailwindcss": "3.4.4",
@@ -1,4 +1,5 @@
1
1
  import { create } from "zustand";
2
+ import { persist } from "zustand/middleware";
2
3
 
3
4
  export const useAuthState = create<AuthState>(() => ({
4
5
  isPending: false,
@@ -19,3 +20,19 @@ export interface UserProfile {
19
20
  pictureUrl: string | undefined;
20
21
  [key: string]: string | boolean | undefined;
21
22
  }
23
+
24
+ interface SelectedServerState {
25
+ selectedServer?: string;
26
+ setSelectedServer: (newServer: string) => void;
27
+ }
28
+
29
+ export const useSelectedServerStore = create<SelectedServerState>()(
30
+ persist(
31
+ (set) => ({
32
+ selectedServer: undefined,
33
+ setSelectedServer: (newServer: string) =>
34
+ set({ selectedServer: newServer }),
35
+ }),
36
+ { name: "zudoku-selected-server" },
37
+ ),
38
+ );
@@ -1,5 +1,4 @@
1
1
  import type { ReactNode } from "react";
2
- import { Link } from "react-router-dom";
3
2
  import { CategoryHeading } from "./CategoryHeading.js";
4
3
  import { Heading } from "./Heading.js";
5
4
  import { ProseClasses } from "./Markdown.js";
@@ -22,7 +21,6 @@ export const ErrorPage = ({
22
21
  </Heading>
23
22
  )}
24
23
  <p>{message}</p>
25
- <Link to="/">Go back home</Link>
26
24
  </div>
27
25
  );
28
26
  };
@@ -4,11 +4,21 @@ import { cn } from "../util/cn.js";
4
4
  export const InlineCode = ({
5
5
  className,
6
6
  children,
7
+ selectOnClick,
7
8
  }: {
8
9
  className?: string;
9
10
  children: ReactNode;
11
+ selectOnClick?: boolean;
10
12
  }) => (
11
13
  <code
14
+ onClick={(e) => {
15
+ if (!selectOnClick) return;
16
+ const selection = window.getSelection();
17
+ const range = document.createRange();
18
+ range.selectNodeContents(e.currentTarget);
19
+ selection?.removeAllRanges();
20
+ selection?.addRange(range);
21
+ }}
12
22
  className={cn(
13
23
  "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
14
24
  className,
@@ -53,7 +53,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
53
53
  <div className="w-full max-w-screen-2xl mx-auto px-10 lg:px-12">
54
54
  <Suspense
55
55
  fallback={
56
- <main className="grid h-full place-items-center">
56
+ <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
57
57
  <Spinner />
58
58
  </main>
59
59
  }
@@ -1,10 +1,13 @@
1
1
  /* eslint-disable @typescript-eslint/no-explicit-any */
2
2
  import SchemaBuilder from "@pothos/core";
3
+ import {
4
+ slugifyWithCounter,
5
+ type CountableSlugify,
6
+ } from "@sindresorhus/slugify";
3
7
  import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
4
8
  import { createYoga, type YogaServerOptions } from "graphql-yoga";
5
9
  import { LRUCache } from "lru-cache";
6
10
  import hashit from "object-hash";
7
- import slugify from "../../util/slugify.js";
8
11
  import {
9
12
  HttpMethods,
10
13
  validate,
@@ -15,6 +18,7 @@ import {
15
18
  type ParameterObject,
16
19
  type PathsObject,
17
20
  type SchemaObject,
21
+ type ServerObject,
18
22
  type TagObject,
19
23
  } from "../parser/index.js";
20
24
 
@@ -35,7 +39,12 @@ type OperationLike = {
35
39
  path: string;
36
40
  method: string;
37
41
  };
38
- export const slugifyOperation = (operation: OperationLike, tag?: string) => {
42
+
43
+ export const createOperationSlug = (
44
+ slugify: CountableSlugify,
45
+ operation: OperationLike,
46
+ tag?: string,
47
+ ) => {
39
48
  const summary =
40
49
  (operation.summary ?? "") +
41
50
  (operation.operationId
@@ -46,7 +55,6 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
46
55
  return slugify(
47
56
  (tag ? tag + "-" : "") +
48
57
  (summary || `${operation.method}-${operation.path}`),
49
- { lower: true, trim: true },
50
58
  );
51
59
  };
52
60
 
@@ -88,6 +96,8 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
88
96
  };
89
97
 
90
98
  const getAllOperations = (paths?: PathsObject, tag?: string) => {
99
+ const slugify = slugifyWithCounter();
100
+
91
101
  return Object.entries(paths ?? {}).flatMap(([path, value]) =>
92
102
  HttpMethods.flatMap((method) => {
93
103
  if (!value?.[method]) return [];
@@ -109,21 +119,20 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
109
119
  ...operationParameters,
110
120
  ];
111
121
 
122
+ const slugData = {
123
+ summary: operation.summary,
124
+ operationId: operation.operationId,
125
+ path,
126
+ method,
127
+ };
128
+
112
129
  return {
113
130
  ...operation,
114
131
  method,
115
132
  path,
116
133
  parameters,
117
134
  tags: operation.tags ?? [],
118
- slug: slugifyOperation(
119
- {
120
- summary: operation.summary,
121
- operationId: operation.operationId,
122
- path,
123
- method,
124
- },
125
- tag,
126
- ),
135
+ slug: createOperationSlug(slugify, slugData, tag),
127
136
  };
128
137
  }),
129
138
  );
@@ -150,6 +159,13 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
150
159
  }),
151
160
  });
152
161
 
162
+ const ServerItem = builder.objectRef<ServerObject>("Server").implement({
163
+ fields: (t) => ({
164
+ url: t.exposeString("url"),
165
+ description: t.exposeString("description", { nullable: true }),
166
+ }),
167
+ });
168
+
153
169
  const PathItem = builder
154
170
  .objectRef<{
155
171
  path: string;
@@ -363,6 +379,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
363
379
  fields: (t) => ({
364
380
  openapi: t.string({ resolve: (root) => root.openapi }),
365
381
  url: t.string({ resolve: (root) => root.servers?.at(0)?.url ?? "/" }),
382
+ servers: t.field({
383
+ type: [ServerItem],
384
+ resolve: (root) => root.servers ?? [],
385
+ }),
366
386
  title: t.string({ resolve: (root) => root.info.title }),
367
387
  version: t.string({ resolve: (root) => root.info.version }),
368
388
  description: t.string({
@@ -20,6 +20,7 @@ export type TagObject = DeepOmitReference<OpenAPIV3_1.TagObject>;
20
20
  export type ExampleObject = DeepOmitReference<OpenAPIV3_1.ExampleObject>;
21
21
  export type EncodingObject = DeepOmitReference<OpenAPIV3_1.EncodingObject>;
22
22
  export type SchemaObject = DeepOmitReference<OpenAPIV3_1.SchemaObject>;
23
+ export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
23
24
 
24
25
  export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
25
26
 
@@ -1,4 +1,5 @@
1
1
  import { useMDXComponents } from "@mdx-js/react";
2
+ import slugify from "@sindresorhus/slugify";
2
3
  import { Helmet } from "@zudoku/react-helmet-async";
3
4
  import { type PropsWithChildren } from "react";
4
5
  import { Link } from "react-router-dom";
@@ -11,7 +12,6 @@ import {
11
12
  } from "../../components/navigation/utils.js";
12
13
  import type { MdxComponentsType } from "../../util/MdxComponents.js";
13
14
  import { cn } from "../../util/cn.js";
14
- import slugify from "../../util/slugify.js";
15
15
  import { Toc } from "./Toc.js";
16
16
  import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
17
17
 
@@ -71,7 +71,7 @@ export const MdxPage = ({
71
71
  <header>
72
72
  {category && <CategoryHeading>{category}</CategoryHeading>}
73
73
  {title && (
74
- <Heading level={1} id={slugify(title, { lower: true })}>
74
+ <Heading level={1} id={slugify(title)}>
75
75
  {title}
76
76
  </Heading>
77
77
  )}
@@ -1,31 +1,95 @@
1
1
  import { CheckIcon, CopyIcon } from "lucide-react";
2
- import { useState } from "react";
2
+ import { useState, useTransition } from "react";
3
+ import { useSelectedServerStore } from "../../authentication/state.js";
3
4
  import { InlineCode } from "../../components/InlineCode.js";
5
+ import { Button } from "../../ui/Button.js";
6
+ import { useOasConfig } from "./context.js";
7
+ import { graphql } from "./graphql/index.js";
8
+ import { SimpleSelect } from "./SimpleSelect.js";
9
+ import { useQuery } from "./util/urql.js";
4
10
 
5
- export const Endpoint = ({ url }: { url: string }) => {
11
+ const ServersQuery = graphql(/* GraphQL */ `
12
+ query ServersQuery($input: JSON!, $type: SchemaType!) {
13
+ schema(input: $input, type: $type) {
14
+ url
15
+ servers {
16
+ url
17
+ }
18
+ }
19
+ }
20
+ `);
21
+
22
+ const CopyButton = ({ url }: { url: string }) => {
6
23
  const [isCopied, setIsCopied] = useState(false);
7
24
 
8
25
  return (
9
- <div className="my-4 flex items-center justify-end gap-2 text-sm">
10
- <span className="font-medium">Endpoint:</span>
11
- <InlineCode className="p-1.5 flex gap-2.5 items-center text-xs">
12
- {url}
13
- <button
14
- onClick={() => {
15
- void navigator.clipboard.writeText(url).then(() => {
16
- setIsCopied(true);
17
- setTimeout(() => setIsCopied(false), 2000);
18
- });
19
- }}
20
- type="button"
21
- >
22
- {isCopied ? (
23
- <CheckIcon className="text-green-600" size={14} />
24
- ) : (
25
- <CopyIcon size={14} strokeWidth={1.3} />
26
- )}
27
- </button>
28
- </InlineCode>
26
+ <Button
27
+ onClick={() => {
28
+ void navigator.clipboard.writeText(url).then(() => {
29
+ setIsCopied(true);
30
+ setTimeout(() => setIsCopied(false), 2000);
31
+ });
32
+ }}
33
+ variant="ghost"
34
+ size="icon"
35
+ >
36
+ {isCopied ? (
37
+ <CheckIcon className="text-green-600" size={14} />
38
+ ) : (
39
+ <CopyIcon size={14} strokeWidth={1.3} />
40
+ )}
41
+ </Button>
42
+ );
43
+ };
44
+
45
+ const context = { suspense: true } as const;
46
+
47
+ export const Endpoint = () => {
48
+ const [result] = useQuery({
49
+ query: ServersQuery,
50
+ variables: useOasConfig(),
51
+ context,
52
+ });
53
+ const [, startTransition] = useTransition();
54
+ const { selectedServer, setSelectedServer } = useSelectedServerStore();
55
+
56
+ if (!result.data) return null;
57
+
58
+ const { servers } = result.data.schema;
59
+
60
+ if (servers.length === 1) {
61
+ return (
62
+ <div className="flex items-center gap-2">
63
+ <span className="font-medium text-sm">Endpoint:</span>
64
+ <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
65
+ {servers[0].url}
66
+ </InlineCode>
67
+ <CopyButton url={servers[0].url} />
68
+ </div>
69
+ );
70
+ }
71
+
72
+ return (
73
+ <div className="flex flex-wrap items-center gap-2">
74
+ <span className="font-medium text-sm">
75
+ {servers.length > 1 ? "Endpoints" : "Endpoint"}:
76
+ </span>
77
+
78
+ <SimpleSelect
79
+ className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
80
+ onChange={(e) =>
81
+ startTransition(() => {
82
+ setSelectedServer(e.target.value);
83
+ })
84
+ }
85
+ value={selectedServer ?? result.data.schema.url}
86
+ showChevrons={servers.length > 1}
87
+ options={servers.map((server) => ({
88
+ value: server.url,
89
+ label: server.url,
90
+ }))}
91
+ />
92
+ <CopyButton url={selectedServer ?? result.data.schema.url} />
29
93
  </div>
30
94
  );
31
95
  };
@@ -133,7 +133,9 @@ export const OperationList = () => {
133
133
  <Markdown content={result.data.schema.description ?? ""} />
134
134
  </div>
135
135
  <hr />
136
- <Endpoint url={result.data.schema.url} />
136
+ <div className="my-4 flex justify-end">
137
+ <Endpoint />
138
+ </div>
137
139
 
138
140
  {result.data.schema.tags
139
141
  .filter((tag) => tag.operations.length > 0)
@@ -3,9 +3,11 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
3
3
 
4
4
  export const PlaygroundDialogWrapper = ({
5
5
  server,
6
+ servers,
6
7
  operation,
7
8
  }: {
8
9
  server: string;
10
+ servers?: string[];
9
11
  operation: OperationListItemResult;
10
12
  }) => {
11
13
  const headers = operation.parameters
@@ -29,6 +31,7 @@ export const PlaygroundDialogWrapper = ({
29
31
  return (
30
32
  <PlaygroundDialog
31
33
  server={server}
34
+ servers={servers}
32
35
  method={operation.method}
33
36
  url={operation.path}
34
37
  headers={headers}
@@ -1,6 +1,7 @@
1
1
  import { HTTPSnippet } from "@zudoku/httpsnippet";
2
2
  import { Fragment, useMemo, useTransition } from "react";
3
3
  import { useSearchParams } from "react-router-dom";
4
+ import { useSelectedServerStore } from "../../authentication/state.js";
4
5
  import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
5
6
  import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
6
7
  import type { SchemaObject } from "../../oas/parser/index.js";
@@ -65,6 +66,9 @@ export const GetServerQuery = graphql(/* GraphQL */ `
65
66
  query getServerQuery($input: JSON!, $type: SchemaType!) {
66
67
  schema(input: $input, type: $type) {
67
68
  url
69
+ servers {
70
+ url
71
+ }
68
72
  }
69
73
  }
70
74
  `);
@@ -135,6 +139,8 @@ export const Sidecar = ({
135
139
  );
136
140
  });
137
141
 
142
+ const { selectedServer } = useSelectedServerStore();
143
+
138
144
  const code = useMemo(() => {
139
145
  const example = requestBodyContent?.[0]?.schema
140
146
  ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
@@ -143,7 +149,7 @@ export const Sidecar = ({
143
149
  const snippet = new HTTPSnippet({
144
150
  method: operation.method.toLocaleUpperCase(),
145
151
  url:
146
- (result.data?.schema.url ?? "") +
152
+ (selectedServer ?? result.data?.schema.url ?? "") +
147
153
  operation.path.replaceAll("{", ":").replaceAll("}", ""),
148
154
  postData: example
149
155
  ? {
@@ -160,7 +166,13 @@ export const Sidecar = ({
160
166
  });
161
167
 
162
168
  return getConverted(snippet, selectedLang);
163
- }, [selectedLang, operation.method, operation.path, requestBodyContent]);
169
+ }, [
170
+ selectedServer,
171
+ selectedLang,
172
+ operation.method,
173
+ operation.path,
174
+ requestBodyContent,
175
+ ]);
164
176
 
165
177
  return (
166
178
  <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -175,6 +187,9 @@ export const Sidecar = ({
175
187
  </span>
176
188
  <PlaygroundDialogWrapper
177
189
  server={result.data?.schema.url ?? ""}
190
+ servers={
191
+ result.data?.schema.servers.map((server) => server.url) ?? []
192
+ }
178
193
  operation={operation}
179
194
  />
180
195
  </SidecarBox.Head>
@@ -7,6 +7,7 @@ export const SimpleSelect = ({
7
7
  onChange,
8
8
  className,
9
9
  options,
10
+ showChevrons = true,
10
11
  }: {
11
12
  value: string;
12
13
  onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -15,12 +16,14 @@ export const SimpleSelect = ({
15
16
  value: string;
16
17
  label: string;
17
18
  }[];
19
+ showChevrons?: boolean;
18
20
  }) => (
19
- <div className={cn("grid", className)}>
21
+ <div className="grid">
20
22
  <select
21
23
  className={cn(
22
24
  "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
23
25
  "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
26
+ className,
24
27
  )}
25
28
  value={value}
26
29
  onChange={onChange}
@@ -31,7 +34,12 @@ export const SimpleSelect = ({
31
34
  </option>
32
35
  ))}
33
36
  </select>
34
- <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
37
+ <div
38
+ className={cn(
39
+ !showChevrons && "hidden",
40
+ "row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none",
41
+ )}
42
+ >
35
43
  <ChevronsUpDownIcon size={14} />
36
44
  </div>
37
45
  </div>
@@ -13,11 +13,13 @@ import * as types from "./graphql.js";
13
13
  * Therefore it is highly recommended to use the babel or swc plugin for production.
14
14
  */
15
15
  const documents = {
16
+ "\n query ServersQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n servers {\n url\n }\n }\n }\n":
17
+ types.ServersQueryDocument,
16
18
  "\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":
17
19
  types.OperationsFragmentFragmentDoc,
18
20
  "\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":
19
21
  types.AllOperationsDocument,
20
- "\n query getServerQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n }\n }\n":
22
+ "\n query getServerQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n servers {\n url\n }\n }\n }\n":
21
23
  types.GetServerQueryDocument,
22
24
  "\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":
23
25
  types.GetCategoriesDocument,
@@ -37,6 +39,12 @@ const documents = {
37
39
  */
38
40
  export function graphql(source: string): unknown;
39
41
 
42
+ /**
43
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
44
+ */
45
+ export function graphql(
46
+ source: "\n query ServersQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n servers {\n url\n }\n }\n }\n",
47
+ ): (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"];
40
48
  /**
41
49
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
42
50
  */
@@ -53,8 +61,8 @@ export function graphql(
53
61
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
54
62
  */
55
63
  export function graphql(
56
- source: "\n query getServerQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n }\n }\n",
57
- ): (typeof documents)["\n query getServerQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n }\n }\n"];
64
+ source: "\n query getServerQuery($input: JSON!, $type: SchemaType!) {\n schema(input: $input, type: $type) {\n url\n servers {\n url\n }\n }\n }\n",
65
+ ): (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"];
58
66
  /**
59
67
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
60
68
  */