create-frootkit 1.2.8 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/package.json +1 -1
  2. package/templates/auth/src/app/dashboard/layout.tsx +14 -9
  3. package/templates/auth/src/app/dashboard/page.tsx +55 -24
  4. package/templates/auth/src/app/layout.tsx +3 -3
  5. package/templates/auth/src/app/login/page.tsx +5 -1
  6. package/templates/auth/src/app/page.tsx +103 -45
  7. package/templates/auth/src/app/signup/page.tsx +5 -1
  8. package/templates/auth/src/components/AuthForm.tsx +34 -19
  9. package/templates/auth/src/components/DashboardNav.tsx +97 -56
  10. package/templates/auth/src/components/MetricCard.tsx +13 -6
  11. package/templates/auth/src/components/Navbar.tsx +13 -12
  12. package/templates/auth/src/styles.css +27 -5
  13. package/templates/blog/src/app/blog/[slug]/page.tsx +19 -18
  14. package/templates/blog/src/app/layout.tsx +4 -4
  15. package/templates/blog/src/app/page.tsx +15 -14
  16. package/templates/blog/src/components/Footer.tsx +6 -6
  17. package/templates/blog/src/components/Navbar.tsx +17 -15
  18. package/templates/blog/src/components/Newsletter.tsx +11 -9
  19. package/templates/blog/src/components/PostCard.tsx +29 -27
  20. package/templates/blog/src/styles.css +14 -5
  21. package/templates/ecommerce/src/app/cart/page.tsx +3 -3
  22. package/templates/ecommerce/src/app/layout.tsx +2 -2
  23. package/templates/ecommerce/src/app/page.tsx +37 -15
  24. package/templates/ecommerce/src/app/products/[id]/page.tsx +34 -25
  25. package/templates/ecommerce/src/components/CartDrawer.tsx +20 -17
  26. package/templates/ecommerce/src/components/Footer.tsx +6 -6
  27. package/templates/ecommerce/src/components/Navbar.tsx +21 -14
  28. package/templates/ecommerce/src/components/ProductCard.tsx +22 -15
  29. package/templates/ecommerce/src/data/products.ts +17 -11
  30. package/templates/ecommerce/src/styles.css +29 -5
  31. package/templates/empty/src/app/layout.tsx +5 -5
  32. package/templates/empty/src/app/page.tsx +10 -9
  33. package/templates/empty/src/styles.css +13 -15
  34. package/templates/starter/src/app/layout.tsx +4 -4
  35. package/templates/starter/src/app/page.tsx +41 -33
  36. package/templates/starter/src/components/FeatureCard.tsx +5 -5
  37. package/templates/starter/src/components/Footer.tsx +6 -6
  38. package/templates/starter/src/components/Header.tsx +18 -14
  39. package/templates/starter/src/components/TerminalPreview.tsx +30 -30
  40. package/templates/starter/src/styles.css +14 -5
package/templates/starter/src/components/Header.tsx CHANGED
@@ -1,29 +1,33 @@
1
1
  export function Header() {
2
2
  return (
3
- <header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
4
- <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
3
+ <header class="border-b border-white/[0.08] bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-50">
4
+ <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
5
5
  <div class="flex items-center gap-3">
6
- <span class="text-white font-extrabold text-lg tracking-tight flex items-center gap-2">
7
- <span class="w-3 h-3 rounded-full bg-emerald-500 inline-block" />
8
- FrootKit
9
- </span>
10
- <span class="px-2 py-0.5 text-[11px] font-mono text-slate-400 rounded-md bg-[#0a0f18] border border-[#1a2333]">
11
- v1.3.1
6
+ <a href="/" class="flex items-center gap-2.5 font-semibold text-zinc-100 text-sm tracking-tight group">
7
+ <div class="w-6 h-6 rounded-md bg-indigo-500/15 border border-indigo-500/30 flex items-center justify-center text-indigo-400 group-hover:border-indigo-400/50 transition-colors shrink-0">
8
+ <svg style="width: 13px; height: 13px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
9
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
10
+ </svg>
11
+ </div>
12
+ <span>Froot<span class="text-indigo-400">Kit</span></span>
13
+ </a>
14
+ <span class="px-2 py-0.5 text-[10px] font-mono text-zinc-400 rounded-md bg-white/[0.04] border border-white/[0.06]">
15
+ v1.3.5
12
16
  </span>
13
17
  </div>
14
18
 
15
- <nav class="flex items-center gap-6 text-sm font-medium">
19
+ <nav class="flex items-center gap-5 text-xs font-medium">
16
20
  <a
17
21
  href="https://frootjs.org"
18
22
  target="_blank"
19
23
  rel="noreferrer"
20
- class="text-slate-300 hover:text-white transition-colors"
24
+ class="text-zinc-400 hover:text-zinc-200 transition-colors"
21
25
  >
22
26
  Docs
23
27
  </a>
24
28
  <a
25
29
  href="/api/health"
26
- class="text-emerald-400 hover:text-emerald-300 font-mono text-xs px-2.5 py-1 rounded-md bg-[#0a0f18] border border-[#1a2333] transition-colors"
30
+ class="text-zinc-400 hover:text-zinc-200 font-mono text-[11px] px-2 py-0.5 rounded bg-white/[0.03] border border-white/[0.06] transition-colors"
27
31
  >
28
32
  /api/health
29
33
  </a>
@@ -31,12 +35,12 @@ export function Header() {
31
35
  href="https://github.com/orbitnorth/frootkit"
32
36
  target="_blank"
33
37
  rel="noreferrer"
34
- class="flex items-center gap-2 text-slate-300 hover:text-white transition-colors"
38
+ class="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-white/[0.05] border border-white/[0.08] text-zinc-200 hover:text-white hover:bg-white/[0.08] transition-all text-xs"
35
39
  >
36
- <svg width="16" height="16" class="w-4 h-4 fill-current shrink-0" viewBox="0 0 24 24">
40
+ <svg style="width: 13px; height: 13px;" class="fill-current shrink-0" viewBox="0 0 24 24">
37
41
  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
38
42
  </svg>
39
- GitHub
43
+ <span>GitHub</span>
40
44
  </a>
41
45
  </nav>
42
46
  </div>
package/templates/starter/src/components/TerminalPreview.tsx CHANGED
@@ -1,53 +1,53 @@
1
1
  export function TerminalPreview() {
2
2
  return (
3
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto w-full mb-16">
4
- <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
5
- <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
6
- <div class="flex items-center gap-2">
7
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
8
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
9
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
10
- <span class="ml-2 text-xs font-mono text-slate-400">src/app/page.tsx</span>
3
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-5 max-w-5xl mx-auto w-full mb-16">
4
+ <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] overflow-hidden shadow-xl shadow-black/40">
5
+ <div class="flex items-center justify-between px-4 py-2.5 bg-white/[0.02] border-b border-white/[0.06]">
6
+ <div class="flex items-center gap-1.5">
7
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
8
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
9
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
10
+ <span class="ml-2 text-xs font-mono text-zinc-400">src/app/page.tsx</span>
11
11
  </div>
12
- <span class="text-[11px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
12
+ <span class="text-[10px] font-medium text-indigo-400 bg-indigo-500/10 px-2 py-0.5 rounded-full border border-indigo-500/20">
13
13
  Preact SSR
14
14
  </span>
15
15
  </div>
16
- <div class="p-5 font-mono text-xs text-slate-300 space-y-2 select-all leading-relaxed">
17
- <p><span class="text-purple-400 font-semibold">export default function</span> <span class="text-blue-400">HomePage</span>() &#123;</p>
18
- <p class="pl-4"><span class="text-purple-400 font-semibold">return</span> (</p>
19
- <p class="pl-8 text-emerald-300">&lt;<span class="text-blue-300 font-semibold">main</span> <span class="text-teal-400">class</span>=<span class="text-amber-300">"min-h-screen p-8"</span>&gt;</p>
20
- <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Production FrootKit Application&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
21
- <p class="pl-8 text-emerald-300">&lt;/<span class="text-blue-300 font-semibold">main</span>&gt;</p>
16
+ <div class="p-5 font-mono text-xs text-zinc-300 space-y-1.5 select-all leading-relaxed">
17
+ <p><span class="text-indigo-400">export default function</span> <span class="text-white font-medium">HomePage</span>() &#123;</p>
18
+ <p class="pl-4"><span class="text-indigo-400">return</span> (</p>
19
+ <p class="pl-8 text-zinc-400">&lt;<span class="text-zinc-200">main</span> <span class="text-indigo-300">class</span>=<span class="text-emerald-300">"min-h-screen p-8"</span>&gt;</p>
20
+ <p class="pl-12 text-zinc-100">&lt;<span class="text-zinc-200">h1</span>&gt;Production FrootKit Application&lt;/<span class="text-zinc-200">h1</span>&gt;</p>
21
+ <p class="pl-8 text-zinc-400">&lt;/<span class="text-zinc-200">main</span>&gt;</p>
22
22
  <p class="pl-4">);</p>
23
23
  <p>&#125;</p>
24
24
  </div>
25
25
  </div>
26
26
 
27
- <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden">
28
- <div class="flex items-center justify-between px-4 py-2.5 bg-[#0f1624] border-b border-[#1a2333]">
29
- <div class="flex items-center gap-2">
30
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
31
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
32
- <span class="w-2.5 h-2.5 rounded-full bg-slate-700" />
33
- <span class="ml-2 text-xs font-mono text-slate-400">terminal</span>
27
+ <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] overflow-hidden shadow-xl shadow-black/40">
28
+ <div class="flex items-center justify-between px-4 py-2.5 bg-white/[0.02] border-b border-white/[0.06]">
29
+ <div class="flex items-center gap-1.5">
30
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
31
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
32
+ <span class="w-2.5 h-2.5 rounded-full bg-white/[0.12]" />
33
+ <span class="ml-2 text-xs font-mono text-zinc-400">terminal</span>
34
34
  </div>
35
- <span class="text-[11px] font-mono text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded border border-cyan-500/20">
35
+ <span class="text-[10px] font-medium text-zinc-300 bg-white/[0.05] px-2 py-0.5 rounded-full border border-white/[0.08]">
36
36
  CLI
37
37
  </span>
38
38
  </div>
39
- <div class="p-5 font-mono text-xs text-slate-300 space-y-3 leading-relaxed">
39
+ <div class="p-5 font-mono text-xs text-zinc-300 space-y-3 leading-relaxed">
40
40
  <div>
41
- <span class="text-slate-500 block text-[11px]"># Run dev server with Tailwind compiler</span>
42
- <span class="text-emerald-400 font-semibold">$ frootkit dev</span>
41
+ <span class="text-zinc-500 block text-[11px]"># Run dev server with instant Tailwind compilation</span>
42
+ <span class="text-indigo-400 font-semibold">$ frootkit dev</span>
43
43
  </div>
44
44
  <div>
45
- <span class="text-slate-500 block text-[11px]"># Build static export and API manifest</span>
46
- <span class="text-cyan-400 font-semibold">$ frootkit build</span>
45
+ <span class="text-zinc-500 block text-[11px]"># Build static export and API manifest</span>
46
+ <span class="text-zinc-200 font-semibold">$ frootkit build</span>
47
47
  </div>
48
48
  <div>
49
- <span class="text-slate-500 block text-[11px]"># Test dynamic route handler</span>
50
- <span class="text-amber-400 font-semibold">$ curl http://localhost:3000/api/health</span>
49
+ <span class="text-zinc-500 block text-[11px]"># Test dynamic route handler</span>
50
+ <span class="text-emerald-400 font-semibold">$ curl http://localhost:3000/api/health</span>
51
51
  </div>
52
52
  </div>
53
53
  </div>
package/templates/starter/src/styles.css CHANGED
@@ -4,23 +4,32 @@
4
4
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
5
5
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
6
6
 
7
- --color-brand-primary: #10b981;
8
- --color-brand-hover: #34d399;
7
+ --color-brand-primary: #6366f1;
8
+ --color-brand-hover: #4f46e5;
9
9
  }
10
10
 
11
11
  :root {
12
12
  color-scheme: dark;
13
+ --bg-canvas: #08090a;
14
+ --bg-surface: #0f1117;
15
+ --bg-elevated: #151822;
16
+ --border-subtle: rgba(255, 255, 255, 0.08);
17
+ --border-strong: rgba(255, 255, 255, 0.16);
18
+ --text-primary: #f4f4f5;
19
+ --text-secondary: #9496a1;
20
+ --text-muted: #5c6370;
13
21
  }
14
22
 
15
23
  html {
16
- background-color: #06090f;
17
- color: #f8fafc;
24
+ background-color: var(--bg-canvas);
25
+ color: var(--text-primary);
18
26
  font-family: var(--font-sans);
19
27
  scroll-behavior: smooth;
20
28
  -webkit-font-smoothing: antialiased;
29
+ -moz-osx-font-smoothing: grayscale;
21
30
  }
22
31
 
23
- /* SVG safety: prevents flex ballooning across all browsers */
32
+ /* Strict SVG safety to prevent flex ballooning */
24
33
  svg {
25
34
  flex-shrink: 0;
26
35
  max-width: 100%;