@pylonsync/create-pylon 0.3.268 → 0.3.270

package/templates/default/lib/site.ts

@@ -0,0 +1,261 @@
+// Content for the rest of the marketing site — solutions, resources, company,
+// and comparison pages. Each collection drives a dynamic route AND the footer
+// columns, so the links and the pages can never drift. Fictional demo copy —
+// swap it for your own.
+
+export type ContentSection = { title: string; body: string };
+
+export type SitePage = {
+  slug: string;
+  navLabel: string; // label in nav/footer
+  eyebrow: string;
+  title: string; // hero headline
+  summary: string;
+  sections: ContentSection[];
+};
+
+export const SOLUTIONS: SitePage[] = [
+  {
+    slug: "startups",
+    navLabel: "For startups",
+    eyebrow: "Solutions",
+    title: "Move fast without losing the thread.",
+    summary:
+      "Keep a small team aligned as everything changes weekly. Acme gives you one place to plan, build, and ship before the next pivot.",
+    sections: [
+      { title: "One tool, not ten", body: "Projects, tasks, and docs in one place, so you are not paying for or stitching together five apps." },
+      { title: "Set up in minutes", body: "No admin overhead. Invite the team and start working the same day." },
+      { title: "Grows with you", body: "The same workspace works at five people and at fifty." },
+    ],
+  },
+  {
+    slug: "agencies",
+    navLabel: "For agencies",
+    eyebrow: "Solutions",
+    title: "Run every client like clockwork.",
+    summary:
+      "Give each client their own space, keep the work organized, and show progress without a status meeting.",
+    sections: [
+      { title: "A space per client", body: "Separate workspaces keep every engagement tidy and private." },
+      { title: "Shareable views", body: "Send clients a read-only view of exactly what is in flight." },
+      { title: "Reusable templates", body: "Start every new engagement from a proven playbook." },
+    ],
+  },
+  {
+    slug: "enterprise",
+    navLabel: "For enterprise",
+    eyebrow: "Solutions",
+    title: "Scale without the chaos.",
+    summary:
+      "Bring hundreds of people into one system of record, with the controls and visibility a larger org needs.",
+    sections: [
+      { title: "SSO and roles", body: "Single sign-on and granular roles keep access where it belongs." },
+      { title: "Audit log", body: "A complete record of who changed what, and when." },
+      { title: "Rollups", body: "See progress across teams and departments in one view." },
+    ],
+  },
+  {
+    slug: "teams",
+    navLabel: "For teams",
+    eyebrow: "Solutions",
+    title: "Built for how your team works.",
+    summary:
+      "Whether you build, design, market, or support, Acme adapts to your process instead of forcing a new one.",
+    sections: [
+      { title: "Your workflow", body: "Custom statuses and fields match the way your team already works." },
+      { title: "Cross-team work", body: "Hand work between teams without it falling through a crack." },
+      { title: "Less status-chasing", body: "Everyone sees the same live picture, so updates write themselves." },
+    ],
+  },
+];
+
+export const RESOURCES: SitePage[] = [
+  {
+    slug: "docs",
+    navLabel: "Docs",
+    eyebrow: "Resources",
+    title: "Documentation.",
+    summary: "Everything you need to set up Acme and get your team productive.",
+    sections: [
+      { title: "Getting started", body: "Create a workspace, invite your team, and ship your first project." },
+      { title: "Guides", body: "Deep dives on projects, tasks, docs, automations, and analytics." },
+      { title: "API", body: "Build on the typed Acme API and webhooks." },
+    ],
+  },
+  {
+    slug: "guides",
+    navLabel: "Guides",
+    eyebrow: "Resources",
+    title: "Guides and playbooks.",
+    summary: "Practical walkthroughs for getting the most out of Acme.",
+    sections: [
+      { title: "Run a sprint", body: "Plan, track, and review a two-week cycle in Acme." },
+      { title: "Automate intake", body: "Route incoming work to the right team automatically." },
+      { title: "Report to leadership", body: "Build a dashboard that answers the questions you get asked." },
+    ],
+  },
+  {
+    slug: "changelog",
+    navLabel: "Changelog",
+    eyebrow: "Resources",
+    title: "What's new.",
+    summary: "Every improvement we ship, in one place.",
+    sections: [
+      { title: "This week", body: "Faster search, a redesigned task list, and new automation triggers." },
+      { title: "Last week", body: "Timeline view for projects and CSV export for analytics." },
+      { title: "Earlier", body: "Webhooks, custom fields, and version history for docs." },
+    ],
+  },
+  {
+    slug: "api",
+    navLabel: "API reference",
+    eyebrow: "Resources",
+    title: "API reference.",
+    summary: "A typed REST API and webhooks for everything in Acme.",
+    sections: [
+      { title: "Authentication", body: "API keys scoped to a workspace, revocable at any time." },
+      { title: "Resources", body: "Projects, tasks, docs, and automations, all over the same API." },
+      { title: "Webhooks", body: "Subscribe to events and react to changes in real time." },
+    ],
+  },
+  {
+    slug: "status",
+    navLabel: "Status",
+    eyebrow: "Resources",
+    title: "System status.",
+    summary: "Live status for every Acme service.",
+    sections: [
+      { title: "API", body: "Operational — 99.99% over the last 90 days." },
+      { title: "Web app", body: "Operational — no incidents this week." },
+      { title: "Webhooks", body: "Operational — delivering within seconds." },
+    ],
+  },
+];
+
+export const COMPANY: SitePage[] = [
+  {
+    slug: "about",
+    navLabel: "About",
+    eyebrow: "Company",
+    title: "About Acme.",
+    summary: "We build the workspace we always wanted: fast, focused, and a pleasure to use.",
+    sections: [
+      { title: "Our mission", body: "Help teams do their best work without fighting their tools." },
+      { title: "How we work", body: "Small team, weekly releases, every decision close to the user." },
+      { title: "Where we are", body: "Remote-first, with people across a dozen time zones." },
+    ],
+  },
+  {
+    slug: "blog",
+    navLabel: "Blog",
+    eyebrow: "Company",
+    title: "The Acme blog.",
+    summary: "Notes on building Acme, and on building product in general.",
+    sections: [
+      { title: "Why one tool beats ten", body: "The hidden cost of stitching your stack together." },
+      { title: "Shipping weekly", body: "How a small team keeps a steady release cadence." },
+      { title: "Designing for focus", body: "The principles behind the Acme interface." },
+    ],
+  },
+  {
+    slug: "careers",
+    navLabel: "Careers",
+    eyebrow: "Company",
+    title: "Work at Acme.",
+    summary: "We are a small team that ships a lot. If that sounds good, come build with us.",
+    sections: [
+      { title: "Engineering", body: "Full-stack engineers who care about craft and speed." },
+      { title: "Design", body: "Product designers who sweat the details." },
+      { title: "Support", body: "People who love helping customers succeed." },
+    ],
+  },
+  {
+    slug: "contact",
+    navLabel: "Contact",
+    eyebrow: "Company",
+    title: "Get in touch.",
+    summary: "Questions, feedback, or just want to say hi? We would love to hear from you.",
+    sections: [
+      { title: "Sales", body: "Talk through whether Acme is a fit for your team." },
+      { title: "Support", body: "Get help from a human, usually within a few hours." },
+      { title: "Press", body: "Logos, screenshots, and company facts for the press." },
+    ],
+  },
+  {
+    slug: "privacy",
+    navLabel: "Privacy",
+    eyebrow: "Company",
+    title: "Privacy.",
+    summary: "How Acme handles your data, in plain language.",
+    sections: [
+      { title: "What we collect", body: "Only what we need to run the product and support you." },
+      { title: "How we use it", body: "To operate Acme — never sold, never rented." },
+      { title: "Your control", body: "Export or delete your data at any time." },
+    ],
+  },
+];
+
+export type Comparison = {
+  slug: string;
+  navLabel: string;
+  competitor: string;
+  title: string;
+  summary: string;
+  rows: { dim: string; acme: string; them: string }[];
+};
+
+// Generic, made-up competitors so the template ships no real brand names.
+export const COMPARISONS: Comparison[] = [
+  {
+    slug: "beacon",
+    navLabel: "Acme vs Beacon",
+    competitor: "Beacon",
+    title: "Acme vs Beacon",
+    summary:
+      "Beacon is a capable tool, but it splits projects, docs, and automation across separate products. Acme brings them into one fast workspace.",
+    rows: [
+      { dim: "Projects, tasks, and docs", acme: "In one workspace", them: "Separate products" },
+      { dim: "Real-time sync", acme: "Built in", them: "Add-on" },
+      { dim: "Automations", acme: "Included", them: "Higher tier" },
+      { dim: "Typed API", acme: "Yes", them: "Partial" },
+      { dim: "Setup time", acme: "Minutes", them: "Hours" },
+    ],
+  },
+  {
+    slug: "orbit",
+    navLabel: "Acme vs Orbit",
+    competitor: "Orbit",
+    title: "Acme vs Orbit",
+    summary:
+      "Orbit is flexible but slow to set up and heavy to run. Acme gives you the same power with a fraction of the overhead.",
+    rows: [
+      { dim: "Time to first project", acme: "Same day", them: "Onboarding required" },
+      { dim: "Speed", acme: "Instant, real-time", them: "Page reloads" },
+      { dim: "Per-seat pricing", acme: "No surprises", them: "Adds up fast" },
+      { dim: "Analytics", acme: "Built in", them: "Separate tool" },
+      { dim: "Learning curve", acme: "Gentle", them: "Steep" },
+    ],
+  },
+  {
+    slug: "tempo",
+    navLabel: "Acme vs Tempo",
+    competitor: "Tempo",
+    title: "Acme vs Tempo",
+    summary:
+      "Tempo is built for managers; Acme is built for the whole team. Everyone gets a fast, shared view of the work.",
+    rows: [
+      { dim: "Designed for", acme: "The whole team", them: "Managers" },
+      { dim: "Daily driver", acme: "Yes", them: "Reporting layer" },
+      { dim: "Docs included", acme: "Yes", them: "No" },
+      { dim: "Automations", acme: "Included", them: "Limited" },
+      { dim: "Self-serve", acme: "Yes", them: "Sales-led" },
+    ],
+  },
+];
+
+export function bySlug<T extends { slug: string }>(
+  list: T[],
+  slug: string,
+): T | undefined {
+  return list.find((x) => x.slug === slug);
+}

package/templates/{ssr → default}/package.json

@@ -13,6 +13,7 @@
     "@pylonsync/sdk": "^__PYLON_VERSION__",
     "@pylonsync/functions": "^__PYLON_VERSION__",
     "@pylonsync/client": "^__PYLON_VERSION__",
+    "@pylonsync/stripe": "^__PYLON_VERSION__",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.3.0",
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^5.6.0"

package/templates/{ssr → default}/tsconfig.json

@@ -8,11 +8,11 @@
     "strict": true,
     "skipLibCheck": true,
     "lib": ["ES2022", "DOM"],
-    "types": ["react", "react-dom"],
+    "types": ["react", "react-dom", "node"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/todo/app/page.tsx

@@ -9,7 +9,7 @@ import { TodoApp } from "./todo-app";
 export const metadata: Metadata = {
   title: "__APP_NAME__ — a live Pylon todo",
   description:
-    "A server-rendered todo list with live, optimistic, per-user sync — one binary, one port. Open two tabs and watch them stay in sync.",
+    "A server-rendered todo list with live, optimistic, per-user sync. Open two tabs and watch them stay in sync.",
 };
 
 // `app/page.tsx` → `/`. The heading and intro are server-rendered (view

package/templates/todo/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/ssr/README.md

@@ -1,56 +0,0 @@
-# __APP_NAME__
-
-A full-stack [Pylon](https://pylonsync.com) app — a server-rendered homepage,
-email/password auth, and a live client dashboard over a synced database, all
-served from one binary on one port. No Next.js, no separate API server.
-
-## Develop
-
-```bash
-__RUN_DEV__
-```
-
-Open http://localhost:4321. Sign up, and your notes dashboard updates live
-(open a second tab to watch writes sync). Edit any file under `app/` and save —
-the page reloads instantly.
-
-## Layout
-
-```
-app.ts                 data model + manifest (entities, policies, auth, routes)
-app/page.tsx           "/" — the server-rendered, auth-aware homepage
-app/login,signup/      email/password forms (POST /api/auth/password/*)
-app/dashboard/         "/dashboard" — authed; server-gated, live notes + sign out
-app/auth-form.tsx      shared client island for the login/signup forms
-app/layout.tsx         root layout wrapping every page (auth-aware nav)
-app/globals.css        Tailwind entrypoint (compiled by Pylon)
-functions/             server functions (query/mutation/action) — typed RPC
-```
-
-## How auth works
-
-Email/password is built in. `/login` and `/signup` call
-`/api/auth/password/*`; on success the server sets an **HttpOnly session
-cookie** (no token in JS-readable storage). `/dashboard` reads `auth` during
-the server render and redirects anonymous visitors to `/login` — a real 3xx
-before any HTML, so there's no flash and it works with JS off. The sync engine
-authenticates with the same cookie.
-
-## Add a route
-
-Drop a file at `app/about/page.tsx` and visit `/about`. Pages receive
-`{ url, params, searchParams, auth, response, serverData }` from the SSR
-runtime — all typed via `PageProps` from `@pylonsync/react`.
-
-## Add data
-
-Edit `app.ts`. Every `entity()` becomes a synced table with a REST +
-realtime API and a typed client — no migrations, no resolvers.
-
-## Deploy
-
-```bash
-pylon deploy
-```
-
-Docs: https://docs.pylonsync.com

package/templates/ssr/app/auth-form.tsx

@@ -1,142 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { passwordLogin, passwordRegister, ApiError } from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-// The email/password form, shared by /login and /signup. It calls the built-in
-// auth API directly — `passwordLogin` / `passwordRegister` (from
-// @pylonsync/client) POST to `/api/auth/password/*`.
-//
-// On success the server sets an HttpOnly session cookie on the response. We do
-// a full navigation to /dashboard rather than a client transition: the fresh
-// page load hands that cookie to the SSR runtime (which resolves auth and
-// renders the dashboard server-side) and to the sync engine (which
-// authenticates with the same cookie via `credentials: include`). Because the
-// cookie is HttpOnly it can never be read by JavaScript, so there is no
-// session token sitting in `localStorage` for an XSS to lift. (Cross-origin or
-// native clients, which can't rely on the cookie, use the token-based path via
-// `persistSession` instead — not needed here, same origin.)
-export function AuthForm({ mode }: { mode: "login" | "signup" }) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [displayName, setDisplayName] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
-
-  async function onSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError(null);
-    setPending(true);
-    try {
-      if (mode === "login") {
-        await passwordLogin({ email, password });
-      } else {
-        await passwordRegister({
-          email,
-          password,
-          displayName: displayName.trim() || undefined,
-        });
-      }
-      // Full navigation: the SSR dashboard re-renders with the new cookie.
-      window.location.assign("/dashboard");
-    } catch (err) {
-      setError(messageFor(err));
-      setPending(false); // keep the form up to retry (success navigates away)
-    }
-  }
-
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      {mode === "signup" ? (
-        <Field
-          label="Name"
-          value={displayName}
-          onChange={setDisplayName}
-          autoComplete="name"
-          placeholder="optional"
-        />
-      ) : null}
-      <Field
-        label="Email"
-        type="email"
-        value={email}
-        onChange={setEmail}
-        required
-        autoComplete="email"
-        placeholder="you@example.com"
-      />
-      <Field
-        label="Password"
-        type="password"
-        value={password}
-        onChange={setPassword}
-        required
-        autoComplete={mode === "login" ? "current-password" : "new-password"}
-        placeholder={mode === "signup" ? "at least 8 characters" : undefined}
-      />
-      {error ? (
-        <p className="rounded-md border border-red-600/30 bg-red-600/10 px-3 py-2 text-sm text-red-700">
-          {error}
-        </p>
-      ) : null}
-      <Button type="submit" disabled={pending} className="w-full">
-        {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
-      </Button>
-    </form>
-  );
-}
-
-function Field({
-  label,
-  value,
-  onChange,
-  type = "text",
-  required,
-  autoComplete,
-  placeholder,
-}: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  type?: string;
-  required?: boolean;
-  autoComplete?: string;
-  placeholder?: string;
-}) {
-  return (
-    <label className="block space-y-1.5">
-      <span className="text-sm font-medium">{label}</span>
-      <input
-        type={type}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        required={required}
-        autoComplete={autoComplete}
-        placeholder={placeholder}
-        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-      />
-    </label>
-  );
-}
-
-// Map the framework's auth error codes to friendly copy. `ApiError` carries a
-// stable `.code` (and `.status`) so you branch on the code, not the message.
-function messageFor(err: unknown): string {
-  if (err instanceof ApiError) {
-    switch (err.code) {
-      case "INVALID_CREDENTIALS":
-        return "Wrong email or password.";
-      case "USER_EXISTS":
-        return "That email is already in use — sign in instead.";
-      case "WEAK_PASSWORD":
-        return "Pick a stronger password (at least 8 characters).";
-      case "RATE_LIMITED":
-        return "Too many attempts — try again in a minute.";
-      default:
-        return err.message;
-    }
-  }
-  if (err instanceof Error) return err.message;
-  return "Something went wrong. Try again.";
-}

package/templates/ssr/app/dashboard/dashboard-client.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { db } from "@pylonsync/react";
-import { useAuth } from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-export interface Note {
-  id: string;
-  body: string;
-  done: boolean;
-}
-
-// The interactive dashboard. `db.useQuery` is a LIVE subscription — it
-// re-renders the instant a Note is added or toggled, in this tab or another.
-// `db.insert` / `db.update` / `db.delete` are OPTIMISTIC: they apply to the
-// local store immediately (zero-latency UI) and sync in the background,
-// rolling back automatically if a policy rejects the write.
-//
-// `initial` are the rows the server rendered into the HTML (see page.tsx).
-// We show them on the first paint — before the local store has hydrated — so
-// there's no empty flash, then hand off to the live data. Server-rendered for
-// the first byte, local-first realtime after.
-export function Dashboard({ initial }: { initial: Note[] }) {
-  const { signOut } = useAuth();
-  const [body, setBody] = useState("");
-  const { data: live, loading } = db.useQuery<Note>("Note");
-  const notes = !loading || live.length > 0 ? live : initial;
-
-  async function addNote(e: React.FormEvent) {
-    e.preventDefault();
-    const text = body.trim();
-    if (!text) return;
-    setBody("");
-    // We don't send ownerId — `field.owner()` stamps it from the session
-    // server-side and rejects any forged value, so this optimistic insert is
-    // safe.
-    await db.insert("Note", { body: text, done: false });
-  }
-
-  async function onSignOut() {
-    // Clears the server session (DELETE /api/auth/session → the cookie is
-    // cleared), then we land back on the public homepage.
-    await signOut();
-    window.location.assign("/");
-  }
-
-  return (
-    <div className="space-y-5">
-      <div className="flex items-center justify-end">
-        <Button variant="ghost" size="sm" onClick={onSignOut}>
-          Sign out
-        </Button>
-      </div>
-
-      <form onSubmit={addNote} className="flex items-center gap-2">
-        <input
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          placeholder="Write a note…"
-          aria-label="Note"
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        />
-        <Button type="submit">Add</Button>
-      </form>
-
-      {notes.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          No notes yet — add one above. It appears instantly (optimistic) and
-          syncs; open this page in a second tab to watch it arrive live.
-        </p>
-      ) : (
-        <ul className="space-y-2">
-          {notes.map((note) => (
-            <li
-              key={note.id}
-              className="flex items-center gap-3 rounded-md border px-3 py-2 text-sm"
-            >
-              <button
-                type="button"
-                aria-label={note.done ? "Mark not done" : "Mark done"}
-                onClick={() =>
-                  db.update("Note", note.id, { done: !note.done })
-                }
-                className={
-                  note.done
-                    ? "text-emerald-600"
-                    : "text-muted-foreground/50 hover:text-muted-foreground"
-                }
-              >
-                {note.done ? "✓" : "○"}
-              </button>
-              <span
-                className={
-                  note.done
-                    ? "flex-1 line-through text-muted-foreground"
-                    : "flex-1"
-                }
-              >
-                {note.body}
-              </span>
-              <button
-                type="button"
-                aria-label="Delete note"
-                onClick={() => db.delete("Note", note.id)}
-                className="text-muted-foreground/40 hover:text-red-600"
-              >
-                ✕
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}