Skip to content

Commit cf67ccd

Browse files
3m1n3nc33m1n3nc3
committed
feat: add custom theme styles and layout for VitePress documentation
1 parent 1da6dcb commit cf67ccd

3 files changed

Lines changed: 365 additions & 3 deletions

File tree

‎docs/.vitepress/config.mts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@ export default defineConfig({
1414
{ text: 'H3', link: '/guide/h3' },
1515
{ text: 'Hono', link: '/guide/hono' },
1616
{ text: 'Koa', link: '/guide/koa' },
17-
{ text: 'Container Binding', link: '/guide/container-binding' },
18-
{ text: 'Adapters', link: '/guide/adapters' },
1917
{ text: 'API', link: '/api' },
20-
{ text: 'Testing', link: '/testing' },
2118
],
2219
sidebar: [
2320
{

‎docs/.vitepress/theme/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// https://vitepress.dev/guide/custom-theme
2+
import { h } from 'vue'
3+
import type { Theme } from 'vitepress'
4+
import DefaultTheme from 'vitepress/theme'
5+
import './style.css'
6+
7+
export default {
8+
extends: DefaultTheme,
9+
Layout: () => {
10+
return h(DefaultTheme.Layout, null, {
11+
// https://vitepress.dev/guide/extending-default-theme#layout-slots
12+
})
13+
},
14+
// enhanceApp ({ app, router, siteData }) {
15+
// }
16+
} satisfies Theme

‎docs/.vitepress/theme/style.css‎

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,349 @@
1+
/**
2+
* Arkstack docs theme.
3+
* Keeps the default VitePress structure, but uses the same gold/dark
4+
* material language as the custom landing page and starter welcome view.
5+
*/
6+
7+
:root {
8+
--ark-gold-light: #a06800;
9+
--ark-gold-mid: #8a5a00;
10+
--ark-gold-dark: #6b4400;
11+
--ark-bg: #f5f3ef;
12+
--ark-card: #ffffff;
13+
--ark-panel: #f0ede8;
14+
--ark-border: rgba(160, 104, 0, 0.16);
15+
--ark-text: #1a1714;
16+
--ark-muted: #8f8678;
17+
--ark-hover: #f9f7f3;
18+
--ark-green: #2e7d52;
19+
--ark-blue: #5460a0;
20+
--ark-radius: 8px;
21+
--ark-shadow: 0 18px 48px rgba(70, 52, 20, 0.1);
22+
23+
--vp-c-bg: var(--ark-bg);
24+
--vp-c-bg-alt: var(--ark-panel);
25+
--vp-c-bg-elv: var(--ark-card);
26+
--vp-c-bg-soft: var(--ark-panel);
27+
--vp-c-text-1: var(--ark-text);
28+
--vp-c-text-2: var(--ark-muted);
29+
--vp-c-text-3: color-mix(in srgb, var(--ark-muted) 76%, transparent);
30+
--vp-c-divider: var(--ark-border);
31+
--vp-c-border: var(--ark-border);
32+
--vp-c-gutter: var(--ark-border);
33+
34+
--vp-c-brand-1: var(--ark-gold-light);
35+
--vp-c-brand-2: var(--ark-gold-mid);
36+
--vp-c-brand-3: var(--ark-gold-dark);
37+
--vp-c-brand-soft: rgba(160, 104, 0, 0.12);
38+
39+
--vp-c-tip-1: var(--ark-gold-light);
40+
--vp-c-tip-2: var(--ark-gold-mid);
41+
--vp-c-tip-3: var(--ark-gold-dark);
42+
--vp-c-tip-soft: rgba(160, 104, 0, 0.12);
43+
44+
--vp-button-brand-border: var(--ark-gold-light);
45+
--vp-button-brand-text: var(--ark-bg);
46+
--vp-button-brand-bg: var(--ark-gold-light);
47+
--vp-button-brand-hover-border: var(--ark-gold-mid);
48+
--vp-button-brand-hover-text: var(--ark-gold-light);
49+
--vp-button-brand-hover-bg: var(--ark-hover);
50+
--vp-button-brand-active-border: var(--ark-gold-mid);
51+
--vp-button-brand-active-text: var(--ark-bg);
52+
--vp-button-brand-active-bg: var(--ark-gold-mid);
53+
54+
--vp-code-color: #7a5c20;
55+
--vp-code-bg: rgba(160, 104, 0, 0.08);
56+
--vp-code-block-bg: #dfdfdf;
57+
--vp-code-block-divider-color: rgba(201, 150, 12, 0.18);
58+
--vp-code-line-highlight-color: rgba(201, 150, 12, 0.1);
59+
--vp-code-line-number-color: #827b6d;
60+
61+
--vp-home-hero-name-color: transparent;
62+
--vp-home-hero-name-background: -webkit-linear-gradient(
63+
120deg,
64+
var(--ark-gold-light) 20%,
65+
var(--ark-text)
66+
);
67+
--vp-home-hero-image-background-image: radial-gradient(
68+
circle,
69+
rgba(201, 150, 12, 0.36),
70+
transparent 68%
71+
);
72+
--vp-home-hero-image-filter: blur(54px);
73+
}
74+
75+
html.dark {
76+
--ark-gold-light: #f0c040;
77+
--ark-gold-mid: #c9960c;
78+
--ark-gold-dark: #8a6400;
79+
--ark-bg: #0b0c0e;
80+
--ark-card: #111317;
81+
--ark-panel: #0d0f12;
82+
--ark-border: rgba(201, 150, 12, 0.18);
83+
--ark-text: #f5f0e8;
84+
--ark-muted: #827b6d;
85+
--ark-hover: #161820;
86+
--ark-green: #88c99a;
87+
--ark-blue: #8a9ad6;
88+
--ark-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
89+
90+
--vp-code-color: #d4b86a;
91+
--vp-code-bg: rgba(201, 150, 12, 0.1);
92+
--vp-code-block-bg: #0d0f12;
93+
}
94+
95+
html {
96+
scroll-behavior: smooth;
97+
}
98+
99+
body {
100+
background:
101+
linear-gradient(180deg, rgba(201, 150, 12, 0.08), transparent 300px),
102+
var(--vp-c-bg);
103+
font-family:
104+
'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
105+
}
106+
107+
::selection {
108+
background: rgba(201, 150, 12, 0.24);
109+
}
110+
111+
.VPNav {
112+
border-bottom: 1px solid transparent;
113+
}
114+
115+
.VPNavBar {
116+
background: color-mix(in srgb, var(--vp-c-bg) 88%, transparent);
117+
backdrop-filter: blur(18px);
118+
}
119+
120+
.VPNavBar.has-sidebar .content,
121+
.VPNavBar:not(.has-sidebar) .content {
122+
border-bottom-color: var(--ark-border);
123+
}
124+
125+
.VPNavBarTitle .title {
126+
color: var(--ark-text);
127+
font-family: Syne, Inter, ui-sans-serif, system-ui, sans-serif;
128+
font-weight: 800;
129+
letter-spacing: 0;
130+
}
131+
132+
.VPNavBarTitle .logo {
133+
filter: drop-shadow(0 0 14px rgba(201, 150, 12, 0.35));
134+
}
135+
136+
.VPNavBarMenuLink,
137+
.VPNavBarMenuGroup .button {
138+
color: var(--ark-muted);
139+
font-size: 0.78rem;
140+
font-weight: 800;
141+
letter-spacing: 0.06em;
142+
text-transform: uppercase;
143+
transition: color 0.2s;
144+
}
145+
146+
.VPNavBarMenuLink:hover,
147+
.VPNavBarMenuLink.active,
148+
.VPNavBarMenuGroup .button:hover {
149+
color: var(--ark-gold-light);
150+
}
151+
152+
.VPSocialLink {
153+
color: var(--ark-muted);
154+
transition:
155+
color 0.2s,
156+
transform 0.2s;
157+
}
158+
159+
.VPSocialLink:hover {
160+
color: var(--ark-gold-light);
161+
transform: translateY(-2px);
162+
}
163+
164+
.VPSidebar {
165+
background: color-mix(in srgb, var(--vp-c-bg) 94%, transparent);
166+
border-right: 1px solid var(--ark-border);
167+
}
168+
169+
.VPSidebarItem .text {
170+
color: var(--ark-muted);
171+
font-size: 0.82rem;
172+
transition: color 0.2s;
173+
}
174+
175+
.VPSidebarItem.is-active > .item .text,
176+
.VPSidebarItem .item:hover .text {
177+
color: var(--ark-gold-light);
178+
}
179+
180+
.VPDoc {
181+
font-family:
182+
'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
183+
}
184+
185+
.VPDoc .container {
186+
max-width: 1180px;
187+
}
188+
189+
.VPDoc .content {
190+
padding-bottom: 5rem;
191+
}
192+
193+
.VPDoc h1,
194+
.VPDoc h2,
195+
.VPDoc h3,
196+
.VPDoc h4 {
197+
color: var(--ark-text);
198+
font-family: Syne, Inter, ui-sans-serif, system-ui, sans-serif;
199+
font-weight: 800;
200+
letter-spacing: 0;
201+
}
202+
203+
.VPDoc h1 {
204+
font-size: clamp(2.2rem, 5vw, 3.8rem);
205+
line-height: 1;
206+
}
207+
208+
.VPDoc h2 {
209+
border-top-color: var(--ark-border);
210+
}
211+
212+
.VPDoc p,
213+
.VPDoc li {
214+
color: var(--ark-muted);
215+
line-height: 1.85;
216+
}
217+
218+
.VPDoc a {
219+
color: var(--ark-gold-light);
220+
text-decoration-color: color-mix(
221+
in srgb,
222+
var(--ark-gold-light) 34%,
223+
transparent
224+
);
225+
text-underline-offset: 3px;
226+
}
227+
228+
.VPDoc a:hover {
229+
color: var(--ark-gold-mid);
230+
}
231+
232+
.VPDoc table {
233+
border: 1px solid var(--ark-border);
234+
border-radius: var(--ark-radius);
235+
display: table;
236+
overflow: hidden;
237+
}
238+
239+
.VPDoc tr:nth-child(2n) {
240+
background: rgba(201, 150, 12, 0.04);
241+
}
242+
243+
.VPDoc th,
244+
.VPDoc td {
245+
border-color: var(--ark-border);
246+
}
247+
248+
.VPDoc :not(pre) > code {
249+
border: 1px solid var(--ark-border);
250+
border-radius: 6px;
251+
color: var(--ark-gold-light);
252+
}
253+
254+
.vp-doc div[class*='language-'] {
255+
border: 1px solid var(--ark-border);
256+
border-radius: var(--ark-radius);
257+
box-shadow: var(--ark-shadow);
258+
}
259+
260+
.vp-doc div[class*='language-']::before {
261+
color: var(--ark-muted);
262+
letter-spacing: 0.08em;
263+
}
264+
265+
.vp-doc div[class*='language-'] pre {
266+
font-family:
267+
'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
268+
}
269+
270+
.vp-doc .custom-block {
271+
border: 1px solid var(--ark-border);
272+
border-radius: var(--ark-radius);
273+
background: rgba(201, 150, 12, 0.06);
274+
}
275+
276+
.vp-doc .custom-block-title {
277+
color: var(--ark-gold-light);
278+
letter-spacing: 0.08em;
279+
text-transform: uppercase;
280+
}
281+
282+
.VPDocAsideOutline .outline-title {
283+
color: var(--ark-text);
284+
font-family: Syne, Inter, ui-sans-serif, system-ui, sans-serif;
285+
font-weight: 800;
286+
}
287+
288+
.VPDocAsideOutline .outline-link {
289+
color: var(--ark-muted);
290+
transition: color 0.2s;
291+
}
292+
293+
.VPDocAsideOutline .outline-link:hover,
294+
.VPDocAsideOutline .outline-link.active {
295+
color: var(--ark-gold-light);
296+
}
297+
298+
.VPFooter {
299+
background: var(--ark-panel);
300+
border-top: 1px solid var(--ark-border);
301+
}
302+
303+
.VPFeatures.VPHomeFeatures .box,
304+
.VPHomeFeatures .item .box {
305+
border: 1px solid var(--ark-border);
306+
border-radius: var(--ark-radius);
307+
background: var(--ark-card);
308+
box-shadow: var(--ark-shadow);
309+
transition:
310+
transform 0.2s,
311+
border-color 0.2s,
312+
background 0.2s;
313+
}
314+
315+
.VPFeatures.VPHomeFeatures .box:hover,
316+
.VPHomeFeatures .item .box:hover {
317+
border-color: var(--ark-gold-mid);
318+
background: var(--ark-hover);
319+
transform: translateY(-3px);
320+
}
321+
322+
.VPFeatures.VPHomeFeatures .box > .VPImage {
323+
width: 48px;
324+
height: 48px;
325+
padding: 12px;
326+
border: 1px solid var(--ark-border);
327+
border-radius: var(--ark-radius);
328+
background: rgba(201, 150, 12, 0.08);
329+
box-sizing: border-box;
330+
object-fit: contain;
331+
transition: background-color 0.25s;
332+
}
333+
334+
.dark .VPFeatures.VPHomeFeatures .box > .VPImage,
335+
.dark .why-icon img,
336+
.dark .card-icon img,
337+
.dark .feature-icon img {
338+
filter: invert();
339+
}
340+
341+
@media (prefers-reduced-motion: reduce) {
342+
*,
343+
*::before,
344+
*::after {
345+
animation-duration: 0.01ms !important;
346+
scroll-behavior: auto !important;
347+
transition-duration: 0.01ms !important;
348+
}
349+
}

0 commit comments

Comments
 (0)