Skip to content

Commit 438a11d

Browse files
LeadcodeDevLeadcodeDev
committed
feat: enhance ui
1 parent d958a07 commit 438a11d

File tree

7 files changed

+130
-119
lines changed

7 files changed

+130
-119
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎.astro/data-store.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎.astro/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"_variables": {
3-
"lastUpdateCheck": 1750630234606
3+
"lastUpdateCheck": 1762726209247
44
}
55
}

‎astro.config.mjs‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
// @ts-check
2-
import { defineConfig } from 'astro/config';
2+
import { defineConfig } from "astro/config";
33

4-
import mdx from '@astrojs/mdx';
5-
import react from '@astrojs/react';
4+
import mdx from "@astrojs/mdx";
5+
import react from "@astrojs/react";
66
import {
77
transformerMetaHighlight,
88
transformerNotationDiff,
99
transformerNotationErrorLevel,
1010
transformerNotationFocus,
1111
transformerNotationHighlight,
1212
transformerNotationWordHighlight,
13-
} from '@shikijs/transformers';
14-
import tailwindcss from '@tailwindcss/vite';
13+
} from "@shikijs/transformers";
14+
import tailwindcss from "@tailwindcss/vite";
1515
import icon from "astro-icon";
16-
import rehypeCallouts from 'rehype-callouts';
17-
import rehypeMermaid from 'rehype-mermaid';
18-
import rehypeCodeGroupReact from './src/lib/plugins/code-group/plugin';
19-
import rehypeReadMoreReact from './src/lib/plugins/read-more/plugin';
20-
import { default as remarkDirective, default as remarkReadMoreDirective } from './src/lib/plugins/read-more/remark-directive';
16+
import rehypeCallouts from "rehype-callouts";
17+
import rehypeMermaid from "rehype-mermaid";
18+
import rehypeCodeGroupReact from "./src/lib/plugins/code-group/plugin";
19+
import rehypeReadMoreReact from "./src/lib/plugins/read-more/plugin";
20+
import {
21+
default as remarkDirective,
22+
default as remarkReadMoreDirective,
23+
} from "./src/lib/plugins/read-more/remark-directive";
2124

2225
// https://astro.build/config
2326
export default defineConfig({
24-
output: 'static',
27+
output: "static",
2528
prefetch: true,
26-
integrations: [
27-
react(),
28-
mdx(),
29-
icon()
30-
],
29+
integrations: [react(), mdx(), icon()],
3130

3231
markdown: {
3332
shikiConfig: {
3433
themes: {
35-
light: 'github-light',
36-
dark: 'catppuccin-frappe',
34+
light: "github-light",
35+
dark: "catppuccin-frappe",
3736
},
3837
transformers: [
3938
transformerNotationDiff(),
@@ -42,31 +41,31 @@ export default defineConfig({
4241
transformerNotationFocus(),
4342
transformerNotationErrorLevel(),
4443
transformerMetaHighlight(),
45-
]
44+
],
4645
},
4746
syntaxHighlight: {
48-
type: 'shiki',
49-
excludeLangs: ['mermaid'],
47+
type: "shiki",
48+
excludeLangs: ["mermaid"],
5049
},
51-
remarkPlugins: [
52-
remarkDirective,
53-
remarkReadMoreDirective,
54-
],
50+
remarkPlugins: [remarkDirective, remarkReadMoreDirective],
5551
rehypePlugins: [
5652
rehypeMermaid,
57-
[rehypeCallouts, {
58-
customClassNames: {
59-
calloutClass: "callout",
60-
calloutTitleClass: "callout-title",
61-
calloutContentClass: "callout-content",
62-
}
63-
}],
53+
[
54+
rehypeCallouts,
55+
{
56+
customClassNames: {
57+
calloutClass: "callout",
58+
calloutTitleClass: "callout-title",
59+
calloutContentClass: "callout-content",
60+
},
61+
},
62+
],
6463
rehypeCodeGroupReact,
6564
rehypeReadMoreReact,
6665
],
6766
},
6867

6968
vite: {
7069
plugins: [tailwindcss()],
71-
}
72-
});
70+
},
71+
});

‎src/assets/css/global.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@
3636
--sidebar-accent-foreground: oklch(0.205 0 0);
3737
--sidebar-border: oklch(0.922 0 0);
3838
--sidebar-ring: oklch(0.708 0 0);
39+
--tab-container: oklch(0.967 0.001 286.375);
3940
}
4041

4142
.dark {
42-
--background: oklch(0.145 0 0);
43+
--background: oklch(0.21 0.006 285.885);
4344
--foreground: oklch(0.985 0 0);
4445
--card: oklch(0.205 0 0);
4546
--card-foreground: oklch(0.985 0 0);
@@ -70,6 +71,7 @@
7071
--sidebar-accent-foreground: oklch(0.985 0 0);
7172
--sidebar-border: oklch(1 0 0 / 10%);
7273
--sidebar-ring: oklch(0.556 0 0);
74+
--tab-container: oklch(0.274 0.006 286.033);
7375
}
7476

7577
@theme inline {
@@ -107,7 +109,7 @@
107109
--color-sidebar-accent: var(--sidebar-accent);
108110
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
109111
--color-sidebar-border: var(--sidebar-border);
110-
--color-sidebar-ring: var(--sidebar-ring);
112+
--color-tab-container: var(--tab-container);
111113
}
112114

113115
@layer base {
@@ -120,12 +122,12 @@
120122
}
121123
}
122124

123-
.bg>div {
125+
.bg > div {
124126
clip-path: circle(75%);
125127
transition: clip-path 3s;
126128
}
127129

128-
.light .bg>div {
130+
.light .bg > div {
129131
opacity: 1 !important;
130132
}
131133

@@ -152,7 +154,6 @@
152154
transform: translateX(calc(-100% - var(--gap)));
153155
}
154156
}
155-
156157
}
157158

158159
.references-navigation-list {
@@ -162,4 +163,4 @@
162163
::view-transition-old(root),
163164
::view-transition-new(root) {
164165
animation-duration: 0.3s !important;
165-
}
166+
}

‎src/assets/css/markdown.css‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
:root {
22
--bg-default: #f0f0f0;
3-
--bg-tab-container: var(--background);
43
--bg-tab-item: oklch(0.968 0.007 247.896);
54
--color-border-tab: oklch(0.9 0.013 255.508);
6-
--color-remove: rgba(244, 63, 94, .75);
7-
--color-add: rgba(16, 185, 129, .75);
5+
--color-remove: rgba(244, 63, 94, 0.75);
6+
--color-add: rgba(16, 185, 129, 0.75);
87
--color-warning: rgba(187, 142, 5, 0.75);
9-
--bg-diff-remove: rgba(244, 63, 94, .20);
10-
--bg-diff-add: rgba(16, 185, 129, .20);
8+
--bg-diff-remove: rgba(244, 63, 94, 0.2);
9+
--bg-diff-add: rgba(16, 185, 129, 0.2);
1110
--bg-highlight: rgba(0, 51, 90, 0.1);
1211
--callout-success: #00c16a;
1312
--callout-success-bg: oklab(0.97 -0.07 0.07 / 0.4);
@@ -30,7 +29,7 @@
3029

3130
.dark {
3231
--bg-highlight: rgb(29, 44, 61);
33-
--color-warning: rgba(255, 193, 7, .75);
32+
--color-warning: rgba(255, 193, 7, 0.75);
3433
--bg-tab-item: oklch(0.208 0.042 265.755);
3534
--color-border-tab: oklch(0.372 0.044 257.287);
3635
--title-color: oklch(0.968 0.007 247.896);
@@ -65,7 +64,6 @@ h6 {
6564
.prose {
6665
color: var(--paragraph-color);
6766

68-
6967
a {
7068
color: var(--primary);
7169
text-decoration: underline;
@@ -82,25 +80,25 @@ h6 {
8280
margin-bottom: 1.25em;
8381
}
8482

85-
ol>li {
83+
ol > li {
8684
position: relative;
8785
counter-increment: list-counter;
8886
padding-left: 1.75em;
8987
}
9088

91-
ol>li::before {
89+
ol > li::before {
9290
content: counter(list-counter) ".";
9391
position: absolute;
9492
font-weight: 400;
9593
left: 0;
9694
}
9795

98-
ul>li {
96+
ul > li {
9997
position: relative;
10098
padding-left: 1.75em;
10199
}
102100

103-
ul>li::before {
101+
ul > li::before {
104102
content: "";
105103
position: absolute;
106104
background-color: var(--paragraph-color);
@@ -113,7 +111,7 @@ h6 {
113111

114112
hr {
115113
border-color: var(--border-color);
116-
opacity: 0.10;
114+
opacity: 0.1;
117115
border-top-width: 1px;
118116
margin-top: 2em;
119117
margin-bottom: 2em;
@@ -164,11 +162,11 @@ h6 {
164162
line-height: 1.5;
165163
}
166164

167-
>p {
165+
> p {
168166
text-wrap: pretty;
169167
color: var(--paragraph-color);
170-
line-height: calc(0.25*7);
171-
margin-block: calc(0.25*5);
168+
line-height: calc(0.25 * 7);
169+
margin-block: calc(0.25 * 5);
172170
}
173171

174172
figure figcaption {
@@ -271,7 +269,11 @@ h6 {
271269
}
272270

273271
html:not(.dark) .prose .astro-code,
274-
html:not(.dark) .prose .astro-code span:not(.highlighted, .highlighted-word, .diff) * {
272+
html:not(.dark)
273+
.prose
274+
.astro-code
275+
span:not(.highlighted, .highlighted-word, .diff)
276+
* {
275277
background-color: var(--muted) !important;
276278
}
277279

@@ -281,8 +283,9 @@ html.dark .prose .astro-code * {
281283
}
282284

283285
html.dark .prose .astro-code,
284-
html.dark .prose>.astro-code {
285-
background-color: var(--muted) !important;
286+
html.dark .prose > .astro-code {
287+
/*background-color: var(--muted) !important;*/
288+
background-color: oklch(0.274 0.006 286.033) !important;
286289
}
287290

288291
.astro-code {
@@ -301,8 +304,8 @@ html.dark .prose>.astro-code {
301304
}
302305

303306
&.has-focused .line:not(.focused) {
304-
opacity: .7;
305-
filter: blur(.095rem);
307+
opacity: 0.7;
308+
filter: blur(0.095rem);
306309
}
307310

308311
&.has-focused:hover .line:not(.focused) {
@@ -348,7 +351,6 @@ html.dark .prose>.astro-code {
348351
hyphens: auto;
349352
}
350353

351-
352354
.astro-code code {
353355
display: flex;
354356
flex-direction: column;
@@ -364,7 +366,7 @@ html.dark .prose>.astro-code {
364366
background-color: var(--bg-highlight);
365367

366368
&.error {
367-
background-color: rgba(244, 63, 94, .20);
369+
background-color: rgba(244, 63, 94, 0.2);
368370

369371
&::after {
370372
content: "Error";
@@ -375,7 +377,7 @@ html.dark .prose>.astro-code {
375377
}
376378

377379
&.warning {
378-
background-color: rgba(255, 193, 7, .20);
380+
background-color: rgba(255, 193, 7, 0.2);
379381

380382
&::after {
381383
content: "Warning";
@@ -452,18 +454,19 @@ html.dark .prose>.astro-code {
452454
opacity: 0.8;
453455
font-size: var(--text-sm);
454456

455-
>*:first-child {
457+
> *:first-child {
456458
margin-top: 0;
457459
}
458460

459-
>*:last-child {
461+
> *:last-child {
460462
margin-bottom: 0;
461463
}
462464
}
463465

464466
&[data-callout="note"] {
465467
background-color: var(--callout-note-bg);
466-
border: 1px solid color-mix(in oklab, var(--callout-note-border) 25%, transparent);
468+
border: 1px solid
469+
color-mix(in oklab, var(--callout-note-border) 25%, transparent);
467470
color: var(--callout-note);
468471

469472
.callout-content {
@@ -477,7 +480,8 @@ html.dark .prose>.astro-code {
477480

478481
&[data-callout="success"] {
479482
background-color: var(--callout-success-bg);
480-
border: 1px solid color-mix(in oklab, var(--callout-success-border) 25%, transparent);
483+
border: 1px solid
484+
color-mix(in oklab, var(--callout-success-border) 25%, transparent);
481485
color: var(--callout-success);
482486

483487
.callout-content {
@@ -491,7 +495,8 @@ html.dark .prose>.astro-code {
491495

492496
&[data-callout="important"] {
493497
background-color: var(--callout-important-bg);
494-
border: 1px solid color-mix(in oklab, var(--callout-important-border) 25%, transparent);
498+
border: 1px solid
499+
color-mix(in oklab, var(--callout-important-border) 25%, transparent);
495500
color: var(--callout-important);
496501

497502
.callout-content {
@@ -505,7 +510,8 @@ html.dark .prose>.astro-code {
505510

506511
&[data-callout="warning"] {
507512
background-color: var(--callout-warning-bg);
508-
border: 1px solid color-mix(in oklab, var(--callout-warning-border) 25%, transparent);
513+
border: 1px solid
514+
color-mix(in oklab, var(--callout-warning-border) 25%, transparent);
509515
color: var(--callout-warning);
510516

511517
.callout-content {
@@ -519,7 +525,8 @@ html.dark .prose>.astro-code {
519525

520526
&[data-callout="error"] {
521527
background-color: var(--callout-error-bg);
522-
border: 1px solid color-mix(in oklab, var(--callout-error-border) 25%, transparent);
528+
border: 1px solid
529+
color-mix(in oklab, var(--callout-error-border) 25%, transparent);
523530
color: var(--callout-error);
524531

525532
.callout-content {
@@ -530,4 +537,4 @@ html.dark .prose>.astro-code {
530537
}
531538
}
532539
}
533-
}
540+
}

0 commit comments

Comments
 (0)