Skip to content

Commit 8713ae4

Browse files
luiginotmarioluiginotmario
committed
nit: documentation easy access
nit: adjusted integrations moved quick start removed unecessary row extracted component
1 parent 0529b6a commit 8713ae4

3 files changed

Lines changed: 679 additions & 429 deletions

File tree

‎src/components/Icon.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import {
4444
Globe, Mic, Clock, Webhook, CloudSun, Image, Camera, Search, Mail,
4545
StickyNote, CheckSquare, ListTodo, PenTool, Bed, ShoppingCart, Printer,
4646
Heart, UtensilsCrossed, MonitorSmartphone, Eye, Monitor, Bot, Users, Hash,
47-
Home, MessageCircle, Brain, Terminal, Puzzle, Zap
47+
Home, MessageCircle, Brain, Terminal, Puzzle, Zap, Calendar, BookOpen
4848
} from '@lucide/astro';
4949
5050
const { icon, color = 'currentColor', size = 24, class: className = '' } = Astro.props;
@@ -81,6 +81,8 @@ const lucideIcons: Record<string, any> = {
8181
'lucide:terminal': Terminal,
8282
'lucide:puzzle': Puzzle,
8383
'lucide:zap': Zap,
84+
'lucide:calendar': Calendar,
85+
'lucide:book-open': BookOpen,
8486
};
8587
8688
const isStringIcon = typeof icon === 'string';

‎src/components/Navbar.astro‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
---
2+
import Icon from './Icon.astro';
3+
import LobsterLogo from './LobsterLogo.astro';
4+
import { siGithub } from 'simple-icons';
5+
6+
const siIcon = (icon: any) => icon.path;
7+
---
8+
9+
<nav class="navbar" id="navbar">
10+
<div class="navbar-container">
11+
<div class="navbar-left">
12+
<a href="/" class="navbar-logo" title="OpenClaw">
13+
<div class="navbar-logo-icon" aria-hidden="true">
14+
<LobsterLogo gradientId="navbar-lobster-gradient" />
15+
</div>
16+
</a>
17+
18+
<div class="navbar-links">
19+
<a href="#getting-started" class="navbar-link">Getting Started</a>
20+
<a href="#features" class="navbar-link">Features</a>
21+
<a href="/integrations" class="navbar-link">Integrations</a>
22+
<a href="/blog" class="navbar-link">Blog</a>
23+
</div>
24+
</div>
25+
26+
<div class="navbar-right">
27+
<div class="navbar-theme-switcher">
28+
<button class="navbar-theme-btn" type="button" data-theme-btn="system" aria-label="System theme" title="System theme">
29+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
30+
<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>
31+
</svg>
32+
</button>
33+
<button class="navbar-theme-btn" type="button" data-theme-btn="light" aria-label="Light theme" title="Light theme">
34+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
35+
<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>
36+
</svg>
37+
</button>
38+
<button class="navbar-theme-btn" type="button" data-theme-btn="dark" aria-label="Dark theme" title="Dark theme">
39+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
40+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
41+
</svg>
42+
</button>
43+
</div>
44+
45+
<a href="https://docs.openclaw.ai" target="_blank" rel="noopener" class="navbar-docs-btn" aria-label="Documentation">
46+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
47+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
48+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
49+
<line x1="8" y1="7" x2="16" y2="7"/>
50+
<line x1="8" y1="11" x2="14" y2="11"/>
51+
</svg>
52+
<span class="navbar-docs-tooltip">Documentation</span>
53+
</a>
54+
55+
<a href="https://github.com/openclaw/openclaw" target="_blank" rel="noopener" class="navbar-github" title="View on GitHub">
56+
<Icon icon={siIcon(siGithub)} size={20} />
57+
<span class="navbar-github-text">GitHub</span>
58+
</a>
59+
</div>
60+
</div>
61+
</nav>
62+
63+
<style>
64+
.navbar {
65+
position: fixed;
66+
top: 0;
67+
left: 0;
68+
right: 0;
69+
z-index: 100;
70+
background: transparent;
71+
border-bottom: 1px solid transparent;
72+
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
73+
backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
74+
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
75+
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
76+
}
77+
78+
.navbar.scrolled {
79+
background: rgba(248, 242, 237, 0.8);
80+
backdrop-filter: blur(12px) saturate(180%);
81+
-webkit-backdrop-filter: blur(12px) saturate(180%);
82+
border-bottom-color: var(--border-subtle);
83+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
84+
}
85+
86+
html[data-theme='dark'] .navbar.scrolled {
87+
background: rgba(26, 21, 18, 0.8);
88+
}
89+
90+
.navbar-container {
91+
max-width: 1000px;
92+
margin: 0 auto;
93+
padding: 16px 24px;
94+
display: flex;
95+
align-items: center;
96+
justify-content: space-between;
97+
gap: 32px;
98+
}
99+
100+
.navbar-left {
101+
display: flex;
102+
align-items: center;
103+
gap: 20px;
104+
}
105+
106+
.navbar-right {
107+
display: flex;
108+
align-items: center;
109+
gap: 12px;
110+
}
111+
112+
.navbar-logo {
113+
display: flex;
114+
align-items: center;
115+
text-decoration: none;
116+
color: var(--text-primary);
117+
transition: all 0.2s ease;
118+
}
119+
120+
.navbar-logo:hover {
121+
color: var(--accent);
122+
}
123+
124+
.navbar-logo-icon {
125+
width: 32px;
126+
height: 32px;
127+
color: var(--accent);
128+
transition: transform 0.2s ease;
129+
}
130+
131+
.navbar-logo:hover .navbar-logo-icon {
132+
transform: rotate(-5deg) scale(1.05);
133+
}
134+
135+
.navbar-links {
136+
display: flex;
137+
align-items: center;
138+
gap: 20px;
139+
}
140+
141+
/* Theme switcher */
142+
.navbar-theme-switcher {
143+
display: flex;
144+
gap: 0;
145+
padding: 2px;
146+
border-radius: 9999px;
147+
border: 1px solid var(--border-subtle);
148+
background: var(--surface-card);
149+
backdrop-filter: blur(12px);
150+
transition: all 0.3s ease;
151+
}
152+
153+
.navbar-theme-switcher:hover {
154+
gap: 2px;
155+
}
156+
157+
.navbar-theme-btn {
158+
width: 0;
159+
height: 32px;
160+
display: grid;
161+
place-items: center;
162+
padding: 0;
163+
margin: 0;
164+
border: none;
165+
border-radius: 9999px;
166+
background: transparent;
167+
cursor: pointer;
168+
transition: all 0.3s ease;
169+
color: var(--text-muted);
170+
opacity: 0;
171+
flex-shrink: 0;
172+
overflow: hidden;
173+
}
174+
175+
.navbar-theme-btn.active {
176+
width: 32px;
177+
opacity: 1;
178+
background: var(--accent);
179+
color: white;
180+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
181+
}
182+
183+
.navbar-theme-switcher:hover .navbar-theme-btn {
184+
width: 32px;
185+
opacity: 1;
186+
margin: 0;
187+
}
188+
189+
.navbar-theme-btn:hover:not(.active) {
190+
background: var(--surface-interactive);
191+
color: var(--text-secondary);
192+
}
193+
194+
.navbar-theme-btn svg {
195+
width: 16px;
196+
height: 16px;
197+
}
198+
199+
/* Documentation button */
200+
.navbar-docs-btn {
201+
position: relative;
202+
display: grid;
203+
place-items: center;
204+
width: 36px;
205+
height: 36px;
206+
padding: 0;
207+
border-radius: 9999px;
208+
border: 1px solid var(--border-subtle);
209+
background: var(--surface-interactive);
210+
color: var(--text-secondary);
211+
text-decoration: none;
212+
cursor: pointer;
213+
transition: all 0.2s ease;
214+
}
215+
216+
html[data-theme='light'] .navbar-docs-btn {
217+
color: var(--primary);
218+
}
219+
220+
.navbar-docs-btn:hover {
221+
background: var(--surface-interactive-hover);
222+
color: var(--text-primary);
223+
border-color: var(--border-accent);
224+
}
225+
226+
html[data-theme='light'] .navbar-docs-btn:hover {
227+
color: var(--accent);
228+
}
229+
230+
.navbar-docs-btn svg {
231+
width: 16px;
232+
height: 16px;
233+
}
234+
235+
.navbar-docs-tooltip {
236+
position: absolute;
237+
bottom: -40px;
238+
left: 50%;
239+
transform: translateX(-50%) scale(0.95);
240+
padding: 6px 12px;
241+
border-radius: 6px;
242+
background: var(--surface-card-strong);
243+
border: 1px solid var(--border-subtle);
244+
color: var(--text-secondary);
245+
font-size: 0.75rem;
246+
white-space: nowrap;
247+
opacity: 0;
248+
pointer-events: none;
249+
transition: all 0.2s ease;
250+
}
251+
252+
.navbar-docs-btn:hover .navbar-docs-tooltip {
253+
opacity: 1;
254+
transform: translateX(-50%) scale(1);
255+
}
256+
257+
.navbar-link {
258+
color: var(--text-secondary);
259+
text-decoration: none;
260+
font-size: 0.95rem;
261+
font-weight: 500;
262+
transition: color 0.2s ease;
263+
position: relative;
264+
}
265+
266+
.navbar-link:hover {
267+
color: var(--text-primary);
268+
}
269+
270+
.navbar-link::after {
271+
content: '';
272+
position: absolute;
273+
bottom: -4px;
274+
left: 0;
275+
right: 0;
276+
height: 2px;
277+
background: var(--accent);
278+
transform: scaleX(0);
279+
transition: transform 0.2s ease;
280+
}
281+
282+
.navbar-link:hover::after {
283+
transform: scaleX(1);
284+
}
285+
286+
.navbar-github {
287+
display: flex;
288+
align-items: center;
289+
gap: 6px;
290+
padding: 8px 16px;
291+
border-radius: 12px;
292+
background: var(--surface-interactive);
293+
border: 1px solid var(--border-subtle);
294+
color: var(--text-secondary);
295+
text-decoration: none;
296+
font-size: 0.9rem;
297+
font-weight: 500;
298+
transition: all 0.2s ease;
299+
}
300+
301+
html[data-theme='light'] .navbar-github {
302+
color: var(--primary);
303+
}
304+
305+
.navbar-github:hover {
306+
background: var(--surface-interactive-hover);
307+
border-color: var(--border-accent);
308+
color: var(--text-primary);
309+
}
310+
311+
html[data-theme='light'] .navbar-github:hover {
312+
color: var(--accent);
313+
}
314+
315+
.navbar-github-text {
316+
display: inline;
317+
}
318+
319+
@media (max-width: 768px) {
320+
.navbar-container {
321+
padding: 12px 16px;
322+
gap: 16px;
323+
}
324+
325+
.navbar-links {
326+
display: none;
327+
}
328+
329+
.navbar-github-text {
330+
display: none;
331+
}
332+
333+
.navbar-github {
334+
padding: 8px 12px;
335+
}
336+
}
337+
</style>

0 commit comments

Comments
 (0)