create-frootkit 1.2.8 → 1.2.10
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.
- package/dist/addons/database.d.ts +13 -5
- package/dist/addons/database.d.ts.map +1 -1
- package/dist/addons/database.js +496 -94
- package/dist/addons/database.js.map +1 -1
- package/dist/scaffold.d.ts.map +1 -1
- package/dist/scaffold.js +5 -1
- package/dist/scaffold.js.map +1 -1
- package/package.json +1 -1
- package/templates/auth/src/app/api/auth/route.ts +17 -12
- package/templates/auth/src/app/dashboard/layout.tsx +14 -9
- package/templates/auth/src/app/dashboard/page.tsx +55 -24
- package/templates/auth/src/app/layout.tsx +3 -3
- package/templates/auth/src/app/login/page.tsx +5 -1
- package/templates/auth/src/app/page.tsx +103 -45
- package/templates/auth/src/app/signup/page.tsx +5 -1
- package/templates/auth/src/components/AuthForm.tsx +34 -19
- package/templates/auth/src/components/DashboardNav.tsx +97 -56
- package/templates/auth/src/components/MetricCard.tsx +13 -6
- package/templates/auth/src/components/Navbar.tsx +13 -12
- package/templates/auth/src/lib/auth.ts +123 -0
- package/templates/auth/src/styles.css +27 -5
- package/templates/blog/src/app/api/posts/route.ts +10 -34
- package/templates/blog/src/app/blog/[slug]/page.tsx +22 -21
- package/templates/blog/src/app/layout.tsx +4 -4
- package/templates/blog/src/app/page.tsx +19 -17
- package/templates/blog/src/components/Footer.tsx +6 -6
- package/templates/blog/src/components/Navbar.tsx +17 -15
- package/templates/blog/src/components/Newsletter.tsx +11 -9
- package/templates/blog/src/components/PostCard.tsx +29 -27
- package/templates/blog/src/data/posts.ts +48 -0
- package/templates/blog/src/styles.css +14 -5
- package/templates/ecommerce/src/app/api/products/route.ts +10 -26
- package/templates/ecommerce/src/app/cart/page.tsx +3 -3
- package/templates/ecommerce/src/app/layout.tsx +2 -2
- package/templates/ecommerce/src/app/page.tsx +41 -18
- package/templates/ecommerce/src/app/products/[id]/page.tsx +37 -28
- package/templates/ecommerce/src/components/CartDrawer.tsx +20 -17
- package/templates/ecommerce/src/components/Footer.tsx +6 -6
- package/templates/ecommerce/src/components/Navbar.tsx +21 -14
- package/templates/ecommerce/src/components/ProductCard.tsx +22 -15
- package/templates/ecommerce/src/data/products.ts +55 -11
- package/templates/ecommerce/src/styles.css +29 -5
- package/templates/empty/src/app/layout.tsx +5 -5
- package/templates/empty/src/app/page.tsx +10 -9
- package/templates/empty/src/styles.css +13 -15
- package/templates/starter/src/app/layout.tsx +4 -4
- package/templates/starter/src/app/page.tsx +41 -33
- package/templates/starter/src/components/FeatureCard.tsx +5 -5
- package/templates/starter/src/components/Footer.tsx +6 -6
- package/templates/starter/src/components/Header.tsx +18 -14
- package/templates/starter/src/components/TerminalPreview.tsx +30 -30
- package/templates/starter/src/styles.css +14 -5
|
@@ -9,11 +9,11 @@ export interface RootLayoutProps {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
12
|
-
const title = metadata?.title || 'FrootKit
|
|
13
|
-
const description = metadata?.description || 'Built with
|
|
12
|
+
const title = metadata?.title || 'FrootKit Project';
|
|
13
|
+
const description = metadata?.description || 'Built with Preact and FrootKit.';
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
|
-
<html lang="en" class="dark">
|
|
16
|
+
<html lang="en" class="dark scroll-smooth">
|
|
17
17
|
<head>
|
|
18
18
|
<meta charSet="UTF-8" />
|
|
19
19
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
@@ -22,12 +22,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
22
22
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
23
23
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
24
24
|
<link
|
|
25
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
|
|
25
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
26
26
|
rel="stylesheet"
|
|
27
27
|
/>
|
|
28
28
|
<link rel="stylesheet" href="/styles.css" />
|
|
29
29
|
</head>
|
|
30
|
-
<body class="bg-
|
|
30
|
+
<body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
|
|
31
31
|
{children}
|
|
32
32
|
</body>
|
|
33
33
|
</html>
|
|
@@ -5,21 +5,22 @@ export const metadata = {
|
|
|
5
5
|
|
|
6
6
|
export default function HomePage() {
|
|
7
7
|
return (
|
|
8
|
-
<main class="min-h-screen bg-[#
|
|
9
|
-
<div class="max-w-md w-full text-center border border-[
|
|
10
|
-
<div class="
|
|
8
|
+
<main class="min-h-screen bg-[#08090a] text-zinc-100 flex items-center justify-center p-6 selection:bg-indigo-500/20 selection:text-indigo-300">
|
|
9
|
+
<div class="max-w-md w-full text-center border border-white/[0.08] bg-[#0f1117] rounded-xl p-8 shadow-2xl shadow-black/40 relative overflow-hidden">
|
|
10
|
+
<div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" />
|
|
11
|
+
<div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center mx-auto mb-4 text-indigo-400 font-medium text-sm">
|
|
11
12
|
F
|
|
12
13
|
</div>
|
|
13
|
-
<h1 class="text-
|
|
14
|
-
<p class="text-
|
|
15
|
-
Start building by editing <code class="font-mono text-
|
|
14
|
+
<h1 class="text-xl font-semibold text-white tracking-tight mb-2">Blank Canvas</h1>
|
|
15
|
+
<p class="text-zinc-400 text-xs mb-6 leading-relaxed">
|
|
16
|
+
Start building by editing <code class="font-mono text-indigo-400 bg-white/[0.04] border border-white/[0.08] px-1.5 py-0.5 rounded">src/app/page.tsx</code>.
|
|
16
17
|
</p>
|
|
17
|
-
<div class="flex justify-center gap-
|
|
18
|
+
<div class="flex justify-center gap-2.5 text-xs font-medium">
|
|
18
19
|
<a
|
|
19
20
|
href="https://frootjs.org"
|
|
20
21
|
target="_blank"
|
|
21
22
|
rel="noreferrer"
|
|
22
|
-
class="px-
|
|
23
|
+
class="px-3.5 py-1.5 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all shadow-sm"
|
|
23
24
|
>
|
|
24
25
|
Documentation
|
|
25
26
|
</a>
|
|
@@ -27,7 +28,7 @@ export default function HomePage() {
|
|
|
27
28
|
href="https://github.com/orbitnorth/frootkit"
|
|
28
29
|
target="_blank"
|
|
29
30
|
rel="noreferrer"
|
|
30
|
-
class="px-
|
|
31
|
+
class="px-3.5 py-1.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-zinc-300 hover:text-white hover:bg-white/[0.08] transition-all"
|
|
31
32
|
>
|
|
32
33
|
GitHub
|
|
33
34
|
</a>
|
|
@@ -4,34 +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: #
|
|
8
|
-
--color-brand-hover: #
|
|
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:
|
|
17
|
-
color:
|
|
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 */
|
|
24
32
|
svg {
|
|
25
33
|
flex-shrink: 0;
|
|
26
34
|
max-width: 100%;
|
|
27
35
|
}
|
|
28
|
-
|
|
29
|
-
/* Accessibility: Mandatory Reduced Motion */
|
|
30
|
-
@media (prefers-reduced-motion: reduce) {
|
|
31
|
-
*, *::before, *::after {
|
|
32
|
-
animation-duration: 0.01ms !important;
|
|
33
|
-
animation-iteration-count: 1 !important;
|
|
34
|
-
transition-duration: 0.01ms !important;
|
|
35
|
-
scroll-behavior: auto !important;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
@@ -9,10 +9,10 @@ export interface RootLayoutProps {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
12
|
-
const title = metadata?.title || 'FrootKit —
|
|
12
|
+
const title = metadata?.title || 'FrootKit — Next.js Alternative for Preact';
|
|
13
13
|
const description =
|
|
14
14
|
metadata?.description ||
|
|
15
|
-
'
|
|
15
|
+
'Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, and dynamic API routes.';
|
|
16
16
|
|
|
17
17
|
return (
|
|
18
18
|
<html lang="en" class="dark scroll-smooth">
|
|
@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
|
|
|
24
24
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
25
25
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
|
26
26
|
<link
|
|
27
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
|
|
27
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
28
28
|
rel="stylesheet"
|
|
29
29
|
/>
|
|
30
30
|
<link rel="stylesheet" href="/styles.css" />
|
|
31
31
|
</head>
|
|
32
|
-
<body class="bg-[#
|
|
32
|
+
<body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
|
|
33
33
|
{children}
|
|
34
34
|
</body>
|
|
35
35
|
</html>
|
|
@@ -10,58 +10,60 @@ export const metadata = {
|
|
|
10
10
|
|
|
11
11
|
export default function HomePage() {
|
|
12
12
|
return (
|
|
13
|
-
<div class="min-h-screen bg-[#
|
|
13
|
+
<div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
|
|
14
14
|
<Header />
|
|
15
15
|
|
|
16
|
-
<main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
|
|
16
|
+
<main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center">
|
|
17
17
|
{/* Hero Section */}
|
|
18
18
|
<div class="max-w-3xl mb-16">
|
|
19
|
-
<div class="
|
|
20
|
-
|
|
19
|
+
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-medium mb-6">
|
|
20
|
+
<span class="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
|
|
21
|
+
<span>Next.js App Router Conventions • Zero Overhead</span>
|
|
21
22
|
</div>
|
|
22
23
|
|
|
23
|
-
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-
|
|
24
|
+
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white tracking-[-0.03em] leading-[1.1] mb-6">
|
|
24
25
|
The Next.js Alternative Built for Speed & Simplicity.
|
|
25
26
|
</h1>
|
|
26
27
|
|
|
27
|
-
<p class="text-base sm:text-lg text-
|
|
28
|
+
<p class="text-base sm:text-lg text-zinc-400 leading-relaxed mb-8 max-w-2xl">
|
|
28
29
|
Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, dynamic API routes, and instant static site generation.
|
|
29
30
|
</p>
|
|
30
31
|
|
|
31
|
-
<div class="flex flex-wrap items-center gap-
|
|
32
|
+
<div class="flex flex-wrap items-center gap-3.5">
|
|
32
33
|
<a
|
|
33
34
|
href="https://frootjs.org"
|
|
34
35
|
target="_blank"
|
|
35
36
|
rel="noreferrer"
|
|
36
|
-
class="px-
|
|
37
|
+
class="px-4 py-2.5 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-sm shadow-sm flex items-center gap-2 group"
|
|
37
38
|
>
|
|
38
|
-
Explore Documentation
|
|
39
|
+
<span>Explore Documentation</span>
|
|
40
|
+
<span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
|
|
39
41
|
</a>
|
|
40
42
|
<a
|
|
41
43
|
href="https://github.com/orbitnorth/frootkit"
|
|
42
44
|
target="_blank"
|
|
43
45
|
rel="noreferrer"
|
|
44
|
-
class="px-
|
|
46
|
+
class="px-4 py-2.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-zinc-300 font-medium hover:bg-white/[0.08] hover:text-white transition-all text-sm flex items-center gap-2"
|
|
45
47
|
>
|
|
46
|
-
<svg
|
|
48
|
+
<svg style="width: 14px; height: 14px;" class="fill-current shrink-0" viewBox="0 0 24 24">
|
|
47
49
|
<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" />
|
|
48
50
|
</svg>
|
|
49
|
-
Star on GitHub
|
|
51
|
+
<span>Star on GitHub</span>
|
|
50
52
|
</a>
|
|
51
53
|
</div>
|
|
52
54
|
</div>
|
|
53
55
|
|
|
54
56
|
<TerminalPreview />
|
|
55
57
|
|
|
56
|
-
{/* Feature Grid with
|
|
57
|
-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-
|
|
58
|
+
{/* Feature Grid with Precision 16px SVG Icons */}
|
|
59
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
58
60
|
<FeatureCard
|
|
59
61
|
badge="0.1ms render"
|
|
60
62
|
title="Sub-Millisecond SSR"
|
|
61
63
|
description="Preact VNode streaming and monomorphic rendering ensure blistering response times with near-zero memory footprint."
|
|
62
64
|
>
|
|
63
|
-
<svg
|
|
64
|
-
<
|
|
65
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
66
|
+
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
|
65
67
|
</svg>
|
|
66
68
|
</FeatureCard>
|
|
67
69
|
|
|
@@ -70,8 +72,8 @@ export default function HomePage() {
|
|
|
70
72
|
title="Native CSS Pipeline"
|
|
71
73
|
description="Zero postcss or tailwind config files required. Native Tailwind CSS v4 compiles in single-digit milliseconds."
|
|
72
74
|
>
|
|
73
|
-
<svg
|
|
74
|
-
<path
|
|
75
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
76
|
+
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
|
|
75
77
|
</svg>
|
|
76
78
|
</FeatureCard>
|
|
77
79
|
|
|
@@ -80,38 +82,44 @@ export default function HomePage() {
|
|
|
80
82
|
title="Nested File Layouts"
|
|
81
83
|
description="Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions."
|
|
82
84
|
>
|
|
83
|
-
<svg
|
|
84
|
-
<
|
|
85
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
86
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
|
87
|
+
<line x1="9" y1="3" x2="9" y2="21" />
|
|
85
88
|
</svg>
|
|
86
89
|
</FeatureCard>
|
|
87
90
|
|
|
88
91
|
<FeatureCard
|
|
89
92
|
badge="Fullstack API"
|
|
90
93
|
title="Dynamic Route Handlers"
|
|
91
|
-
description="
|
|
94
|
+
description="First-class Web Standard Request/Response handlers inside src/app/api/**/route.ts with JSON and SSE streaming."
|
|
92
95
|
>
|
|
93
|
-
<svg
|
|
94
|
-
<
|
|
96
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
97
|
+
<polyline points="16 18 22 12 16 6" />
|
|
98
|
+
<polyline points="8 6 2 12 8 18" />
|
|
95
99
|
</svg>
|
|
96
100
|
</FeatureCard>
|
|
97
101
|
|
|
98
102
|
<FeatureCard
|
|
99
|
-
badge="
|
|
100
|
-
title="
|
|
101
|
-
description="
|
|
103
|
+
badge="Pure Web Standards"
|
|
104
|
+
title="Zero C++ Dependencies"
|
|
105
|
+
description="Built entirely on pure ECMAScript and Web Crypto. Clean deployments to Node.js, Bun, and Edge runners."
|
|
102
106
|
>
|
|
103
|
-
<svg
|
|
104
|
-
<
|
|
107
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
108
|
+
<circle cx="12" cy="12" r="10" />
|
|
109
|
+
<line x1="2" y1="12" x2="22" y2="12" />
|
|
110
|
+
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
|
105
111
|
</svg>
|
|
106
112
|
</FeatureCard>
|
|
107
113
|
|
|
108
114
|
<FeatureCard
|
|
109
|
-
badge="
|
|
110
|
-
title="
|
|
111
|
-
description="
|
|
115
|
+
badge="Instant SSG"
|
|
116
|
+
title="Static Site Export"
|
|
117
|
+
description="Deterministic pre-rendering of static paths into deployable HTML assets with zero configuration."
|
|
112
118
|
>
|
|
113
|
-
<svg
|
|
114
|
-
<path
|
|
119
|
+
<svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
120
|
+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
121
|
+
<polyline points="7 10 12 15 17 10" />
|
|
122
|
+
<line x1="12" y1="15" x2="12" y2="3" />
|
|
115
123
|
</svg>
|
|
116
124
|
</FeatureCard>
|
|
117
125
|
</div>
|
|
@@ -9,19 +9,19 @@ export interface FeatureCardProps {
|
|
|
9
9
|
|
|
10
10
|
export function FeatureCard({ badge, title, description, children }: FeatureCardProps) {
|
|
11
11
|
return (
|
|
12
|
-
<div class="rounded-xl border border-[
|
|
12
|
+
<div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-5 hover:border-white/[0.18] transition-all shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
|
|
13
13
|
<div class="flex items-center justify-between mb-4">
|
|
14
|
-
<div class="w-
|
|
14
|
+
<div class="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center text-indigo-400">
|
|
15
15
|
{children}
|
|
16
16
|
</div>
|
|
17
|
-
<span class="text-
|
|
17
|
+
<span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-white/[0.04] text-zinc-300 border border-white/[0.06]">
|
|
18
18
|
{badge}
|
|
19
19
|
</span>
|
|
20
20
|
</div>
|
|
21
|
-
<h3 class="text-
|
|
21
|
+
<h3 class="text-sm font-semibold text-white mb-1.5">
|
|
22
22
|
{title}
|
|
23
23
|
</h3>
|
|
24
|
-
<p class="text-
|
|
24
|
+
<p class="text-zinc-400 text-xs leading-relaxed">
|
|
25
25
|
{description}
|
|
26
26
|
</p>
|
|
27
27
|
</div>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
export function Footer() {
|
|
2
2
|
return (
|
|
3
|
-
<footer class="border-t border-[
|
|
4
|
-
<div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4
|
|
3
|
+
<footer class="border-t border-white/[0.08] bg-[#08090a] py-8 text-xs text-zinc-500">
|
|
4
|
+
<div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
5
5
|
<div>
|
|
6
|
-
FrootKit © {new Date().getFullYear()} OrbitNorth LLC.
|
|
6
|
+
FrootKit © {new Date().getFullYear()} OrbitNorth LLC. Built for high performance.
|
|
7
7
|
</div>
|
|
8
8
|
<div class="flex items-center gap-6">
|
|
9
|
-
<a href="https://github.com/orbitnorth/frootkit" class="hover:text-
|
|
10
|
-
<a href="https://frootjs.org" class="hover:text-
|
|
11
|
-
<a href="/api/health" class="hover:text-
|
|
9
|
+
<a href="https://github.com/orbitnorth/frootkit" class="hover:text-zinc-300 transition-colors">GitHub</a>
|
|
10
|
+
<a href="https://frootjs.org" class="hover:text-zinc-300 transition-colors">Documentation</a>
|
|
11
|
+
<a href="/api/health" class="hover:text-zinc-300 transition-colors font-mono text-[11px]">/api/health</a>
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
</footer>
|
|
@@ -1,29 +1,33 @@
|
|
|
1
1
|
export function Header() {
|
|
2
2
|
return (
|
|
3
|
-
<header class="border-b border-[
|
|
4
|
-
<div class="max-w-6xl mx-auto px-6 h-
|
|
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
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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>
|
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
export function TerminalPreview() {
|
|
2
2
|
return (
|
|
3
|
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-
|
|
4
|
-
<div class="rounded-xl border border-[
|
|
5
|
-
<div class="flex items-center justify-between px-4 py-2.5 bg-[
|
|
6
|
-
<div class="flex items-center gap-
|
|
7
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
8
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
9
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
10
|
-
<span class="ml-2 text-xs font-mono text-
|
|
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-[
|
|
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-
|
|
17
|
-
<p><span class="text-
|
|
18
|
-
<p class="pl-4"><span class="text-
|
|
19
|
-
<p class="pl-8 text-
|
|
20
|
-
<p class="pl-12 text-
|
|
21
|
-
<p class="pl-8 text-
|
|
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>() {</p>
|
|
18
|
+
<p class="pl-4"><span class="text-indigo-400">return</span> (</p>
|
|
19
|
+
<p class="pl-8 text-zinc-400"><<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>></p>
|
|
20
|
+
<p class="pl-12 text-zinc-100"><<span class="text-zinc-200">h1</span>>Production FrootKit Application</<span class="text-zinc-200">h1</span>></p>
|
|
21
|
+
<p class="pl-8 text-zinc-400"></<span class="text-zinc-200">main</span>></p>
|
|
22
22
|
<p class="pl-4">);</p>
|
|
23
23
|
<p>}</p>
|
|
24
24
|
</div>
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
|
-
<div class="rounded-xl border border-[
|
|
28
|
-
<div class="flex items-center justify-between px-4 py-2.5 bg-[
|
|
29
|
-
<div class="flex items-center gap-
|
|
30
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
31
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
32
|
-
<span class="w-2.5 h-2.5 rounded-full bg-
|
|
33
|
-
<span class="ml-2 text-xs font-mono text-
|
|
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-[
|
|
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-
|
|
39
|
+
<div class="p-5 font-mono text-xs text-zinc-300 space-y-3 leading-relaxed">
|
|
40
40
|
<div>
|
|
41
|
-
<span class="text-
|
|
42
|
-
<span class="text-
|
|
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-
|
|
46
|
-
<span class="text-
|
|
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-
|
|
50
|
-
<span class="text-
|
|
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>
|
|
@@ -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: #
|
|
8
|
-
--color-brand-hover: #
|
|
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:
|
|
17
|
-
color:
|
|
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
|
|
32
|
+
/* Strict SVG safety to prevent flex ballooning */
|
|
24
33
|
svg {
|
|
25
34
|
flex-shrink: 0;
|
|
26
35
|
max-width: 100%;
|