diff --git a/.changeset/short-bears-sneeze.md b/.changeset/short-bears-sneeze.md new file mode 100644 index 000000000..11f739ede --- /dev/null +++ b/.changeset/short-bears-sneeze.md @@ -0,0 +1,5 @@ +--- +"openapi-metadata": patch +--- + +Add configuration options for Scalar UI generation diff --git a/docs/openapi-metadata/examples.md b/docs/openapi-metadata/examples.md index ac8bc4caa..a676fe5fe 100644 --- a/docs/openapi-metadata/examples.md +++ b/docs/openapi-metadata/examples.md @@ -23,7 +23,7 @@ app.get("/api", async (req, res) => { }); app.get("/api/docs", (req, res) => { - const ui = generateScalarUI("/api"); + const ui = generateScalarUI("/api", { theme: "purple" }); res.send(ui); }); ``` @@ -45,7 +45,7 @@ app.get("/api", async () => { }); app.get("/api/docs", () => { - const ui = generateScalarUI("/api"); + const ui = generateScalarUI("/api", { theme: "purple" }); return ui; }); ``` diff --git a/docs/openapi-metadata/ui.md b/docs/openapi-metadata/ui.md index 104da61a0..8738d3b0f 100644 --- a/docs/openapi-metadata/ui.md +++ b/docs/openapi-metadata/ui.md @@ -11,7 +11,7 @@ title: UI integrations ```ts twoslash import { generateScalarUI } from "openapi-metadata/ui"; -generateScalarUI("http://localhost:3000/api"); +generateScalarUI("http://localhost:3000/api", { theme: "purple" }); ``` ## [Swagger UI](https://swagger.io/tools/swagger-ui/) diff --git a/packages/openapi-metadata/src/ui/scalar.ts b/packages/openapi-metadata/src/ui/scalar.ts index 1d7e9a87c..41008ce15 100644 --- a/packages/openapi-metadata/src/ui/scalar.ts +++ b/packages/openapi-metadata/src/ui/scalar.ts @@ -1,9 +1,64 @@ +/** + * Options for generating the Scalar UI. + * + * See: https://guides.scalar.com/scalar/scalar-api-references/configuration + */ +export type GenerateScalarUIOptions = { + url?: string; + content?: string | object | (() => object) | null; + title?: string; + slug?: string; + baseServerURL?: string; + hideClientButton?: boolean; + proxyUrl?: string; + searchHotKey?: string; + servers?: any[]; + showSidebar?: boolean; + theme?: + | "alternate" + | "default" + | "moon" + | "purple" + | "solarized" + | "bluePlanet" + | "deepSpace" + | "saturn" + | "kepler" + | "elysiajs" + | "fastify" + | "mars" + | "laserwave" + | "none"; + persistAuth?: boolean; + plugins?: any[]; + layout?: "modern" | "classic"; + isLoading?: boolean; + hideModels?: boolean; + documentDownloadType?: "yaml" | "json" | "both" | "none"; + hideDownloadButton?: boolean; + hideTestRequestButton?: boolean; + hideSearch?: boolean; + darkMode?: boolean; + forceDarkModeState?: "dark" | "light"; + hideDarkModeToggle?: boolean; + metaData?: any; + favicon?: string; + hiddenClients?: Record | string[] | true; + defaultHttpClient?: { targetKey: string; clientKey: string }; + customCss?: string; + pathRouting?: { basePath: string }; + withDefaultFonts?: boolean; + defaultOpenAllTags?: boolean; + tagsSorter?: "alpha" | ((a: any, b: any) => number); + operationsSorter?: "alpha" | "method" | ((a: any, b: any) => number); +}; + /** * Generates HTML to display Scalar UI. * * @see https://scalar.com/ */ -export function generateScalarUI(url: string) { +export function generateScalarUI(url: string, options: Omit = {}) { return ` @@ -15,11 +70,15 @@ export function generateScalarUI(url: string) { content="width=device-width, initial-scale=1" /> - +
+ `;