@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/directory/app.ts

@@ -0,0 +1,146 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// directory — a curated, searchable listing site (a "best X" / tools / local
+// directory). It's the template that shows off Pylon's FULL-TEXT SEARCH +
+// FACETS: the browse page is a live `db.useSearch` over the Listing table —
+// type in the box and results + facet counts update instantly, all server-
+// backed, no search service. The realtime hook is live upvotes: tap the arrow
+// and the count ticks up for EVERYONE with the page open (no refresh).
+//
+// Three entities:
+//   • Listing    — an approved, public entry: name, what it is, the link, a
+//                  category + tags, and a live vote count. PII-free, so it's
+//                  PUBLIC-READ and indexed for search. Only functions write it.
+//   • Submission — a "submit your listing" lead. Holds the submitter's name +
+//                  email (PII) alongside the proposed entry, so it denies ALL
+//                  client reads/writes. The owner reviews submissions and
+//                  approves them into public Listings; the email never leaks.
+//   • User       — the curator/owner's account for the moderation dashboard.
+// ---------------------------------------------------------------------------
+
+// A public directory entry. No PII — everything here is meant to be browsed.
+// The `search:` block tells Pylon to build FTS5 + facet shadow tables: `text`
+// fields are full-text indexed, `facets` get live count sidebars, `sortable`
+// fields can order results. `db.useSearch("Listing", …)` drives the browse UI.
+const Listing = entity(
+  "Listing",
+  {
+    name: field.string(),
+    tagline: field.string(),
+    url: field.string(), // the link this entry points to
+    category: field.string(),
+    tags: field.string().optional(), // comma-separated, shown as chips
+    description: field.string().optional(),
+    votes: field.int().default(0),
+    featured: field.boolean().default(false),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_category", fields: ["category"], unique: false },
+      { name: "by_votes", fields: ["votes"], unique: false },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+    search: {
+      text: ["name", "tagline", "description"],
+      facets: ["category"],
+      sortable: ["votes", "createdAt"],
+    },
+  },
+);
+
+// A pending submission. PII (submitter email) + un-vetted content, so it's
+// deny-all; submitListing writes it, the owner reads it via submissionsForOwner.
+// `status` tracks moderation: "new" → "approved" (becomes a Listing) | "rejected".
+const Submission = entity(
+  "Submission",
+  {
+    submitterName: field.string(),
+    submitterEmail: field.string(),
+    name: field.string(),
+    tagline: field.string(),
+    url: field.string(),
+    category: field.string(),
+    tags: field.string().optional(),
+    description: field.string().optional(),
+    status: field.string().default("new"), // "new" | "approved" | "rejected"
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+);
+
+// The curator's account. Email/password auth is built in against "User"
+// (passwordHash is server-only). The dashboard is gated to PYLON_OWNER_EMAIL.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// Listings are PUBLIC-READ — the whole point is a browsable, searchable
+// directory. Clients can't WRITE them; only seedListings / approveSubmission
+// create them and the upvote mutation bumps the vote count, all server-side.
+const listingPolicy = policy({
+  name: "listing_public_read",
+  entity: "Listing",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// PRIVACY — Submission holds the submitter's name + email, so it denies EVERY
+// client read and write. No `db.useQuery("Submission")` can pull a row; writes
+// happen only inside submitListing / approveSubmission / rejectSubmission; reads
+// only inside the owner-gated submissionsForOwner. The directory must never leak
+// who submitted what — this guarantees it.
+const submissionPolicy = policy({
+  name: "submission_private",
+  entity: "Submission",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+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: [Listing, Submission, User],
+  // seedListings / submitListing / upvote (public) + submissionsForOwner /
+  // approveSubmission / rejectSubmission (owner-gated) live in functions/ and
+  // are discovered automatically.
+  queries: [],
+  actions: [],
+  policies: [listingPolicy, submissionPolicy, userPolicy],
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/directory/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-5xl 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/directory/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/directory/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/directory/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/directory/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"
+}

package/templates/directory/functions/approveSubmission.ts

@@ -0,0 +1,45 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// approveSubmission — owner-only. Turns a pending Submission into a PUBLIC
+// Listing (copying only the PII-free fields — the submitter's name/email stay
+// behind in the deny-all Submission table) and marks the submission approved.
+// The new Listing syncs straight to every open browse grid.
+export default mutation<{ submissionId: string }, { ok: boolean }>({
+  auth: "user",
+  args: { submissionId: v.id("Submission") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can moderate submissions.");
+    }
+    const sub = (await ctx.db.get("Submission", args.submissionId)) as
+      | {
+          name: string;
+          tagline: string;
+          url: string;
+          category: string;
+          tags?: string | null;
+          description?: string | null;
+          status: string;
+        }
+      | null;
+    if (!sub) throw ctx.error("NOT_FOUND", "Submission not found.");
+    if (sub.status === "approved") return { ok: true }; // idempotent
+
+    // Copy ONLY the public fields — never the submitter's PII.
+    await ctx.db.unsafe.insert("Listing", {
+      name: sub.name,
+      tagline: sub.tagline,
+      url: sub.url,
+      category: sub.category,
+      tags: sub.tags ?? null,
+      description: sub.description ?? null,
+      votes: 0,
+      featured: false,
+      createdAt: new Date().toISOString(),
+    });
+    await ctx.db.unsafe.update("Submission", args.submissionId, { status: "approved" });
+    return { ok: true };
+  },
+});

package/templates/directory/functions/rejectSubmission.ts

@@ -0,0 +1,20 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// rejectSubmission — owner-only. Marks a submission rejected (it never becomes
+// a public Listing). Kept (not deleted) so the owner has a record; a real app
+// might purge rejected rows on a schedule.
+export default mutation<{ submissionId: string }, { ok: boolean }>({
+  auth: "user",
+  args: { submissionId: v.id("Submission") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can moderate submissions.");
+    }
+    const sub = (await ctx.db.get("Submission", args.submissionId)) as { id: string } | null;
+    if (!sub) throw ctx.error("NOT_FOUND", "Submission not found.");
+    await ctx.db.unsafe.update("Submission", args.submissionId, { status: "rejected" });
+    return { ok: true };
+  },
+});

package/templates/directory/functions/seedListings.ts

@@ -0,0 +1,33 @@
+import { mutation } from "@pylonsync/functions";
+import { siteConfig } from "../lib/site.config";
+
+// seedListings — load the starter directory from config on first visit
+// (idempotent). The browse island calls this on mount; once any Listing exists
+// it's a no-op, so it's safe to call on every load. A lock keeps two concurrent
+// first-visits from double-seeding.
+//
+// Public so an anonymous first visitor seeds the directory — it only writes the
+// config's PII-free starter entries, never reads or returns anything sensitive.
+export default mutation<Record<string, never>, { seeded: boolean; count: number }>({
+  auth: "public",
+  async handler(ctx) {
+    await ctx.db.advisoryLock("directory_seed_listings");
+    const existing = await ctx.db.unsafe.list("Listing");
+    if (existing.length > 0) return { seeded: false, count: existing.length };
+
+    for (const l of siteConfig.seedListings) {
+      await ctx.db.unsafe.insert("Listing", {
+        name: l.name,
+        tagline: l.tagline,
+        url: l.url,
+        category: l.category,
+        tags: l.tags ?? null,
+        description: l.description ?? null,
+        votes: l.votes ?? 0,
+        featured: l.featured ?? false,
+        createdAt: new Date().toISOString(),
+      });
+    }
+    return { seeded: true, count: siteConfig.seedListings.length };
+  },
+});

package/templates/directory/functions/submissionsForOwner.ts

@@ -0,0 +1,29 @@
+import { query } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+import type { SubmissionRow, OwnerSubmissionsResult } from "../lib/directory";
+
+// submissionsForOwner — the owner's moderation queue, INCLUDING the submitter's
+// name + email. The one function allowed to return that PII, gated to the
+// configured owner (PYLON_OWNER_EMAIL via ctx.env). A query has no `ctx.error`,
+// so a non-owner gets `{ authorized: false }` and NO data.
+//
+// The dashboard calls it with `callFn` and re-fetches whenever the public
+// Listing set changes (approving a submission creates a Listing) — so the queue
+// refreshes without a reload, while submitter contact details never sync.
+export default query({
+  auth: "user",
+  async handler(ctx): Promise<OwnerSubmissionsResult> {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    const email = (me?.email as string | undefined) ?? null;
+    if (!emailMatchesOwner(email, ctx.env.PYLON_OWNER_EMAIL)) {
+      return { authorized: false };
+    }
+
+    const rows = (await ctx.db.unsafe.list("Submission")) as unknown as SubmissionRow[];
+    const submissions = rows
+      .map((r) => ({ ...r }))
+      .sort((a, b) => (a.createdAt < b.createdAt ? 1 : a.createdAt > b.createdAt ? -1 : 0));
+
+    return { authorized: true, submissions };
+  },
+});