create-githat-app 1.0.15 → 1.0.16

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

@@ -1,123 +1,105 @@
 'use client';
 
-import { SignInButton, SignUpButton, UserButton, useAuth } from '@githat/nextjs';
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
 
 /**
- * Plain GitHat homepage.
+ * Content site homepage.
  *
- * No dashboard, no orgs, no agents — just one page that flips between
- * "signed out" and "signed in." The smallest possible example of "I
- * have GitHat wired up." Replace this file with whatever your app
- * actually does — auth keeps working.
+ * 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.
  */
-export default function Home() {
-  const { isSignedIn, isLoading, user } = useAuth();
 
-  if (isLoading) {
-    return (
-      <div
-        style=\{{
-          display: 'flex',
-          minHeight: 'calc(100vh - 64px)',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--fg-muted)',
-        }}
-      >
-        Loading…
-      </div>
-    );
-  }
+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=\{{
-        display: 'flex',
-        minHeight: 'calc(100vh - 64px)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 'var(--space-8) var(--space-4)',
-        background: 'var(--bg)',
-      }}
-    >
-      <main
-        style=\{{
-          width: '100%',
-          maxWidth: '32rem',
-          textAlign: 'center',
-          color: 'var(--fg)',
-        }}
-      >
-        {!isSignedIn ? (
-          <>
-            <h1
-              style=\{{
-                fontFamily: 'var(--font-wordmark)',
-                fontSize: '2.5rem',
-                lineHeight: 1.1,
-                marginBottom: 'var(--space-3)',
-              }}
-            >
-              Welcome to {{businessName}}
-            </h1>
-            <p
-              style=\{{
-                color: 'var(--fg-muted)',
-                marginBottom: 'var(--space-6)',
-                lineHeight: 1.6,
-              }}
-            >
-              Sign in to continue, or create an account in 30 seconds.
-              We use GitHat for identity — your password never touches
-              this app.
-            </p>
-            <div
-              style=\{{
-                display: 'flex',
-                gap: 'var(--space-3)',
-                justifyContent: 'center',
-                flexWrap: 'wrap',
-              }}
-            >
-              <SignInButton />
-              <SignUpButton />
-            </div>
-          </>
-        ) : (
-          <>
-            <div
-              style=\{{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 'var(--space-4)',
-                marginBottom: 'var(--space-6)',
-              }}
-            >
-              <UserButton />
-              <h1
-                style=\{{
-                  fontFamily: 'var(--font-wordmark)',
-                  fontSize: '2rem',
-                  margin: 0,
-                }}
-              >
-                Hello{user?.name ? `, ${user.name}` : ''}.
-              </h1>
-            </div>
-            <p
-              style=\{{
-                color: 'var(--fg-muted)',
-                lineHeight: 1.6,
-              }}
-            >
-              That's it. The plain template doesn't ship a dashboard or
-              any other route — replace this page with whatever your
-              app actually does. Authentication will keep working.
-            </p>
-          </>
-        )}
-      </main>
+    <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>
   );
 }

package/templates/content/app/posts/[slug]/page.tsx.hbs

@@ -0,0 +1,119 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Post viewer with paywall.
+ *
+ * Three states a reader can be in:
+ *  1. Post is free → show full content
+ *  2. Post is gated + reader is signed in + has active subscription → show full
+ *  3. Post is gated + reader is anonymous OR not subscribed → show preview + CTA
+ *
+ * Subscription check is stubbed (`hasActiveSubscription` always
+ * false). Wire to your backend that watches Sebastn webhooks.
+ */
+
+const SAMPLE_POSTS: Record<string, { title: string; gated: boolean; body: string }> = {
+  welcome: {
+    title: 'Welcome to {{businessName}}',
+    gated: false,
+    body: 'This is the first post. Free to read. The rest of this template ' +
+          'is a working content site — paywall, newsletter, author dashboard. ' +
+          'Replace the sample posts with content from your CMS, Markdown files, ' +
+          'or a Postgres table.',
+  },
+  'first-deep-dive': {
+    title: 'Why I started this',
+    gated: false,
+    body: 'The one thing nobody told me when I started writing this newsletter: ' +
+          'it takes the first ten posts before you find the voice. Free to read.',
+  },
+  'paid-essay-1': {
+    title: 'Paid essay: the long version',
+    gated: true,
+    body: 'This is the unfiltered version of the paid essay. It runs about 3,000 ' +
+          'words and gets into the parts I keep out of the free posts. Subscribe ' +
+          'to read the rest. Sebastn handles the checkout — we never touch your card.',
+  },
+};
+
+export default function PostPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = use(params);
+  const post = SAMPLE_POSTS[slug];
+  const { isSignedIn } = useAuth();
+
+  // Stub: real apps fetch the user's subscription state from your
+  // backend (which watches Sebastn webhooks for the source of truth).
+  const hasActiveSubscription = false;
+
+  if (!post) {
+    return (
+      <div style=\{{ padding: 'var(--space-12)', textAlign: 'center' }}>
+        <p>Post not found.</p>
+        <Link href="/" style=\{{ color: 'var(--primary)' }}>← Home</Link>
+      </div>
+    );
+  }
+
+  const showPaywall = post.gated && (!isSignedIn || !hasActiveSubscription);
+
+  return (
+    <article style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+      <Link href="/" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+        ← All posts
+      </Link>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.25rem', lineHeight: 1.2, marginBottom: 'var(--space-4)' }}>
+        {post.title}
+      </h1>
+
+      <div style=\{{ color: 'var(--fg)', lineHeight: 1.8, fontSize: '1.0625rem' }}>
+        {showPaywall ? (
+          <>
+            <p style=\{{ marginBottom: 'var(--space-4)' }}>{post.body.slice(0, 200)}…</p>
+            <Paywall />
+          </>
+        ) : (
+          <p>{post.body}</p>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function Paywall() {
+  return (
+    <div style=\{{
+      marginTop: 'var(--space-8)',
+      padding: 'var(--space-6)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      border: '2px solid var(--accent)',
+      background: 'var(--surface-sub)',
+      textAlign: 'center',
+    }}>
+      <h3 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-2)' }}>
+        This post is for subscribers
+      </h3>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+        Get access to every paid essay, plus the newsletter.
+      </p>
+      <button
+        onClick={() => { /* TODO: open Sebastn checkout */ }}
+        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 — $5/mo
+      </button>
+    </div>
+  );
+}

package/templates/dashboard/app/admin/data/[entity]/page.tsx.hbs

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { listEntities } from '../../../../src/lib/db';
+
+/**
+ * Generic data-table view for any entity in your DB.
+ *
+ * Server component — runs `listEntities(entityName)` (which you
+ * implement in src/lib/db.ts) and renders rows as a basic table.
+ * Auth-gating is enforced by the middleware in proxy.ts; if you
+ * need entity-level RBAC, check `verifyToken` claims here.
+ */
+export default async function EntityPage({
+  params,
+}: {
+  params: Promise<{ entity: string }>;
+}) {
+  const { entity } = await params;
+  const rows = await listEntities(entity);
+
+  const columns = rows.length > 0 ? Object.keys(rows[0]) : ['id'];
+
+  return (
+    <div style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '64rem', margin: '0 auto' }}>
+      <Link href="/admin" style=\{{ color: 'var(--fg-muted)', fontSize: '0.875rem', display: 'inline-block', marginBottom: 'var(--space-4)' }}>
+        ← Admin
+      </Link>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
+        {entity}
+      </h1>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+        {rows.length} row{rows.length === 1 ? '' : 's'}
+      </p>
+
+      <div style=\{{ overflowX: 'auto', borderRadius: 'var(--radius-md, 0.5rem)', border: '1px solid var(--border)' }}>
+        <table style=\{{ width: '100%', borderCollapse: 'collapse', background: 'var(--surface)' }}>
+          <thead>
+            <tr style=\{{ borderBottom: '1px solid var(--border)', background: 'var(--surface-sub)' }}>
+              {columns.map((c) => (
+                <th key={c} style=\{{
+                  padding: 'var(--space-3) var(--space-4)',
+                  textAlign: 'left',
+                  fontSize: '0.75rem',
+                  fontWeight: 600,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                  color: 'var(--fg-muted)',
+                }}>
+                  {c}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={String(row.id)} style=\{{ borderBottom: '1px solid var(--border)' }}>
+                {columns.map((c) => (
+                  <td key={c} style=\{{ padding: 'var(--space-3) var(--space-4)', fontSize: '0.875rem' }}>
+                    {String(row[c])}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/app/admin/page.tsx.hbs

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Auth-gated admin home — overview of every entity in your DB.
+ *
+ * The list is hardcoded for the starter. Real apps generate it
+ * from your schema (drizzle, prisma) or list it server-side via
+ * `listEntities()` from src/lib/db.ts.
+ */
+const ENTITIES = ['users', 'orders', 'invoices', 'products'];
+
+export default function AdminPage() {
+  const { isSignedIn, isLoading } = useAuth();
+
+  if (isLoading) return <div style=\{{ padding: 'var(--space-8)', color: 'var(--fg-muted)' }}>Loading…</div>;
+  if (!isSignedIn) {
+    return (
+      <div style=\{{ padding: 'var(--space-8)', textAlign: 'center' }}>
+        <p>Sign in to access admin.</p>
+        <Link href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div style=\{{ padding: 'var(--space-8) var(--space-4)', maxWidth: '48rem', margin: '0 auto' }}>
+      <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-6)' }}>
+        Admin
+      </h1>
+      <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
+        Pick an entity to browse. Edit src/lib/db.ts to point at your
+        real database.
+      </p>
+      <ul style=\{{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 'var(--space-3)' }}>
+        {ENTITIES.map((e) => (
+          <li key={e}>
+            <Link href={`/admin/data/${e}`} style=\{{
+              display: 'block',
+              padding: 'var(--space-4)',
+              borderRadius: 'var(--radius-md, 0.5rem)',
+              border: '1px solid var(--border)',
+              background: 'var(--surface)',
+              color: 'var(--fg)',
+              textDecoration: 'none',
+            }}>
+              <div style=\{{ fontWeight: 600 }}>{e}</div>
+              <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)', marginTop: 'var(--space-1)' }}>
+                Browse {e} →
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -1,123 +1,57 @@
 'use client';
 
-import { SignInButton, SignUpButton, UserButton, useAuth } from '@githat/nextjs';
+import Link from 'next/link';
+import { SignInButton, useAuth } from '@githat/nextjs';
 
 /**
- * Plain GitHat homepage.
+ * Dashboard template homepage.
  *
- * No dashboard, no orgs, no agents — just one page that flips between
- * "signed out" and "signed in." The smallest possible example of "I
- * have GitHat wired up." Replace this file with whatever your app
- * actually does — auth keeps working.
+ * The pitch: you already have a database (Postgres, MySQL,
+ * DynamoDB, anything). You want auth-gated admin tooling on top of
+ * it without building auth from scratch.
+ *
+ * Replaces Retool + Auth0 + Vercel. Demonstrates GitHat as a
+ * "drop auth on your existing data" platform.
  */
 export default function Home() {
-  const { isSignedIn, isLoading, user } = useAuth();
-
-  if (isLoading) {
-    return (
-      <div
-        style=\{{
-          display: 'flex',
-          minHeight: 'calc(100vh - 64px)',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: 'var(--fg-muted)',
-        }}
-      >
-        Loading…
-      </div>
-    );
-  }
+  const { isSignedIn } = useAuth();
 
   return (
-    <div
-      style=\{{
-        display: 'flex',
-        minHeight: 'calc(100vh - 64px)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 'var(--space-8) var(--space-4)',
-        background: 'var(--bg)',
-      }}
-    >
-      <main
-        style=\{{
-          width: '100%',
-          maxWidth: '32rem',
-          textAlign: 'center',
-          color: 'var(--fg)',
-        }}
-      >
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <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)' }}>
+          Auth-gated admin UI for your existing database. Bring your
+          Postgres / MySQL / DynamoDB — we handle who can see it.
+        </p>
         {!isSignedIn ? (
-          <>
-            <h1
-              style=\{{
-                fontFamily: 'var(--font-wordmark)',
-                fontSize: '2.5rem',
-                lineHeight: 1.1,
-                marginBottom: 'var(--space-3)',
-              }}
-            >
-              Welcome to {{businessName}}
-            </h1>
-            <p
-              style=\{{
-                color: 'var(--fg-muted)',
-                marginBottom: 'var(--space-6)',
-                lineHeight: 1.6,
-              }}
-            >
-              Sign in to continue, or create an account in 30 seconds.
-              We use GitHat for identity — your password never touches
-              this app.
-            </p>
-            <div
-              style=\{{
-                display: 'flex',
-                gap: 'var(--space-3)',
-                justifyContent: 'center',
-                flexWrap: 'wrap',
-              }}
-            >
-              <SignInButton />
-              <SignUpButton />
-            </div>
-          </>
+          <SignInButton />
         ) : (
-          <>
-            <div
-              style=\{{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 'var(--space-4)',
-                marginBottom: 'var(--space-6)',
-              }}
-            >
-              <UserButton />
-              <h1
-                style=\{{
-                  fontFamily: 'var(--font-wordmark)',
-                  fontSize: '2rem',
-                  margin: 0,
-                }}
-              >
-                Hello{user?.name ? `, ${user.name}` : ''}.
-              </h1>
-            </div>
-            <p
-              style=\{{
-                color: 'var(--fg-muted)',
-                lineHeight: 1.6,
-              }}
-            >
-              That's it. The plain template doesn't ship a dashboard or
-              any other route — replace this page with whatever your
-              app actually does. Authentication will keep working.
-            </p>
-          </>
+          <Link href="/admin" 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',
+          }}>
+            Open dashboard →
+          </Link>
         )}
-      </main>
+      </section>
     </div>
   );
 }