modern-cms 1.0.0

package/template/apps/web/app/admin/(protected)/settings/theme/page.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FONT_OPTIONS, type SiteTheme } from "@pgcms/shared";
+import { api } from "@/lib/api";
+import { ColorPickerField } from "@/components/builder/ColorPickerField";
+import { MediaPickerModal } from "@/components/builder/MediaPickerModal";
+
+export default function ThemeSettingsPage() {
+  const [theme, setTheme] = useState<SiteTheme | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [logoPicker, setLogoPicker] = useState(false);
+  const [faviconPicker, setFaviconPicker] = useState(false);
+
+  useEffect(() => {
+    api.get<SiteTheme>("/api/theme").then(setTheme);
+  }, []);
+
+  function set<K extends keyof SiteTheme>(key: K, value: SiteTheme[K]) {
+    setTheme((prev) => (prev ? { ...prev, [key]: value } : prev));
+  }
+
+  async function save() {
+    if (!theme) return;
+    setSaving(true);
+    try {
+      const updated = await api.put<SiteTheme>("/api/theme", theme);
+      setTheme(updated);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!theme) return <div className="p-8 text-sm text-slate-400">Loading...</div>;
+
+  return (
+    <div className="p-8 max-w-2xl space-y-6">
+      <h1 className="text-2xl font-semibold">Theme Settings</h1>
+      <p className="text-sm text-slate-500">
+        Sets the site-wide defaults (brand colors, fonts, logo). Individual components can still override these per-page.
+      </p>
+
+      <div className="bg-white border rounded-lg p-6 space-y-5">
+        <div className="space-y-1">
+          <label className="text-sm font-medium">Site name</label>
+          <input
+            value={theme.siteName}
+            onChange={(e) => set("siteName", e.target.value)}
+            className="w-full border rounded-md px-3 py-2 text-sm"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <ColorPickerField label="Primary color" value={theme.primaryColor} onChange={(v) => set("primaryColor", v)} />
+          <ColorPickerField label="Secondary color" value={theme.secondaryColor} onChange={(v) => set("secondaryColor", v)} />
+          <ColorPickerField label="Background color" value={theme.backgroundColor} onChange={(v) => set("backgroundColor", v)} />
+          <ColorPickerField label="Text color" value={theme.textColor} onChange={(v) => set("textColor", v)} />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Heading font</label>
+            <select
+              value={theme.headingFont}
+              onChange={(e) => set("headingFont", e.target.value)}
+              className="w-full border rounded-md px-3 py-2 text-sm bg-white"
+            >
+              {FONT_OPTIONS.map((f) => (
+                <option key={f} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Body font</label>
+            <select
+              value={theme.bodyFont}
+              onChange={(e) => set("bodyFont", e.target.value)}
+              className="w-full border rounded-md px-3 py-2 text-sm bg-white"
+            >
+              {FONT_OPTIONS.map((f) => (
+                <option key={f} value={f}>
+                  {f}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Logo</label>
+            {theme.logoUrl && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={theme.logoUrl} alt="Logo" className="h-12 border rounded-md px-2 py-1 bg-slate-50" />
+            )}
+            <button
+              onClick={() => setLogoPicker(true)}
+              className="w-full border-2 border-dashed rounded-md py-2 text-xs text-slate-600 hover:border-blue-400"
+            >
+              {theme.logoUrl ? "Change logo" : "Select logo"}
+            </button>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Favicon</label>
+            {theme.faviconUrl && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={theme.faviconUrl} alt="Favicon" className="h-12 w-12 border rounded-md p-1 bg-slate-50" />
+            )}
+            <button
+              onClick={() => setFaviconPicker(true)}
+              className="w-full border-2 border-dashed rounded-md py-2 text-xs text-slate-600 hover:border-blue-400"
+            >
+              {theme.faviconUrl ? "Change favicon" : "Select favicon"}
+            </button>
+          </div>
+        </div>
+
+        <div className="space-y-3 border-t pt-5">
+          <label className="flex items-center gap-2 text-sm font-medium">
+            <input
+              type="checkbox"
+              checked={theme.darkModeEnabled}
+              onChange={(e) => set("darkModeEnabled", e.target.checked)}
+            />
+            Enable dark mode
+          </label>
+          <p className="text-xs text-slate-500">
+            Adds a light/dark toggle to the public site. Leave the colors below blank to use sensible defaults.
+          </p>
+          {theme.darkModeEnabled && (
+            <div className="grid grid-cols-3 gap-4">
+              <ColorPickerField
+                label="Dark primary color"
+                value={theme.primaryColorDark ?? undefined}
+                onChange={(v) => set("primaryColorDark", v)}
+              />
+              <ColorPickerField
+                label="Dark background"
+                value={theme.backgroundColorDark ?? undefined}
+                onChange={(v) => set("backgroundColorDark", v)}
+              />
+              <ColorPickerField
+                label="Dark text color"
+                value={theme.textColorDark ?? undefined}
+                onChange={(v) => set("textColorDark", v)}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-3 border-t pt-5">
+          <label className="text-sm font-medium">Analytics</label>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-slate-600">Provider</label>
+              <select
+                value={theme.analyticsProvider}
+                onChange={(e) => set("analyticsProvider", e.target.value as SiteTheme["analyticsProvider"])}
+                className="w-full border rounded-md px-3 py-2 text-sm bg-white"
+              >
+                <option value="none">None</option>
+                <option value="ga4">Google Analytics (GA4)</option>
+                <option value="plausible">Plausible</option>
+                <option value="custom">Custom script</option>
+              </select>
+            </div>
+            {theme.analyticsProvider !== "none" && theme.analyticsProvider !== "custom" && (
+              <div className="space-y-1">
+                <label className="text-xs font-medium text-slate-600">
+                  {theme.analyticsProvider === "ga4" ? "Measurement ID (G-XXXXXXX)" : "Domain"}
+                </label>
+                <input
+                  value={theme.analyticsId ?? ""}
+                  onChange={(e) => set("analyticsId", e.target.value)}
+                  placeholder={theme.analyticsProvider === "ga4" ? "G-XXXXXXXXXX" : "example.com"}
+                  className="w-full border rounded-md px-3 py-2 text-sm"
+                />
+              </div>
+            )}
+          </div>
+          {theme.analyticsProvider === "custom" && (
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-slate-600">Custom script (inserted as-is on every public page)</label>
+              <textarea
+                value={theme.analyticsCustomScript ?? ""}
+                onChange={(e) => set("analyticsCustomScript", e.target.value)}
+                rows={4}
+                className="w-full border rounded-md px-3 py-2 text-sm font-mono"
+                placeholder="<script>...</script>"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-1">
+          <label className="text-sm font-medium">Custom CSS (advanced)</label>
+          <textarea
+            value={theme.customCss ?? ""}
+            onChange={(e) => set("customCss", e.target.value)}
+            rows={5}
+            className="w-full border rounded-md px-3 py-2 text-sm font-mono"
+            placeholder=".my-class { color: red; }"
+          />
+        </div>
+
+        <button
+          onClick={save}
+          disabled={saving}
+          className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+        >
+          {saving ? "Saving..." : "Save theme"}
+        </button>
+      </div>
+
+      {logoPicker && (
+        <MediaPickerModal
+          accept="image"
+          onSelect={(url) => {
+            set("logoUrl", url);
+            setLogoPicker(false);
+          }}
+          onClose={() => setLogoPicker(false)}
+        />
+      )}
+      {faviconPicker && (
+        <MediaPickerModal
+          accept="image"
+          onSelect={(url) => {
+            set("faviconUrl", url);
+            setFaviconPicker(false);
+          }}
+          onClose={() => setFaviconPicker(false)}
+        />
+      )}
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/users/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import type { User, UserRole } from "@pgcms/shared";
+import { api, ApiError } from "@/lib/api";
+
+export default function UsersPage() {
+  const [users, setUsers] = useState<User[] | null>(null);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState<UserRole>("EDITOR");
+  const [error, setError] = useState<string | null>(null);
+
+  function refresh() {
+    api.get<User[]>("/api/users").then(setUsers);
+  }
+
+  useEffect(refresh, []);
+
+  async function addUser() {
+    setError(null);
+    try {
+      await api.post("/api/users", { email, password, role });
+      setEmail("");
+      setPassword("");
+      setRole("EDITOR");
+      refresh();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Failed to create user");
+    }
+  }
+
+  async function removeUser(id: string) {
+    if (!confirm("Remove this user?")) return;
+    await api.delete(`/api/users/${id}`);
+    refresh();
+  }
+
+  return (
+    <div className="p-8 max-w-2xl space-y-6">
+      <h1 className="text-2xl font-semibold">Users</h1>
+
+      <div className="bg-white border rounded-lg p-4 space-y-3">
+        {error && <div className="text-sm text-red-600">{error}</div>}
+        <div className="flex gap-3">
+          <input
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="flex-1 border rounded-md px-3 py-2 text-sm"
+          />
+          <input
+            placeholder="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="flex-1 border rounded-md px-3 py-2 text-sm"
+          />
+          <select
+            value={role}
+            onChange={(e) => setRole(e.target.value as UserRole)}
+            className="border rounded-md px-3 py-2 text-sm bg-white"
+          >
+            <option value="AUTHOR">Author (own pages/items only)</option>
+            <option value="EDITOR">Editor</option>
+            <option value="ADMIN">Admin</option>
+          </select>
+        </div>
+        <button
+          onClick={addUser}
+          disabled={!email || !password}
+          className="flex items-center gap-1.5 bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+        >
+          <Plus size={15} /> Add user
+        </button>
+      </div>
+
+      <div className="bg-white border rounded-lg divide-y">
+        {users?.map((u) => (
+          <div key={u.id} className="flex items-center justify-between px-4 py-3">
+            <div>
+              <div className="font-medium text-sm">{u.email}</div>
+              <div className="text-xs text-slate-400">{u.role}</div>
+            </div>
+            <button onClick={() => removeUser(u.id)} className="text-slate-400 hover:text-red-600">
+              <Trash2 size={16} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/app/admin/login/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Suspense, useState, type FormEvent } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { api, ApiError } from "@/lib/api";
+
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await api.post("/api/auth/login", { email, password });
+      router.push(searchParams.get("next") || "/admin");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="w-full max-w-sm bg-white rounded-xl shadow-sm border p-8 space-y-4">
+      <div>
+        <h1 className="text-xl font-semibold">pg-cms admin</h1>
+        <p className="text-sm text-slate-500">Sign in to manage your site.</p>
+      </div>
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2">{error}</div>}
+      <div className="space-y-1">
+        <label className="text-sm font-medium">Email</label>
+        <input
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-md border px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="space-y-1">
+        <label className="text-sm font-medium">Password</label>
+        <input
+          type="password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full rounded-md border px-3 py-2 text-sm"
+        />
+      </div>
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full bg-blue-600 text-white rounded-md py-2 text-sm font-medium hover:bg-blue-700 disabled:opacity-60"
+      >
+        {loading ? "Signing in..." : "Sign in"}
+      </button>
+    </form>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50">
+      <Suspense fallback={<div className="text-sm text-slate-400">Loading…</div>}>
+        <LoginForm />
+      </Suspense>
+    </div>
+  );
+}

package/template/apps/web/app/api/revalidate/route.ts

@@ -0,0 +1,34 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+/** Called by the Express API after publish/save to bust ISR cache tags. */
+export async function POST(req: NextRequest) {
+  const secret = process.env.REVALIDATE_SECRET;
+  if (!secret) {
+    return NextResponse.json({ error: "Revalidation not configured" }, { status: 503 });
+  }
+
+  const auth = req.headers.get("authorization");
+  if (auth !== `Bearer ${secret}`) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: { tags?: unknown };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  if (!Array.isArray(body.tags) || body.tags.some((t) => typeof t !== "string")) {
+    return NextResponse.json({ error: "tags must be a string array" }, { status: 400 });
+  }
+
+  for (const tag of body.tags) {
+    // Next 16 requires a cache-life profile; "max" expires the tag everywhere
+    // immediately, matching the pre-16 single-argument behavior.
+    revalidateTag(tag, "max");
+  }
+
+  return NextResponse.json({ revalidated: true, tags: body.tags });
+}

package/template/apps/web/app/globals.css

@@ -0,0 +1,120 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --theme-primary: #2563eb;
+  --theme-secondary: #0f172a;
+  --theme-bg: #ffffff;
+  --theme-text: #111827;
+  --theme-heading-font: "Poppins", sans-serif;
+  --theme-body-font: "Inter", sans-serif;
+}
+
+body {
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  font-family: var(--theme-body-font);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--theme-heading-font);
+}
+
+.pgcms-editable-selected {
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+}
+
+.pgcms-editable-hover:hover {
+  outline: 1px dashed #94a3b8;
+  outline-offset: -1px;
+}
+
+/* --- Modern effect utilities, driven by NodeStyle fields (see Renderer.tsx) --- */
+
+/* Glassmorphism panel — translucent frosted glass. The background only applies when
+   the node has no explicit backgroundColor of its own (inline style wins over this). */
+.pgcms-glass {
+  background-color: rgb(255 255 255 / 0.12);
+  backdrop-filter: blur(14px) saturate(1.4);
+  -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  border: 1px solid rgb(255 255 255 / 0.25);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
+}
+
+/* Gradient-filled headings — colors come from --pgcms-tg-from / --pgcms-tg-to set
+   inline by the Renderer. */
+.pgcms-text-gradient h1,
+.pgcms-text-gradient h2,
+.pgcms-text-gradient h3 {
+  background-image: linear-gradient(100deg, var(--pgcms-tg-from), var(--pgcms-tg-to));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Hover effects (tilt is JS-driven in useModernEffects; these three are pure CSS). */
+.pgcms-hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.pgcms-hover-lift:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.25);
+}
+.pgcms-hover-scale {
+  transition: transform 0.3s ease;
+}
+.pgcms-hover-scale:hover {
+  transform: scale(1.03);
+}
+.pgcms-hover-glow {
+  transition: box-shadow 0.3s ease;
+}
+.pgcms-hover-glow:hover {
+  /* Fallback for browsers without relative color syntax, then the themed version. */
+  box-shadow: 0 0 32px rgb(37 99 235 / 0.45);
+  box-shadow: 0 0 0 1px rgb(from var(--theme-primary) r g b / 0.4),
+    0 0 32px rgb(from var(--theme-primary) r g b / 0.45);
+}
+
+/* Animated gradient background (Hero's "animate gradient" option) — the gradient is
+   oversized and its position drifts back and forth. */
+.pgcms-animated-gradient {
+  background-size: 300% 300% !important;
+  animation: pgcms-gradient-drift 8s ease-in-out infinite;
+}
+@keyframes pgcms-gradient-drift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Marquee ticker — the track holds two copies of the items; translating it by -50%
+   loops seamlessly. Duration/direction are set inline by the component. */
+.pgcms-marquee {
+  overflow: hidden;
+  white-space: nowrap;
+}
+.pgcms-marquee-track {
+  display: inline-flex;
+  align-items: center;
+  animation: pgcms-marquee-scroll linear infinite;
+  animation-duration: var(--pgcms-marquee-duration, 20s);
+  animation-direction: var(--pgcms-marquee-direction, normal);
+}
+.pgcms-marquee:hover .pgcms-marquee-track[data-pause-on-hover="true"] {
+  animation-play-state: paused;
+}
+@keyframes pgcms-marquee-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pgcms-marquee-track,
+  .pgcms-animated-gradient {
+    animation: none;
+  }
+}

package/template/apps/web/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "pg-cms",
+  description: "Drag-and-drop website CMS",
+};
+
+// Runs before hydration so a dark-mode visitor never sees a light flash: the
+// `data-theme` attribute set here is what ThemeStyleTag's `:root[data-theme="dark"]`
+// block targets. Harmless when a site hasn't enabled dark mode — that CSS block simply
+// doesn't exist, so setting the attribute has no visual effect.
+const THEME_INIT_SCRIPT = `
+(function () {
+  try {
+    var saved = localStorage.getItem("pgcms-theme");
+    var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    document.documentElement.setAttribute("data-theme", theme);
+  } catch (e) {}
+})();
+`;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    // suppressHydrationWarning is scoped to this element's own attributes only (it does
+    // not suppress mismatches in children) — needed because the beforeInteractive script
+    // below sets data-theme before React hydrates, which would otherwise be flagged as a
+    // server/client mismatch even though it's intentional.
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <Script id="pgcms-theme-init" strategy="beforeInteractive">
+          {THEME_INIT_SCRIPT}
+        </Script>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/template/apps/web/app/preview/[token]/page.tsx

@@ -0,0 +1,70 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { isRtlLocale, type NavItem, type Page, type PageNode, type SiteTheme } from "@pgcms/shared";
+import { serverGet } from "@/lib/serverApi";
+import { ThemeStyleTag } from "@/components/theme/ThemeProvider";
+import { PublicPageView } from "@/components/renderer/PublicPageView";
+import { JsonLd } from "@/components/seo/JsonLd";
+
+type GlobalSection = { kind: string; enabled: boolean; content: PageNode };
+
+const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
+
+async function loadPreview(token: string) {
+  try {
+    const [page, theme, navItems, globalSections] = await Promise.all([
+      serverGet<Page>(`/api/pages/preview/${token}`, { tags: [`preview:${token}`], revalidate: 0 }),
+      serverGet<SiteTheme>(`/api/theme/public`, { tags: ["cms", "cms-theme"] }),
+      serverGet<NavItem[]>(`/api/theme/nav/public`, { tags: ["cms", "cms-nav"] }),
+      serverGet<GlobalSection[]>(`/api/global-sections`).catch(() => [] as GlobalSection[]),
+    ]);
+    const globalHeader = globalSections.find((s) => s.kind === "header" && s.enabled)?.content ?? null;
+    const globalFooter = globalSections.find((s) => s.kind === "footer" && s.enabled)?.content ?? null;
+    return { page, theme, navItems, globalHeader, globalFooter };
+  } catch {
+    return null;
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ token: string }>;
+}): Promise<Metadata> {
+  const { token } = await params;
+  const data = await loadPreview(token);
+  if (!data) return { title: "Preview not found" };
+  return {
+    title: `[Preview] ${data.page.seoTitle || data.page.title}`,
+    robots: { index: false, follow: false },
+  };
+}
+
+export default async function PreviewPage({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+  const data = await loadPreview(token);
+  if (!data) notFound();
+
+  const locale = data.page.locale || "en";
+  const slug = data.page.slug || "";
+  const pageUrl = `${SITE_URL}/${slug}`;
+
+  return (
+    <div lang={locale} dir={isRtlLocale(locale) ? "rtl" : "ltr"}>
+      <div className="bg-amber-500 text-amber-950 text-center text-xs py-1.5 font-medium">
+        Draft preview — this page is not published
+      </div>
+      <JsonLd page={data.page} theme={data.theme} url={pageUrl} />
+      <ThemeStyleTag theme={data.theme} />
+      <PublicPageView
+        page={data.page}
+        theme={data.theme}
+        navItems={data.navItems}
+        globalHeader={data.globalHeader}
+        globalFooter={data.globalFooter}
+        pageLocale={locale}
+        translations={[]}
+      />
+    </div>
+  );
+}

package/template/apps/web/app/robots.ts

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
+
+/** /robots.txt — allow everything except the admin, and point crawlers at the sitemap. */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [{ userAgent: "*", allow: "/", disallow: ["/admin", "/preview"] }],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+  };
+}