Skip to content

Commit 744872e

Browse files
caffienerdcaffienerd
committed
docs: add website light mode to website
1 parent 19d2733 commit 744872e

4 files changed

Lines changed: 424 additions & 39 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ struct [DEPTH] [OPTIONS]
139139
**Examples:**
140140
```bash
141141
struct # Current dir, infinite depth
142-
struct 0 # Current dir only (1 level)
142+
struct 1 # Current dir only (1 level)
143143
struct 3 # Current dir, 3 levels deep
144144
struct 5 -p ~/projects # Projects folder, 5 levels
145145
struct 2 --path /etc # /etc, 2 levels

‎docs/index.html‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,13 @@
7979
</div>
8080
<span class="font-bold text-xl tracking-tight text-white">struct</span>
8181
</div>
82-
<div class="flex items-center gap-6">
82+
<div class="flex items-center gap-4">
8383
<a href="#features" class="text-sm text-github-muted hover:text-github-text transition-colors hidden sm:block">Features</a>
8484
<a href="#install" class="text-sm text-github-muted hover:text-github-text transition-colors hidden sm:block">Install</a>
85+
<button id="theme-toggle" class="theme-toggle" title="Toggle theme">
86+
<i data-lucide="sun" class="w-5 h-5" id="theme-sun"></i>
87+
<i data-lucide="moon" class="w-5 h-5 hidden" id="theme-moon"></i>
88+
</button>
8589
<a href="https://github.com/caffienerd/struct-cli" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-github-border hover:border-github-accent hover:text-github-accent transition-all text-sm font-medium group">
8690
<i data-lucide="github" class="w-4 h-4"></i>
8791
<span>Star on GitHub</span>
@@ -121,9 +125,9 @@ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white"
121125

122126
<!-- Terminal Demo -->
123127
<div class="mt-16 relative max-w-3xl mx-auto animate-slide-up" style="animation-delay: 0.2s">
124-
<div class="rounded-xl overflow-hidden bg-[#161b22] border border-github-border terminal-shadow">
128+
<div class="rounded-xl overflow-hidden border border-github-border terminal-shadow" style="background-color: var(--bg-secondary);">
125129
<!-- Terminal Header -->
126-
<div class="flex items-center gap-2 px-4 py-3 bg-[#0d1117] border-b border-github-border">
130+
<div class="flex items-center gap-2 px-4 py-3 border-b border-github-border" style="background-color: var(--bg-primary);">
127131
<div class="flex gap-2">
128132
<div class="w-3 h-3 rounded-full bg-red-500"></div>
129133
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
@@ -181,7 +185,7 @@ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white"
181185

182186
<!-- Support Section -->
183187
<section class="py-16 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
184-
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-github-accent/10 via-github-purple/10 to-github-accent/10 border border-github-accent/20 p-8 sm:p-12">
188+
<div class="relative overflow-hidden rounded-2xl border border-github-accent/20 p-8 sm:p-12" style="background: linear-gradient(to right, rgba(9, 105, 218, 0.1), rgba(111, 66, 193, 0.1), rgba(9, 105, 218, 0.1));">
185189
<!-- Accent line top -->
186190
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-github-accent/50 to-transparent"></div>
187191

@@ -214,7 +218,7 @@ <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Why Struct?</h2>
214218

215219
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
216220
<!-- Signal over noise -->
217-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
221+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
218222
<div class="w-12 h-12 rounded-lg bg-blue-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
219223
<i data-lucide="eye-off" class="w-6 h-6 text-github-accent"></i>
220224
</div>
@@ -223,7 +227,7 @@ <h3 class="text-lg font-semibold text-white mb-2">Signal over noise</h3>
223227
</div>
224228

225229
<!-- Intelligent defaults -->
226-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
230+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
227231
<div class="w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
228232
<i data-lucide="brain" class="w-6 h-6 text-github-green"></i>
229233
</div>
@@ -232,7 +236,7 @@ <h3 class="text-lg font-semibold text-white mb-2">Intelligent defaults</h3>
232236
</div>
233237

234238
<!-- Directory summaries -->
235-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
239+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
236240
<div class="w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
237241
<i data-lucide="bar-chart-3" class="w-6 h-6 text-github-purple"></i>
238242
</div>
@@ -241,7 +245,7 @@ <h3 class="text-lg font-semibold text-white mb-2">Directory summaries</h3>
241245
</div>
242246

243247
<!-- Built-in search -->
244-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
248+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
245249
<div class="w-12 h-12 rounded-lg bg-yellow-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
246250
<i data-lucide="search" class="w-6 h-6 text-yellow-500"></i>
247251
</div>
@@ -250,7 +254,7 @@ <h3 class="text-lg font-semibold text-white mb-2">Built-in search</h3>
250254
</div>
251255

252256
<!-- Git-aware -->
253-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
257+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
254258
<div class="w-12 h-12 rounded-lg bg-orange-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
255259
<i data-lucide="git-branch" class="w-6 h-6 text-orange-500"></i>
256260
</div>
@@ -259,7 +263,7 @@ <h3 class="text-lg font-semibold text-white mb-2">Comprehensive Git Integration<
259263
</div>
260264

261265
<!-- Blazing fast -->
262-
<div class="feature-card group p-6 rounded-xl border border-github-border bg-[#161b22]/50 hover:border-github-accent/50 transition-all hover-lift">
266+
<div class="feature-card group p-6 rounded-xl border border-github-border hover:border-github-accent/50 transition-all hover-lift" style="background-color: rgba(22, 27, 34, 0.5);">
263267
<div class="w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
264268
<i data-lucide="zap" class="w-6 h-6 text-red-400"></i>
265269
</div>
@@ -331,8 +335,8 @@ <h4 class="text-white font-medium">Flexible Output</h4>
331335

332336
<!-- Code Examples -->
333337
<div class="space-y-4">
334-
<div class="rounded-lg overflow-hidden bg-[#161b22] border border-github-border">
335-
<div class="flex items-center gap-2 px-4 py-2 bg-[#0d1117] border-b border-github-border">
338+
<div class="rounded-lg overflow-hidden border border-github-border" style="background-color: var(--bg-secondary);">
339+
<div class="flex items-center gap-2 px-4 py-2 border-b border-github-border" style="background-color: var(--bg-primary);">
336340
<span class="text-xs text-github-muted font-mono">Usage Examples</span>
337341
</div>
338342
<div class="p-4 font-mono text-sm space-y-3 overflow-x-auto">
@@ -376,8 +380,8 @@ <h4 class="text-white font-medium">Flexible Output</h4>
376380
</div>
377381

378382
<!-- Ignore list preview -->
379-
<div class="rounded-lg overflow-hidden bg-[#161b22] border border-github-border">
380-
<div class="flex items-center justify-between px-4 py-2 bg-[#0d1117] border-b border-github-border">
383+
<div class="rounded-lg overflow-hidden border border-github-border" style="background-color: var(--bg-secondary);">
384+
<div class="flex items-center justify-between px-4 py-2 border-b border-github-border" style="background-color: var(--bg-primary);">
381385
<span class="text-xs text-github-muted font-mono">Auto-ignored Directories</span>
382386
<span class="text-xs text-github-accent">20+ patterns</span>
383387
</div>
@@ -407,8 +411,8 @@ <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Installation</h2>
407411

408412
<div class="space-y-6">
409413
<!-- Option 1: Install from crates.io -->
410-
<div class="rounded-xl overflow-hidden bg-[#161b22] border border-github-border terminal-shadow">
411-
<div class="flex items-center justify-between px-4 py-3 bg-[#0d1117] border-b border-github-border">
414+
<div class="rounded-xl overflow-hidden border border-github-border terminal-shadow" style="background-color: var(--bg-secondary);">
415+
<div class="flex items-center justify-between px-4 py-3 border-b border-github-border" style="background-color: var(--bg-primary);">
412416
<span class="text-sm text-github-muted font-mono">Option 1: Install from crates.io</span>
413417
<button onclick="copyCode('cargo install struct-cli')" class="text-xs flex items-center gap-1 text-github-muted hover:text-github-accent transition-colors copy-btn">
414418
<i data-lucide="copy" class="w-3 h-3"></i>
@@ -423,8 +427,8 @@ <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Installation</h2>
423427
</div>
424428

425429
<!-- Option 2: Install from source -->
426-
<div class="rounded-xl overflow-hidden bg-[#161b22] border border-github-border terminal-shadow">
427-
<div class="flex items-center justify-between px-4 py-3 bg-[#0d1117] border-b border-github-border">
430+
<div class="rounded-xl overflow-hidden border border-github-border terminal-shadow" style="background-color: var(--bg-secondary);">
431+
<div class="flex items-center justify-between px-4 py-3 border-b border-github-border" style="background-color: var(--bg-primary);">
428432
<span class="text-sm text-github-muted font-mono">Option 2: Install from source</span>
429433
<button onclick="copyCode('git clone https://github.com/caffienerd/struct-cli.git && cd struct-cli && chmod +x install.sh && ./install.sh')" class="text-xs flex items-center gap-1 text-github-muted hover:text-github-accent transition-colors copy-btn">
430434
<i data-lucide="copy" class="w-3 h-3"></i>
@@ -439,13 +443,13 @@ <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Installation</h2>
439443
</div>
440444

441445
<!-- Compatibility Note -->
442-
<div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-[#161b22]/50 border border-github-border/50">
446+
<div class="flex items-center gap-3 px-4 py-3 rounded-lg border border-github-border/50" style="background-color: rgba(22, 27, 34, 0.3);">
443447
<i data-lucide="linux" class="w-5 h-5 text-github-muted"></i>
444448
<span class="text-sm text-github-muted">Works on RHEL, Arch, Ubuntu, Debian, Fedora, and other Linux distributions</span>
445449
</div>
446450

447451
<!-- Quick Start -->
448-
<div class="mt-8 p-6 rounded-xl bg-gradient-to-r from-github-accent/10 to-purple-500/10 border border-github-accent/20">
452+
<div class="mt-8 p-6 rounded-xl border border-github-accent/20" style="background: linear-gradient(to right, rgba(9, 105, 218, 0.1), rgba(111, 66, 193, 0.1));">
449453
<h3 class="text-white font-semibold mb-2 flex items-center gap-2">
450454
<i data-lucide="rocket" class="w-5 h-5 text-github-accent"></i>
451455
Quick Start
@@ -475,7 +479,7 @@ <h2 class="text-3xl font-bold text-white">Open Source</h2>
475479
Struct is MIT licensed and open source. Found a bug? Want a feature? Contributions are welcome.
476480
</p>
477481
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
478-
<a href="https://github.com/caffienerd/struct-cli" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-white text-github-darker font-semibold hover:bg-gray-100 transition-all hover-lift">
482+
<a href="https://github.com/caffienerd/struct-cli" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-github-border hover:bg-github-border/30 text-github-text font-medium transition-all">
479483
<i data-lucide="star" class="w-5 h-5"></i>
480484
Star on GitHub
481485
</a>

‎docs/script.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,72 @@
22
document.addEventListener('DOMContentLoaded', function() {
33
lucide.createIcons();
44

5+
// Initialize theme
6+
initTheme();
7+
58
// Initialize scroll animations
69
initScrollAnimations();
710

811
// Initialize smooth scroll for anchor links
912
initSmoothScroll();
1013
});
1114

15+
// Theme management
16+
function initTheme() {
17+
const themeToggle = document.getElementById('theme-toggle');
18+
const themeSun = document.getElementById('theme-sun');
19+
const themeMoon = document.getElementById('theme-moon');
20+
21+
// Check for saved theme preference or system preference
22+
const savedTheme = localStorage.getItem('theme');
23+
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
24+
const isDark = savedTheme ? savedTheme === 'dark' : systemDark;
25+
26+
// Apply saved or system theme
27+
if (isDark) {
28+
document.documentElement.classList.remove('light-mode');
29+
themeSun?.classList.remove('hidden');
30+
themeMoon?.classList.add('hidden');
31+
} else {
32+
document.documentElement.classList.add('light-mode');
33+
themeSun?.classList.add('hidden');
34+
themeMoon?.classList.remove('hidden');
35+
}
36+
37+
// Add theme toggle listener
38+
themeToggle?.addEventListener('click', toggleTheme);
39+
40+
// Listen for system theme changes
41+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
42+
if (!localStorage.getItem('theme')) {
43+
applyTheme(e.matches ? 'dark' : 'light');
44+
}
45+
});
46+
}
47+
48+
function toggleTheme() {
49+
const isDark = !document.documentElement.classList.contains('light-mode');
50+
const newTheme = isDark ? 'light' : 'dark';
51+
applyTheme(newTheme);
52+
localStorage.setItem('theme', newTheme);
53+
}
54+
55+
function applyTheme(theme) {
56+
const themeSun = document.getElementById('theme-sun');
57+
const themeMoon = document.getElementById('theme-moon');
58+
59+
if (theme === 'light') {
60+
document.documentElement.classList.add('light-mode');
61+
themeSun?.classList.add('hidden');
62+
themeMoon?.classList.remove('hidden');
63+
} else {
64+
document.documentElement.classList.remove('light-mode');
65+
themeSun?.classList.remove('hidden');
66+
themeMoon?.classList.add('hidden');
67+
}
68+
lucide.createIcons();
69+
}
70+
1271
// Copy to clipboard functionality
1372
function copyCode(text) {
1473
navigator.clipboard.writeText(text).then(() => {

0 commit comments

Comments
 (0)