Skip to content

Commit 8348918

Browse files
sarahdayanclaude
sarahdayan
and
claude
authored
docs: restyle documentation site with custom homepage and refined theme (#826)
## Summary - Replace default VitePress homepage with custom Vue components (split hero with install/usage code snippets, four-column feature grid) - Switch font from Inter to Plus Jakarta Sans - Deepen brand colors to match the logo's `#1144ee`, remove gradients everywhere - Use light code blocks in light mode with Shiki-matching syntax colors - Refine sidebar, navigation, and table styles - Clean up dead CSS and unused hero/feature frontmatter Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 002ee32 commit 8348918

File tree

11 files changed

+472
-219
lines changed

11 files changed

+472
-219
lines changed

‎docs/.vitepress/theme/HomeFeatures.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<script setup lang="ts">
2+
const features = [
3+
{
4+
title: 'Immutable & safe',
5+
details:
6+
'All operations return new Dinero objects. Your original values are never mutated.',
7+
},
8+
{
9+
title: 'Precise calculations',
10+
details:
11+
'Handles money as integers in minor units to avoid floating-point precision issues.',
12+
},
13+
{
14+
title: 'Multi-currency',
15+
details:
16+
'Built-in support for ISO 4217 currencies and custom currency definitions.',
17+
},
18+
{
19+
title: 'Tree-shakeable',
20+
details:
21+
'Import only what you need. Functional API designed for optimal bundle size.',
22+
},
23+
];
24+
</script>
25+
26+
<template>
27+
<section class="home-features">
28+
<div class="grid">
29+
<div v-for="feature in features" :key="feature.title" class="card">
30+
<h3 class="title">{{ feature.title }}</h3>
31+
<p class="details">{{ feature.details }}</p>
32+
</div>
33+
</div>
34+
</section>
35+
</template>
36+
37+
<style scoped>
38+
.home-features {
39+
max-width: 1152px;
40+
margin: 0 auto;
41+
padding: 0 24px 80px;
42+
}
43+
44+
@media (min-width: 960px) {
45+
.home-features {
46+
padding: 0 32px 96px;
47+
}
48+
}
49+
50+
.grid {
51+
display: grid;
52+
grid-template-columns: 1fr;
53+
gap: 1px;
54+
border-top: 1px solid var(--vp-c-border);
55+
}
56+
57+
@media (min-width: 640px) {
58+
.grid {
59+
grid-template-columns: 1fr 1fr;
60+
}
61+
}
62+
63+
@media (min-width: 960px) {
64+
.grid {
65+
grid-template-columns: repeat(4, 1fr);
66+
}
67+
}
68+
69+
.card {
70+
padding: 28px 24px;
71+
}
72+
73+
.title {
74+
font-size: 0.8125rem;
75+
font-weight: 700;
76+
letter-spacing: 0.05em;
77+
text-transform: uppercase;
78+
color: var(--vp-c-text-1);
79+
margin-bottom: 8px;
80+
}
81+
82+
.details {
83+
font-size: 0.9375rem;
84+
line-height: 1.55;
85+
color: var(--vp-c-text-2);
86+
}
87+
</style>

‎docs/.vitepress/theme/HomeHero.vue‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<script setup lang="ts">
2+
import { withBase } from 'vitepress';
3+
</script>
4+
5+
<template>
6+
<section class="home-hero">
7+
<div class="container">
8+
<div class="content">
9+
<p class="name">Dinero.js</p>
10+
<h1 class="heading">Create, calculate, and format money safely</h1>
11+
<p class="tagline">
12+
An immutable library for expressing monetary values in JavaScript and
13+
TypeScript.
14+
</p>
15+
<div class="actions">
16+
<a
17+
class="action brand"
18+
:href="withBase('/getting-started/quick-start')"
19+
>Get Started</a
20+
>
21+
<a
22+
class="action ghost"
23+
href="https://github.com/dinerojs/dinero.js"
24+
target="_blank"
25+
rel="noopener noreferrer"
26+
>View on GitHub</a
27+
>
28+
</div>
29+
</div>
30+
<div class="code-area">
31+
<div class="code-block">
32+
<p class="code-label">Install</p>
33+
<pre><code><span class="fn">npm</span> install dinero.js@alpha</code></pre>
34+
</div>
35+
<div class="code-block">
36+
<p class="code-label">Usage</p>
37+
<pre><code><span class="kw">import</span> { dinero, add, toDecimal } <span class="kw">from</span> <span class="str">'dinero.js'</span>;
38+
<span class="kw">import</span> { USD } <span class="kw">from</span> <span class="str">'dinero.js/currencies'</span>;
39+
40+
<span class="kw">const</span> price = <span class="fn">dinero</span>({ amount: <span class="num">1999</span>, currency: USD });
41+
<span class="kw">const</span> tax = <span class="fn">dinero</span>({ amount: <span class="num">160</span>, currency: USD });
42+
43+
<span class="kw">const</span> total = <span class="fn">add</span>(price, tax);
44+
45+
<span class="fn">toDecimal</span>(total); <span class="cmt">// "21.59"</span></code></pre>
46+
</div>
47+
</div>
48+
</div>
49+
</section>
50+
</template>
51+
52+
<style scoped>
53+
.home-hero {
54+
max-width: 1152px;
55+
margin: 0 auto;
56+
padding: 80px 24px 56px;
57+
}
58+
59+
.container {
60+
display: flex;
61+
flex-direction: column;
62+
gap: 48px;
63+
}
64+
65+
@media (min-width: 960px) {
66+
.home-hero {
67+
padding: 62px 32px 72px;
68+
}
69+
70+
.container {
71+
flex-direction: row;
72+
align-items: center;
73+
gap: 72px;
74+
}
75+
76+
.content {
77+
flex: 1;
78+
min-width: 0;
79+
}
80+
81+
.code-area {
82+
flex: 1;
83+
min-width: 0;
84+
}
85+
}
86+
87+
.name {
88+
font-size: 1rem;
89+
font-weight: 700;
90+
letter-spacing: 0.05em;
91+
text-transform: uppercase;
92+
color: var(--vp-c-brand-1);
93+
margin-bottom: 16px;
94+
}
95+
96+
.heading {
97+
font-size: 2rem;
98+
font-weight: 700;
99+
letter-spacing: -0.03em;
100+
line-height: 1.15;
101+
color: var(--vp-c-text-1);
102+
}
103+
104+
@media (min-width: 640px) {
105+
.heading {
106+
font-size: 2.5rem;
107+
}
108+
}
109+
110+
@media (min-width: 960px) {
111+
.heading {
112+
font-size: 3rem;
113+
}
114+
}
115+
116+
.tagline {
117+
font-size: 1.375rem;
118+
line-height: 1.5;
119+
color: var(--vp-c-text-2);
120+
margin-top: 16px;
121+
max-width: 480px;
122+
}
123+
124+
.actions {
125+
display: flex;
126+
gap: 12px;
127+
margin-top: 32px;
128+
}
129+
130+
.action {
131+
display: inline-flex;
132+
align-items: center;
133+
padding: 12px 24px;
134+
font-size: 1rem;
135+
font-weight: 600;
136+
letter-spacing: -0.01em;
137+
border-radius: 6px;
138+
text-decoration: none;
139+
transition:
140+
opacity 160ms ease,
141+
border-color 160ms ease;
142+
}
143+
144+
.action.brand {
145+
background-color: var(--vp-c-brand-1);
146+
color: #fff;
147+
border: 1px solid var(--vp-c-brand-1);
148+
}
149+
150+
.action.brand:hover {
151+
opacity: 0.85;
152+
}
153+
154+
.action.ghost {
155+
background-color: transparent;
156+
color: var(--vp-c-text-2);
157+
border: 1px solid var(--vp-c-border);
158+
}
159+
160+
.action.ghost:hover {
161+
border-color: var(--vp-c-text-3);
162+
color: var(--vp-c-text-1);
163+
}
164+
165+
.code-area {
166+
display: flex;
167+
flex-direction: column;
168+
gap: 12px;
169+
}
170+
171+
.code-block {
172+
border-radius: 8px;
173+
border: 1px solid var(--vp-c-border);
174+
background: var(--vp-code-block-bg);
175+
overflow-x: auto;
176+
}
177+
178+
.code-label {
179+
font-family: var(--vp-font-family-mono);
180+
font-size: 0.75rem;
181+
font-weight: 500;
182+
color: var(--vp-c-text-3);
183+
padding: 12px 16px 0;
184+
margin: 0;
185+
}
186+
187+
.code-block pre {
188+
margin: 0;
189+
padding: 12px 16px 14px;
190+
}
191+
192+
.code-block code {
193+
font-family: var(--vp-font-family-mono);
194+
font-size: 0.8125rem;
195+
line-height: 1.7;
196+
color: var(--hero-code-text);
197+
}
198+
199+
.code-block .kw {
200+
color: var(--hero-code-kw);
201+
}
202+
203+
.code-block .str {
204+
color: var(--hero-code-str);
205+
}
206+
207+
.code-block .num {
208+
color: var(--hero-code-num);
209+
}
210+
211+
.code-block .fn {
212+
color: var(--hero-code-fn);
213+
}
214+
215+
.code-block .cmt {
216+
color: var(--hero-code-cmt);
217+
font-style: italic;
218+
}
219+
</style>

‎docs/.vitepress/theme/NotFound.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,14 @@ function goHome() {
3333
width: 180px;
3434
height: auto;
3535
margin-bottom: 32px;
36-
opacity: 0.6;
37-
filter: grayscale(30%);
36+
opacity: 0.4;
37+
filter: grayscale(50%);
3838
}
3939
4040
.code {
4141
font-size: 4rem;
4242
font-weight: 700;
43-
background: linear-gradient(135deg, #1144ee 0%, #ff77aa 100%);
44-
-webkit-background-clip: text;
45-
-webkit-text-fill-color: transparent;
46-
background-clip: text;
43+
color: var(--vp-c-text-3);
4744
line-height: 1;
4845
margin-bottom: 16px;
4946
}
@@ -65,15 +62,15 @@ function goHome() {
6562
padding: 12px 24px;
6663
background-color: var(--vp-c-brand-1);
6764
color: white;
68-
font-weight: 600;
69-
border-radius: 8px;
65+
font-weight: 500;
66+
border-radius: 6px;
7067
border: none;
7168
cursor: pointer;
7269
font-size: 1rem;
73-
transition: background-color 0.2s;
70+
transition: opacity 160ms ease;
7471
}
7572
7673
.action:hover {
77-
background-color: var(--vp-c-brand-2);
74+
opacity: 0.85;
7875
}
7976
</style>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import { h } from 'vue';
22
import type { Theme } from 'vitepress';
33
import DefaultTheme from 'vitepress/theme';
44
import NotFound from './NotFound.vue';
5+
import HomeHero from './HomeHero.vue';
6+
import HomeFeatures from './HomeFeatures.vue';
57
import './style.css';
68

79
export default {
810
extends: DefaultTheme,
911
Layout: () => {
1012
return h(DefaultTheme.Layout, null, {
1113
'not-found': () => h(NotFound),
14+
'home-hero-before': () => h(HomeHero),
15+
'home-features-before': () => h(HomeFeatures),
1216
});
1317
},
1418
} satisfies Theme;

0 commit comments

Comments
 (0)