create-frootkit 1.1.4 → 1.2.1

package/templates/starter/src/app/page.tsx

@@ -0,0 +1,122 @@
+import { Header } from '../components/Header.js';
+import { FeatureCard } from '../components/FeatureCard.js';
+import { TerminalPreview } from '../components/TerminalPreview.js';
+import { Footer } from '../components/Footer.js';
+
+export const metadata = {
+  title: 'FrootKit — Next.js Alternative for Preact & Froot',
+  description: 'Ultra-fast Preact SSR, nested layouts, native Tailwind CSS v4, and dynamic API routes.',
+};
+
+export default function HomePage() {
+  const features = [
+    {
+      icon: '⚡',
+      badge: '0.1ms render',
+      title: 'Sub-Millisecond SSR',
+      description: 'Preact VNode streaming and monomorphic rendering ensure blistering speed with near-zero memory footprint.',
+    },
+    {
+      icon: '🎨',
+      badge: 'Tailwind v4',
+      title: 'Native CSS Pipeline',
+      description: 'Zero postcss.config.js or tailwind.config.js required. Tailwind CSS v4 is compiled instantly on every change.',
+    },
+    {
+      icon: '📁',
+      badge: 'App Router',
+      title: 'Nested Layouts',
+      description: 'Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions.',
+    },
+    {
+      icon: '🔌',
+      badge: 'Fullstack API',
+      title: 'Route Handlers',
+      description: 'Build backend logic seamlessly in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web APIs.',
+    },
+    {
+      icon: '📦',
+      badge: 'Static Export',
+      title: 'SSG & Edge Ready',
+      description: 'Run frootkit build to pre-render static HTML and bundle dynamic endpoints for serverless and edge clouds.',
+    },
+    {
+      icon: '🤖',
+      badge: 'Agent Friendly',
+      title: 'AI Native Scaffolding',
+      description: 'Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support.',
+    },
+  ];
+
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      {/* Background glow effects */}
+      <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+        <div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gradient-to-tr from-emerald-500/15 via-teal-500/10 to-cyan-500/5 blur-[120px] rounded-full" />
+        <div class="absolute top-1/2 -left-40 w-[600px] h-[400px] bg-emerald-600/10 blur-[140px] rounded-full" />
+      </div>
+
+      <Header />
+
+      {/* Hero Section */}
+      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center">
+        <div class="text-center max-w-3xl mx-auto mb-16">
+          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-xs font-semibold text-emerald-400 mb-8 shadow-sm shadow-emerald-950">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+            Next.js App Router Conventions &bull; Zero Overhead
+          </div>
+
+          <h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-tight sm:leading-none">
+            The Next.js Alternative Built for{' '}
+            <span class="bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400 bg-clip-text text-transparent">
+              Speed & Simplicity
+            </span>
+          </h1>
+
+          <p class="text-slate-300 text-lg sm:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
+            Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, instant static site export, and built-in API routes.
+          </p>
+
+          <div class="flex flex-wrap items-center justify-center gap-4">
+            <a
+              href="https://frootjs.org"
+              target="_blank"
+              rel="noreferrer"
+              class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 hover:-translate-y-0.5"
+            >
+              Explore Documentation &rarr;
+            </a>
+            <a
+              href="https://github.com/orbitnorth/frootkit"
+              target="_blank"
+              rel="noreferrer"
+              class="px-6 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 font-semibold hover:bg-slate-800/80 hover:border-slate-700 transition-all hover:-translate-y-0.5 flex items-center gap-2"
+            >
+              <svg class="w-4 h-4 fill-current text-slate-300" viewBox="0 0 24 24">
+                <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" />
+              </svg>
+              Star on GitHub
+            </a>
+          </div>
+        </div>
+
+        <TerminalPreview />
+
+        {/* Feature Grid */}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((f) => (
+            <FeatureCard
+              key={f.title}
+              icon={f.icon}
+              badge={f.badge}
+              title={f.title}
+              description={f.description}
+            />
+          ))}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/starter/src/components/FeatureCard.tsx

@@ -0,0 +1,25 @@
+export interface FeatureCardProps {
+  icon: string;
+  badge: string;
+  title: string;
+  description: string;
+}
+
+export function FeatureCard({ icon, badge, title, description }: FeatureCardProps) {
+  return (
+    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 p-6 backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group">
+      <div class="flex items-center justify-between mb-4">
+        <span class="text-3xl">{icon}</span>
+        <span class="text-xs font-mono font-medium px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700/60 group-hover:border-emerald-500/40 transition-colors">
+          {badge}
+        </span>
+      </div>
+      <h3 class="text-lg font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">
+        {title}
+      </h3>
+      <p class="text-slate-400 text-sm leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+}

package/templates/starter/src/components/Footer.tsx

@@ -0,0 +1,16 @@
+export function Footer() {
+  return (
+    <footer class="border-t border-slate-900 bg-slate-950/60 py-8 text-center text-xs text-slate-500">
+      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div>
+          FrootKit &copy; {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+        </div>
+        <div class="flex items-center gap-6">
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-slate-400 transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-slate-400 transition-colors">Documentation</a>
+          <a href="/api/health" class="hover:text-slate-400 transition-colors">Health API</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/starter/src/components/Header.tsx

@@ -0,0 +1,45 @@
+export function Header() {
+  return (
+    <header class="border-b border-slate-800/80 bg-slate-950/40 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-emerald-400 font-extrabold text-xl tracking-tight flex items-center gap-2">
+            <span class="inline-block w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
+            FrootKit
+          </span>
+          <span class="px-2 py-0.5 text-[11px] font-mono font-medium rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+            v1.3.1
+          </span>
+        </div>
+
+        <nav class="flex items-center gap-6 text-sm font-medium">
+          <a
+            href="https://frootjs.org"
+            target="_blank"
+            rel="noreferrer"
+            class="text-slate-300 hover:text-white transition-colors"
+          >
+            Docs
+          </a>
+          <a
+            href="/api/health"
+            class="text-slate-300 hover:text-emerald-400 transition-colors font-mono text-xs px-2.5 py-1 rounded-md bg-slate-900 border border-slate-800"
+          >
+            /api/health
+          </a>
+          <a
+            href="https://github.com/orbitnorth/frootkit"
+            target="_blank"
+            rel="noreferrer"
+            class="flex items-center gap-2 text-slate-300 hover:text-white transition-colors"
+          >
+            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
+              <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" />
+            </svg>
+            GitHub
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/starter/src/components/TerminalPreview.tsx

@@ -0,0 +1,56 @@
+export function TerminalPreview() {
+  return (
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto w-full mb-16">
+      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+          <div class="flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
+            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
+            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="ml-2 text-xs font-mono text-slate-400">src/app/page.tsx</span>
+          </div>
+          <span class="text-[11px] font-mono text-emerald-400/90 font-medium bg-emerald-950/60 px-2 py-0.5 rounded border border-emerald-800/40">
+            Preact SSR
+          </span>
+        </div>
+        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2 select-all leading-relaxed">
+          <p><span class="text-purple-400 font-semibold">export default function</span> <span class="text-blue-400">HomePage</span>() &#123;</p>
+          <p class="pl-4"><span class="text-purple-400 font-semibold">return</span> (</p>
+          <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>
+          <p class="pl-12 text-slate-100">&lt;<span class="text-blue-300 font-semibold">h1</span>&gt;Hello FrootKit!&lt;/<span class="text-blue-300 font-semibold">h1</span>&gt;</p>
+          <p class="pl-8 text-emerald-300">&lt;/<span class="text-blue-300 font-semibold">main</span>&gt;</p>
+          <p class="pl-4">);</p>
+          <p>&#125;</p>
+        </div>
+      </div>
+
+      <div class="rounded-2xl border border-slate-800 bg-[#070b14] p-6 shadow-xl relative overflow-hidden group">
+        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-800/80">
+          <div class="flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-rose-500/80" />
+            <span class="w-3 h-3 rounded-full bg-amber-500/80" />
+            <span class="w-3 h-3 rounded-full bg-emerald-500/80" />
+            <span class="ml-2 text-xs font-mono text-slate-400">terminal</span>
+          </div>
+          <span class="text-[11px] font-mono text-cyan-400/90 font-medium bg-cyan-950/60 px-2 py-0.5 rounded border border-cyan-800/40">
+            CLI
+          </span>
+        </div>
+        <div class="font-mono text-xs sm:text-sm text-slate-300 space-y-2.5 leading-relaxed">
+          <p class="text-slate-500"># Start lightning-fast dev server</p>
+          <p class="text-emerald-400 font-semibold flex items-center gap-2">
+            <span class="text-slate-500 select-none">$</span> frootkit dev
+          </p>
+          <p class="text-slate-500 pt-1"># Build production static export + API routes</p>
+          <p class="text-cyan-400 font-semibold flex items-center gap-2">
+            <span class="text-slate-500 select-none">$</span> frootkit build
+          </p>
+          <p class="text-slate-500 pt-1"># Test the API endpoint</p>
+          <p class="text-amber-400 font-semibold flex items-center gap-2">
+            <span class="text-slate-500 select-none">$</span> curl http://localhost:3000/api/health
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/starter/src/styles.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-950: #022c22;
+}
+
+:root {
+  color-scheme: dark;
+}

package/templates/starter/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}