Skip to content

Commit b654cc6

Browse files
AmeroHanAmeroHan
committed
feat(frontend): add API invocation guide
1 parent 86cfe3b commit b654cc6

13 files changed

Lines changed: 386 additions & 29 deletions

File tree

‎backend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@elysiajs/swagger": "^1.3.0",
2020
"consola": "^3.4.2",
2121
"drizzle-orm": "^0.40.1",
22-
"elysia": "^1.3.4",
22+
"elysia": "^1.3.5",
2323
"ioredis": "^5.6.1",
2424
"openai": "^4.104.0",
2525
"typebox": "^0.0.1"

‎bun.lock‎

Lines changed: 11 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"test": "vitest run"
1010
},
1111
"dependencies": {
12-
"@elysiajs/eden": "^1.2.0",
12+
"@elysiajs/eden": "^1.3.2",
1313
"@hookform/resolvers": "^4.1.3",
1414
"@radix-ui/react-alert-dialog": "^1.1.6",
1515
"@radix-ui/react-collapsible": "^1.1.3",
@@ -44,6 +44,7 @@
4444
"react-hook-form": "^7.54.2",
4545
"react-i18next": "^15.4.1",
4646
"react-markdown": "^10.1.0",
47+
"rehype-highlight": "^7.0.2",
4748
"rehype-katex": "^7.0.1",
4849
"remark-gfm": "^4.0.1",
4950
"remark-math": "^6.0.0",

‎frontend/src/components/app/markdown/highlightjs-theme-github.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*!
2+
Theme: GitHub
3+
Description: Light theme as seen on github.com
4+
Author: github.com
5+
Maintainer: @Hirse
6+
Updated: 2021-05-15
7+
8+
Outdated base version: https://github.com/primer/github-syntax-light
9+
Current colors taken from GitHub's CSS
10+
*/
11+
.hljs {
12+
color: #24292e;
13+
}
14+
15+
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
16+
color: #d73a49;
17+
}
18+
19+
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
20+
color: #6f42c1;
21+
}
22+
23+
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable {
24+
color: #005cc5;
25+
}
26+
27+
.hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
28+
color: #032f62;
29+
}
30+
31+
.hljs-built_in, .hljs-symbol {
32+
color: #e36209;
33+
}
34+
35+
.hljs-code, .hljs-comment, .hljs-formula {
36+
color: #6a737d;
37+
}
38+
39+
.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag {
40+
color: #22863a;
41+
}
42+
43+
.hljs-subst {
44+
color: #24292e;
45+
}
46+
47+
.hljs-section {
48+
color: #005cc5;
49+
font-weight: 700;
50+
}
51+
52+
.hljs-bullet {
53+
color: #735c0f;
54+
}
55+
56+
.hljs-emphasis {
57+
color: #24292e;
58+
font-style: italic
59+
}
60+
61+
.hljs-strong {
62+
color: #24292e;
63+
font-weight: 700;
64+
}
65+
66+
.hljs-addition {
67+
color: #22863a;
68+
background-color: #f0fff4;
69+
}
70+
71+
.hljs-deletion {
72+
color: #b31d28;
73+
background-color: #ffeef0;
74+
}
75+
76+
/*!
77+
Theme: GitHub Dark
78+
Description: Dark theme as seen on github.com
79+
Author: github.com
80+
Maintainer: @Hirse
81+
Updated: 2021-05-15
82+
83+
Outdated base version: https://github.com/primer/github-syntax-dark
84+
Current colors taken from GitHub's CSS
85+
*/
86+
.dark {
87+
.hljs {
88+
color: #c9d1d9;
89+
}
90+
91+
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
92+
color: #ff7b72;
93+
}
94+
95+
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
96+
color: #d2a8ff;
97+
}
98+
99+
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable {
100+
color: #79c0ff;
101+
}
102+
103+
.hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
104+
color: #a5d6ff;
105+
}
106+
107+
.hljs-built_in, .hljs-symbol {
108+
color: #ffa657;
109+
}
110+
111+
.hljs-code, .hljs-comment, .hljs-formula {
112+
color: #8b949e;
113+
}
114+
115+
.hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag {
116+
color: #7ee787;
117+
}
118+
119+
.hljs-subst {
120+
color: #c9d1d9;
121+
}
122+
123+
.hljs-section {
124+
color: #1f6feb;
125+
font-weight: 700;
126+
}
127+
128+
.hljs-bullet {
129+
color: #f2cc60;
130+
}
131+
132+
.hljs-emphasis {
133+
color: #c9d1d9;
134+
font-style: italic;
135+
}
136+
137+
.hljs-strong {
138+
color: #c9d1d9;
139+
font-weight: 700;
140+
}
141+
142+
.hljs-addition {
143+
color: #aff5b4;
144+
background-color: #033a16;
145+
}
146+
147+
.hljs-deletion {
148+
color: #ffdcd7;
149+
background-color: #67060c;
150+
}
151+
}

frontend/src/components/app/markdown.tsx renamed to frontend/src/components/app/markdown/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import ReactMarkdown from 'react-markdown'
2+
import rehypeHighlight from 'rehype-highlight'
23
import rehypeKatex from 'rehype-katex'
34
import remarkGfm from 'remark-gfm'
45
import remarkMath from 'remark-math'
56

67
import { cn } from '@/lib/utils'
78

9+
import './highlightjs-theme-github.css'
10+
811
export function Markdown({ text, className, size = 'sm' }: { text: string; className?: string; size?: 'sm' | 'base' }) {
912
return (
1013
<div
@@ -17,7 +20,7 @@ export function Markdown({ text, className, size = 'sm' }: { text: string; class
1720
className,
1821
)}
1922
>
20-
<ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
23+
<ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex, rehypeHighlight]}>
2124
{text}
2225
</ReactMarkdown>
2326
</div>

‎frontend/src/i18n/locales/en-US.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,24 @@
5252
"pages.api-keys.columns.NoExpirationDate": "No expiration date",
5353
"pages.api-keys.columns.CreatedAt": "Created at",
5454
"pages.api-keys.columns.ExpiresAt": "Expires at",
55+
"pages.api-keys.columns.Actions": "Actions",
5556
"pages.api-keys.data-table.View": "View",
5657
"pages.api-keys.data-table.ShowRevoked": "Show revoked",
5758
"pages.api-keys.row-action-button.APIKeyCopied": "API key copied to clipboard",
5859
"pages.api-keys.row-action-button.APIKeyRevoked": "API key revoked",
5960
"pages.api-keys.row-action-button.AreYouSure?": "Are you sure?",
6061
"pages.api-keys.row-action-button.APIKeyOfApplicationWillBeRevoked": "The API key of application <bold>{{comment}}</bold> will be revoked.",
6162
"pages.api-keys.row-action-button.OpenMenu": "Open menu",
63+
"pages.api-keys.row-action-button.CopyBaseURL": "Copy Base URL",
6264
"pages.api-keys.row-action-button.CopyAPIKey": "Copy API Key",
6365
"pages.api-keys.row-action-button.ViewRequests": "View requests",
6466
"pages.api-keys.row-action-button.RevokeAPIKey": "Revoke API Key",
6567
"pages.api-keys.row-action-button.Cancel": "Cancel",
6668
"pages.api-keys.row-action-button.Continue": "Continue",
69+
"pages.api-keys.invocation-guide.Use": "Use",
70+
"pages.api-keys.invocation-guide.APIInvocationGuide": "API invocation guide",
71+
"pages.api-keys.invocation-guide.SetAPIKeyEnvVar": "Set the API key as an environment variable (using Linux as an example):",
72+
"pages.api-keys.invocation-guide.ReferToCodeForInvocation": "Refer to the following sample code for invocation:",
6773
"pages.requests.columns.CreatedAt": "Created at",
6874
"pages.requests.columns.Pending": "Pending",
6975
"pages.requests.columns.Completed": "Completed",
@@ -149,4 +155,4 @@
149155
"routes.requests.route.Requests": "Requests",
150156
"routes.dashboard.index.Welcome": "Hello from home",
151157
"routes.dashboard.route.Overview": "Overview"
152-
}
158+
}

‎frontend/src/i18n/locales/zh-CN.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,23 +48,29 @@
4848
"pages.api-keys.add-button.Copy": "复制",
4949
"pages.api-keys.columns.Name": "名称",
5050
"pages.api-keys.columns.APIKey": "API 密钥",
51-
"pages.api-keys.columns.Lastseen":"上次在线",
51+
"pages.api-keys.columns.Lastseen": "上次在线",
5252
"pages.api-keys.columns.NeverUse": "从未被使用",
53-
"pages.api-keys.columns.NoExpirationDate":"无过期时间",
53+
"pages.api-keys.columns.NoExpirationDate": "无过期时间",
5454
"pages.api-keys.columns.CreatedAt": "创建时间",
5555
"pages.api-keys.columns.ExpiresAt": "过期时间",
56+
"pages.api-keys.columns.Actions": "操作",
5657
"pages.api-keys.data-table.View": "查看",
5758
"pages.api-keys.data-table.ShowRevoked": "包含已删除的密钥",
5859
"pages.api-keys.row-action-button.APIKeyCopied": "API 密钥已复制到剪贴板",
5960
"pages.api-keys.row-action-button.APIKeyRevoked": "API 密钥已删除",
6061
"pages.api-keys.row-action-button.AreYouSure?": "请再次确认",
6162
"pages.api-keys.row-action-button.APIKeyOfApplicationWillBeRevoked": "应用 <bold>{{comment}}</bold> 的API密钥将被删除",
6263
"pages.api-keys.row-action-button.OpenMenu": "打开菜单",
64+
"pages.api-keys.row-action-button.CopyBaseURL": "复制 Base URL",
6365
"pages.api-keys.row-action-button.CopyAPIKey": "复制 API 密钥",
6466
"pages.api-keys.row-action-button.ViewRequests": "查看请求",
6567
"pages.api-keys.row-action-button.RevokeAPIKey": "删除 API 密钥",
6668
"pages.api-keys.row-action-button.Cancel": "取消",
6769
"pages.api-keys.row-action-button.Continue": "继续",
70+
"pages.api-keys.invocation-guide.Use": "使用",
71+
"pages.api-keys.invocation-guide.APIInvocationGuide": "API 调用指南",
72+
"pages.api-keys.invocation-guide.SetAPIKeyEnvVar": "将 API 密钥设为环境变量（以 Linux 为例）：",
73+
"pages.api-keys.invocation-guide.ReferToCodeForInvocation": "参考如下示例代码进行调用：",
6874
"pages.requests.columns.CreatedAt": "创建时间",
6975
"pages.requests.columns.Pending": "待处理",
7076
"pages.requests.columns.Completed": "已完成",

‎frontend/src/lib/api.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { treaty } from '@elysiajs/eden'
22
import type { App } from 'nexus-gate-server'
33

4-
export const api = treaty<App>(import.meta.env.PROD ? location.origin : import.meta.env.VITE_BASE_URL, {
4+
const backendBaseURL = import.meta.env.PROD ? location.origin : import.meta.env.VITE_BASE_URL
5+
if (!backendBaseURL) {
6+
throw new Error('backend domain is not defined')
7+
}
8+
9+
export const api = treaty<App>(backendBaseURL, {
510
headers: () => {
611
const adminSecret = localStorage.getItem('admin-secret')
712
if (!adminSecret) return undefined

‎frontend/src/lib/utils.ts‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,22 @@ export function removeUndefinedFields<T extends object>(obj: T): T {
99
return Object.fromEntries(Object.entries(obj).filter(([, v]) => v != null)) as T
1010
}
1111

12-
const formatter = new Intl.NumberFormat('zh-CN', {
13-
style: 'decimal',
14-
useGrouping: 'min2',
15-
})
12+
const formatter = (() => {
13+
try {
14+
return new Intl.NumberFormat('zh-CN', {
15+
style: 'decimal',
16+
// @ts-expect-error: 'min2' option is in ES2023, our target is ES2022
17+
useGrouping: 'min2',
18+
})
19+
} catch (e) {
20+
if (e instanceof RangeError) {
21+
return new Intl.NumberFormat('zh-CN', {
22+
style: 'decimal',
23+
})
24+
}
25+
throw e
26+
}
27+
})()
1628

1729
export function formatNumber(n: number, forNaN = '-'): string {
1830
return Number.isNaN(n) ? forNaN : formatter.format(n)
@@ -25,3 +37,7 @@ export function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Om
2537
}
2638
return copy
2739
}
40+
41+
export function getAPIBaseURL() {
42+
return new URL('v1', location.origin).toString()
43+
}

0 commit comments

Comments
 (0)