@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/creator/app/page.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import {
+  WRAP,
+  Eyebrow,
+  Divider,
+  SectionHead,
+  initials,
+  ImagePlaceholder,
+} from "@/components/marketing";
+import { NewsletterSignup } from "./newsletter-signup";
+import { siteConfig } from "@/lib/site.config";
+
+export const metadata: Metadata = {
+  title: siteConfig.seo.title,
+  description: siteConfig.seo.description,
+  openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+};
+
+// `app/page.tsx` → `/`. A server-rendered personal-brand site. Hero, about,
+// offerings, testimonials, and links are static server HTML (SEO + first paint);
+// the newsletter section (#newsletter) is a client island with a live
+// subscriber counter. All copy comes from siteConfig. Doesn't read `auth`, so
+// the public page stays cacheable.
+export default function LandingPage() {
+  const { hero, about, offerings, testimonials, newsletter, links } = siteConfig;
+
+  return (
+    <div className="bg-white text-zinc-900">
+      {/* HERO */}
+      <section className={`${WRAP} pt-16 pb-14 sm:pt-20`}>
+        <div className="grid items-center gap-10 sm:grid-cols-[1fr_auto]">
+          <div>
+            <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
+              <span className="inline-block size-1.5 rounded-full bg-brand" />
+              {hero.badge}
+            </span>
+            <h1 className="mt-5 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3rem]">
+              {hero.name}
+            </h1>
+            <p className="mt-2 text-[18px] font-medium text-brand">{hero.tagline}</p>
+            <p className="mt-5 max-w-xl text-[16px] leading-relaxed text-zinc-500">{hero.intro}</p>
+            <div className="mt-7 flex flex-wrap items-center gap-4">
+              <a href="#newsletter" className="inline-flex items-center rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-zinc-700">
+                Read the newsletter
+              </a>
+              <a href="#work" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
+                Work with me →
+              </a>
+            </div>
+          </div>
+          {/* Profile photo — replace the placeholder with a real headshot. */}
+          <div className="order-first w-32 sm:order-none sm:w-44">
+            <ImagePlaceholder
+              shape="square"
+              title="Your headshot"
+              hint="Replace in app/page.tsx"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ABOUT */}
+      <Divider />
+      <section className={`${WRAP} py-14`}>
+        <div className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr]">
+          <SectionHead eyebrow={about.eyebrow} title={about.headline} />
+          <div className="space-y-4 text-[15px] leading-relaxed text-zinc-600">
+            {about.paragraphs.map((p) => (
+              <p key={p}>{p}</p>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* OFFERINGS */}
+      <Divider />
+      <section id="work" className={`${WRAP} py-14`}>
+        <SectionHead eyebrow={offerings.eyebrow} title={offerings.headline} />
+        <div className="mt-8 grid gap-5 sm:grid-cols-3">
+          {offerings.items.map((o) => (
+            <div key={o.title} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
+              <h3 className="text-[15px] font-semibold text-zinc-900">{o.title}</h3>
+              <p className="mt-2 flex-1 text-[14px] leading-relaxed text-zinc-500">{o.body}</p>
+              {o.price ? (
+                <p className="mt-4 text-[13px] font-medium uppercase tracking-wide text-brand">{o.price}</p>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* TESTIMONIALS */}
+      {testimonials && testimonials.items.length > 0 ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-14`}>
+            <SectionHead eyebrow={testimonials.eyebrow} title={testimonials.headline} />
+            <div className="mt-8 grid gap-5 sm:grid-cols-3">
+              {testimonials.items.map((t) => (
+                <figure key={t.name} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
+                  <blockquote className="text-[14px] leading-relaxed text-zinc-600">&ldquo;{t.quote}&rdquo;</blockquote>
+                  <figcaption className="mt-5 flex items-center gap-3">
+                    <span className="flex size-8 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-semibold text-zinc-500">
+                      {initials(t.name)}
+                    </span>
+                    <div className="leading-tight">
+                      <div className="text-[13px] font-semibold">{t.name}</div>
+                      <div className="text-[12px] text-zinc-500">{t.role}</div>
+                    </div>
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          </section>
+        </>
+      ) : null}
+
+      {/* NEWSLETTER (live) */}
+      <Divider />
+      <section id="newsletter" className={`${WRAP} py-14`}>
+        <div className="rounded-2xl border border-zinc-200 bg-paper p-7 sm:p-10">
+          <Eyebrow>{newsletter.eyebrow}</Eyebrow>
+          <h2 className="mt-4 max-w-2xl text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+            {newsletter.headline}
+          </h2>
+          <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">{newsletter.subcopy}</p>
+          <div className="mt-7">
+            <NewsletterSignup newsletter={newsletter} />
+          </div>
+        </div>
+      </section>
+
+      {/* LINKS */}
+      {links && links.items.length > 0 ? (
+        <>
+          <Divider />
+          <section className={`${WRAP} py-14`}>
+            <SectionHead eyebrow={links.eyebrow} title={links.headline} />
+            <div className="mt-8 grid gap-3 sm:grid-cols-3">
+              {links.items.map((l) => (
+                <a
+                  key={l.label}
+                  href={l.href}
+                  className="group rounded-xl border border-zinc-200 bg-white px-5 py-4 transition-colors hover:border-zinc-300"
+                >
+                  <div className="flex items-center justify-between text-[14px] font-medium text-zinc-900">
+                    {l.label}
+                    <span className="text-zinc-300 transition-colors group-hover:text-brand">→</span>
+                  </div>
+                  {l.note ? <p className="mt-1 text-[12.5px] text-zinc-500">{l.note}</p> : null}
+                </a>
+              ))}
+            </div>
+          </section>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/templates/creator/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. Point SITE_URL at your domain in prod.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the owner dashboard and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/login", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/creator/app/sitemap.ts

@@ -0,0 +1,9 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. Point SITE_URL at your domain in
+// production. The newsletter is a single public page, so the sitemap is just "/".
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  return [{ url: `${SITE}/`, changeFrequency: "weekly", priority: 1 }];
+}

package/templates/creator/app.ts

@@ -0,0 +1,134 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// newsletter — a pre-launch / coming-soon landing page with a LIVE subscriber
+// counter. The whole point is the realtime hook: open the page in two tabs,
+// submit an email in one, and the counter on the other ticks up with no
+// refresh. That's the proof it's a real live app and not a static page.
+//
+// The data model is deliberately tiny — two entities:
+//   • Subscriber  — one row per email. Holds visitor PII, so it denies ALL client
+//               reads/writes (writes go through the subscribe mutation; the
+//               public page only ever sees an aggregate count, never an email).
+//   • User    — the business owner's account (email/password is built in), so
+//               the owner can sign in to the dashboard and see their subscribers.
+// ---------------------------------------------------------------------------
+
+// One newsletter subscriber. `email` is the only PII; `createdAt` powers the
+// subscribers-over-time chart on the dashboard. The unique index on email dedupes
+// at the database level — a duplicate insert is rejected even under a race, so
+// subscribe can treat the conflict as "already joined".
+const Subscriber = entity(
+  "Subscriber",
+  {
+    email: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_email", fields: ["email"], unique: true },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+  },
+);
+
+// A single-row, PII-FREE aggregate the public page can safely read live. It
+// holds only the subscriber count — no emails. `subscribe` keeps it in sync with
+// the real Subscriber count on every new join. The landing page subscribes with
+// `db.useQuery("SubscriberCount")`, which syncs across every open tab through the
+// replica — so the counter ticks up everywhere the instant someone joins. This
+// is the cross-tab-safe realtime primitive (entity sync), not a per-connection
+// server-query subscription.
+const SubscriberCount = entity(
+  "SubscriberCount",
+  {
+    count: field.int().default(0),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {},
+);
+
+// The business owner's account. Email/password auth is built in against an
+// entity named "User" (passwordHash is server-only; the register route stamps
+// avatarColor). The dashboard is gated to the owner — see PYLON_OWNER_EMAIL in
+// functions/subscriberStats.ts and app/dashboard/page.tsx.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    // Set when the owner verifies their email; unused by the newsletter flow but
+    // declared so the framework's email-verification routes have a column.
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// PRIVACY — the heart of the spec. Subscriber holds visitor emails, so it denies
+// EVERY client read and write. No `db.useQuery("Subscriber")` can ever pull a row,
+// and no client can insert/update/delete directly. Writes happen only inside
+// the server-side `subscribe` mutation (functions bypass policies); reads
+// happen only inside `newsletterCount` (returns a bare integer) and the
+// owner-gated `subscriberStats`. A marketing site must never leak its own
+// customers' emails — this policy is what guarantees it.
+const subscriberPolicy = policy({
+  name: "subscriber_private",
+  entity: "Subscriber",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The aggregate count is public to READ (it's just a number — the whole point
+// is that the landing page shows it live to everyone). Clients can't WRITE it;
+// only the subscribe mutation maintains it server-side.
+const subscriberCountPolicy = policy({
+  name: "subscriber_count_public_read",
+  entity: "SubscriberCount",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The owner reads their own User row (the dashboard resolves their email this
+// way to check ownership). The auth subsystem owns all writes.
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Subscriber, SubscriberCount, User],
+  // subscribe (public mutation) + subscriberStats (owner-gated query) live in
+  // functions/ and are discovered automatically — they don't need listing here.
+  queries: [],
+  actions: [],
+  policies: [subscriberPolicy, subscriberCountPolicy, userPolicy],
+  // Email/password is on by default against the User entity above. No orgs,
+  // no billing — a newsletter is single-tenant (one business, one owner).
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+// Emit the canonical manifest JSON to stdout — `pylon dev` captures this.
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/creator/components/marketing.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+
+// Reusable presentational pieces for the landing page. All server-rendered —
+// no client JS. Restyle here and the whole page follows. The brand accent
+// (`text-brand`, `bg-brand-soft`) comes from CSS vars set on <html> in
+// app/layout.tsx, which read lib/site.config.ts — so re-theming is one edit.
+
+// Shared container: a contained, centered column.
+export const WRAP = "mx-auto w-full max-w-3xl px-6";
+
+export function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
+      {children}
+    </p>
+  );
+}
+
+// "New / Coming soon"-style pill for the hero.
+export function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
+      <span className="inline-block size-1.5 rounded-full bg-brand" />
+      {children}
+    </span>
+  );
+}
+
+export function Divider() {
+  return (
+    <div className={WRAP}>
+      <div className="border-t border-zinc-200/70" />
+    </div>
+  );
+}
+
+export function SectionHead({
+  eyebrow,
+  title,
+  body,
+}: {
+  eyebrow: string;
+  title: string;
+  body?: string;
+}) {
+  return (
+    <div>
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+        {title}
+      </h2>
+      {body ? (
+        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
+          {body}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// A grid of value props — icon + title + body.
+export function FeatureGrid({
+  items,
+}: {
+  items: { title: string; body: string; icon?: string }[];
+}) {
+  return (
+    <div className="grid gap-6 sm:grid-cols-3">
+      {items.map((f) => (
+        <div key={f.title}>
+          {f.icon ? (
+            <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+              {f.icon}
+            </span>
+          ) : null}
+          <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">
+            {f.title}
+          </h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
+            {f.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Initials for testimonial avatars, so the cards look finished without a photo.
+export function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+// A deliberately-obvious image placeholder. Real sites drop a photo here; this
+// makes the spot unmistakable — dashed border, a photo glyph, and a one-line
+// "swap this" instruction telling you exactly what to replace and where. Looks
+// tidy enough to demo, but no one will mistake it for a finished design.
+//
+//   shape  — "landscape" | "portrait" | "square" | "circle"
+//   title  — what photo belongs here ("Your headshot")
+//   hint   — how to replace it ("Replace in app/page.tsx")
+export function ImagePlaceholder({
+  shape = "landscape",
+  title,
+  hint,
+  className = "",
+}: {
+  shape?: "landscape" | "portrait" | "square" | "circle";
+  title: string;
+  hint?: string;
+  className?: string;
+}) {
+  const aspect =
+    shape === "portrait"
+      ? "aspect-[4/5]"
+      : shape === "square" || shape === "circle"
+        ? "aspect-square"
+        : "aspect-[4/3]";
+  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  return (
+    <div
+      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+    >
+      <div className="px-4 text-center">
+        <svg
+          className="mx-auto size-7 text-zinc-300"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <circle cx="9" cy="9" r="1.6" />
+          <path d="m21 15-4.5-4.5L7 20" />
+        </svg>
+        <p className="mt-2 text-[12.5px] font-medium text-zinc-500">{title}</p>
+        {hint ? <p className="mt-1 text-[11px] leading-snug text-zinc-400">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}

package/templates/creator/components/section-scroller.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Makes in-page section links work. A hydrated Pylon page updates the URL for a
+// plain `<a href="#section">` click but doesn't perform the browser's native
+// fragment scroll, so the page jumps nowhere. This installs ONE delegated click
+// handler that catches any same-page `#`/`/#` anchor and scrolls to it smoothly.
+//
+// Render it once (in the root layout). Renders nothing. Real route links should
+// still use `<Link>` from @pylonsync/react — this only handles `#` anchors.
+export function SectionScroller() {
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      const target = e.target as Element | null;
+      const link = target?.closest?.('a[href^="#"], a[href^="/#"]') as HTMLAnchorElement | null;
+      if (!link) return;
+      const href = link.getAttribute("href") || "";
+      const id = href.slice(href.indexOf("#") + 1);
+      if (!id) return;
+      const el = document.getElementById(id);
+      if (!el) return; // target not on this page — leave it to the browser
+      e.preventDefault();
+      el.scrollIntoView({ block: "start" });
+      history.replaceState(null, "", "#" + id);
+    }
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
+  return null;
+}

package/templates/creator/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/templates/creator/components/ui/card.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/creator/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}