@scalar/hono-api-reference 0.1.0
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.
- package/LICENSE +21 -0
- package/README.md +51 -0
- package/dist/index.cjs +179 -0
- package/dist/index.d.cts +21 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.js +150 -0
- package/package.json +48 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Scalar
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# Scalar Hono API Reference Plugin
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
[](https://discord.gg/8HeZcRGPFS)
|
|
7
|
+
|
|
8
|
+
This middleware provides an easy way to render a beautiful API reference based on an OpenAPI/Swagger file with Hono.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @scalar/hono-api-reference
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
Set up [Zod OpenAPI Hono](https://hono.dev/guides/openapi) and pass the configured URL to the `apiReference` middleware:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { apiReference } from '@scalar/hono-api-reference'
|
|
22
|
+
|
|
23
|
+
app.get(
|
|
24
|
+
'/reference',
|
|
25
|
+
apiReference({
|
|
26
|
+
spec: {
|
|
27
|
+
url: '/swagger.json',
|
|
28
|
+
},
|
|
29
|
+
}),
|
|
30
|
+
)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
The Hono middleware takes our universal configuration object, [read more about configuration](https://github.com/scalar/scalar/tree/main/packages/api-reference#props) in the core package README.
|
|
34
|
+
|
|
35
|
+
### Custom page title
|
|
36
|
+
|
|
37
|
+
There’s one additional option to set the page title:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import { apiReference } from '@scalar/hono-api-reference'
|
|
41
|
+
|
|
42
|
+
app.get(
|
|
43
|
+
'/reference',
|
|
44
|
+
apiReference({
|
|
45
|
+
pageTitle: 'Hono API Reference',
|
|
46
|
+
spec: {
|
|
47
|
+
url: '/swagger.json',
|
|
48
|
+
},
|
|
49
|
+
}),
|
|
50
|
+
)
|
|
51
|
+
```
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
ApiReference: () => ApiReference,
|
|
24
|
+
apiReference: () => apiReference,
|
|
25
|
+
customThemeCSS: () => customThemeCSS
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(src_exports);
|
|
28
|
+
|
|
29
|
+
// src/honoApiReference.ts
|
|
30
|
+
var import_html = require("hono/html");
|
|
31
|
+
var customThemeCSS = `
|
|
32
|
+
:root {
|
|
33
|
+
--theme-font: 'Inter', var(--system-fonts);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.light-mode {
|
|
37
|
+
color-scheme: light;
|
|
38
|
+
--theme-color-1: #2a2f45;
|
|
39
|
+
--theme-color-2: #757575;
|
|
40
|
+
--theme-color-3: #8e8e8e;
|
|
41
|
+
--theme-color-disabled: #b4b1b1;
|
|
42
|
+
--theme-color-ghost: #a7a7a7;
|
|
43
|
+
--theme-color-accent: #0099ff;
|
|
44
|
+
--theme-background-1: #fff;
|
|
45
|
+
--theme-background-2: #f6f6f6;
|
|
46
|
+
--theme-background-3: #e7e7e7;
|
|
47
|
+
--theme-background-4: rgba(0, 0, 0, 0.06);
|
|
48
|
+
--theme-background-accent: #8ab4f81f;
|
|
49
|
+
|
|
50
|
+
--theme-border-color: rgba(0, 0, 0, 0.1);
|
|
51
|
+
--theme-scrollbar-color: rgba(0, 0, 0, 0.18);
|
|
52
|
+
--theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);
|
|
53
|
+
--theme-lifted-brightness: 1;
|
|
54
|
+
--theme-backdrop-brightness: 1;
|
|
55
|
+
|
|
56
|
+
--theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
|
|
57
|
+
--theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,
|
|
58
|
+
rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;
|
|
59
|
+
|
|
60
|
+
--theme-button-1: rgb(49 53 56);
|
|
61
|
+
--theme-button-1-color: #fff;
|
|
62
|
+
--theme-button-1-hover: rgb(28 31 33);
|
|
63
|
+
|
|
64
|
+
--theme-color-green: #069061;
|
|
65
|
+
--theme-color-red: #ef0006;
|
|
66
|
+
--theme-color-yellow: #edbe20;
|
|
67
|
+
--theme-color-blue: #0082d0;
|
|
68
|
+
--theme-color-orange: #fb892c;
|
|
69
|
+
--theme-color-purple: #5203d1;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.dark-mode {
|
|
73
|
+
color-scheme: dark;
|
|
74
|
+
--theme-color-1: rgba(255, 255, 245, .86);
|
|
75
|
+
--theme-color-2: rgba(255, 255, 245, .6);
|
|
76
|
+
--theme-color-3: rgba(255, 255, 245, .38);
|
|
77
|
+
--theme-color-disabled: rgba(255, 255, 245, .25);
|
|
78
|
+
--theme-color-ghost: rgba(255, 255, 245, .25);
|
|
79
|
+
--theme-color-accent: #e36002;
|
|
80
|
+
--theme-background-1: #1e1e20;
|
|
81
|
+
--theme-background-2: #2a2a2a;
|
|
82
|
+
--theme-background-3: #505053;
|
|
83
|
+
--theme-background-4: rgba(255, 255, 255, 0.06);
|
|
84
|
+
--theme-background-accent: #e360021f;
|
|
85
|
+
|
|
86
|
+
--theme-border-color: rgba(255, 255, 255, 0.1);
|
|
87
|
+
--theme-scrollbar-color: rgba(255, 255, 255, 0.24);
|
|
88
|
+
--theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);
|
|
89
|
+
--theme-lifted-brightness: 1.45;
|
|
90
|
+
--theme-backdrop-brightness: 0.5;
|
|
91
|
+
|
|
92
|
+
--theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
|
|
93
|
+
--theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
|
|
94
|
+
rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
95
|
+
|
|
96
|
+
--theme-button-1: #f6f6f6;
|
|
97
|
+
--theme-button-1-color: #000;
|
|
98
|
+
--theme-button-1-hover: #e7e7e7;
|
|
99
|
+
|
|
100
|
+
--theme-color-green: #3dd68c;
|
|
101
|
+
--theme-color-red: #f66f81;
|
|
102
|
+
--theme-color-yellow: #f9b44e;
|
|
103
|
+
--theme-color-blue: #5c73e7;
|
|
104
|
+
--theme-color-orange: #ff8d4d;
|
|
105
|
+
--theme-color-purple: #b191f9;
|
|
106
|
+
}
|
|
107
|
+
/* Sidebar */
|
|
108
|
+
.light-mode .t-doc__sidebar {
|
|
109
|
+
--sidebar-background-1: var(--theme-background-1);
|
|
110
|
+
--sidebar-item-hover-color: currentColor;
|
|
111
|
+
--sidebar-item-hover-background: var(--theme-background-2);
|
|
112
|
+
--sidebar-item-active-background: var(--theme-background-accent);
|
|
113
|
+
--sidebar-border-color: var(--theme-border-color);
|
|
114
|
+
--sidebar-color-1: var(--theme-color-1);
|
|
115
|
+
--sidebar-color-2: var(--theme-color-2);
|
|
116
|
+
--sidebar-color-active: var(--theme-color-accent);
|
|
117
|
+
--sidebar-search-background: var(--theme-background-2);
|
|
118
|
+
--sidebar-search-border-color: var(--sidebar-border-color);
|
|
119
|
+
--sidebar-search--color: var(--theme-color-3);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.dark-mode .sidebar {
|
|
123
|
+
--sidebar-background-1: #161618;
|
|
124
|
+
--sidebar-item-hover-color: var(--theme-color-accent);
|
|
125
|
+
--sidebar-item-hover-background: transparent;
|
|
126
|
+
--sidebar-item-active-background: transparent;
|
|
127
|
+
--sidebar-border-color: transparent;
|
|
128
|
+
--sidebar-color-1: var(--theme-color-1);
|
|
129
|
+
--sidebar-color-2: var(--theme-color-2);
|
|
130
|
+
--sidebar-color-active: var(--theme-color-accent);
|
|
131
|
+
--sidebar-search-background: #252529;
|
|
132
|
+
--sidebar-search-border-color: transparent;
|
|
133
|
+
--sidebar-search--color: var(--theme-color-3);
|
|
134
|
+
}
|
|
135
|
+
`;
|
|
136
|
+
var ApiReference = (options) => {
|
|
137
|
+
return import_html.html`
|
|
138
|
+
<script
|
|
139
|
+
id="api-reference"
|
|
140
|
+
data-url="${options.spec?.url}"
|
|
141
|
+
data-configuration="${(0, import_html.raw)(
|
|
142
|
+
JSON.stringify(options).split('"').join(""")
|
|
143
|
+
)}"></script>
|
|
144
|
+
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
|
|
145
|
+
`;
|
|
146
|
+
};
|
|
147
|
+
var apiReference = (options) => async (c) => {
|
|
148
|
+
return c.html(
|
|
149
|
+
/* html */
|
|
150
|
+
`
|
|
151
|
+
<!DOCTYPE html>
|
|
152
|
+
<html>
|
|
153
|
+
<head>
|
|
154
|
+
<title>${options?.pageTitle ?? "API Reference"}</title>
|
|
155
|
+
<meta charset="utf-8" />
|
|
156
|
+
<meta
|
|
157
|
+
name="viewport"
|
|
158
|
+
content="width=device-width, initial-scale=1" />
|
|
159
|
+
<style>
|
|
160
|
+
body {
|
|
161
|
+
margin: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
${options.theme ? null : customThemeCSS}
|
|
165
|
+
</style>
|
|
166
|
+
</head>
|
|
167
|
+
<body>
|
|
168
|
+
${ApiReference(options)}
|
|
169
|
+
</body>
|
|
170
|
+
</html>
|
|
171
|
+
`
|
|
172
|
+
);
|
|
173
|
+
};
|
|
174
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
175
|
+
0 && (module.exports = {
|
|
176
|
+
ApiReference,
|
|
177
|
+
apiReference,
|
|
178
|
+
customThemeCSS
|
|
179
|
+
});
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as hono_utils_html from 'hono/utils/html';
|
|
2
|
+
import { ReferenceConfiguration } from '@scalar/api-reference';
|
|
3
|
+
import { Env, MiddlewareHandler } from 'hono';
|
|
4
|
+
|
|
5
|
+
type ApiReferenceOptions = ReferenceConfiguration & {
|
|
6
|
+
pageTitle?: string;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* The custom theme CSS for the API Reference.
|
|
10
|
+
*/
|
|
11
|
+
declare const customThemeCSS = "\n:root {\n --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n color-scheme: light;\n --theme-color-1: #2a2f45;\n --theme-color-2: #757575;\n --theme-color-3: #8e8e8e;\n --theme-color-disabled: #b4b1b1;\n --theme-color-ghost: #a7a7a7;\n --theme-color-accent: #0099ff;\n --theme-background-1: #fff;\n --theme-background-2: #f6f6f6;\n --theme-background-3: #e7e7e7;\n --theme-background-4: rgba(0, 0, 0, 0.06);\n --theme-background-accent: #8ab4f81f;\n\n --theme-border-color: rgba(0, 0, 0, 0.1);\n --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n --theme-lifted-brightness: 1;\n --theme-backdrop-brightness: 1;\n\n --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n --theme-button-1: rgb(49 53 56);\n --theme-button-1-color: #fff;\n --theme-button-1-hover: rgb(28 31 33);\n\n --theme-color-green: #069061;\n --theme-color-red: #ef0006;\n --theme-color-yellow: #edbe20;\n --theme-color-blue: #0082d0;\n --theme-color-orange: #fb892c;\n --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n color-scheme: dark;\n --theme-color-1: rgba(255, 255, 245, .86);\n --theme-color-2: rgba(255, 255, 245, .6);\n --theme-color-3: rgba(255, 255, 245, .38);\n --theme-color-disabled: rgba(255, 255, 245, .25);\n --theme-color-ghost: rgba(255, 255, 245, .25);\n --theme-color-accent: #e36002;\n --theme-background-1: #1e1e20;\n --theme-background-2: #2a2a2a;\n --theme-background-3: #505053;\n --theme-background-4: rgba(255, 255, 255, 0.06);\n --theme-background-accent: #e360021f;\n\n --theme-border-color: rgba(255, 255, 255, 0.1);\n --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n --theme-lifted-brightness: 1.45;\n --theme-backdrop-brightness: 0.5;\n\n --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n --theme-button-1: #f6f6f6;\n --theme-button-1-color: #000;\n --theme-button-1-hover: #e7e7e7;\n\n --theme-color-green: #3dd68c;\n --theme-color-red: #f66f81;\n --theme-color-yellow: #f9b44e;\n --theme-color-blue: #5c73e7;\n --theme-color-orange: #ff8d4d;\n --theme-color-purple: #b191f9;\n}\n/* Sidebar */\n.light-mode .t-doc__sidebar {\n --sidebar-background-1: var(--theme-background-1);\n --sidebar-item-hover-color: currentColor;\n --sidebar-item-hover-background: var(--theme-background-2);\n --sidebar-item-active-background: var(--theme-background-accent);\n --sidebar-border-color: var(--theme-border-color);\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: var(--theme-background-2);\n --sidebar-search-border-color: var(--sidebar-border-color);\n --sidebar-search--color: var(--theme-color-3);\n}\n\n.dark-mode .sidebar {\n --sidebar-background-1: #161618;\n --sidebar-item-hover-color: var(--theme-color-accent);\n --sidebar-item-hover-background: transparent;\n --sidebar-item-active-background: transparent;\n --sidebar-border-color: transparent;\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: #252529;\n --sidebar-search-border-color: transparent;\n --sidebar-search--color: var(--theme-color-3);\n}\n";
|
|
12
|
+
/**
|
|
13
|
+
* The HTML to load the @scalar/api-reference package.
|
|
14
|
+
*/
|
|
15
|
+
declare const ApiReference: (options: ApiReferenceOptions) => hono_utils_html.HtmlEscapedString;
|
|
16
|
+
/**
|
|
17
|
+
* The middleware for the API Reference.
|
|
18
|
+
*/
|
|
19
|
+
declare const apiReference: <E extends Env>(options: ApiReferenceOptions) => MiddlewareHandler<E>;
|
|
20
|
+
|
|
21
|
+
export { ApiReference, ApiReferenceOptions, apiReference, customThemeCSS };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as hono_utils_html from 'hono/utils/html';
|
|
2
|
+
import { ReferenceConfiguration } from '@scalar/api-reference';
|
|
3
|
+
import { Env, MiddlewareHandler } from 'hono';
|
|
4
|
+
|
|
5
|
+
type ApiReferenceOptions = ReferenceConfiguration & {
|
|
6
|
+
pageTitle?: string;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* The custom theme CSS for the API Reference.
|
|
10
|
+
*/
|
|
11
|
+
declare const customThemeCSS = "\n:root {\n --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n color-scheme: light;\n --theme-color-1: #2a2f45;\n --theme-color-2: #757575;\n --theme-color-3: #8e8e8e;\n --theme-color-disabled: #b4b1b1;\n --theme-color-ghost: #a7a7a7;\n --theme-color-accent: #0099ff;\n --theme-background-1: #fff;\n --theme-background-2: #f6f6f6;\n --theme-background-3: #e7e7e7;\n --theme-background-4: rgba(0, 0, 0, 0.06);\n --theme-background-accent: #8ab4f81f;\n\n --theme-border-color: rgba(0, 0, 0, 0.1);\n --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n --theme-lifted-brightness: 1;\n --theme-backdrop-brightness: 1;\n\n --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n --theme-button-1: rgb(49 53 56);\n --theme-button-1-color: #fff;\n --theme-button-1-hover: rgb(28 31 33);\n\n --theme-color-green: #069061;\n --theme-color-red: #ef0006;\n --theme-color-yellow: #edbe20;\n --theme-color-blue: #0082d0;\n --theme-color-orange: #fb892c;\n --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n color-scheme: dark;\n --theme-color-1: rgba(255, 255, 245, .86);\n --theme-color-2: rgba(255, 255, 245, .6);\n --theme-color-3: rgba(255, 255, 245, .38);\n --theme-color-disabled: rgba(255, 255, 245, .25);\n --theme-color-ghost: rgba(255, 255, 245, .25);\n --theme-color-accent: #e36002;\n --theme-background-1: #1e1e20;\n --theme-background-2: #2a2a2a;\n --theme-background-3: #505053;\n --theme-background-4: rgba(255, 255, 255, 0.06);\n --theme-background-accent: #e360021f;\n\n --theme-border-color: rgba(255, 255, 255, 0.1);\n --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n --theme-lifted-brightness: 1.45;\n --theme-backdrop-brightness: 0.5;\n\n --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n --theme-button-1: #f6f6f6;\n --theme-button-1-color: #000;\n --theme-button-1-hover: #e7e7e7;\n\n --theme-color-green: #3dd68c;\n --theme-color-red: #f66f81;\n --theme-color-yellow: #f9b44e;\n --theme-color-blue: #5c73e7;\n --theme-color-orange: #ff8d4d;\n --theme-color-purple: #b191f9;\n}\n/* Sidebar */\n.light-mode .t-doc__sidebar {\n --sidebar-background-1: var(--theme-background-1);\n --sidebar-item-hover-color: currentColor;\n --sidebar-item-hover-background: var(--theme-background-2);\n --sidebar-item-active-background: var(--theme-background-accent);\n --sidebar-border-color: var(--theme-border-color);\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: var(--theme-background-2);\n --sidebar-search-border-color: var(--sidebar-border-color);\n --sidebar-search--color: var(--theme-color-3);\n}\n\n.dark-mode .sidebar {\n --sidebar-background-1: #161618;\n --sidebar-item-hover-color: var(--theme-color-accent);\n --sidebar-item-hover-background: transparent;\n --sidebar-item-active-background: transparent;\n --sidebar-border-color: transparent;\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: #252529;\n --sidebar-search-border-color: transparent;\n --sidebar-search--color: var(--theme-color-3);\n}\n";
|
|
12
|
+
/**
|
|
13
|
+
* The HTML to load the @scalar/api-reference package.
|
|
14
|
+
*/
|
|
15
|
+
declare const ApiReference: (options: ApiReferenceOptions) => hono_utils_html.HtmlEscapedString;
|
|
16
|
+
/**
|
|
17
|
+
* The middleware for the API Reference.
|
|
18
|
+
*/
|
|
19
|
+
declare const apiReference: <E extends Env>(options: ApiReferenceOptions) => MiddlewareHandler<E>;
|
|
20
|
+
|
|
21
|
+
export { ApiReference, ApiReferenceOptions, apiReference, customThemeCSS };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
// src/honoApiReference.ts
|
|
2
|
+
import { html, raw } from "hono/html";
|
|
3
|
+
var customThemeCSS = `
|
|
4
|
+
:root {
|
|
5
|
+
--theme-font: 'Inter', var(--system-fonts);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.light-mode {
|
|
9
|
+
color-scheme: light;
|
|
10
|
+
--theme-color-1: #2a2f45;
|
|
11
|
+
--theme-color-2: #757575;
|
|
12
|
+
--theme-color-3: #8e8e8e;
|
|
13
|
+
--theme-color-disabled: #b4b1b1;
|
|
14
|
+
--theme-color-ghost: #a7a7a7;
|
|
15
|
+
--theme-color-accent: #0099ff;
|
|
16
|
+
--theme-background-1: #fff;
|
|
17
|
+
--theme-background-2: #f6f6f6;
|
|
18
|
+
--theme-background-3: #e7e7e7;
|
|
19
|
+
--theme-background-4: rgba(0, 0, 0, 0.06);
|
|
20
|
+
--theme-background-accent: #8ab4f81f;
|
|
21
|
+
|
|
22
|
+
--theme-border-color: rgba(0, 0, 0, 0.1);
|
|
23
|
+
--theme-scrollbar-color: rgba(0, 0, 0, 0.18);
|
|
24
|
+
--theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);
|
|
25
|
+
--theme-lifted-brightness: 1;
|
|
26
|
+
--theme-backdrop-brightness: 1;
|
|
27
|
+
|
|
28
|
+
--theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
|
|
29
|
+
--theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,
|
|
30
|
+
rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;
|
|
31
|
+
|
|
32
|
+
--theme-button-1: rgb(49 53 56);
|
|
33
|
+
--theme-button-1-color: #fff;
|
|
34
|
+
--theme-button-1-hover: rgb(28 31 33);
|
|
35
|
+
|
|
36
|
+
--theme-color-green: #069061;
|
|
37
|
+
--theme-color-red: #ef0006;
|
|
38
|
+
--theme-color-yellow: #edbe20;
|
|
39
|
+
--theme-color-blue: #0082d0;
|
|
40
|
+
--theme-color-orange: #fb892c;
|
|
41
|
+
--theme-color-purple: #5203d1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark-mode {
|
|
45
|
+
color-scheme: dark;
|
|
46
|
+
--theme-color-1: rgba(255, 255, 245, .86);
|
|
47
|
+
--theme-color-2: rgba(255, 255, 245, .6);
|
|
48
|
+
--theme-color-3: rgba(255, 255, 245, .38);
|
|
49
|
+
--theme-color-disabled: rgba(255, 255, 245, .25);
|
|
50
|
+
--theme-color-ghost: rgba(255, 255, 245, .25);
|
|
51
|
+
--theme-color-accent: #e36002;
|
|
52
|
+
--theme-background-1: #1e1e20;
|
|
53
|
+
--theme-background-2: #2a2a2a;
|
|
54
|
+
--theme-background-3: #505053;
|
|
55
|
+
--theme-background-4: rgba(255, 255, 255, 0.06);
|
|
56
|
+
--theme-background-accent: #e360021f;
|
|
57
|
+
|
|
58
|
+
--theme-border-color: rgba(255, 255, 255, 0.1);
|
|
59
|
+
--theme-scrollbar-color: rgba(255, 255, 255, 0.24);
|
|
60
|
+
--theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);
|
|
61
|
+
--theme-lifted-brightness: 1.45;
|
|
62
|
+
--theme-backdrop-brightness: 0.5;
|
|
63
|
+
|
|
64
|
+
--theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
|
|
65
|
+
--theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
|
|
66
|
+
rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
67
|
+
|
|
68
|
+
--theme-button-1: #f6f6f6;
|
|
69
|
+
--theme-button-1-color: #000;
|
|
70
|
+
--theme-button-1-hover: #e7e7e7;
|
|
71
|
+
|
|
72
|
+
--theme-color-green: #3dd68c;
|
|
73
|
+
--theme-color-red: #f66f81;
|
|
74
|
+
--theme-color-yellow: #f9b44e;
|
|
75
|
+
--theme-color-blue: #5c73e7;
|
|
76
|
+
--theme-color-orange: #ff8d4d;
|
|
77
|
+
--theme-color-purple: #b191f9;
|
|
78
|
+
}
|
|
79
|
+
/* Sidebar */
|
|
80
|
+
.light-mode .t-doc__sidebar {
|
|
81
|
+
--sidebar-background-1: var(--theme-background-1);
|
|
82
|
+
--sidebar-item-hover-color: currentColor;
|
|
83
|
+
--sidebar-item-hover-background: var(--theme-background-2);
|
|
84
|
+
--sidebar-item-active-background: var(--theme-background-accent);
|
|
85
|
+
--sidebar-border-color: var(--theme-border-color);
|
|
86
|
+
--sidebar-color-1: var(--theme-color-1);
|
|
87
|
+
--sidebar-color-2: var(--theme-color-2);
|
|
88
|
+
--sidebar-color-active: var(--theme-color-accent);
|
|
89
|
+
--sidebar-search-background: var(--theme-background-2);
|
|
90
|
+
--sidebar-search-border-color: var(--sidebar-border-color);
|
|
91
|
+
--sidebar-search--color: var(--theme-color-3);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.dark-mode .sidebar {
|
|
95
|
+
--sidebar-background-1: #161618;
|
|
96
|
+
--sidebar-item-hover-color: var(--theme-color-accent);
|
|
97
|
+
--sidebar-item-hover-background: transparent;
|
|
98
|
+
--sidebar-item-active-background: transparent;
|
|
99
|
+
--sidebar-border-color: transparent;
|
|
100
|
+
--sidebar-color-1: var(--theme-color-1);
|
|
101
|
+
--sidebar-color-2: var(--theme-color-2);
|
|
102
|
+
--sidebar-color-active: var(--theme-color-accent);
|
|
103
|
+
--sidebar-search-background: #252529;
|
|
104
|
+
--sidebar-search-border-color: transparent;
|
|
105
|
+
--sidebar-search--color: var(--theme-color-3);
|
|
106
|
+
}
|
|
107
|
+
`;
|
|
108
|
+
var ApiReference = (options) => {
|
|
109
|
+
return html`
|
|
110
|
+
<script
|
|
111
|
+
id="api-reference"
|
|
112
|
+
data-url="${options.spec?.url}"
|
|
113
|
+
data-configuration="${raw(
|
|
114
|
+
JSON.stringify(options).split('"').join(""")
|
|
115
|
+
)}"></script>
|
|
116
|
+
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
|
|
117
|
+
`;
|
|
118
|
+
};
|
|
119
|
+
var apiReference = (options) => async (c) => {
|
|
120
|
+
return c.html(
|
|
121
|
+
/* html */
|
|
122
|
+
`
|
|
123
|
+
<!DOCTYPE html>
|
|
124
|
+
<html>
|
|
125
|
+
<head>
|
|
126
|
+
<title>${options?.pageTitle ?? "API Reference"}</title>
|
|
127
|
+
<meta charset="utf-8" />
|
|
128
|
+
<meta
|
|
129
|
+
name="viewport"
|
|
130
|
+
content="width=device-width, initial-scale=1" />
|
|
131
|
+
<style>
|
|
132
|
+
body {
|
|
133
|
+
margin: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
${options.theme ? null : customThemeCSS}
|
|
137
|
+
</style>
|
|
138
|
+
</head>
|
|
139
|
+
<body>
|
|
140
|
+
${ApiReference(options)}
|
|
141
|
+
</body>
|
|
142
|
+
</html>
|
|
143
|
+
`
|
|
144
|
+
);
|
|
145
|
+
};
|
|
146
|
+
export {
|
|
147
|
+
ApiReference,
|
|
148
|
+
apiReference,
|
|
149
|
+
customThemeCSS
|
|
150
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@scalar/hono-api-reference",
|
|
3
|
+
"description": "A middleware for using the Scalar API reference in Hono",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"@scalar/api-reference": "1.0.3"
|
|
7
|
+
},
|
|
8
|
+
"devDependencies": {
|
|
9
|
+
"hono": "3.9.2",
|
|
10
|
+
"tsup": "7.2.0",
|
|
11
|
+
"vite": "4.4.9",
|
|
12
|
+
"vitest": "0.34.4"
|
|
13
|
+
},
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"default": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"require": {
|
|
21
|
+
"types": "./dist/index.d.cts",
|
|
22
|
+
"default": "./dist/index.cjs"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"homepage": "https://github.com/scalar/scalar",
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"main": "dist/index.cjs",
|
|
32
|
+
"module": "dist/index.js",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"hono": "3.9.2"
|
|
35
|
+
},
|
|
36
|
+
"private": false,
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/scalar/scalar.git",
|
|
40
|
+
"directory": "packages/hono-api-reference"
|
|
41
|
+
},
|
|
42
|
+
"type": "module",
|
|
43
|
+
"types": "dist/index.d.cts",
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "tsup ./src/index.ts --format esm,cjs --dts",
|
|
46
|
+
"test": "vitest run"
|
|
47
|
+
}
|
|
48
|
+
}
|