Skip to content

Commit 10c2883

Browse files
roiferoife
committed
feat(docs): Refresh homepage hero and sidebar behavior
Update EN/zh hero copy and layout styling, replace the header logo usage with CSS-based reveal branding, and force homepage routes to keep the sidebar enabled.
1 parent f03be6f commit 10c2883

7 files changed

Lines changed: 135 additions & 31 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,7 @@ export default defineConfig({
1212
starlight({
1313
title: {
1414
'zh-CN': 'VIDE',
15-
en: 'Vide Docs',
16-
},
17-
logo: {
18-
light: './src/assets/vide-logo-light.svg',
19-
dark: './src/assets/vide-logo-dark.svg',
20-
alt: 'Vide',
21-
replacesTitle: true,
15+
en: 'VIDE',
2216
},
2317
favicon: '/favicon.svg',
2418
description:

‎docs/src/assets/landing.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
:root {
22
--sl-font: Inter, var(--sl-font-system);
3-
--vide-accent-hsl: 200, 100%, 50%;
3+
--vide-accent-hsl: 215, 14%, 34%;
44
--vide-accent: hsl(var(--vide-accent-hsl));
55
--vide-overlay: hsla(var(--vide-accent-hsl), 0.18);
66
}
77

88
:root[data-theme='light'] {
9-
--vide-accent-hsl: 202, 92%, 44%;
10-
--vide-overlay: hsla(var(--vide-accent-hsl), 0.14);
9+
--vide-accent-hsl: 215, 14%, 34%;
10+
--vide-overlay: hsla(var(--vide-accent-hsl), 0.08);
1111
}
1212

1313
:root[data-theme='dark'] {
14+
--vide-accent-hsl: 0, 0%, 90%;
1415
--vide-primary-button-color: #111827;
1516
}
1617

‎docs/src/components/HomepageFeatureSection.astro‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,23 @@ interface Props {
77
}
88
99
const locale = normalizeHomepageLocale(Astro.props.locale);
10-
const heading =
11-
locale === 'en'
12-
? `Make <span class="vide-feature__accent"><strong>hardware design</strong></span><br />feel as fluid as writing software`
13-
: `让<span class="vide-feature__accent"><strong>硬件设计</strong></span><br />像编写软件一样<wbr /><span class="vide-feature__nowrap">丝滑顺手</span>`;
1410
---
1511

16-
<section class="vide-feature">
17-
<h2 set:html={heading} />
12+
<section class="vide-feature" data-locale={locale}>
13+
<h2>
14+
{
15+
locale === 'en' ? (
16+
<>
17+
Make <span class="vide-feature__accent"><strong>hardware design</strong></span><br />feel as fluid as
18+
developing software
19+
</>
20+
) : (
21+
<>
22+
让<span class="vide-feature__accent"><strong>硬件设计</strong></span><br />像开发软件一样<wbr /><span class="vide-feature__nowrap">丝滑顺手</span>
23+
</>
24+
)
25+
}
26+
</h2>
1827
<HomepageFeatureCarousel locale={locale} />
1928
</section>
2029

@@ -32,6 +41,10 @@ const heading =
3241
line-height: 1.4;
3342
}
3443

44+
.vide-feature[data-locale='en'] h2 {
45+
max-width: 34ch;
46+
}
47+
3548
.vide-feature__accent {
3649
color: var(--vide-accent);
3750
}

‎docs/src/components/HomepageHeroStyles.astro‎

Lines changed: 99 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,119 @@
11
<style is:global>
2+
[data-has-hero] .hero {
3+
padding-block-start: clamp(1.25rem, 4vw, 3.75rem);
4+
}
5+
26
[data-has-hero] .hero h1 {
3-
display: grid;
4-
gap: 2rem;
7+
display: block;
58
letter-spacing: 0;
69
line-height: 1;
10+
text-align: center;
11+
text-wrap: wrap;
12+
word-break: keep-all;
13+
width: min(100%, 72rem);
14+
max-width: 72rem;
15+
font-size: clamp(2.2rem, 4.75vw, 4.15rem);
716
}
817

9-
[data-has-hero] .hero h1 .hero-brand {
10-
color: var(--vide-accent);
11-
font-size: clamp(2.55rem, 4.3vw, 4rem);
12-
font-weight: 900;
18+
[data-has-hero] .hero h1::before {
19+
content: "";
20+
display: block;
21+
width: min(15rem, 42vw);
22+
aspect-ratio: 864 / 280;
23+
margin-inline: auto;
24+
margin-bottom: clamp(0.85rem, 2vw, 1.35rem);
25+
background: url('../assets/vide-logo-reveal-light.svg') center / contain no-repeat;
1326
}
1427

15-
[data-has-hero] .hero h1 .hero-title-main {
16-
font-size: clamp(2.5rem, 5.8vw, 5rem);
17-
text-wrap: balance;
18-
word-break: keep-all;
28+
:root[data-theme='dark'][data-has-hero] .hero h1::before,
29+
:root[data-theme='dark'] [data-has-hero] .hero h1::before {
30+
background-image: url('../assets/vide-logo-reveal-dark.svg');
31+
}
32+
33+
[data-has-hero] .hero .tagline {
34+
max-width: min(100%, 56rem);
35+
color: var(--sl-color-gray-3);
36+
font-size: clamp(1rem, 1.35vw, 1.2rem);
37+
line-height: 1.7;
38+
text-align: center;
1939
}
2040

21-
[data-has-hero] .hero h1 .hero-title-nowrap {
41+
[data-has-hero] .hero .hero-tagline-accent {
42+
color: var(--vide-accent);
43+
font-weight: 800;
44+
}
45+
46+
[data-has-hero] .hero .hero-tagline-nowrap {
2247
white-space: nowrap;
2348
}
2449

50+
[data-has-hero] .hero .stack,
51+
[data-has-hero] .hero .copy {
52+
align-items: center;
53+
text-align: center;
54+
}
55+
56+
[data-has-hero] .hero .actions {
57+
justify-content: center;
58+
}
59+
2560
[data-has-hero] .hero h1 .hero-title-sub {
2661
color: var(--sl-color-gray-2);
2762
font-size: clamp(1rem, 1.45vw, 1.35rem);
2863
font-weight: 400;
2964
line-height: 1.35;
3065
}
66+
67+
@media (max-width: 49.999rem) {
68+
[data-has-hero] .hero,
69+
[data-has-hero] .hero .stack,
70+
[data-has-hero] .hero .copy {
71+
min-width: 0;
72+
width: 100%;
73+
max-width: 100%;
74+
}
75+
76+
[data-has-hero] .hero h1 {
77+
font-size: clamp(1.85rem, 5.5vw, 2.1rem);
78+
line-height: 1.08;
79+
width: min(100%, calc(100vw - 2rem));
80+
max-width: calc(100vw - 2rem);
81+
white-space: normal;
82+
word-break: normal;
83+
overflow-wrap: anywhere;
84+
}
85+
86+
[data-has-hero] .hero .actions {
87+
flex-wrap: wrap;
88+
max-width: calc(100vw - 2rem);
89+
}
90+
}
91+
92+
[data-has-hero][data-has-sidebar] {
93+
--sl-content-width: 67.5rem;
94+
}
95+
96+
@media (min-width: 50rem) {
97+
[data-has-hero][data-has-sidebar] {
98+
--sl-content-inline-start: 0rem;
99+
}
100+
101+
[data-has-hero][data-has-sidebar] .sidebar-pane {
102+
display: none;
103+
}
104+
105+
[data-has-hero] .hero .stack,
106+
[data-has-hero] .hero .copy {
107+
align-items: center;
108+
text-align: center;
109+
}
110+
111+
[data-has-hero] .hero .actions {
112+
justify-content: center;
113+
}
114+
115+
[data-has-hero] .hero h1::before {
116+
width: min(23rem, 50vw);
117+
}
118+
}
31119
</style>

‎docs/src/content/docs/en/index.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ editUrl: false
66
lastUpdated: false
77
hero:
88
title: |
9-
<span class="hero-brand">Vide</span>
10-
<span class="hero-title-main">Modern SystemVerilog <wbr />development environment</span>
9+
Modern SystemVerilog Coding IDE
10+
tagline: |
11+
<strong class="hero-tagline-accent">Vide</strong> is a coding IDE built for Verilog/SystemVerilog developers, <wbr /><span class="hero-tagline-nowrap">bringing modern software development environment features into the hardware world</span>.
1112
actions:
1213
- text: Quick Start
1314
link: ./user-guide/

‎docs/src/content/docs/index.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ editUrl: false
66
lastUpdated: false
77
hero:
88
title: |
9-
<span class="hero-brand">Vide</span>
10-
<span class="hero-title-main">现代 SystemVerilog <wbr /><span class="hero-title-nowrap">开发环境</span></span>
9+
<strong class="hero-tagline-accent">VIDE</strong> : 现代 SystemVerilog 编程 IDE
10+
tagline: |
11+
将现代软件开发环境的功能带入硬件世界</span>。
1112
actions:
1213
- text: 快速开始
1314
link: ./user-guide/

‎docs/src/starlightRouteData.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ export function onRequest(
2121
route.locale && route.id.startsWith(`${route.locale}/`)
2222
? route.id.slice(route.locale.length + 1)
2323
: route.id;
24+
25+
if (routeId === '' || routeId === 'index') {
26+
route.hasSidebar = true;
27+
return next();
28+
}
29+
2430
const section = getSection(routeId);
2531

2632
if (!section) {

0 commit comments

Comments
 (0)