@notionx/create-notionx-app 1.0.0

package/dist/templates/app/api/{{contentSourceId}}/route.ts.tmpl

@@ -0,0 +1,18 @@
+// Public API: list items for the {{contentSourceTitle}} content source.
+// Returns a JSON array of published items with their metadata.
+
+import { NextResponse } from "next/server";
+import { listGenericNotionContent } from "@notionx/core/notion";
+import { {{contentSourceVarName}} } from "@/lib/content/models";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const items = await listGenericNotionContent({{contentSourceVarName}});
+    return NextResponse.json({ items });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

package/dist/templates/app/globals.css.tmpl

@@ -0,0 +1,109 @@
+@import "tailwindcss";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+/* =========================================================================
+   Design tokens
+   =========================================================================
+   These CSS variables are the single source of truth for the entire UI.
+   Every shadcn primitive (Button, Card, Badge, Input, ...) reads from
+   them via `bg-primary`, `text-foreground`, `rounded-md`, etc.
+
+   To re-skin the project, just edit the values below. The default is
+   neutral black/white (the shadcn "new-york" base). See README →
+   "Customize the look" for recipes.
+   ========================================================================= */
+@layer base {
+  :root {
+    /* Surfaces */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    /* Card / popover surfaces */
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    /* Brand — the "1 color to rule them all" */
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    /* Muted / accent */
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    /* Status */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* Form controls */
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    /* Geometry */
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/templates/app/layout.tsx.tmpl

@@ -0,0 +1,56 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeBootstrap } from "@/components/site/theme-bootstrap";
+import { getSiteSettings, getStaticSiteSettings } from "@/lib/site/settings";
+import { fallbackSiteConfig } from "@/lib/site/config";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const settings = await getSiteSettings();
+  return {
+    title: {
+      default: settings.seo.title || settings.name,
+      template: `%s · ${settings.seo.title || settings.name}`,
+    },
+    description: settings.seo.description || settings.description,
+    openGraph: {
+      title: settings.seo.title || settings.name,
+      description: settings.seo.description || settings.description,
+      ...(settings.ogImageUrl
+        ? { images: [{ url: settings.ogImageUrl }] }
+        : settings.socialImageUrl
+          ? { images: [{ url: settings.socialImageUrl }] }
+          : {}),
+      type: "website",
+    },
+  };
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const settings = (await getSiteSettings()) ?? getStaticSiteSettings();
+  return (
+    <html
+      lang={settings.defaultLocale ?? fallbackSiteConfig.defaultLocale}
+      data-theme-primary={settings.theme.primary}
+      data-theme-accent={settings.theme.accent}
+      data-theme-font={settings.theme.font}
+      suppressHydrationWarning
+    >
+      <body className="min-h-screen bg-background font-sans antialiased">
+        <ThemeBootstrap />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/dist/templates/app/login/page.tsx.tmpl

@@ -0,0 +1,154 @@
+// Sign-in page. The `emailLoginAction` server action authenticates
+// against the D1-backed user table exposed by `@notionx/core/auth`,
+// rate-limits by email + IP, and sets the HMAC-signed user session
+// cookie on success. The form is shadcn-styled and inherits the
+// project's design tokens from `app/globals.css`.
+
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { siteConfig } from "@/lib/site/config";
+import {
+  authenticateEmailUser,
+  clearAuthRateLimits,
+  enforceAuthRateLimits,
+  isAuthenticated,
+  recordAuthFailures,
+  setUserSessionCookie,
+  userToSession,
+} from "@notionx/core/auth";
+import { getClientIp } from "@notionx/core/util";
+
+export const dynamic = "force-dynamic";
+
+type LoginError = "invalid" | "unverified" | "rate" | "captcha";
+
+function loginRedirect(error: LoginError, email?: string): never {
+  const params = new URLSearchParams({ loginError: error });
+  if (email) params.set("email", email);
+  redirect(`/login?${params.toString()}`);
+}
+
+async function emailLoginAction(formData: FormData): Promise<void> {
+  "use server";
+  const email = String(formData.get("email") ?? "").trim();
+  const password = String(formData.get("password") ?? "");
+  if (!email || !password) loginRedirect("invalid", email);
+
+  const ip = await getClientIp();
+  const limit = await enforceAuthRateLimits("login", { email, ip });
+  if (!limit.ok) {
+    const params = new URLSearchParams({
+      loginError: "rate",
+      retry: String(limit.retryAfterSec),
+    });
+    if (email) params.set("email", email);
+    redirect(`/login?${params.toString()}`);
+  }
+
+  const result = await authenticateEmailUser({ email, password });
+  if (!result.ok) {
+    await recordAuthFailures("login", { email, ip });
+    loginRedirect(result.reason, email);
+  }
+
+  await clearAuthRateLimits("login", { email, ip });
+  await setUserSessionCookie(userToSession(result.user));
+  redirect("/admin");
+}
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams?: Promise<{
+    loginError?: string;
+    email?: string;
+    retry?: string;
+    registered?: string;
+  }>;
+}) {
+  if (await isAuthenticated()) redirect("/admin");
+  const sp = (await searchParams) ?? {};
+  const emailValue = sp.email ?? "";
+  const errorMessage = (() => {
+    switch (sp.loginError) {
+      case "invalid":
+        return "邮箱或密码错误";
+      case "unverified":
+        return "邮箱还没有验证，请先打开验证邮件中的链接。";
+      case "captcha":
+        return "请完成人机验证后再试";
+      case "rate":
+        return `登录尝试过多，请 ${sp.retry ?? "900"} 秒后再试`;
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-background to-muted p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-2xl">Sign in</CardTitle>
+          <CardDescription>
+            Enter your admin credentials to manage {siteConfig.name}.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {sp.registered ? (
+            <p className="mb-4 rounded-md border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-400">
+              验证邮件已发送到 {emailValue || "你的邮箱"}，请先验证后再登录。
+            </p>
+          ) : null}
+          {errorMessage ? (
+            <p className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMessage}
+            </p>
+          ) : null}
+          <form action={emailLoginAction} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                autoFocus
+                autoComplete="email"
+                defaultValue={emailValue}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                autoComplete="current-password"
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Sign in
+            </Button>
+          </form>
+          <p className="mt-4 text-center text-xs text-muted-foreground">
+            没有账号？{" "}
+            <Link href="/register" className="underline">
+              立即注册
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/dist/templates/app/page.fallback.tsx.tmpl

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { SiteShell } from "@/components/site/site-shell";
+import { siteConfig } from "@/lib/site/config";
+
+export const revalidate = 300;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: siteConfig.name,
+    description: siteConfig.description,
+  };
+}
+
+export default function Home() {
+  return (
+    <SiteShell showHeader={true} showFooter={true}>
+      <main>
+        <section className="border-t bg-muted/20">
+          <div className="container mx-auto max-w-3xl px-4 py-14">
+            <h1 className="text-3xl font-bold tracking-tight">
+              {siteConfig.name}
+            </h1>
+            <p className="mt-2 text-muted-foreground">
+              {siteConfig.description}
+            </p>
+          </div>
+        </section>
+      </main>
+    </SiteShell>
+  );
+}

package/dist/templates/app/page.tsx.tmpl

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { NotionBlocks } from "@/components/notion-blocks";
+import { PageBlocks } from "@/components/page-blocks";
+import { SiteShell } from "@/components/site/site-shell";
+import { siteConfig } from "@/lib/site/config";
+import { getSitePageByKey } from "@/lib/pages/source";
+
+export const revalidate = 300;
+
+export async function generateMetadata(): Promise<Metadata> {
+  const page = await getSitePageByKey("home");
+  return {
+    title: page?.seoTitle ?? siteConfig.name,
+    description: page?.seoDescription ?? siteConfig.description,
+    openGraph: page?.coverImage
+      ? { images: [{ url: page.coverImage }] }
+      : undefined,
+  };
+}
+
+export default async function Home() {
+  const page = await getSitePageByKey("home");
+
+  return (
+    <SiteShell
+      showHeader={page?.showHeader ?? true}
+      showFooter={page?.showFooter ?? true}
+    >
+      <main>
+        {page?.structuredBlocks?.length ? (
+          <PageBlocks blocks={page.structuredBlocks} />
+        ) : page?.blocks?.length ? (
+          <section className="border-t bg-muted/20">
+            <div className="container mx-auto max-w-3xl px-4 py-14">
+              <NotionBlocks blocks={page.blocks} />
+            </div>
+          </section>
+        ) : null}
+      </main>
+    </SiteShell>
+  );
+}

package/dist/templates/app/register/page.tsx.tmpl

@@ -0,0 +1,138 @@
+// Self-service registration page. Creates a new user in D1, issues
+// an email-verify token, and bounces the user back to /login with a
+// `?registered=1` banner. Email delivery and the actual verify link
+// come from the package's `auth/email` and `/api/auth/verify-email`
+// flows; this page just produces a registration row.
+
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { siteConfig } from "@/lib/site/config";
+import {
+  createEmailUser,
+  isAuthenticated,
+  validatePasswordStrength,
+} from "@notionx/core/auth";
+import { getClientIp } from "@notionx/core/util";
+
+export const dynamic = "force-dynamic";
+
+type RegisterError = "exists" | "weak" | "missing";
+
+function registerRedirect(error: RegisterError, email?: string): never {
+  const params = new URLSearchParams({ error });
+  if (email) params.set("email", email);
+  redirect(`/register?${params.toString()}`);
+}
+
+async function registerAction(formData: FormData): Promise<void> {
+  "use server";
+  const email = String(formData.get("email") ?? "").trim();
+  const password = String(formData.get("password") ?? "");
+  if (!email || !password) registerRedirect("missing", email);
+
+  const strength = validatePasswordStrength(password);
+  if (strength) registerRedirect("weak", email);
+
+  const ip = await getClientIp();
+  void ip; // Reserved for future rate limiting on the register flow.
+
+  const result = await createEmailUser({ email, password });
+  if (!result.ok) registerRedirect("exists", email);
+
+  // Verification email delivery is intentionally out of scope for
+  // the scaffold. The user can wire Resend via `lib/email/resend.ts`
+  // or trigger `/api/auth/verify-email?token=…` manually from the
+  // admin panel to confirm the account.
+  const params = new URLSearchParams({ registered: "1" });
+  params.set("email", email);
+  redirect(`/login?${params.toString()}`);
+}
+
+export default async function RegisterPage({
+  searchParams,
+}: {
+  searchParams?: Promise<{ error?: string; email?: string }>;
+}) {
+  if (await isAuthenticated()) redirect("/admin");
+  const sp = (await searchParams) ?? {};
+  const emailValue = sp.email ?? "";
+  const errorMessage = (() => {
+    switch (sp.error) {
+      case "exists":
+        return "该邮箱已注册，直接登录即可。";
+      case "weak":
+        return "密码至少 8 位且需同时包含字母和数字。";
+      case "missing":
+        return "请填写邮箱和密码。";
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-background via-background to-muted p-4">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-2xl">Create account</CardTitle>
+          <CardDescription>
+            Register an admin account for {siteConfig.name}.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {errorMessage ? (
+            <p className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMessage}
+            </p>
+          ) : null}
+          <form action={registerAction} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                autoFocus
+                autoComplete="email"
+                defaultValue={emailValue}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                autoComplete="new-password"
+                minLength={8}
+              />
+              <p className="text-xs text-muted-foreground">
+                至少 8 位，需同时包含字母和数字。
+              </p>
+            </div>
+            <Button type="submit" className="w-full">
+              Create account
+            </Button>
+          </form>
+          <p className="mt-4 text-center text-xs text-muted-foreground">
+            已有账号？{" "}
+            <Link href="/login" className="underline">
+              去登录
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/dist/templates/app/{{contentSourceListPath}}/[slug]/page.tsx.tmpl

@@ -0,0 +1,113 @@
+// Public detail page for the first content source (default: blog).
+// Resolves a single Notion page by slug and renders its metadata
+// header + body content. Uses `notFound()` so the App Router emits
+// a 404 for unpublished, missing, or invalid slugs.
+
+import Link from "next/link";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getGenericNotionContentBySlug } from "@notionx/core/notion";
+import { {{contentSourceVarName}} } from "@/lib/content/models";
+import { Badge } from "@/components/ui/badge";
+import { NotionBlocks } from "@/components/notion-blocks";
+import { SiteShell } from "@/components/site/site-shell";
+import { getSitePageForContentSource } from "@/lib/pages/source";
+
+export const revalidate = 3600;
+
+type Params = { slug: string };
+
+function formatDate(value: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<Params>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const item = await getGenericNotionContentBySlug({{contentSourceVarName}}, slug);
+  if (!item) return { title: "Not found" };
+  return {
+    title: item.title,
+    description: item.description,
+    openGraph: item.coverImage
+      ? { images: [{ url: item.coverImage }] }
+      : undefined,
+  };
+}
+
+export default async function {{contentSourceConstName}}DetailPage({
+  params,
+}: {
+  params: Promise<Params>;
+}) {
+  const { slug } = await params;
+  const item = await getGenericNotionContentBySlug({{contentSourceVarName}}, slug);
+  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  if (!item) notFound();
+
+  return (
+    <SiteShell
+      showHeader={page?.showHeader ?? true}
+      showFooter={page?.showFooter ?? true}
+    >
+      <main className="container mx-auto max-w-3xl px-4 py-16">
+        <Link
+          href="{{contentSourceListPath}}"
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          ← Back to {page?.title || "{{contentSourceListTitle}}"}
+        </Link>
+
+        <article className="mt-6 space-y-6">
+          <header className="space-y-4">
+            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <time dateTime={item.date}>{formatDate(item.date)}</time>
+              {item.tags.length > 0 ? (
+                <>
+                  <span aria-hidden>·</span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {item.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </>
+              ) : null}
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight">{item.title}</h1>
+            {item.description ? (
+              <p className="text-lg text-muted-foreground">{item.description}</p>
+            ) : null}
+          </header>
+
+          {item.coverImage ? (
+            <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg bg-muted">
+              <Image
+                src={item.coverImage}
+                alt={item.title}
+                fill
+                sizes="(min-width: 768px) 768px, 100vw"
+                priority
+                className="object-cover"
+              />
+            </div>
+          ) : null}
+
+          <NotionBlocks blocks={item.blocks} />
+        </article>
+      </main>
+    </SiteShell>
+  );
+}