create-githat-app 1.3.0 → 1.4.0

package/templates/classroom/app/projects/[id]/feedback/page.tsx.hbs

@@ -0,0 +1,159 @@
+'use client';
+
+import { use, useState } from 'react';
+import Link from 'next/link';
+
+/**
+ * Audience feedback form — `/projects/[id]/feedback`.
+ *
+ * Anyone with the link can fill this out. NO sign-in required —
+ * that's the whole point. Anonymous responses go to a queue the
+ * presenter watches in real time on /present.
+ *
+ * The form questions are deliberately short — long forms kill
+ * response rates and the value of this template is volume of
+ * feedback over time, not depth per response.
+ */
+export default function FeedbackPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const [submitted, setSubmitted] = useState(false);
+  const [oneThing, setOneThing] = useState('');
+  const [stuck, setStuck] = useState('');
+  const [scale, setScale] = useState(7);
+
+  if (submitted) {
+    return (
+      <div style=\{{
+        background: 'var(--bg)',
+        color: 'var(--fg)',
+        minHeight: 'calc(100vh - 64px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 'var(--space-4)',
+      }}>
+        <div style=\{{ maxWidth: '32rem', textAlign: 'center' }}>
+          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
+            ¡Gracias!
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+            The presenter sees your feedback live on their screen.
+            You can submit again with a new thought any time.
+          </p>
+          <button
+            onClick={() => { setSubmitted(false); setOneThing(''); setStuck(''); setScale(7); }}
+            style=\{{
+              padding: 'var(--space-3) var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              background: 'var(--primary)',
+              color: 'var(--bg)',
+              border: 'none',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Add another thought
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)', padding: 'var(--space-8) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '32rem', margin: '0 auto' }}>
+        <Link href={`/projects/${id}`} style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+          ← Project
+        </Link>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-2)' }}>
+          Tell them what you think
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+          No account, no email. Just three quick questions while
+          they're presenting.
+        </p>
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            /* TODO: POST /api/projects/[id]/feedback { oneThing, stuck, scale } */
+            setSubmitted(true);
+          }}
+          style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}
+        >
+          <Field label="One thing that landed for you">
+            <input
+              type="text"
+              required
+              value={oneThing}
+              onChange={(e) => setOneThing(e.target.value)}
+              placeholder="The thing you'll remember tomorrow"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+              }}
+            />
+          </Field>
+
+          <Field label="One thing you'd want them to dig into more">
+            <textarea
+              value={stuck}
+              onChange={(e) => setStuck(e.target.value)}
+              rows={3}
+              placeholder="A question, a doubt, a what-if"
+              style=\{{
+                width: '100%',
+                padding: 'var(--space-3)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                fontSize: '1rem',
+                fontFamily: 'inherit',
+                resize: 'vertical',
+              }}
+            />
+          </Field>
+
+          <Field label={`How likely are you to share this with someone? (${scale}/10)`}>
+            <input
+              type="range"
+              min={1}
+              max={10}
+              value={scale}
+              onChange={(e) => setScale(Number(e.target.value))}
+              style=\{{ width: '100%' }}
+            />
+          </Field>
+
+          <button type="submit" style=\{{
+            padding: 'var(--space-3) var(--space-5)',
+            borderRadius: 'var(--radius-md, 0.5rem)',
+            background: 'var(--primary)',
+            color: 'var(--bg)',
+            border: 'none',
+            fontWeight: 600,
+            fontSize: '1rem',
+            cursor: 'pointer',
+          }}>
+            Send feedback
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label style=\{{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+      <span style=\{{ fontSize: '0.875rem', fontWeight: 600 }}>{label}</span>
+      {children}
+    </label>
+  );
+}

package/templates/classroom/app/projects/[id]/present/page.tsx.hbs

@@ -0,0 +1,113 @@
+'use client';
+
+import { use, useEffect, useState } from 'react';
+
+/**
+ * Presenter view — `/projects/[id]/present`.
+ *
+ * The student opens this on their second screen (or a phone next
+ * to the laptop) and presents. As the audience submits feedback
+ * via /projects/[id]/feedback, responses fade in here in real
+ * time — newest first, color-coded by the scale rating.
+ *
+ * Real implementations:
+ *  - Replace the mock interval with a polling fetch (every 3-5s)
+ *    against your backend, OR a websocket / SSE stream.
+ *  - Persist responses to your DB so the project can reiterate
+ *    over multiple cohorts.
+ */
+
+interface FeedbackEntry {
+  id: string;
+  oneThing: string;
+  stuck: string;
+  scale: number;
+  receivedAt: number;
+}
+
+const MOCK_FEEDBACK: FeedbackEntry[] = [
+  { id: 'a', oneThing: 'The slide on supply chain bottlenecks', stuck: 'How do you measure trust at scale?', scale: 9, receivedAt: Date.now() - 60_000 },
+  { id: 'b', oneThing: 'Loved the bilingual UX argument',       stuck: 'What about Mexican misceláneas?',     scale: 8, receivedAt: Date.now() - 120_000 },
+];
+
+export default function PresenterPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const [feedback, setFeedback] = useState<FeedbackEntry[]>(MOCK_FEEDBACK);
+
+  // Simulated incoming feedback. Replace with a real fetch poll or
+  // websocket subscription. The shape is the same.
+  useEffect(() => {
+    const t = setInterval(() => {
+      // setFeedback((prev) => [{ ...newOne, id: crypto.randomUUID() }, ...prev]);
+    }, 5000);
+    return () => clearInterval(t);
+  }, []);
+
+  const audienceUrl = typeof window !== 'undefined'
+    ? `${window.location.origin}/projects/${id}/feedback`
+    : `/projects/${id}/feedback`;
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: '100vh', padding: 'var(--space-6) var(--space-4)' }}>
+      <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
+        <header style=\{{
+          padding: 'var(--space-5)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          background: 'var(--surface-sub)',
+          marginBottom: 'var(--space-6)',
+          textAlign: 'center',
+        }}>
+          <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-2)' }}>
+            Audience submits feedback at:
+          </p>
+          <code style=\{{
+            fontSize: '1.25rem',
+            fontFamily: 'var(--font-mono, monospace)',
+            color: 'var(--primary)',
+            wordBreak: 'break-all',
+          }}>
+            {audienceUrl}
+          </code>
+        </header>
+
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.75rem', marginBottom: 'var(--space-4)' }}>
+          Live feedback ({feedback.length})
+        </h1>
+
+        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          {feedback.map((f) => (
+            <li key={f.id} style=\{{
+              padding: 'var(--space-5)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: `2px solid ${f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)'}`,
+              background: 'var(--surface)',
+            }}>
+              <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--space-3)', marginBottom: 'var(--space-2)' }}>
+                <div style=\{{ flex: 1 }}>
+                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>What landed</div>
+                  <div style=\{{ fontWeight: 600 }}>{f.oneThing}</div>
+                </div>
+                <div style=\{{
+                  padding: 'var(--space-1) var(--space-3)',
+                  borderRadius: 'var(--radius-full, 9999px)',
+                  background: f.scale >= 8 ? 'var(--success)' : f.scale >= 5 ? 'var(--info)' : 'var(--warn)',
+                  color: 'var(--bg)',
+                  fontSize: '0.75rem',
+                  fontWeight: 700,
+                }}>
+                  {f.scale}/10
+                </div>
+              </div>
+              {f.stuck && (
+                <div style=\{{ marginTop: 'var(--space-3)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border)' }}>
+                  <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>Wants more on</div>
+                  <div style=\{{ fontSize: '0.9375rem', color: 'var(--fg)' }}>{f.stuck}</div>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/classroom/next.config.ts.hbs

@@ -0,0 +1,8 @@
+import type { NextConfig } from 'next';
+import { withGitHat } from '@githat/nextjs/server';
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
+
+export default withGitHat(nextConfig);

package/templates/classroom/postcss.config.mjs.hbs

@@ -0,0 +1,14 @@
+/*
+ * Plain template — Tailwind v4 PostCSS plugin is required even though
+ * the plain scaffold doesn't use Tailwind utility classes. The auth
+ * page CSS shipped by `@githat/nextjs/styles` is processed through
+ * @tailwindcss/postcss at build time. Drop this config and the
+ * auth pages render unstyled.
+ */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/templates/classroom/proxy.ts.hbs

@@ -0,0 +1,10 @@
+import { authProxy } from '@githat/nextjs/proxy';
+
+export const proxy = authProxy({
+  publicRoutes: ['/', '/sign-in', '/sign-up'{{#if includeForgotPassword}}, '/forgot-password', '/reset-password'{{/if}}{{#if includeEmailVerification}}, '/verify-email'{{/if}}],
+  signInUrl: '/sign-in',
+});
+
+export const config = {
+  matcher: ['/((?!_next|api|.*\\..*).*)'],
+};

package/templates/classroom/tsconfig.json.hbs

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/content/app/(auth)/sign-in/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignInForm } from '@githat/nextjs';
+
+export default function SignInPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignInForm signUpUrl="/sign-up" {{#if includeForgotPassword}}forgotPasswordUrl="/forgot-password"{{/if}} />
+    </main>
+  );
+}

package/templates/content/app/(auth)/sign-up/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignUpForm } from '@githat/nextjs';
+
+export default function SignUpPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignUpForm signInUrl="/sign-in" />
+    </main>
+  );
+}

package/templates/content/app/globals.css.hbs

@@ -0,0 +1,87 @@
+/*
+ * Tailwind v4 — required because @githat/nextjs/styles is processed
+ * through @tailwindcss/postcss. Plain doesn't ship utility classes,
+ * but the import is needed for the auth pages to render styled.
+ */
+@import "tailwindcss";
+
+/*
+ * Plain template — self-contained globals.
+ *
+ * Defines the minimum CSS variables a GitHat app uses for layout and
+ * the auth-page styling that ships with @githat/nextjs/styles.
+ * Override these in your own files when you want a real theme.
+ *
+ * Light theme by default; flip --bg/--fg for dark.
+ */
+
+:root {
+  /* Surface */
+  --bg:           #ffffff;
+  --surface:      #fafafa;
+  --surface-sub:  #f4f4f5;
+
+  /* Borders */
+  --border:       #e5e7eb;
+
+  /* Foreground */
+  --fg:           #0a0a0a;
+  --fg-muted:     #525252;
+  --fg-subtle:    #737373;
+
+  /* Brand — change these two to re-skin the whole auth flow */
+  --primary:      #6366f1;
+  --accent:       #f59e0b;
+
+  /* Semantic */
+  --success:      #16a34a;
+  --warn:         #d97706;
+  --danger:       #dc2626;
+
+  /* Spacing — used by @githat/nextjs/styles */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  /* Radius */
+  --radius:    0.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+
+  /* Fonts */
+  --font-sans:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-wordmark: 'Instrument Serif', Georgia, serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:           #0a0a0a;
+    --surface:      #18181b;
+    --surface-sub:  #27272a;
+    --border:       #3f3f46;
+    --fg:           #fafafa;
+    --fg-muted:     #a1a1aa;
+    --fg-subtle:    #71717a;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/content/app/layout.tsx.hbs

@@ -0,0 +1,41 @@
+import { GitHatProvider } from '@githat/nextjs';
+import '@githat/nextjs/styles';
+import './globals.css';
+
+export const metadata = {
+  title: '{{businessName}}',
+  description: '{{description}}',
+};
+
+export default function RootLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
+  return (
+    <html lang="en">
+      <body>
+        {/*
+          Plain template: no @githat/ui dep, no Wordmark. The
+          full-kit (`nextjs`) template uses @githat/ui for the
+          shared design system; the plain scaffold is the smallest
+          working app, so we avoid extra deps.
+        */}
+        <GitHatProvider config=\{{
+          publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          signInUrl: '/sign-in',
+          signUpUrl: '/sign-up',
+          afterSignInUrl: '/',
+          afterSignOutUrl: '/',
+        }}>
+          <header style=\{{
+            padding: '1rem 1.5rem',
+            borderBottom: '1px solid var(--border, #e5e7eb)',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+          }}>
+            <a href="/" style=\{{ textDecoration: 'none', color: 'inherit', fontWeight: 600 }}>
+              {{businessName}}
+            </a>
+          </header>
+          <main>{children}</main>
+        </GitHatProvider>
+      </body>
+    </html>
+  );
+}

package/templates/content/app/newsletter/page.tsx.hbs

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+
+/**
+ * Free newsletter sign-up.
+ *
+ * Newsletters work without a GitHat account — readers just give an
+ * email. Real apps POST to /api/newsletter/subscribe which calls
+ * GitHat's POST /email/send to confirm + your audience-of-record
+ * (Postgres `subscribers` table, MailerLite, etc.).
+ *
+ * Keep this page simple — adding fields kills conversion.
+ */
+export default function NewsletterPage() {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  return (
+    <div style=\{{
+      background: 'var(--bg)',
+      color: 'var(--fg)',
+      minHeight: 'calc(100vh - 64px)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 'var(--space-4)',
+    }}>
+      <div style=\{{ maxWidth: '32rem', width: '100%', textAlign: 'center' }}>
+        {submitted ? (
+          <>
+            <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
+              Check your inbox
+            </h1>
+            <p style=\{{ color: 'var(--fg-muted)' }}>
+              We sent a confirmation to <strong>{email}</strong>. Click the link
+              and you'll get the next post when it ships.
+            </p>
+          </>
+        ) : (
+          <>
+            <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-3)' }}>
+              Get the newsletter
+            </h1>
+            <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+              Free posts, occasional extras. Unsubscribe any time.
+            </p>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                /* TODO: POST /api/newsletter/subscribe { email } */
+                setSubmitted(true);
+              }}
+              style=\{{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap', justifyContent: 'center' }}
+            >
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                style=\{{
+                  flex: '1 1 240px',
+                  padding: 'var(--space-3) var(--space-4)',
+                  borderRadius: 'var(--radius-md, 0.5rem)',
+                  border: '1px solid var(--border)',
+                  background: 'var(--surface)',
+                  color: 'var(--fg)',
+                  fontSize: '1rem',
+                }}
+              />
+              <button type="submit" style=\{{
+                padding: 'var(--space-3) var(--space-6)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: 'none',
+                background: 'var(--primary)',
+                color: 'var(--bg)',
+                fontWeight: 600,
+                fontSize: '1rem',
+                cursor: 'pointer',
+              }}>
+                Subscribe
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/content/app/page.tsx.hbs

@@ -0,0 +1,105 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Content site homepage.
+ *
+ * Replaces Substack + Stripe + a paywall plugin. Demonstrates:
+ *  - Free posts, paid posts, subscriber-only posts
+ *  - Sebastn for one-time tips and recurring subscriptions
+ *  - GitHat email for the newsletter
+ *
+ * Sample posts are hardcoded — replace with a fetch from your CMS,
+ * Markdown files, or a Postgres `posts` table.
+ */
+
+const SAMPLE_POSTS = [
+  { slug: 'welcome',         title: 'Welcome to {{businessName}}',          excerpt: 'What this newsletter is about.',          gated: false },
+  { slug: 'first-deep-dive', title: 'Why I started this',                   excerpt: 'The one thing nobody told me.',           gated: false },
+  { slug: 'paid-essay-1',    title: 'Paid essay: the long version',         excerpt: 'For paid subscribers — the unfiltered take.', gated: true },
+];
+
+export default function Home() {
+  const { isSignedIn } = useAuth();
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)' }}>
+      <section style=\{{
+        padding: 'var(--space-12) var(--space-4)',
+        textAlign: 'center',
+        maxWidth: '40rem',
+        margin: '0 auto',
+      }}>
+        <h1 style=\{{
+          fontFamily: 'var(--font-wordmark, Georgia, serif)',
+          fontSize: 'clamp(2rem, 5vw, 3rem)',
+          lineHeight: 1.1,
+          marginBottom: 'var(--space-3)',
+        }}>
+          {{businessName}}
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', fontSize: '1.125rem', marginBottom: 'var(--space-6)' }}>
+          {{description}}
+        </p>
+        <Link href="/newsletter" style=\{{
+          display: 'inline-block',
+          padding: 'var(--space-3) var(--space-6)',
+          borderRadius: 'var(--radius-md, 0.5rem)',
+          background: 'var(--primary)',
+          color: 'var(--bg)',
+          fontWeight: 600,
+          textDecoration: 'none',
+        }}>
+          Subscribe to the newsletter →
+        </Link>
+      </section>
+
+      <section style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '48rem', margin: '0 auto' }}>
+        <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Recent posts</h2>
+        <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+          {SAMPLE_POSTS.map((post) => (
+            <li key={post.slug}>
+              <Link href={`/posts/${post.slug}`} style=\{{
+                display: 'block',
+                padding: 'var(--space-5)',
+                borderRadius: 'var(--radius-md, 0.5rem)',
+                border: '1px solid var(--border)',
+                background: 'var(--surface)',
+                color: 'var(--fg)',
+                textDecoration: 'none',
+              }}>
+                <div style=\{{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', marginBottom: 'var(--space-2)' }}>
+                  <h3 style=\{{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{post.title}</h3>
+                  {post.gated && (
+                    <span style=\{{
+                      padding: '2px var(--space-2)',
+                      borderRadius: 'var(--radius-full, 9999px)',
+                      background: 'var(--accent)',
+                      color: 'var(--bg)',
+                      fontSize: '0.625rem',
+                      fontWeight: 700,
+                    }}>
+                      PAID
+                    </span>
+                  )}
+                </div>
+                <p style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem' }}>{post.excerpt}</p>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {!isSignedIn && (
+        <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)', textAlign: 'center' }}>
+          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-3)' }}>
+            Already a subscriber?
+          </p>
+          <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+        </section>
+      )}
+    </div>
+  );
+}