@pylonsync/create-pylon 0.11.1 → 0.11.3

package/templates/consumer/README.md

@@ -1,7 +1,8 @@
 # __APP_NAME__
 
-A live social feed on [Pylon](https://pylonsync.com) with a public timeline,
-optimistic posts, and likes over one synced backend.
+A photo-sharing app on [Pylon](https://pylonsync.com): a home feed, an
+explore grid, post pages with comments, and profiles with followers and
+saved posts. Likes, comments, and follows update live in every open tab.
 
 ## Develop
 
@@ -9,38 +10,53 @@ optimistic posts, and likes over one synced backend.
 __RUN_DEV__
 ```
 
-Open http://localhost:4321 and post something. It appears optimistically and
-syncs to a second tab along with like counts. Editing a file under `app/`
-reloads the page.
+Open http://localhost:4321. The first visit loads twelve demo people with
+their posts, likes, comments, and follows, and gives you a guest profile.
+Post a photo with Create, like with a double tap, and open a second tab to
+watch counts change.
 
 ## Layout
 
 ```
-app.ts              data model: Post + Like entities, feed policies, auth
-app/page.tsx        "/" — the server-rendered page
-app/feed-client.tsx client island: guest session + live feed, posts, likes
-app/layout.tsx      root layout wrapping every page
-app/globals.css     Tailwind entrypoint (compiled by Pylon)
+app.ts                          data model, policies, fonts
+app/(app)/layout.tsx            navigation around every page
+app/(app)/page.tsx              /            home feed
+app/(app)/explore/page.tsx      /explore     every post in a grid
+app/(app)/p/[id]/page.tsx       /p/:id       one post and its comments
+app/(app)/u/[username]/page.tsx /u/:username a profile
+components/social/              the client islands for those pages
+lib/social.ts                   usernames, counts, feed rules (pure, tested)
+lib/seed.ts                     the demo people and posts
+lib/site.ts                     the app's name
+functions/                      ensureProfile, updateProfile, createPost,
+                                addComment, seedFeed
+public/images/                  demo avatars and photos
 ```
 
 ## How it works
 
-No login wall: `app/feed-client.tsx` wraps the feed in `<EnsureGuest>`, which
-mints a guest session so every visitor can post + like. The feed is
-**public-read** (everyone sees every post and like count — intentional for a
-feed), while writes are **owner-only**: `authorId`/`userId: field.owner()`
-stamp the session's id server-side, so an optimistic `db.insert` can't forge
-authorship. A like is a join row (one per user per post); the count is just how
-many `Like` rows point at a post, and `db.useQuery` keeps it live.
+- **Sessions.** `components/social/session.tsx` wraps each island in
+  `<EnsureGuest>`, so every visitor gets a session without a sign-up form,
+  then calls `ensureProfile` to give them a username.
+- **Reads are public, writes are yours.** Every entity is readable by
+  anyone except `Save`, which only its owner can see. A like, follow, or
+  save must carry the caller's own id; the policies in `app.ts` refuse any
+  other. Posts, comments, and profile edits go through functions, which
+  check image URLs, caption length, and username rules on the server.
+- **Photos.** Create uploads the file with
+  `uploadFile(file, { visibility: "public" })` from `@pylonsync/react`, so
+  every visitor can load it, then calls `createPost` with its URL.
+- **Counts.** A like count is how many `Like` rows point at a post. The
+  queries are live, so a count changes the moment someone taps.
 
 ## Grow it
 
-- **Profiles:** add a `Profile` entity (displayName/avatar keyed by `userId`)
-  to show names instead of `@guest…` handles.
-- **Follows:** add a `Follow` join entity (`followerId`/`followedId`) and
-  filter the feed to people you follow.
-- **Real accounts:** email/password is built in — swap `<EnsureGuest>` for
-  `<SignedIn>` / `<SignedOut>` from `@pylonsync/client`.
+- **Real accounts:** email and password are built in. Add a sign-in page and
+  move a guest's profile to the account on sign-in.
+- **Scale:** `components/social/use-social.ts` reads every row, which is fine
+  for a demo. For a large network, query per screen with `where` and `limit`.
+- **Launch:** delete `functions/seedFeed.ts`, `lib/seed.ts`, and
+  `public/images/`, and remove the `seedFeed` call in `session.tsx`.
 
 ## Deploy
 

package/templates/consumer/app/(app)/explore/page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { ExploreScreen } from "@/components/social/explore-screen";
+import { SITE } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Explore · ${SITE.name}`,
+};
+
+// `app/(app)/explore/page.tsx` → `/explore`. Every post, newest first.
+export default function ExplorePage() {
+  return <ExploreScreen />;
+}

package/templates/consumer/app/(app)/layout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { AppChrome } from "@/components/social/app-chrome";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+// `(app)` is a route group: the parens segment is not part of any URL. This
+// layout adds the navigation around every page of the app.
+export default function AppLayout({ children }: LayoutProps) {
+  return (
+    <>
+      <AppChrome />
+      <main className="pb-14 md:pb-0 md:pl-[72px] xl:pl-[244px]">{children}</main>
+    </>
+  );
+}

package/templates/consumer/app/(app)/p/[id]/page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { PostScreen } from "@/components/social/post-screen";
+import { SITE } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Post · ${SITE.name}`,
+};
+
+// `app/(app)/p/[id]/page.tsx` → `/p/:id`. One post with all its comments.
+export default function PostPage({ params }: PageProps<{ id: string }>) {
+  return <PostScreen postId={params.id} />;
+}

package/templates/consumer/app/(app)/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { HomeScreen } from "@/components/social/home-screen";
+import { SITE } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: SITE.name,
+  description: SITE.description,
+};
+
+// `app/(app)/page.tsx` → `/`. The feed is a client island: it needs the
+// visitor's session to know who they follow and what they liked.
+export default function HomePage() {
+  return <HomeScreen />;
+}

package/templates/consumer/app/(app)/u/[username]/page.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ProfileScreen } from "@/components/social/profile-screen";
+import { SITE } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Profile · ${SITE.name}`,
+};
+
+// `app/(app)/u/[username]/page.tsx` → `/u/:username`. A person's posts,
+// followers, and following. Your own profile also shows your saved posts.
+export default function ProfilePage({ params }: PageProps<{ username: string }>) {
+  return <ProfileScreen username={params.username} />;
+}

package/templates/consumer/app/error.tsx

@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/button";
 export default function Error({ error, reset }: ErrorBoundaryProps) {
   const [tries, setTries] = React.useState(0);
   return (
-    <div className="space-y-6">
+    <div className="mx-auto max-w-md space-y-6 px-6 py-24">
       <section>
         <h1 className="text-2xl font-semibold tracking-tight">
           Something went wrong

package/templates/consumer/app/globals.css

@@ -6,6 +6,7 @@
    markup elsewhere. */
 @source "../app/**/*.{tsx,ts,jsx,js}";
 @source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../node_modules/@pylonsync/client/**/*.{tsx,ts,jsx,js}";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -15,6 +16,9 @@
    on <html>. */
 :root {
   --radius: 0.625rem;
+  /* The app's own colors: links and the follow button, and a liked heart. */
+  --brand: #2563eb;
+  --like: #e11d48;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -83,6 +87,8 @@
 }
 
 @theme inline {
+  --color-brand: var(--brand);
+  --color-like: var(--like);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -132,8 +138,27 @@
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif);
+    -webkit-font-smoothing: antialiased;
   }
   button {
     cursor: pointer;
   }
 }
+
+/* The wordmark. Instrument Serif is declared in app.ts. */
+.font-display {
+  font-family: var(--font-display, "Iowan Old Style", Georgia, serif);
+}
+
+/* The heart that pops over a photo on a double tap. */
+@keyframes heart-pop {
+  0% { transform: scale(0.2); opacity: 0; }
+  15% { transform: scale(1.15); opacity: 1; }
+  30% { transform: scale(0.95); }
+  45%, 80% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(1); opacity: 0; }
+}
+.heart-pop {
+  animation: heart-pop 900ms ease-out forwards;
+}

package/templates/consumer/app/layout.tsx

@@ -4,8 +4,8 @@ interface LayoutProps {
   children: React.ReactNode;
 }
 
-// The root layout wraps every page: a header and a centered column. The page
-// renders server-side first, then the feed hydrates into a live view.
+// The document shell. The app chrome (sidebar and mobile bars) lives in
+// `(app)/layout.tsx`, so a page outside that group renders bare.
 export default function RootLayout({ children }: LayoutProps) {
   return (
     <html lang="en">
@@ -14,14 +14,7 @@ export default function RootLayout({ children }: LayoutProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>__APP_NAME__</title>
       </head>
-      <body className="min-h-screen bg-background text-foreground antialiased">
-        <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
-          <div className="mx-auto max-w-lg px-4 py-3 text-sm font-semibold tracking-tight">
-            __APP_NAME__
-          </div>
-        </header>
-        <main className="mx-auto max-w-lg px-4 py-8">{children}</main>
-      </body>
+      <body className="min-h-screen bg-background text-foreground antialiased">{children}</body>
     </html>
   );
 }

package/templates/consumer/app/llms.ts

@@ -1,28 +1,28 @@
 import type { LlmsTxt } from "@pylonsync/react";
+import { SITE } from "@/lib/site";
 
 // app/llms.ts → served at /llms.txt, in llmstxt.org format.
 //
 // This is the file an AI agent reads FIRST to decide what this site is and
-// whether it can help with the task in front of it. Keep the shape, rewrite the
-// copy: name the jobs this app is right for and the exact call to make. Generic
-// marketing copy does not read as guidance.
-//
-// The default export may be async, so it can enumerate pages from the database.
-const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+// whether it can help with the task in front of it. Keep the shape, rewrite
+// the copy: name the jobs this app is right for and the exact call to make.
+const BASE = process.env.SITE_URL ?? "http://localhost:4321";
 
 export default function llms(): LlmsTxt {
   return {
-    title: "__APP_NAME__",
-    summary: "A social feed with posts and likes.",
+    title: SITE.name,
+    summary: "A photo-sharing app: people post photos, follow each other, like, comment, and save posts.",
     details: [
-      "Use this app to read the public feed, post, and like. Reading needs no account; posting needs a session.",
+      "Reading posts, profiles, and comments needs no account. Liking, commenting, following, and posting need a session; a visitor gets a guest session automatically.",
+      "Post pages are at /p/<id> and profiles at /u/<username>.",
       "Every page here is also readable as markdown: add `.md` to any path, or send `Accept: text/markdown`.",
     ],
     sections: [
       {
         title: "Pages",
         links: [
-          { title: "Home", url: `${SITE}` },
+          { title: "Feed", url: `${BASE}/` },
+          { title: "Explore", url: `${BASE}/explore` },
         ],
       },
     ],

package/templates/consumer/app/not-found.tsx

@@ -1,29 +1,16 @@
 import React from "react";
-import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
+import { Link, type NotFoundProps } from "@pylonsync/react";
 
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
-// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
-// the buttons below use the client router. Not-found boundaries receive the
-// standard page props (and, matching Next, no `reset`).
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL, and when a
+// page calls `response.notFound()`.
 export default function NotFound(_props: NotFoundProps) {
-  const router = useRouter();
   return (
-    <div className="space-y-6">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">404</h1>
-        <p className="mt-2 text-muted-foreground">
-          We couldn&apos;t find that page.
-        </p>
-      </section>
-      <div className="flex items-center gap-3">
-        <Button onClick={() => router.back()} variant="outline">
-          ← Go back
-        </Button>
-        <Button asChild>
-          <Link href="/">Home</Link>
-        </Button>
-      </div>
+    <div className="mx-auto max-w-md px-6 py-24 text-center">
+      <h1 className="text-xl font-semibold">This page is not available.</h1>
+      <p className="mt-2 text-sm text-zinc-500">The link may be broken, or the page may have been removed.</p>
+      <Link href="/" className="mt-6 inline-block text-sm font-semibold text-brand">
+        Back to the feed
+      </Link>
     </div>
   );
 }

package/templates/consumer/app/robots.ts

@@ -1,12 +1,11 @@
 import type { Robots } from "@pylonsync/react";
 
 // app/robots.ts → served at /robots.txt. The default export may also be async.
-const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+const BASE = process.env.SITE_URL ?? "http://localhost:4321";
 
 export default function robots(): Robots {
   return {
-    // Keep the authenticated app and the API out of the index.
-    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/api/"] },
-    sitemap: `${SITE}/sitemap.xml`,
+    rules: { userAgent: "*", allow: "/", disallow: ["/api/"] },
+    sitemap: `${BASE}/sitemap.xml`,
   };
 }

package/templates/consumer/app/sitemap.ts

@@ -1,27 +1,13 @@
 import type { Sitemap } from "@pylonsync/react";
 
-// app/sitemap.ts → served at /sitemap.xml. The default export can be async, so
-// it can enumerate dynamic pages from your database. Point SITE_URL at your
-// domain in production.
-const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+// app/sitemap.ts → served at /sitemap.xml. The default export can be async,
+// so it can list post and profile pages from the database once you have
+// real ones. Point SITE_URL at your domain in production.
+const BASE = process.env.SITE_URL ?? "http://localhost:4321";
 
 export default async function sitemap(): Promise<Sitemap> {
-  // Only public pages belong here — /dashboard is private (and noindex), so
-  // it's intentionally left out.
-  const staticRoutes: Sitemap = [
-    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
-    { url: `${SITE}/login`, changeFrequency: "yearly", priority: 0.3 },
-    { url: `${SITE}/signup`, changeFrequency: "yearly", priority: 0.5 },
+  return [
+    { url: `${BASE}/`, changeFrequency: "hourly", priority: 1 },
+    { url: `${BASE}/explore`, changeFrequency: "hourly", priority: 0.8 },
   ];
-
-  // The export is async, so you can enumerate dynamic pages from a DB read:
-  //
-  //   const posts = await fetchPublishedPosts();
-  //   const postRoutes: Sitemap = posts.map((p) => ({
-  //     url: `${SITE}/blog/${p.slug}`,
-  //     lastModified: p.updatedAt,
-  //   }));
-  //   return [...staticRoutes, ...postRoutes];
-
-  return staticRoutes;
 }

package/templates/consumer/app.ts

@@ -1,6 +1,7 @@
 import {
   entity,
   field,
+  font,
   policy,
   auth,
   buildManifest,
@@ -8,71 +9,167 @@ import {
   discoverFunctions,
 } from "@pylonsync/sdk";
 
-// A post in the public feed. `authorId: field.owner()` stamps the signed-in
-// (guest) user's id server-side, so an optimistic `db.insert("Post", { text })`
-// can't forge authorship. The feed itself is public-read (everyone sees every
-// post) — that's intentional for a social feed, NOT the insecure wide-open
-// default; writes are still owner-only.
+// A photo-sharing app: profiles, photo posts, likes, comments, follows, and
+// saves. Everything people post is public to read. Every write carries the
+// writer's id, and the policies below (or the functions, for posts,
+// comments, and profiles) check it against the session, so a client cannot
+// post, like, or follow as someone else. Guest sessions
+// (components/social/session.tsx) let a visitor post without a sign-up form.
+//
+// The ids are plain fields, not `field.owner()`, because the demo data in
+// lib/seed.ts is written for twelve made-up people, and an owner field only
+// accepts the caller's own id.
+//
+//   • Profile — the public face of a user: username, name, bio, avatar.
+//   • Post    — one photo and a caption.
+//   • Like, Save, Follow — join rows. A count is how many rows point at a thing.
+//   • Comment — text on a post.
+
+const Profile = entity(
+  "Profile",
+  {
+    userId: field.string().unique(),
+    username: field.string().unique(),
+    displayName: field.string(),
+    bio: field.string().optional(),
+    avatarUrl: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+);
+
 const Post = entity(
   "Post",
   {
-    authorId: field.string().owner(),
-    text: field.string(),
+    authorId: field.string(),
+    imageUrl: field.string(),
+    caption: field.string().optional(),
+    // "square" (1:1) or "portrait" (4:5): how the feed crops the photo.
+    shape: field.string().default("square"),
     createdAt: field.datetime().defaultNow(),
   },
-  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+  {
+    indexes: [
+      { name: "by_created", fields: ["createdAt"], unique: false },
+      { name: "by_author", fields: ["authorId"], unique: false },
+    ],
+  },
 );
 
-// A like is a join row (one per user per post). To toggle a like the client
-// inserts or deletes this row; the like count for a post is just how many
-// Like rows point at it. `userId: field.owner()` keeps a like attributable to
-// exactly one user.
 const Like = entity(
   "Like",
   {
-    userId: field.string().owner(),
+    userId: field.string(),
     postId: field.string(),
     createdAt: field.datetime().defaultNow(),
   },
   {
     indexes: [
       { name: "by_post", fields: ["postId"], unique: false },
-      // One like per user per post — the unique index makes a double-like a
-      // no-op at the storage layer.
+      // One like per person per post: a second tap is a no-op at storage.
       { name: "by_user_post", fields: ["userId", "postId"], unique: true },
     ],
   },
 );
 
-// An entity with no policy is denied to clients by default, so these
-// allow-lists are what make the feed work.
-// `allowInsert` is `auth.userId != null`, not `== data.authorId`: the owner
-// field is stamped by field.owner() *after* the policy check, so it's null at
-// insert-time. The stamp still guarantees the new row is owned by the caller,
-// and read/update/delete enforce ownership on the persisted row.
+const Comment = entity(
+  "Comment",
+  {
+    postId: field.string(),
+    authorId: field.string(),
+    text: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_post", fields: ["postId"], unique: false }] },
+);
+
+const Follow = entity(
+  "Follow",
+  {
+    followerId: field.string(),
+    followingId: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_following", fields: ["followingId"], unique: false },
+      { name: "by_pair", fields: ["followerId", "followingId"], unique: true },
+    ],
+  },
+);
+
+// Saves are private: only the person who saved a post can see that they did.
+const Save = entity(
+  "Save",
+  {
+    userId: field.string(),
+    postId: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_user_post", fields: ["userId", "postId"], unique: true }] },
+);
+
+// An entity with no policy is denied to clients, so these allow-lists are
+// what make the app work. An insert must carry the caller's own id; a delete
+// is allowed only on the caller's own row.
+//
+// Profile, Post, and Comment writes go through functions (ensureProfile,
+// updateProfile, createPost, addComment) so usernames, captions, and image
+// URLs are checked on the server. Likes, follows, and saves are plain
+// inserts and deletes from the client.
+const profilePolicy = policy({
+  name: "profile_public",
+  entity: "Profile",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
 const postPolicy = policy({
-  name: "post_feed",
+  name: "post_public",
   entity: "Post",
   allowRead: "true",
-  allowInsert: "auth.userId != null",
-  allowUpdate: "auth.userId == data.authorId",
+  allowInsert: "false",
+  allowUpdate: "false",
   allowDelete: "auth.userId == data.authorId",
 });
 
 const likePolicy = policy({
-  name: "like_access",
+  name: "like_public",
   entity: "Like",
   allowRead: "true",
-  allowInsert: "auth.userId != null",
+  allowInsert: "auth.userId != null && data.userId == auth.userId",
+  allowUpdate: "false",
+  allowDelete: "auth.userId == data.userId",
+});
+
+const commentPolicy = policy({
+  name: "comment_public",
+  entity: "Comment",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "auth.userId == data.authorId",
+});
+
+const followPolicy = policy({
+  name: "follow_public",
+  entity: "Follow",
+  allowRead: "true",
+  allowInsert: "auth.userId != null && data.followerId == auth.userId && data.followingId != auth.userId",
+  allowUpdate: "false",
+  allowDelete: "auth.userId == data.followerId",
+});
+
+const savePolicy = policy({
+  name: "save_private",
+  entity: "Save",
+  allowRead: "auth.userId == data.userId",
+  allowInsert: "auth.userId != null && data.userId == auth.userId",
   allowUpdate: "false",
   allowDelete: "auth.userId == data.userId",
 });
 
-// `pylon dev` serves the SSR feed and the API from one port. Guest sessions
-// (via `<EnsureGuest>` on the page) let every visitor post + like with no
-// login. Natural next steps: a `Profile` entity (displayName/avatar keyed by
-// userId) to show names instead of ids, and a `Follow` join entity
-// (followerId/followedId) to scope the feed to people you follow.
 // Every non-internal function in functions/ becomes a manifest entry —
 // this is what makes them show up in /api/manifest, the OpenAPI spec,
 // and `pylon codegen`.
@@ -81,11 +178,33 @@ const fns = await discoverFunctions();
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [Post, Like],
+  entities: [Profile, Post, Like, Comment, Follow, Save],
   queries: fns.queries,
   actions: fns.actions,
-  policies: [postPolicy, likePolicy],
+  policies: [profilePolicy, postPolicy, likePolicy, commentPolicy, followPolicy, savePolicy],
   auth: auth(),
+  // Self-hosted: the build fetches the woff2 files and serves them from this
+  // app, so there is no third-party font request.
+  fonts: [
+    font({
+      family: "Inter",
+      variable: "--font-sans",
+      weights: ["400", "500", "600", "700"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+    // The wordmark.
+    font({
+      family: "Instrument Serif",
+      variable: "--font-display",
+      weights: ["400"],
+      styles: ["normal", "italic"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+  ],
   routes: await discoverAppRoutes(),
 });