mirror of
https://github.com/zoriya/elysia-swagger.git
synced 2026-06-04 22:40:36 +00:00
fix: update theme, docs and add scalar config
This commit is contained in:
marclave
@@ -47,6 +47,13 @@ Then go to `http://localhost:8080/swagger`.
|
||||
|
||||
# config
|
||||
|
||||
## provider
|
||||
@default 'scalar'
|
||||
Choose between [Scalar](https://swagger.io/specification/v2/) & [SwaggerUI](https://github.com/swagger-api/swagger-ui)
|
||||
|
||||
## scalar
|
||||
Customize scalarConfig, refers to [Scalar config](https://github.com/scalar/scalar)
|
||||
|
||||
## swagger
|
||||
Customize Swagger config, refers to [Swagger 2.0 config](https://swagger.io/specification/v2/)
|
||||
|
||||
|
||||
+2
-1
@@ -47,9 +47,10 @@
|
||||
"typescript": "^5.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@scalar/api-reference": "^1.12.5",
|
||||
"@types/lodash.clonedeep": "^4.5.7",
|
||||
"@types/swagger-ui": "^3.52.2",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"openapi-types": "^12.1.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+11
-1
@@ -4,6 +4,7 @@ import { type Elysia, type InternalRoute } from 'elysia'
|
||||
import { filterPaths, registerSchemaPath } from './utils'
|
||||
|
||||
import type { OpenAPIV3 } from 'openapi-types'
|
||||
import type { ReferenceConfiguration } from '@scalar/api-reference'
|
||||
import type { ElysiaSwaggerConfig } from './types'
|
||||
import { SwaggerUIRender } from './swagger-ui'
|
||||
import { ScalarRender } from './scalar'
|
||||
@@ -18,6 +19,7 @@ export const swagger =
|
||||
{
|
||||
provider = 'scalar',
|
||||
scalarVersion = '1.12.5',
|
||||
scalarConfig = {},
|
||||
documentation = {},
|
||||
version = '5.9.0',
|
||||
excludeStaticFile = true,
|
||||
@@ -29,6 +31,7 @@ export const swagger =
|
||||
}: ElysiaSwaggerConfig<Path> = {
|
||||
provider: 'scalar',
|
||||
scalarVersion: '1.12.5',
|
||||
scalarConfig: {},
|
||||
documentation: {},
|
||||
version: '5.9.0',
|
||||
excludeStaticFile: true,
|
||||
@@ -71,8 +74,15 @@ export const swagger =
|
||||
}
|
||||
)
|
||||
|
||||
const scalarConfiguration: ReferenceConfiguration = {
|
||||
spec: {
|
||||
url: `${relativePath}/json`
|
||||
},
|
||||
...scalarConfig
|
||||
}
|
||||
|
||||
return new Response(provider === 'swagger-ui' ? SwaggerUIRender(info, version, theme, stringifiedSwaggerOptions, autoDarkMode) : ScalarRender(`${relativePath}/json`, scalarVersion),
|
||||
|
||||
return new Response(provider === 'swagger-ui' ? SwaggerUIRender(info, version, theme, stringifiedSwaggerOptions, autoDarkMode) : ScalarRender(scalarVersion, scalarConfiguration),
|
||||
{
|
||||
headers: {
|
||||
'content-type': 'text/html; charset=utf8'
|
||||
|
||||
+106
-65
@@ -1,6 +1,4 @@
|
||||
export default `:root {
|
||||
--theme-font: "Inter", var(--system-fonts);
|
||||
}
|
||||
export default `
|
||||
/* basic theme */
|
||||
.light-mode {
|
||||
--theme-color-1: #2a2f45;
|
||||
@@ -43,6 +41,20 @@ export default `:root {
|
||||
--sidebar-search-border-color: var(--theme-border-color);
|
||||
--sidebar-search--color: var(--theme-color-3);
|
||||
}
|
||||
/* Document header only shows on mobile*/
|
||||
.dark-mode .t-doc__header,
|
||||
.light-mode .t-doc__header {
|
||||
--header-background-1: rgba(255, 255, 255, 0.85);
|
||||
--header-border-color: transparent;
|
||||
--header-color-1: var(--theme-color-1);
|
||||
--header-color-2: var(--theme-color-2);
|
||||
--header-background-toggle: var(--theme-color-3);
|
||||
--header-call-to-action-color: var(--theme-color-accent);
|
||||
}
|
||||
|
||||
.dark-mode .t-doc__header {
|
||||
--header-background-1: rgba(17, 23, 40, 0.75);
|
||||
}
|
||||
|
||||
/* advanced */
|
||||
.light-mode {
|
||||
@@ -75,61 +87,7 @@ export default `:root {
|
||||
--theme-scrollbar-color: rgba(255, 255, 255, 0.24);
|
||||
--theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);
|
||||
}
|
||||
.section-container:first-of-type:after,
|
||||
.section-container:first-of-type:before {
|
||||
--stripes: repeating-linear-gradient(
|
||||
100deg,
|
||||
#fff 0%,
|
||||
#fff 0%,
|
||||
transparent 2%,
|
||||
transparent 12%,
|
||||
#fff 17%
|
||||
);
|
||||
--stripesDark: repeating-linear-gradient(
|
||||
100deg,
|
||||
#000 0%,
|
||||
#000 0%,
|
||||
transparent 10%,
|
||||
transparent 12%,
|
||||
#000 17%
|
||||
);
|
||||
--rainbow: repeating-linear-gradient(
|
||||
100deg,
|
||||
#60a5fa 10%,
|
||||
#e879f9 16%,
|
||||
#5eead4 22%,
|
||||
#60a5fa 30%
|
||||
);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 200px;
|
||||
background-image: var(--stripesDark), var(--rainbow);
|
||||
background-size: 200%, 100%;
|
||||
background-attachment: fixed;
|
||||
mix-blend-mode: difference;
|
||||
filter: opacity(10%) saturate(200%);
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse at 100% 0%,
|
||||
black 40%,
|
||||
transparent 75%
|
||||
);
|
||||
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 75%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.section-container:first-of-type:after {
|
||||
mix-blend-mode: unset;
|
||||
}
|
||||
.light-mode .section-container:first-of-type:after,
|
||||
.light-mode .section-container:first-of-type:before {
|
||||
background-image: var(--stripes), var(--rainbow);
|
||||
filter: opacity(4%) saturate(200%);
|
||||
mix-blend-mode: unset;
|
||||
}
|
||||
/* Elysia Specific */
|
||||
.scalar-api-client__send-request-button,
|
||||
.show-api-client-button {
|
||||
background: #3c82f6 !important;
|
||||
@@ -137,13 +95,7 @@ export default `:root {
|
||||
.show-api-client-button:before {
|
||||
display: none;
|
||||
}
|
||||
.section-container .section:first-of-type {
|
||||
border-bottom: 1px solid
|
||||
var(--theme-border-color, var(--default-theme-border-color));
|
||||
}
|
||||
.section-container[data-v-fcff76dc]:not(:first-of-type) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidebar-search:hover {
|
||||
transition: all 0.15s ease-in-out;
|
||||
--sidebar-search-border-color: var(--theme-color-accent) !important;
|
||||
@@ -152,4 +104,93 @@ export default `:root {
|
||||
.scalar-api-client__container .sidebar {
|
||||
--sidebar-border-color: var(--theme-border-color);
|
||||
}
|
||||
@media (min-width: 1150px) {
|
||||
.section-container:has( ~ .footer):before,
|
||||
.tag-section-container:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: linear-gradient(90deg, var(--theme-background-1) 3%,transparent 10%);
|
||||
}
|
||||
}
|
||||
.section-flare {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 300px;
|
||||
--stripes: repeating-linear-gradient(
|
||||
100deg,
|
||||
#fff 0%,
|
||||
#fff 7%,
|
||||
transparent 10%,
|
||||
transparent 12%,
|
||||
#fff 16%
|
||||
);
|
||||
--stripesDark: repeating-linear-gradient(
|
||||
100deg,
|
||||
#000 0%,
|
||||
#000 7%,
|
||||
transparent 10%,
|
||||
transparent 12%,
|
||||
#000 16%
|
||||
);
|
||||
--rainbow: repeating-linear-gradient(
|
||||
100deg,
|
||||
#60a5fa 10%,
|
||||
#e879f9 16%,
|
||||
#5eead4 22%,
|
||||
#60a5fa 30%
|
||||
);
|
||||
background-image: var(--stripes), var(--rainbow);
|
||||
background-size: 300%, 200%;
|
||||
background-position: 50% 50%, 50% 50%;
|
||||
filter: invert(100%);
|
||||
-webkit-mask-image: radial-gradient(
|
||||
ellipse at 100% 0%,
|
||||
black 40%,
|
||||
transparent 70%
|
||||
);
|
||||
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
}
|
||||
.dark-mode .section-flare {
|
||||
background-image: var(--stripesDark), var(--rainbow);
|
||||
filter: opacity(50%) saturate(200%);
|
||||
opacity: 0.25;
|
||||
}
|
||||
.section-flare:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: var(--stripes), var(--rainbow);
|
||||
background-size: 200%, 100%;
|
||||
background-attachment: fixed;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.dark-mode .section-flare:after {
|
||||
background-image: var(--stripesDark), var(--rainbow);
|
||||
}
|
||||
@keyframes headerbackground {
|
||||
from {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
to {
|
||||
background: var(--header-background-1);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
}
|
||||
.light-mode .t-doc__header,
|
||||
.dark-mode .t-doc__header {
|
||||
animation: headerbackground forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0px 200px;
|
||||
--header-border-color: transparent;
|
||||
}
|
||||
`
|
||||
+4
-3
@@ -1,6 +1,7 @@
|
||||
import type { ReferenceConfiguration } from '@scalar/api-reference'
|
||||
import scalarElysiaTheme from './scalar-elysia-theme'
|
||||
|
||||
export const ScalarRender = (specUrl: string, version: string, customCss?: string) => `<!doctype html>
|
||||
export const ScalarRender = (version: string, config: ReferenceConfiguration) => `<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>API Reference</title>
|
||||
@@ -14,13 +15,13 @@ export const ScalarRender = (specUrl: string, version: string, customCss?: strin
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
${customCss ?? scalarElysiaTheme}
|
||||
${config.customCss ?? scalarElysiaTheme}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script
|
||||
id="api-reference"
|
||||
data-url="${specUrl}"></script>
|
||||
data-url="${config.spec?.url}"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference@${version}/dist/browser/standalone.min.js"></script>
|
||||
</body>
|
||||
</html>`
|
||||
+8
-1
@@ -1,6 +1,6 @@
|
||||
import type { OpenAPIV3 } from 'openapi-types'
|
||||
import type { SwaggerUIOptions } from 'swagger-ui'
|
||||
|
||||
import type { ReferenceConfiguration } from '@scalar/api-reference'
|
||||
|
||||
export type SwaggerInfo = {
|
||||
title: string
|
||||
@@ -34,6 +34,13 @@ export interface ElysiaSwaggerConfig<Path extends string = '/swagger'> {
|
||||
* @see https://github.com/scalar/scalar
|
||||
*/
|
||||
scalarVersion?: string
|
||||
/**
|
||||
* Scalar configuration to customize scalar
|
||||
*
|
||||
* @default '1.12.5'
|
||||
* @see https://github.com/scalar/scalar
|
||||
*/
|
||||
scalarConfig?: ReferenceConfiguration
|
||||
/**
|
||||
* Version to use for swagger cdn bundle
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user