Skip to content

Commit df70831

Browse files
hazeliscodinghazeliscoding
committed
feat(demo): polish gh-pages site with theme persistence and working CTAs
Three demo-scoped improvements bundled together: - Persist dark mode across reloads and across the three demo pages. Swap the plain topbar <button> for <bloom-theme-toggle>, which already reads/writes localStorage['bloom-theme']. Add a tiny pre-paint inline script to <head> so the saved theme is applied before first paint (no light -> dark flash on reload). Drop the hard-coded data-theme="light" from <html> so the inline script is the single source of truth, and add the theme-toggle import to vanilla.html (which imports components individually). - Replace anime-specific copy (character names, show titles, MAL- flavored status set, AniList references) with neutral playful kawaii content so the demo reads as a general-purpose design system rather than an anime tracker. Rename the form field from `anime` to `show` to match. - Wire the hero CTAs. The npm button now copies `npm install @hazeliscoding/kawaii-ui` to the clipboard with a 1.5s "Copied!" confirmation and a graceful fallback for insecure contexts. The Star button opens the GitHub repo in a new tab.
1 parent 1401c7f commit df70831

4 files changed

Lines changed: 116 additions & 99 deletions

File tree

‎demo/htmx.html‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
<!doctype html>
2-
<html lang="en" data-theme="light">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>kawaii-ui ✨ HTMX integration</title>
7+
<script>
8+
// Apply saved theme before first paint to avoid a light/dark flash on load.
9+
(function () {
10+
try {
11+
var saved = localStorage.getItem('bloom-theme');
12+
var prefersDark =
13+
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
14+
document.documentElement.setAttribute(
15+
'data-theme',
16+
saved === 'dark' || saved === 'light' ? saved : prefersDark ? 'dark' : 'light',
17+
);
18+
} catch (e) {
19+
document.documentElement.setAttribute('data-theme', 'light');
20+
}
21+
})();
22+
</script>
723
<link rel="preconnect" href="https://fonts.googleapis.com" />
824
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
925
<link
@@ -43,14 +59,7 @@
4359
<a href="https://github.com/hazeliscoding/kawaii-ui">GitHub</a>
4460
</nav>
4561
<div class="topbar__actions">
46-
<button
47-
class="topbar__icon-btn"
48-
type="button"
49-
id="themeToggle"
50-
aria-label="Toggle dark mode"
51-
>
52-
🌙
53-
</button>
62+
<bloom-theme-toggle class="topbar__theme-toggle"></bloom-theme-toggle>
5463
</div>
5564
</header>
5665

‎demo/index.html‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" data-theme="light">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +8,22 @@
88
name="description"
99
content="Gel buttons, pastel gradients, glossy surfaces. A framework-agnostic kawaii web component library."
1010
/>
11+
<script>
12+
// Apply saved theme before first paint to avoid a light/dark flash on load.
13+
(function () {
14+
try {
15+
var saved = localStorage.getItem('bloom-theme');
16+
var prefersDark =
17+
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
18+
document.documentElement.setAttribute(
19+
'data-theme',
20+
saved === 'dark' || saved === 'light' ? saved : prefersDark ? 'dark' : 'light',
21+
);
22+
} catch (e) {
23+
document.documentElement.setAttribute('data-theme', 'light');
24+
}
25+
})();
26+
</script>
1127
<link rel="preconnect" href="https://fonts.googleapis.com" />
1228
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1329
<link
@@ -47,15 +63,7 @@
4763
<a href="https://github.com/hazeliscoding/kawaii-ui">GitHub</a>
4864
</nav>
4965
<div class="topbar__actions">
50-
<button
51-
class="topbar__icon-btn"
52-
type="button"
53-
id="themeToggle"
54-
aria-label="Toggle dark mode"
55-
title="Toggle dark mode"
56-
>
57-
🌙
58-
</button>
66+
<bloom-theme-toggle class="topbar__theme-toggle"></bloom-theme-toggle>
5967
</div>
6068
</header>
6169

@@ -74,7 +82,7 @@ <h1 class="hero__title">kawaii-ui</h1>
7482
<span slot="icon-left">📦</span>
7583
npm install
7684
</bloom-button>
77-
<bloom-button variant="ghost" size="lg">
85+
<bloom-button variant="ghost" size="lg" id="starCta">
7886
<span slot="icon-left">⭐</span>
7987
Star on GitHub
8088
</bloom-button>
@@ -420,11 +428,11 @@ <h2 class="section__title">Forms</h2>
420428
<form id="demoForm" class="form-demo">
421429
<div class="form-field">
422430
<label for="nameField" class="form-field__label">Display name</label>
423-
<input id="nameField" name="name" required placeholder="SakuraChan" />
431+
<input id="nameField" name="name" required placeholder="MochiBun" />
424432
</div>
425433
<div class="form-field">
426-
<label for="animeField" class="form-field__label">Favorite anime</label>
427-
<input id="animeField" name="anime" placeholder="Spy x Family" />
434+
<label for="showField" class="form-field__label">Favorite show</label>
435+
<input id="showField" name="show" placeholder="Cozy Friday Movie" />
428436
</div>
429437
<div class="panel__preview" style="padding: 0; min-height: 0; background: none; justify-content: flex-start;">
430438
<bloom-button type="submit" variant="primary">
@@ -478,13 +486,13 @@ <h2 class="section__title">Badges</h2>
478486
With status dot
479487
</div>
480488
<div class="panel__preview">
481-
<bloom-badge color="green" dot>Watching</bloom-badge>
482-
<bloom-badge color="pink" dot>Completed</bloom-badge>
483-
<bloom-badge color="blue" dot>Plan to Watch</bloom-badge>
484-
<bloom-badge color="yellow" dot>On Hold</bloom-badge>
485-
<bloom-badge color="neutral" dot>Dropped</bloom-badge>
489+
<bloom-badge color="green" dot>Live</bloom-badge>
490+
<bloom-badge color="pink" dot>Trending</bloom-badge>
491+
<bloom-badge color="blue" dot>New</bloom-badge>
492+
<bloom-badge color="yellow" dot>Beta</bloom-badge>
493+
<bloom-badge color="neutral" dot>Archived</bloom-badge>
486494
</div>
487-
<pre class="panel__code"><span class="tag">&lt;bloom-badge</span> <span class="attr">color</span>=<span class="str">"green"</span> <span class="attr">dot</span><span class="tag">&gt;</span>Watching<span class="tag">&lt;/bloom-badge&gt;</span></pre>
495+
<pre class="panel__code"><span class="tag">&lt;bloom-badge</span> <span class="attr">color</span>=<span class="str">"green"</span> <span class="attr">dot</span><span class="tag">&gt;</span>Live<span class="tag">&lt;/bloom-badge&gt;</span></pre>
488496
</div>
489497

490498
<div class="panel">
@@ -517,12 +525,12 @@ <h2 class="section__title">Avatars</h2>
517525
Sizes
518526
</div>
519527
<div class="panel__preview" style="align-items: flex-end;">
520-
<bloom-avatar size="xs" name="Sakura"></bloom-avatar>
521-
<bloom-avatar size="sm" name="Naruto Uzumaki"></bloom-avatar>
522-
<bloom-avatar size="md" name="Mikasa Ackerman"></bloom-avatar>
523-
<bloom-avatar size="lg" name="Gojo Satoru"></bloom-avatar>
528+
<bloom-avatar size="xs" name="Hazel"></bloom-avatar>
529+
<bloom-avatar size="sm" name="Peach Cloud"></bloom-avatar>
530+
<bloom-avatar size="md" name="Mochi Bun"></bloom-avatar>
531+
<bloom-avatar size="lg" name="Cosmo Bloom"></bloom-avatar>
524532
</div>
525-
<pre class="panel__code"><span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"lg"</span> <span class="attr">name</span>=<span class="str">"Gojo Satoru"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span></pre>
533+
<pre class="panel__code"><span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"lg"</span> <span class="attr">name</span>=<span class="str">"Cosmo Bloom"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span></pre>
526534
</div>
527535

528536
<div class="panel">
@@ -533,7 +541,7 @@ <h2 class="section__title">Avatars</h2>
533541
<div class="panel__preview">
534542
<bloom-avatar size="md" name="Online User" status="online"></bloom-avatar>
535543
<bloom-avatar size="md" name="Offline User" status="offline"></bloom-avatar>
536-
<bloom-avatar size="md" name="Watching Now" status="watching"></bloom-avatar>
544+
<bloom-avatar size="md" name="Streaming Now" status="watching"></bloom-avatar>
537545
<bloom-avatar size="md" name="No Status"></bloom-avatar>
538546
</div>
539547
<pre class="panel__code"><span class="tag">&lt;bloom-avatar</span> <span class="attr">status</span>=<span class="str">"online"</span> <span class="attr">name</span>=<span class="str">"Hazel"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span>
@@ -559,15 +567,15 @@ <h2 class="section__title">Avatar stack</h2>
559567
</div>
560568
<div class="panel__preview">
561569
<bloom-avatar-stack aria-label="Watch party members">
562-
<bloom-avatar size="sm" name="Sakura Chan" status="online"></bloom-avatar>
563-
<bloom-avatar size="sm" name="Naruto Uzumaki" status="online"></bloom-avatar>
564-
<bloom-avatar size="sm" name="Hinata Hyuga" status="watching"></bloom-avatar>
565-
<bloom-avatar size="sm" name="Sasuke Uchiha" status="offline"></bloom-avatar>
570+
<bloom-avatar size="sm" name="Bubble Star" status="online"></bloom-avatar>
571+
<bloom-avatar size="sm" name="Peach Cloud" status="online"></bloom-avatar>
572+
<bloom-avatar size="sm" name="Mochi Bun" status="watching"></bloom-avatar>
573+
<bloom-avatar size="sm" name="Clover Field" status="offline"></bloom-avatar>
566574
</bloom-avatar-stack>
567575
</div>
568576
<pre class="panel__code"><span class="tag">&lt;bloom-avatar-stack</span> <span class="attr">aria-label</span>=<span class="str">"Watch party"</span><span class="tag">&gt;</span>
569-
<span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"sm"</span> <span class="attr">name</span>=<span class="str">"Sakura"</span> <span class="attr">status</span>=<span class="str">"online"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span>
570-
<span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"sm"</span> <span class="attr">name</span>=<span class="str">"Naruto"</span> <span class="attr">status</span>=<span class="str">"watching"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span>
577+
<span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"sm"</span> <span class="attr">name</span>=<span class="str">"Bubble"</span> <span class="attr">status</span>=<span class="str">"online"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span>
578+
<span class="tag">&lt;bloom-avatar</span> <span class="attr">size</span>=<span class="str">"sm"</span> <span class="attr">name</span>=<span class="str">"Peach"</span> <span class="attr">status</span>=<span class="str">"watching"</span><span class="tag">&gt;&lt;/bloom-avatar&gt;</span>
571579
<span class="tag">&lt;/bloom-avatar-stack&gt;</span></pre>
572580
</div>
573581
</section>
@@ -621,12 +629,12 @@ <h3 slot="header" style="margin: 0;">Highlighted</h3>
621629
</bloom-card>
622630

623631
<bloom-card>
624-
<h3 slot="header" style="margin: 0;">Anime Night</h3>
632+
<h3 slot="header" style="margin: 0;">Cozy Movie Night</h3>
625633
<p style="margin: 0;">
626-
Watch "Spy x Family" with your crew. Rated 9/10 so far!
634+
Picking tonight's feature with your crew. Rated 9/10 so far!
627635
</p>
628636
<div slot="footer">
629-
<bloom-badge color="green" dot>Watching</bloom-badge>
637+
<bloom-badge color="green" dot>Live</bloom-badge>
630638
</div>
631639
</bloom-card>
632640
</div>
@@ -669,7 +677,7 @@ <h2 class="section__title">Inputs</h2>
669677
>
670678
<bloom-input
671679
label="Display name"
672-
placeholder="SakuraChan"
680+
placeholder="MochiBun"
673681
hint="This is how others will see you"
674682
></bloom-input>
675683
<bloom-input
@@ -679,7 +687,7 @@ <h2 class="section__title">Inputs</h2>
679687
required
680688
></bloom-input>
681689
<bloom-input
682-
label="Favorite anime"
690+
label="Favorite show"
683691
placeholder="Type here…"
684692
error="This field is required!"
685693
></bloom-input>
@@ -706,7 +714,7 @@ <h2 class="section__title">Inputs</h2>
706714
gap: var(--bloom-space-4);
707715
"
708716
>
709-
<bloom-input label="Search" placeholder="Search anime…" size="sm">
717+
<bloom-input label="Search" placeholder="Search shows…" size="sm">
710718
<span slot="prefix">🔍</span>
711719
</bloom-input>
712720
<bloom-input label="Username" placeholder="hazel">
@@ -778,13 +786,13 @@ <h2 class="section__title">Modals</h2>
778786
<bloom-modal id="demoModal">
779787
<h3 slot="header" style="margin: 0;">Start a watch party</h3>
780788
<p style="margin: 0 0 var(--bloom-space-3);">
781-
Pick a friend, pick a show, let fate pick the rest. The modal
789+
Pick a friend, pick a night, let fate pick the rest. The modal
782790
traps focus inside itself — try Tab and Shift+Tab. Press
783791
<kbd>Escape</kbd> to close.
784792
</p>
785793
<bloom-input
786794
label="Friend's handle"
787-
placeholder="@sakura"
795+
placeholder="@peach"
788796
hint="They'll get an invite in their inbox."
789797
></bloom-input>
790798
<div slot="footer" style="display: flex; gap: var(--bloom-space-2); justify-content: flex-end;">
@@ -870,7 +878,7 @@ <h2 class="section__title">Real-world combos</h2>
870878
<div class="panel">
871879
<div class="panel__label">
872880
<span class="panel__dot"></span>
873-
Watch space, search, profile
881+
Space, search, profile
874882
</div>
875883
<div
876884
class="panel__preview"
@@ -890,14 +898,14 @@ <h2 class="section__title">Real-world combos</h2>
890898
<bloom-avatar size="xs" name="Hazel" status="online"></bloom-avatar>
891899
<bloom-avatar size="xs" name="Luna" status="watching"></bloom-avatar>
892900
</bloom-avatar-stack>
893-
<strong>Our Anime Night</strong>
901+
<strong>Our Watch Party</strong>
894902
</div>
895903
<p style="margin: 0 0 var(--bloom-space-2);">
896-
3 anime in backlog · 12 completed
904+
3 in the queue · 12 finished
897905
</p>
898906
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
899-
<bloom-badge color="pink" size="sm">Romance</bloom-badge>
900-
<bloom-badge color="lilac" size="sm">Fantasy</bloom-badge>
907+
<bloom-badge color="pink" size="sm">Cozy</bloom-badge>
908+
<bloom-badge color="lilac" size="sm">Dreamy</bloom-badge>
901909
</div>
902910
<div slot="footer" style="display: flex; gap: 0.5rem;">
903911
<bloom-button variant="primary" size="sm">Open</bloom-button>
@@ -906,8 +914,8 @@ <h2 class="section__title">Real-world combos</h2>
906914
</bloom-card>
907915

908916
<bloom-card>
909-
<h3 slot="header" style="margin: 0;">Find anime</h3>
910-
<bloom-input placeholder="Search AniList…" size="md">
917+
<h3 slot="header" style="margin: 0;">Find shows</h3>
918+
<bloom-input placeholder="Search your library…" size="md">
911919
<span slot="prefix">🔍</span>
912920
</bloom-input>
913921
<div slot="footer">
@@ -926,7 +934,7 @@ <h3 slot="header" style="margin: 0;">Find anime</h3>
926934
<bloom-badge color="green" dot size="sm">Online</bloom-badge>
927935
</div>
928936
</div>
929-
<p style="margin: 0;">42 anime completed · 8.2 avg score</p>
937+
<p style="margin: 0;">42 shows finished · 8.2 avg rating</p>
930938
<div slot="footer" style="display: flex; gap: 0.5rem;">
931939
<bloom-button variant="secondary" size="sm">View</bloom-button>
932940
<bloom-button variant="ghost" size="sm">Settings</bloom-button>

‎demo/main.ts‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,28 @@ import '../src/components/theme-toggle/bloom-theme-toggle.ts';
1717
import '../src/components/modal/bloom-modal.ts';
1818
import '../src/components/compat-ring/bloom-compat-ring.ts';
1919

20+
// ---------- Hero CTAs ----------
21+
const INSTALL_COMMAND = 'npm install @hazeliscoding/kawaii-ui';
22+
const REPO_URL = 'https://github.com/hazeliscoding/kawaii-ui';
23+
24+
const installCta = document.getElementById('installCta');
25+
installCta?.addEventListener('bloom-click', async () => {
26+
const originalHTML = installCta.innerHTML;
27+
try {
28+
await navigator.clipboard.writeText(INSTALL_COMMAND);
29+
installCta.innerHTML = '<span slot="icon-left">✓</span> Copied!';
30+
} catch {
31+
installCta.innerHTML = '<span slot="icon-left">⚠️</span> Copy failed';
32+
}
33+
setTimeout(() => {
34+
installCta.innerHTML = originalHTML;
35+
}, 1500);
36+
});
37+
38+
document.getElementById('starCta')?.addEventListener('bloom-click', () => {
39+
window.open(REPO_URL, '_blank', 'noopener,noreferrer');
40+
});
41+
2042
// ---------- Click counter (Events section) ----------
2143
const target = document.getElementById('clickTarget');
2244
const output = document.getElementById('clickOutput');
@@ -33,32 +55,13 @@ form?.addEventListener('submit', (e) => {
3355
e.preventDefault();
3456
const data = new FormData(form);
3557
if (formOutput) {
36-
formOutput.textContent = `✓ Submitted: name="${data.get('name') ?? ''}" · anime="${data.get('anime') ?? ''}"`;
58+
formOutput.textContent = `✓ Submitted: name="${data.get('name') ?? ''}" · show="${data.get('show') ?? ''}"`;
3759
}
3860
});
3961
form?.addEventListener('reset', () => {
4062
if (formOutput) formOutput.textContent = 'Form was reset';
4163
});
4264

43-
// ---------- Dark mode toggle (topbar) ----------
44-
// The topbar icon stays in sync with `<bloom-theme-toggle>` anywhere on the
45-
// page — both update `document.documentElement[data-theme]` and dispatch
46-
// bloom-theme-change. We listen globally and mirror the state.
47-
const themeToggle = document.getElementById('themeToggle') as HTMLButtonElement | null;
48-
const applyThemeToggleLabel = () => {
49-
if (!themeToggle) return;
50-
const isDark = document.documentElement.dataset['theme'] === 'dark';
51-
themeToggle.textContent = isDark ? '☀️' : '🌙';
52-
themeToggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
53-
};
54-
applyThemeToggleLabel();
55-
themeToggle?.addEventListener('click', () => {
56-
const html = document.documentElement;
57-
html.dataset['theme'] = html.dataset['theme'] === 'dark' ? 'light' : 'dark';
58-
applyThemeToggleLabel();
59-
});
60-
document.addEventListener('bloom-theme-change', () => applyThemeToggleLabel());
61-
6265
// ---------- Modal demo ----------
6366
const openModalBtn = document.getElementById('openModalBtn');
6467
const cancelModalBtn = document.getElementById('cancelModalBtn');

0 commit comments

Comments
 (0)