create-githat-app 1.6.0 → 1.8.0

package/templates/nextjs/app/(auth)/reset-password/page.tsx.hbs

@@ -1,56 +1,21 @@
 {{#if includeForgotPassword}}
 'use client';
 
-import { Suspense, useState } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-{{#if includeGithatFolder}}
-import { authApi } from '../../../githat/api/auth{{#unless typescript}}.js{{/unless}}';
-{{/if}}
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ResetPasswordForm } from '@githat/nextjs';
 
 function ResetPasswordContent() {
   const searchParams = useSearchParams();
-  const router = useRouter();
   const token = searchParams.get('token');
 
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e{{#if typescript}}: React.FormEvent{{/if}}) => {
-    e.preventDefault();
-    if (password !== confirm) {
-      setError('Passwords do not match');
-      return;
-    }
-    setError('');
-    setLoading(true);
-    try {
-{{#if includeGithatFolder}}
-      await authApi.resetPassword(token!, password);
-{{else}}
-      const res = await fetch('{{apiUrl}}/auth/reset-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ token, password }),
-      });
-      if (!res.ok) throw new Error('Reset failed');
-{{/if}}
-      router.push('/sign-in?reset=success');
-    } catch (err) {
-      setError('Failed to reset password. The link may have expired.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
   if (!token) {
     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}}>
-        <div style=\{{ textAlign: 'center' }}>
-          <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Invalid reset link</h1>
-          <p style=\{{ color: '#a1a1aa' }}>
-            <a href="/forgot-password" style=\{{ color: '#7c3aed' }}>Request a new one</a>
+        <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
+          <h1 {{#if useTailwind}}className="text-xl font-semibold text-white mb-2"{{else}}style=\{{ fontSize: '1.25rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}{{/if}}>Invalid reset link</h1>
+          <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
+            <a href="/forgot-password" {{#if useTailwind}}className="text-violet-500 hover:underline"{{else}}style=\{{ color: '#7c3aed' }}{{/if}}>Request a new one</a>
           </p>
         </div>
       </main>
@@ -59,39 +24,7 @@ function ResetPasswordContent() {
 
   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}}>
-      <div style=\{{ width: '100%', maxWidth: '24rem', padding: '2rem' }}>
-        <h1 style=\{{ fontSize: '1.5rem', fontWeight: 600, color: '#fafafa', marginBottom: '0.5rem' }}>Reset password</h1>
-        <p style=\{{ color: '#a1a1aa', marginBottom: '1.5rem' }}>Enter your new password below.</p>
-        {error && <p style=\{{ color: '#ef4444', marginBottom: '1rem', fontSize: '0.875rem' }}>{error}</p>}
-        <form onSubmit={handleSubmit}>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="New password"
-            required
-            minLength={8}
-            disabled={loading}
-            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
-          />
-          <input
-            type="password"
-            value={confirm}
-            onChange={(e) => setConfirm(e.target.value)}
-            placeholder="Confirm password"
-            required
-            disabled={loading}
-            style=\{{ width: '100%', padding: '0.625rem 0.75rem', background: '#111113', border: '1px solid #1e1e2e', borderRadius: '0.375rem', color: '#fafafa', marginBottom: '1rem', outline: 'none' }}
-          />
-          <button
-            type="submit"
-            disabled={loading}
-            style=\{{ width: '100%', padding: '0.625rem', background: '#7c3aed', color: '#fff', border: 'none', borderRadius: '0.375rem', fontWeight: 600, cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.7 : 1 }}
-          >
-            {loading ? 'Resetting...' : 'Reset password'}
-          </button>
-        </form>
-      </div>
+      <ResetPasswordForm token={token} signInUrl="/sign-in" />
     </main>
   );
 }

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

@@ -20,6 +20,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
           ...githatConfig,
 {{else}}
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/dashboard',

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

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

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

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

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

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

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

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

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

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

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

@@ -19,6 +19,12 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
         */}
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
+          apiUrl: 'https://api.githat.io',
+{{#if typescript}}
+          tokenStorage: 'localStorage' as const,
+{{else}}
+          tokenStorage: 'localStorage',
+{{/if}}
           signInUrl: '/sign-in',
           signUpUrl: '/sign-up',
           afterSignInUrl: '/',

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

@@ -1,9 +1,8 @@
-{{#if typescript}}import type { NextConfig } from 'next';
-{{/if}}import { withGitHat } from '@githat/nextjs/server';
+import { withGitHat } from '@githat/nextjs/server';
 
-{{#if typescript}}const nextConfig: NextConfig = {
-{{else}}const nextConfig = {
-{{/if}}  output: 'standalone',
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
 };
 
 export default withGitHat(nextConfig);

package/templates/agent/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/content/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/dashboard/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/marketplace/app/(shop)/[slug]/p/[productId]/page.tsx.hbs

@@ -1,99 +0,0 @@
-/**
- * Product detail — `/<slug>/p/<productId>`.
- *
- * Server component. Fetch by (slug, productId), render. The starter
- * ships sample content so the route works even before a backend
- * exists. Cart writes go through `/api/cart/add` (you build that
- * route handler against your data layer).
- */
-
-import Link from 'next/link';
-
-interface PageProps {
-  params: Promise<{ slug: string; productId: string }>;
-}
-
-export default async function ProductPage({ params }: PageProps) {
-  const { slug, productId } = await params;
-
-  // TODO: replace with a real fetch
-  const product = {
-    id: productId,
-    name: 'Plátanos verdes (libra)',
-    price: 0.5,
-    description:
-      'Plátanos verdes recién llegados, perfectos para mangú. Vendido por libra.',
-    fresh: true,
-    storeName: 'Colmado de ejemplo',
-    storeOwner: 'Don Tito',
-    storeSlug: slug,
-  };
-
-  return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
-      <div style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
-        <Link href={`/${product.storeSlug}`} style=\{{
-          fontSize: '0.875rem',
-          color: 'var(--fg-muted)',
-          marginBottom: 'var(--space-4)',
-          display: 'inline-block',
-        }}>
-          ← {product.storeName}
-        </Link>
-
-        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
-          {product.name}
-        </h1>
-
-        {product.fresh && (
-          <p style=\{{
-            display: 'inline-block',
-            padding: 'var(--space-1) var(--space-3)',
-            borderRadius: 'var(--radius-full, 9999px)',
-            background: 'var(--success)',
-            color: 'var(--bg)',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-            marginBottom: 'var(--space-3)',
-          }}>
-            Está fresquecito
-          </p>
-        )}
-
-        <p style=\{{ fontSize: '1.5rem', fontWeight: 600, marginBottom: 'var(--space-4)' }}>
-          ${product.price.toFixed(2)}
-        </p>
-
-        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)', lineHeight: 1.6 }}>
-          {product.description}
-        </p>
-
-        <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-subtle)', marginBottom: 'var(--space-6)' }}>
-          De tu colmadero: <strong>{product.storeOwner}</strong>
-        </p>
-
-        {/*
-          Cart-add is a real fetch in production — you wire it to
-          /api/cart/add against your data layer + the anon-session
-          cookie from src/lib/anon-session.ts.
-        */}
-        <form action="/api/cart/add" method="POST">
-          <input type="hidden" name="productId" value={product.id} />
-          <input type="hidden" name="slug" value={product.storeSlug} />
-          <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',
-          }}>
-            Echar a la funda — Add to bag
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

package/templates/marketplace/app/(shop)/[slug]/page.tsx.hbs

@@ -1,90 +0,0 @@
-/**
- * A single colmadero's storefront — `/<slug>`.
- *
- * Server component. Take the slug, fetch the colmado's profile +
- * products from your data layer, render. The starter ships static
- * sample content so the route renders even without a backend.
- *
- * Real implementations:
- *  - Read by slug from your `colmados` table (Postgres, DynamoDB,
- *    whatever)
- *  - 404 via `notFound()` from 'next/navigation' if the slug is
- *    unknown
- *  - Pre-render the popular ones via `generateStaticParams()`
- */
-
-import Link from 'next/link';
-
-interface PageProps {
-  params: Promise<{ slug: string }>;
-}
-
-export default async function ShopPage({ params }: PageProps) {
-  const { slug } = await params;
-
-  // TODO: replace with a real fetch
-  const colmado = {
-    name: 'Colmado de ejemplo',
-    slug,
-    owner: 'Don Tito',
-    address: 'Calle Duarte #42',
-    open: true,
-    products: [
-      { id: '1', name: 'Plátanos verdes (libra)', price: 0.5, fresh: true },
-      { id: '2', name: 'Café Santo Domingo (1lb)', price: 6.99, fresh: false },
-      { id: '3', name: 'Salami Induveca', price: 4.5, fresh: false },
-      { id: '4', name: 'Recarga Claro $5', price: 5.0, fresh: false },
-    ],
-  };
-
-  return (
-    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
-      <div style=\{{ maxWidth: '48rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
-        <header style=\{{ marginBottom: 'var(--space-8)' }}>
-          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.25rem', marginBottom: 'var(--space-2)' }}>
-            {colmado.name}
-          </h1>
-          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-2)' }}>
-            Tu colmadero: <strong>{colmado.owner}</strong>
-          </p>
-          <p style=\{{ color: 'var(--fg-subtle)', fontSize: '0.875rem', display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
-            <span>{colmado.address}</span>
-            <span>·</span>
-            <span style=\{{ color: colmado.open ? 'var(--success)' : 'var(--danger)' }}>
-              {colmado.open ? 'Abierto ahorita' : 'Cerrado'}
-            </span>
-          </p>
-        </header>
-
-        <section>
-          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Productos</h2>
-          <ul style=\{{ listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 'var(--space-3)' }}>
-            {colmado.products.map((p) => (
-              <li key={p.id}>
-                <Link href={`/${slug}/p/${p.id}`} style=\{{
-                  display: 'block',
-                  padding: 'var(--space-4)',
-                  borderRadius: 'var(--radius-md, 0.5rem)',
-                  border: '1px solid var(--border)',
-                  background: 'var(--surface)',
-                  color: 'inherit',
-                  textDecoration: 'none',
-                }}>
-                  <div style=\{{ fontWeight: 600, marginBottom: 'var(--space-1)' }}>{p.name}</div>
-                  {p.fresh && (
-                    <div style=\{{ fontSize: '0.75rem', color: 'var(--success)', marginBottom: 'var(--space-1)' }}>
-                      Está fresquecito
-                    </div>
-                  )}
-                  <div style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>
-                    ${p.price.toFixed(2)}
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </section>
-      </div>
-    </div>
-  );
-}

package/templates/marketplace/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/nextjs/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/plain/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/portfolio/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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/saas/proxy.ts.hbs

@@ -1,10 +0,0 @@
-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|.*\\..*).*)'],
-};