create-frootkit 1.2.8 → 1.2.10

package/templates/blog/src/app/blog/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { POSTS } from '../../../data/posts.js';
+import { getPostBySlug, POSTS } from '../../../data/posts.js';
 import { Navbar } from '../../../components/Navbar.js';
 import { Footer } from '../../../components/Footer.js';
 
@@ -6,63 +6,64 @@ export async function generateStaticParams() {
   return POSTS.map((post) => ({ slug: post.slug }));
 }
 
-export default function BlogPostPage({ params }: { params?: { slug?: string } }) {
+export default async function BlogPostPage({ params }: { params?: { slug?: string } }) {
   const slug = params?.slug || 'welcome-to-frootkit';
-  const post = POSTS.find((p) => p.slug === slug) || POSTS[0]!;
+  const post = (await getPostBySlug(slug)) || POSTS[0]!;
 
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
       <Navbar />
 
       <main class="max-w-3xl mx-auto px-6 py-12 flex-1 w-full">
         <a
           href="/"
-          class="inline-flex items-center gap-2 text-xs font-mono text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+          class="inline-flex items-center gap-2 text-xs text-zinc-400 hover:text-white mb-8 transition-colors"
         >
-          ← Back to articles
+          <span>←</span>
+          <span>Back to articles</span>
         </a>
 
         <header class="mb-10">
-          <div class="flex items-center gap-3 mb-4 text-xs font-mono">
-            <span class="px-2.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">
+          <div class="flex items-center gap-3 mb-4 text-xs">
+            <span class="px-2.5 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 font-medium text-[11px]">
               {post.category}
             </span>
-            <span class="text-slate-500">•</span>
-            <span class="text-slate-400">{post.readTime}</span>
-            <span class="text-slate-500">•</span>
-            <span class="text-slate-400">{post.date}</span>
+            <span class="text-zinc-600">•</span>
+            <span class="text-zinc-400">{post.readTime}</span>
+            <span class="text-zinc-600">•</span>
+            <span class="text-zinc-400">{post.date}</span>
           </div>
 
-          <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight mb-6 leading-tight">
+          <h1 class="text-3xl sm:text-4xl font-semibold text-white tracking-[-0.025em] mb-6 leading-tight">
             {post.title}
           </h1>
 
-          <div class="flex items-center gap-4 p-4 rounded-xl bg-[#0a0f18] border border-[#1a2333]">
+          <div class="flex items-center gap-3.5 p-3.5 rounded-xl bg-[#0f1117] border border-white/[0.08] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
             <img
               src={post.author.avatar}
               alt={post.author.name}
-              class="w-10 h-10 rounded-full object-cover border border-[#1a2333]"
+              class="w-9 h-9 rounded-full object-cover border border-white/[0.1]"
             />
             <div>
-              <div class="font-bold text-white text-sm">{post.author.name}</div>
-              <div class="text-xs text-slate-400">{post.author.role}</div>
+              <div class="font-medium text-white text-xs">{post.author.name}</div>
+              <div class="text-[11px] text-zinc-400">{post.author.role}</div>
             </div>
           </div>
         </header>
 
-        <article class="prose max-w-none space-y-6 text-slate-300 leading-relaxed text-base sm:text-lg">
+        <article class="prose max-w-none space-y-6 text-zinc-300 leading-relaxed text-base">
           {post.content.map((paragraph, idx) => (
             <p key={idx}>{paragraph}</p>
           ))}
         </article>
 
-        <div class="mt-12 pt-8 border-t border-[#1a2333] flex flex-wrap gap-2">
+        <div class="mt-12 pt-8 border-t border-white/[0.08] flex flex-wrap gap-2">
           {post.tags.map((tag) => (
             <span
               key={tag}
-              class="px-2.5 py-1 rounded bg-[#0a0f18] text-xs font-mono text-slate-400 border border-[#1a2333]"
+              class="px-2.5 py-1 rounded-full bg-white/[0.04] text-xs font-medium text-zinc-300 border border-white/[0.06]"
             >
-              #{tag}
+              {tag}
             </span>
           ))}
         </div>

package/templates/blog/src/app/layout.tsx

@@ -9,10 +9,10 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootBlog — Insights on Modern Web Performance';
+  const title = metadata?.title || 'FrootBlog — Engineering Architecture';
   const description =
     metadata?.description ||
-    'High-performance engineering articles and tutorials powered by Preact SSR and FrootKit.';
+    'Deep dives into Preact SSR, monomorphic engines, and zero-hydration architectures.';
 
   return (
     <html lang="en" class="dark scroll-smooth">
@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
+      <body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
         {children}
       </body>
     </html>

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

@@ -1,31 +1,33 @@
-import { POSTS } from '../data/posts.js';
+import { getPosts, POSTS } from '../data/posts.js';
 import { Navbar } from '../components/Navbar.js';
 import { PostCard } from '../components/PostCard.js';
 import { Newsletter } from '../components/Newsletter.js';
 import { Footer } from '../components/Footer.js';
 
 export const metadata = {
-  title: 'FrootBlog — Engineering Articles & Systems Architecture',
+  title: 'FrootJournal — Engineering Articles & Systems Architecture',
   description: 'Deep dives into Preact SSR, fullstack TypeScript, and native styling.',
 };
 
-export default function BlogHomePage() {
-  const [featuredPost, ...recentPosts] = POSTS;
+export default async function BlogHomePage() {
+  const allPosts = await getPosts();
+  const [featuredPost, ...recentPosts] = allPosts;
 
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
       <Navbar />
 
-      <main class="max-w-5xl mx-auto px-6 py-12 flex-1 w-full">
+      <main class="max-w-5xl mx-auto px-6 py-12 sm:py-16 flex-1 w-full">
         {/* Header Block */}
-        <div class="mb-10">
-          <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
-            Engineering Journal
+        <div class="mb-12">
+          <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-4">
+            <span class="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+            <span>Systems Architecture Journal</span>
           </div>
-          <h1 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight mb-3">
-            Systems Architecture & Web Engineering
+          <h1 class="text-3xl sm:text-5xl font-semibold text-white tracking-[-0.03em] leading-tight mb-4">
+            Engineering Dispatch & Systems Architecture.
           </h1>
-          <p class="text-slate-400 text-base max-w-2xl leading-relaxed">
+          <p class="text-zinc-400 text-base max-w-2xl leading-relaxed">
             Exploring sub-millisecond server rendering, monomorphic dispatch trees, and zero-hydration web architectures.
           </p>
         </div>
@@ -34,16 +36,16 @@ export default function BlogHomePage() {
         {featuredPost && <PostCard post={featuredPost} featured={true} />}
 
         {/* Recent Articles Grid */}
-        <div class="mb-8 flex items-center justify-between border-b border-[#1a2333] pb-3">
-          <h2 class="text-xs font-mono uppercase tracking-wider text-slate-400 font-semibold">
-            All Articles
+        <div class="mb-8 flex items-center justify-between border-b border-white/[0.08] pb-4">
+          <h2 class="text-xs uppercase tracking-wider text-zinc-400 font-semibold">
+            Recent Publications
           </h2>
-          <span class="text-xs font-mono text-slate-500">
+          <span class="text-xs text-zinc-500 tabular-nums">
             {recentPosts.length + 1} publications
           </span>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
           {recentPosts.map((post) => (
             <PostCard key={post.slug} post={post} />
           ))}

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

@@ -1,14 +1,14 @@
 export function Footer() {
   return (
-    <footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400">
-      <div class="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono">
+    <footer class="border-t border-white/[0.08] bg-[#08090a] py-8 text-xs text-zinc-500">
+      <div class="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
         <div>
-          FrootBlog © {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+          FrootBlog © {new Date().getFullYear()} OrbitNorth LLC. Written for systems engineers.
         </div>
         <div class="flex items-center gap-6">
-          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-white transition-colors">GitHub</a>
-          <a href="https://frootjs.org" class="hover:text-white transition-colors">Documentation</a>
-          <a href="/api/posts" class="hover:text-white transition-colors">Posts API</a>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-zinc-300 transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-zinc-300 transition-colors">Documentation</a>
+          <a href="/api/posts" class="hover:text-zinc-300 transition-colors font-mono text-[11px]">/api/posts</a>
         </div>
       </div>
     </footer>

package/templates/blog/src/components/Navbar.tsx

@@ -1,30 +1,32 @@
 export function Navbar() {
   return (
-    <header class="border-b border-[#1a2333] bg-[#06090f]/95 sticky top-0 z-50">
-      <div class="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
-        <a href="/" class="flex items-center gap-3 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
-          <div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
-            <svg width="16" height="16" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+    <header class="border-b border-white/[0.08] bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+        <a href="/" class="flex items-center gap-2.5 font-semibold text-zinc-100 text-sm tracking-tight group">
+          <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">
+            <svg style="width: 13px; height: 13px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
             </svg>
           </div>
-          <span>Froot<span class="text-emerald-400">Blog</span></span>
+          <span>Froot<span class="text-indigo-400">Journal</span></span>
         </a>
 
-        <nav class="flex items-center gap-6 text-sm font-medium">
-          <a href="/" class="text-slate-300 hover:text-white transition-colors">
+        <nav class="flex items-center gap-5 text-xs font-medium">
+          <a href="/" class="text-zinc-400 hover:text-zinc-200 transition-colors">
             Articles
           </a>
-          <a href="/api/posts" 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">
+          <a
+            href="/api/posts"
+            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"
+          >
             /api/posts
           </a>
           <a
-            href="https://github.com/orbitnorth/frootkit"
-            target="_blank"
-            rel="noreferrer"
-            class="text-slate-300 hover:text-white transition-colors"
+            href="#newsletter"
+            class="px-3 py-1.5 rounded-md bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-xs shadow-sm"
           >
-            GitHub
+            Subscribe
           </a>
         </nav>
       </div>

package/templates/blog/src/components/Newsletter.tsx

@@ -1,21 +1,23 @@
 export function Newsletter() {
   return (
-    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 sm:p-10 my-16">
+    <div id="newsletter" class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-8 sm:p-10 my-16 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] relative overflow-hidden">
+      <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/30 to-transparent" />
       <div class="max-w-xl">
-        <div class="text-xs font-mono font-medium text-emerald-400 mb-2 uppercase tracking-wide">
-          Engineering Dispatch
+        <div class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-[11px] font-medium mb-3">
+          <span class="w-1.5 h-1.5 rounded-full bg-indigo-400" />
+          <span>Engineering Dispatch</span>
         </div>
-        <h3 class="text-2xl font-bold text-white mb-2">
+        <h3 class="text-xl sm:text-2xl font-semibold text-white tracking-tight mb-2">
           Subscribe for Technical Deep Dives
         </h3>
-        <p class="text-slate-400 text-sm mb-6 leading-relaxed">
-          Bi-weekly write-ups on sub-millisecond server rendering, zero-hydration architectures, and high-performance TypeScript.
+        <p class="text-zinc-400 text-xs sm:text-sm mb-6 leading-relaxed">
+          Bi-weekly write-ups on sub-millisecond server rendering, zero-hydration architectures, and high-performance TypeScript runtime optimizations.
         </p>
 
         <form
           action="/api/posts"
           method="GET"
-          class="flex flex-col sm:flex-row gap-3 max-w-md"
+          class="flex flex-col sm:flex-row gap-2.5 max-w-md"
         >
           <label class="sr-only" for="newsletter-email">Work Email</label>
           <input
@@ -23,11 +25,11 @@ export function Newsletter() {
             type="email"
             placeholder="developer@company.com"
             required
-            class="flex-1 px-4 py-2.5 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
+            class="flex-1 px-3.5 py-2 rounded-lg bg-[#08090a] border border-white/[0.08] text-white text-xs placeholder:text-zinc-600 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
           />
           <button
             type="submit"
-            class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
+            class="px-4 py-2 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-xs shadow-sm"
           >
             Subscribe
           </button>

package/templates/blog/src/components/PostCard.tsx

@@ -3,45 +3,46 @@ import type { Post } from '../data/posts.js';
 export function PostCard({ post, featured = false }: { post: Post; featured?: boolean }) {
   if (featured) {
     return (
-      <article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 hover:border-slate-700 transition-colors mb-10">
-        <div class="flex items-center gap-3 mb-4 text-xs font-mono">
-          <span class="text-emerald-400 font-semibold px-2.5 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
+      <article class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-7 sm:p-8 hover:border-white/[0.18] transition-all duration-200 mb-10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] group">
+        <div class="flex flex-wrap items-center gap-2.5 mb-4 text-xs">
+          <span class="text-indigo-400 font-medium px-2.5 py-0.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-[11px]">
             Featured • {post.category}
           </span>
-          <span class="text-slate-500">•</span>
-          <span class="text-slate-400">{post.readTime}</span>
-          <span class="text-slate-500">•</span>
-          <span class="text-slate-400">{post.date}</span>
+          <span class="text-zinc-600">•</span>
+          <span class="text-zinc-400">{post.readTime}</span>
+          <span class="text-zinc-600">•</span>
+          <span class="text-zinc-400">{post.date}</span>
         </div>
 
-        <h2 class="text-2xl sm:text-3xl font-extrabold text-white mb-4 leading-snug hover:text-emerald-400 transition-colors">
+        <h2 class="text-2xl sm:text-3xl font-semibold text-white mb-3 tracking-[-0.02em] leading-snug group-hover:text-indigo-300 transition-colors">
           <a href={`/blog/${post.slug}`}>
             {post.title}
           </a>
         </h2>
 
-        <p class="text-slate-300 text-base leading-relaxed mb-6 max-w-3xl">
+        <p class="text-zinc-400 text-sm sm:text-base leading-relaxed mb-6 max-w-3xl">
           {post.summary}
         </p>
 
-        <div class="pt-6 border-t border-[#1a2333] flex items-center justify-between">
+        <div class="pt-6 border-t border-white/[0.06] flex items-center justify-between">
           <div class="flex items-center gap-3">
             <img
               src={post.author.avatar}
               alt={post.author.name}
-              class="w-8 h-8 rounded-full object-cover border border-[#1a2333]"
+              class="w-8 h-8 rounded-full object-cover border border-white/[0.1]"
             />
             <div class="text-xs">
-              <span class="font-medium text-white block">{post.author.name}</span>
-              <span class="text-slate-500">{post.author.role}</span>
+              <span class="font-medium text-zinc-200 block">{post.author.name}</span>
+              <span class="text-zinc-500">{post.author.role}</span>
             </div>
           </div>
 
           <a
             href={`/blog/${post.slug}`}
-            class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors flex items-center gap-1"
+            class="text-zinc-200 text-xs font-medium group-hover:text-white transition-colors flex items-center gap-1.5"
           >
-            Read Article →
+            <span>Read Article</span>
+            <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
           </a>
         </div>
       </article>
@@ -49,44 +50,45 @@ export function PostCard({ post, featured = false }: { post: Post; featured?: bo
   }
 
   return (
-    <article class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors flex flex-col justify-between">
+    <article class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-5 sm:p-6 hover:border-white/[0.18] transition-all duration-200 flex flex-col justify-between shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] group">
       <div>
-        <div class="flex items-center justify-between mb-3 text-xs font-mono">
-          <span class="text-emerald-400 font-semibold px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
+        <div class="flex items-center justify-between mb-3 text-xs">
+          <span class="text-zinc-300 font-medium px-2 py-0.5 rounded-full bg-white/[0.04] border border-white/[0.06] text-[10px]">
             {post.category}
           </span>
-          <span class="text-slate-500">{post.readTime}</span>
+          <span class="text-zinc-500 text-[11px]">{post.readTime}</span>
         </div>
 
-        <h3 class="text-lg font-bold text-white mb-3 hover:text-emerald-400 transition-colors line-clamp-2 leading-snug">
+        <h3 class="text-base font-semibold text-zinc-100 mb-2.5 group-hover:text-white transition-colors line-clamp-2 leading-snug">
           <a href={`/blog/${post.slug}`}>
             {post.title}
           </a>
         </h3>
 
-        <p class="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
+        <p class="text-zinc-400 text-xs leading-relaxed mb-6 line-clamp-3">
           {post.summary}
         </p>
       </div>
 
-      <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
+      <div class="pt-4 border-t border-white/[0.06] flex items-center justify-between">
         <div class="flex items-center gap-2.5">
           <img
             src={post.author.avatar}
             alt={post.author.name}
-            class="w-6 h-6 rounded-full object-cover border border-[#1a2333]"
+            class="w-6 h-6 rounded-full object-cover border border-white/[0.1]"
           />
           <div class="text-[11px]">
-            <span class="font-medium text-slate-200 block">{post.author.name}</span>
-            <span class="text-slate-500">{post.date}</span>
+            <span class="font-medium text-zinc-300 block">{post.author.name}</span>
+            <span class="text-zinc-500">{post.date}</span>
           </div>
         </div>
 
         <a
           href={`/blog/${post.slug}`}
-          class="text-emerald-400 text-xs font-semibold hover:text-emerald-300 transition-colors"
+          class="text-xs font-medium text-zinc-400 group-hover:text-white transition-colors flex items-center gap-1"
         >
-          Read →
+          <span>Read</span>
+          <span class="text-zinc-600">→</span>
         </a>
       </div>
     </article>

package/templates/blog/src/data/posts.ts

@@ -73,3 +73,51 @@ export const POSTS: Post[] = [
     ],
   },
 ];
+
+/**
+ * Returns all articles, querying the database if configured or falling back to static POSTS.
+ */
+export async function getPosts(): Promise<Post[]> {
+  try {
+    const { db } = await import('../db/index.js');
+    const { posts, authors } = await import('../db/schema.js');
+    const dbPosts = await db.select().from(posts);
+    if (dbPosts && dbPosts.length > 0) {
+      const allAuthors = await db.select().from(authors);
+      const authorMap = new Map(allAuthors.map((a: any) => [a.id, a]));
+      return dbPosts.map((p: any) => {
+        const auth = authorMap.get(p.authorId) || {
+          name: 'Alex Rivera',
+          role: 'Staff Systems Architect',
+          avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=faces',
+        };
+        return {
+          slug: p.slug,
+          title: p.title,
+          summary: p.summary,
+          date: 'Recent',
+          readTime: p.readTime,
+          category: p.category,
+          author: {
+            name: auth.name,
+            role: auth.role,
+            avatar: auth.avatar,
+          },
+          tags: ['FrootKit', 'Architecture', 'TypeScript'],
+          content: typeof p.content === 'string' ? JSON.parse(p.content) : p.content,
+        };
+      });
+    }
+  } catch {
+    // Database not attached, fallback
+  }
+  return POSTS;
+}
+
+/**
+ * Returns a single article by slug.
+ */
+export async function getPostBySlug(slug: string): Promise<Post | undefined> {
+  const allPosts = await getPosts();
+  return allPosts.find((p) => p.slug === slug);
+}

package/templates/blog/src/styles.css

@@ -4,23 +4,32 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  --color-brand-primary: #10b981;
-  --color-brand-hover: #34d399;
+  --color-brand-primary: #6366f1;
+  --color-brand-hover: #4f46e5;
 }
 
 :root {
   color-scheme: dark;
+  --bg-canvas: #08090a;
+  --bg-surface: #0f1117;
+  --bg-elevated: #151822;
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --text-primary: #f4f4f5;
+  --text-secondary: #9496a1;
+  --text-muted: #5c6370;
 }
 
 html {
-  background-color: #06090f;
-  color: #f8fafc;
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
   font-family: var(--font-sans);
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* SVG safety: prevents flex ballooning across all browsers */
+/* Strict SVG safety to prevent flex ballooning */
 svg {
   flex-shrink: 0;
   max-width: 100%;

package/templates/ecommerce/src/app/api/products/route.ts

@@ -1,28 +1,12 @@
-import { PRODUCTS } from '../../../data/products.js';
-
-export async function GET(req: Request): Promise<Response> {
-  const url = new URL(req.url);
-  const category = url.searchParams.get('category');
-  const limit = Number(url.searchParams.get('limit') || 20);
-
-  let results = [...PRODUCTS];
-  if (category) {
-    results = results.filter((p) => p.category.toLowerCase() === category.toLowerCase());
-  }
-
-  results = results.slice(0, limit);
-
-  return Response.json(
-    {
-      products: results,
-      total: results.length,
-      timestamp: new Date().toISOString(),
+import { getProducts } from '../../../data/products.js';
+
+export async function GET(): Promise<Response> {
+  const products = await getProducts();
+  return Response.json(products, {
+    status: 200,
+    headers: {
+      'content-type': 'application/json',
+      'cache-control': 'public, max-age=60',
     },
-    {
-      status: 200,
-      headers: {
-        'content-type': 'application/json',
-      },
-    }
-  );
+  });
 }

package/templates/ecommerce/src/app/cart/page.tsx

@@ -8,11 +8,11 @@ export const metadata = {
 
 export default function CartPage() {
   return (
-    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
+    <div class="min-h-screen bg-[#090a0f] text-zinc-100 flex flex-col justify-between selection:bg-white/20 selection:text-white">
       <Navbar />
 
-      <main class="max-w-4xl mx-auto px-6 py-12 flex-1 w-full">
-        <h1 class="text-3xl font-extrabold text-white mb-8">Order Cart</h1>
+      <main class="max-w-3xl mx-auto px-6 py-12 flex-1 w-full">
+        <h1 class="text-2xl font-semibold text-white tracking-tight mb-6">Shopping Cart</h1>
         <CartDrawer />
       </main>
 

package/templates/ecommerce/src/app/layout.tsx

@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
+      <body class="bg-[#090a0f] text-zinc-100 min-h-screen antialiased selection:bg-white/20 selection:text-white font-sans">
         {children}
       </body>
     </html>