Skip to content

Commit 043ebd1

Browse files
marle3003marle3003
committed
fix(webui): update styles
1 parent feaea93 commit 043ebd1

4 files changed

Lines changed: 92 additions & 51 deletions

File tree

‎docs/http/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ Point Mokapi to any publicly accessible OpenAPI specification:
5656
mokapi https://petstore3.swagger.io/api/v3/openapi.json
5757
```
5858
```text box=tip
59-
Mokapi supports both simplified syntax (`mokapi <url>`) and
60-
verbose flags (`mokapi --providers-http-url <url>`). This guide uses the
59+
Mokapi supports both simplified syntax (`mokapi <url>`) and
60+
verbose flags (`mokapi --providers-http-url <url>`). This guide uses the
6161
simplified syntax for clarity.
6262
```
6363

‎webui/src/composables/markdown-box.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@ export function MarkdownItBox(md: MarkdownIt, opts: Options) {
101101
token.hidden = true
102102

103103
const url = getUrl(token)
104-
let content = parseContent(token.content)
104+
let content = md.render(token.content)
105+
content = parseContent(content)
105106

106107
if (showTitle(token)) {
107108
let title = getTitle(token)
@@ -127,7 +128,7 @@ export function MarkdownItBox(md: MarkdownIt, opts: Options) {
127128
icon = '<span class="bi bi-check-circle me-1"></span>'
128129
break
129130
case 'tree':
130-
content = parseTree(content)
131+
content = parseTree(token.content)
131132
break
132133
}
133134

‎webui/src/composables/markdown-tabs.ts‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export function MarkdownItTabs(md: MarkdownIt, opts: Options) {
99
unescapeAll = md.utils.unescapeAll,
1010
simple = /tab=([^\s]*)/,
1111
quote = /tab="([^"]*)/,
12+
style = /style=([^\s]*)/,
1213
counter = 0
1314

1415
function getInfo(token: Token) {
@@ -46,6 +47,16 @@ export function MarkdownItTabs(md: MarkdownIt, opts: Options) {
4647
return !!getTabName(token)
4748
}
4849

50+
function getStyle(token: Token) {
51+
var info = getInfo(token)
52+
53+
const r = style.exec(info)
54+
if (r && r.length > 1) {
55+
return r.slice(1)[0]
56+
}
57+
return 'default'
58+
}
59+
4960
function fenceGroup(tokens: Token[], idx: number, options: Options, env: any, slf: Renderer): string {
5061
const token = tokens[idx]
5162
if (!token || token.hidden) return ''
@@ -60,32 +71,42 @@ export function MarkdownItTabs(md: MarkdownIt, opts: Options) {
6071
const tabId = `tab-${counter}-${tabName}`.replace(' ', '-')
6172
const tabPanelId = `tabPanel-${counter}-${tabName}`.replace(' ', '-')
6273

63-
return `
64-
<div class="code">
65-
<div class="nav code-tabs" role="tablist">
66-
<button class="active"
67-
id="${tabId}"
68-
data-bs-toggle="tab"
69-
data-bs-target="#${tabPanelId}"
70-
type="button"
71-
role="tab"
72-
aria-selected="true">
73-
${tabName}
74-
</button>
75-
<button type="button" class="btn btn-link control" title="Copy content" aria-label="Copy content" data-copy>
76-
<span class="bi bi-copy"></span>
77-
</button>
78-
<div class="tabs-border"></div>
79-
</div>
80-
<div class="tab-content code">
81-
<div class="tab-pane fade show active"
82-
id="${tabPanelId}"
83-
role="tabpanel"
84-
aria-labelledby="${tabId}">
85-
${defaultRender(tokens, idx, options, env, slf)}
74+
const style = getStyle(token)
75+
76+
if (style === 'default') {
77+
return `
78+
<div class="code">
79+
<div class="nav code-tabs" role="tablist">
80+
<button class="active"
81+
id="${tabId}"
82+
data-bs-toggle="tab"
83+
data-bs-target="#${tabPanelId}"
84+
type="button"
85+
role="tab"
86+
aria-selected="true">
87+
${tabName}
88+
</button>
89+
<button type="button" class="btn btn-link control" title="Copy content" aria-label="Copy content" data-copy>
90+
<span class="bi bi-copy"></span>
91+
</button>
92+
<div class="tabs-border"></div>
8693
</div>
87-
</div>
88-
</div>`
94+
<div class="tab-content code">
95+
<div class="tab-pane fade show active"
96+
id="${tabPanelId}"
97+
role="tabpanel"
98+
aria-labelledby="${tabId}">
99+
${defaultRender(tokens, idx, options, env, slf)}
100+
</div>
101+
</div>
102+
</div>`
103+
}
104+
105+
if (style === 'simple') {
106+
return `
107+
<pre class="simple" data-label="${lang}"><code class="hljs">${token.content}</code></pre>
108+
`
109+
}
89110
}
90111

91112

‎webui/src/views/DocsView.vue‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -376,10 +376,8 @@ pre {
376376
}
377377
}
378378
.content code:not(pre code) {
379-
background-color: #f1f3f5;
380379
color: #e63946;
381-
border-radius: 3px;
382-
padding: 2px 6px;
380+
383381
font-weight: 600
384382
}
385383
.content .code {
@@ -396,8 +394,7 @@ pre {
396394
}
397395
398396
.box {
399-
padding: 0.6rem;
400-
padding-bottom: 0;
397+
padding: 16px 20px;
401398
margin-top: 2rem;
402399
margin-bottom: 2rem;
403400
border-left-width: 0.2rem ;
@@ -411,9 +408,9 @@ pre {
411408
padding-left: 0.6rem;
412409
}
413410
.box .box-heading {
414-
margin: -0.6rem -0.6rem 0 -0.6rem;
415-
padding: 0.3rem 0 0.3rem 1rem;
416-
font-weight: 600;
411+
margin: 0 -0.6rem;
412+
padding-left: 1rem;
413+
font-weight: 700;
417414
}
418415
.box .box-heading:not(.box-custom-heading) {
419416
text-transform: capitalize;
@@ -428,17 +425,12 @@ pre {
428425
padding: 0.1em;
429426
border-radius: 0.3em;
430427
}
431-
.box.info{
432-
border-color: var(--color-blue);
433-
}
434-
.box.info .box-heading {
435-
background-color: var(--color-blue-shadow);
428+
.box.info, .box.tip{
429+
border-color: var(--bs-primary-border-subtle);
430+
background-color: var(--bs-primary-bg-subtle);
436431
}
437-
.box.tip{
438-
border-color: var(--color-green);
439-
}
440-
.box.tip .box-heading {
441-
background-color: var(--color-green-shadow);
432+
.box.info .box-heading, .box.tip .box-heading {
433+
color: var(--bs-primary-text-emphasis);
442434
}
443435
.box.limitation{
444436
border-color: var(--color-orange);
@@ -447,16 +439,19 @@ pre {
447439
background-color: var(--color-orange-shadow);
448440
}
449441
.box.warning{
450-
border-color: var(--color-yellow);
442+
border-color: var(--bs-warning-border-subtle);
443+
/* background-color: #fff3cd; */
444+
background-color: var(--bs-warning-bg-subtle);
451445
}
452446
.box.warning .box-heading {
453-
background-color: var(--color-yellow-shadow);
447+
color: var(--bs-warning-text-emphasis);
454448
}
455449
.box.result {
456-
border-color: rgb(82, 183, 136);
450+
border-color: var(--bs-success-border-subtle);
451+
background-color: var(--bs-success-bg-subtle);
457452
}
458453
.box.result .box-heading {
459-
background-color: rgba(82, 183, 136, 0.4);
454+
color: var(--bs-success-text-emphasis);
460455
}
461456
.anchor {
462457
display: block;
@@ -677,4 +672,28 @@ a[name] {
677672
.emoji {
678673
vertical-align: 0.15em;
679674
}
675+
676+
pre.simple {
677+
padding: 24px;
678+
border-radius: 6px;
679+
overflow-x: auto;
680+
margin: 0;
681+
border: 1px solid #21262d;
682+
position: relative;
683+
}
684+
pre.simple code {
685+
padding: 0;
686+
}
687+
pre::before {
688+
content: attr(data-label);
689+
position: absolute;
690+
top: 8px;
691+
right: 16px;
692+
font-size: 11px;
693+
color: #6e7681;
694+
text-transform: uppercase;
695+
letter-spacing: 0.5px;
696+
font-family: 'JetBrains Mono', monospace;
697+
font-weight: 600;
698+
}
680699
</style>

0 commit comments

Comments
 (0)