@pylonsync/create-pylon 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     "create-pylon": "./bin/create-pylon.js"
   },
   "scripts": {
-    "test": "node --test"
+    "test": "node --test \"test/*.test.mjs\""
   },
   "files": [
     "bin",

package/templates/_root/gitignore

@@ -22,6 +22,7 @@ Package.resolved
 
 # Expo / RN
 .expo/
+.expo-export/
 .expo-shared/
 ios/Pods/
 ios/build/

package/templates/backend/mobile/apps/api/README.md

@@ -6,10 +6,28 @@ data API, realtime sync, auth, and the RevenueCat webhook.
 ```
 app.ts                 User + Note + RcEntitlement (from @pylonsync/revenuecat)
 functions/createNote   server-enforced free-tier cap, then insert
+functions/deleteMyData the user's rows, run by DELETE /api/auth/account
 functions/revenuecatWebhook, syncEntitlements, _pylonRcUpsertEntitlement
 lib/purchases.ts       the RevenueCat plugin instance + FREE_NOTE_LIMIT
+lib/site.ts            everything the website says — edit this one file
+app/(site)/            landing page, /support, /privacy, /terms
 ```
 
+## The website
+
+This one server answers the app's API calls and serves the public site, so
+`/privacy` and `/terms` are live on the same host the moment you deploy. Both
+stores refuse a submission without a reachable privacy policy URL, and the app
+links to these pages from Settings and from the paywall.
+
+Edit `lib/site.ts` for the name, the copy, store links, and your company
+details. A banner sits on every page until those details are filled in,
+because the legal text ships as a draft: it describes what this app actually
+does, which makes it a real starting point, but a lawyer should read it before
+you submit.
+
+`bun run dev` serves the site at http://localhost:4321 alongside the API.
+
 ## Run
 
 ```bash
@@ -28,4 +46,6 @@ pylon secrets set REVENUECAT_WEBHOOK_AUTH=... REVENUECAT_SECRET_KEY=... \
 ```
 
 Then set `EXPO_PUBLIC_PYLON_BASE_URL` in `apps/expo/.env` to the deployed URL
-and point the RevenueCat webhook at `<url>/api/fn/revenuecatWebhook`.
+and point the RevenueCat webhook at `<url>/api/fn/revenuecatWebhook`. Put the
+same URL in `lib/site.ts` as `url`, and give App Store Connect `<url>/privacy`
+and `<url>/support`.

package/templates/backend/mobile/apps/api/app/(site)/layout.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { missingSiteConfig, site } from "@/lib/site";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `(site)` is a route group: the parens segment never appears in a URL, so
+ * `(site)/page.tsx` still serves `/`. This layout owns the chrome for every
+ * public page. Keep it here rather than checking the pathname in a component,
+ * so a page that should not have the header simply lives outside the group.
+ */
+export default function SiteLayout({ children }: LayoutProps) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <SetupNotice />
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}
+
+/**
+ * Renders while `lib/site.ts` still has blank fields. The legal pages below
+ * are a starting point with your company details filled in by that file, so
+ * an unfinished site should say so out loud rather than publish placeholder
+ * terms. It disappears on its own once the fields are set.
+ */
+function SetupNotice() {
+  const missing = missingSiteConfig();
+  if (missing.length === 0) return null;
+  return (
+    <div className="border-b border-amber-300 bg-amber-50 px-4 py-3 text-center text-[13px] text-amber-900">
+      Finish <code className="font-mono">lib/site.ts</code> before you publish
+      this site. Still blank: {missing.join(", ")}. The privacy policy and
+      terms need your details, and a lawyer should read them.
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <header className="sticky top-0 z-20 border-b border-line bg-surface/85 backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-5xl items-center justify-between px-6">
+        <Link href="/" className="text-[15px] font-semibold tracking-tight">
+          {site.name}
+        </Link>
+        <nav className="flex items-center gap-6 text-[13.5px] text-ink-muted">
+          <a href="/#features" className="hidden transition-colors hover:text-ink sm:block">
+            Features
+          </a>
+          <a href="/#faq" className="hidden transition-colors hover:text-ink sm:block">
+            Questions
+          </a>
+          <Link href="/support" className="transition-colors hover:text-ink">
+            Support
+          </Link>
+          <a
+            href="/#get"
+            className="rounded-full bg-brand px-4 py-2 text-[13px] font-medium text-brand-ink transition-opacity hover:opacity-90"
+          >
+            Get the app
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <footer className="border-t border-line bg-surface-soft">
+      <div className="mx-auto flex max-w-5xl flex-col gap-4 px-6 py-10 text-[13px] text-ink-muted sm:flex-row sm:items-center sm:justify-between">
+        <p>
+          © {year} {site.company || site.name}
+        </p>
+        <nav className="flex flex-wrap items-center gap-5">
+          <Link href="/privacy" className="transition-colors hover:text-ink">
+            Privacy
+          </Link>
+          <Link href="/terms" className="transition-colors hover:text-ink">
+            Terms
+          </Link>
+          <Link href="/support" className="transition-colors hover:text-ink">
+            Support
+          </Link>
+          {site.supportEmail ? (
+            <a
+              href={`mailto:${site.supportEmail}`}
+              className="transition-colors hover:text-ink"
+            >
+              {site.supportEmail}
+            </a>
+          ) : null}
+        </nav>
+      </div>
+    </footer>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/not-found.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+
+// `not-found.tsx` inside the route group, so a missing page still renders
+// with the site header and footer around it.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-24 text-center">
+      <h1 className="text-3xl font-semibold tracking-[-0.02em]">
+        Page not found
+      </h1>
+      <p className="mt-3 text-[15px] text-ink-muted">
+        That link does not go anywhere.
+      </p>
+      <Link
+        href="/"
+        className="mt-8 inline-block rounded-xl bg-ink px-5 py-3 text-[14px] font-medium text-surface transition-opacity hover:opacity-90"
+      >
+        Back to the home page
+      </Link>
+    </div>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/page.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `${site.name} — ${site.tagline}`,
+  description: site.description,
+};
+
+/**
+ * The landing page, served at `/` by the same Pylon server that answers the
+ * mobile app's API calls. That is why the legal pages below are a real URL
+ * the moment you deploy: the App Store and Play Store both refuse a
+ * submission without one.
+ *
+ * Replace the copy through `lib/site.ts`. The sections themselves are here.
+ */
+export default function LandingPage() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <Pricing />
+      <Faq />
+      <GetTheApp />
+    </>
+  );
+}
+
+function Hero() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 pb-16 pt-20 sm:pt-28">
+      <div className="grid items-center gap-14 lg:grid-cols-[1.05fr_0.95fr]">
+        <div>
+          <h1 className="text-4xl font-semibold leading-[1.08] tracking-[-0.02em] sm:text-5xl">
+            {site.tagline}
+          </h1>
+          <p className="mt-5 max-w-xl text-[16.5px] leading-relaxed text-ink-muted">
+            {site.description}
+          </p>
+          <div className="mt-8">
+            <StoreButtons />
+          </div>
+          <p className="mt-4 text-[13px] text-ink-muted">
+            Free for your first {site.pricing.freeLimit} notes. No account
+            needed to start.
+          </p>
+        </div>
+        <PhoneShot />
+      </div>
+    </section>
+  );
+}
+
+/**
+ * A real link once the store URL is in `lib/site.ts`, and an honest "not yet"
+ * until then. A dead link on a launch page is worse than saying nothing.
+ */
+function StoreButtons() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <StoreButton
+        href={site.appStoreUrl}
+        label="Download on the App Store"
+        pending="Coming to the App Store"
+      />
+      <StoreButton
+        href={site.playStoreUrl}
+        label="Get it on Google Play"
+        pending="Coming to Google Play"
+      />
+    </div>
+  );
+}
+
+function StoreButton({
+  href,
+  label,
+  pending,
+}: {
+  href: string;
+  label: string;
+  pending: string;
+}) {
+  if (!href) {
+    return (
+      <span className="rounded-xl border border-dashed border-line px-5 py-3 text-[14px] text-ink-muted">
+        {pending}
+      </span>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="rounded-xl bg-ink px-5 py-3 text-[14px] font-medium text-surface transition-opacity hover:opacity-90"
+    >
+      {label}
+    </a>
+  );
+}
+
+/** Placeholder, marked as one. Swap it for a real screenshot before launch. */
+function PhoneShot() {
+  return (
+    <div className="mx-auto w-full max-w-[280px]">
+      <div className="rounded-[2.25rem] border border-line bg-surface-soft p-3 shadow-[0_30px_80px_-40px_rgba(0,0,0,0.45)]">
+        <div className="flex aspect-[9/19.5] flex-col items-center justify-center gap-3 rounded-[1.75rem] border-2 border-dashed border-line px-6 text-center">
+          <svg
+            width="26"
+            height="26"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-ink-muted"
+            aria-hidden="true"
+          >
+            <rect x="3" y="5" width="18" height="14" rx="2" />
+            <circle cx="8.5" cy="10" r="1.5" />
+            <path d="m21 16-5-5-6 6-3-3-4 4" />
+          </svg>
+          <p className="text-[13px] font-medium">App screenshot</p>
+          <p className="text-[12px] leading-snug text-ink-muted">
+            Drop a 1290×2796 screenshot in here. The component is
+            <code className="mx-1 font-mono">PhoneShot</code>
+            in this file.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Features() {
+  return (
+    <section id="features" className="border-t border-line bg-surface-soft">
+      <div className="mx-auto max-w-5xl px-6 py-20">
+        <h2 className="max-w-2xl text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+          What it does
+        </h2>
+        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {site.features.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-2xl border border-line bg-surface p-6"
+            >
+              <h3 className="text-[15px] font-semibold">{feature.title}</h3>
+              <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+                {feature.body}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Pricing() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 py-20">
+      <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+        What it costs
+      </h2>
+      <div className="mt-10 grid gap-6 sm:grid-cols-2">
+        <div className="rounded-2xl border border-line p-7">
+          <h3 className="text-[15px] font-semibold">Free</h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            Up to {site.pricing.freeLimit} notes, synced across your devices.
+            Nothing expires.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-brand bg-brand-soft p-7">
+          <h3 className="text-[15px] font-semibold">Pro</h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            {site.pricing.proBlurb} Prices are set per country in the store and
+            shown in the app before you buy.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Faq() {
+  return (
+    <section id="faq" className="border-t border-line bg-surface-soft">
+      <div className="mx-auto max-w-3xl px-6 py-20">
+        <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+          Questions
+        </h2>
+        <dl className="mt-10 divide-y divide-line border-y border-line">
+          {site.faq.map((item) => (
+            <div key={item.q} className="py-5">
+              <dt className="text-[15px] font-medium">{item.q}</dt>
+              <dd className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+                {item.a}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+}
+
+function GetTheApp() {
+  return (
+    <section id="get" className="mx-auto max-w-5xl px-6 py-20 text-center">
+      <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+        Get {site.name}
+      </h2>
+      <p className="mx-auto mt-3 max-w-md text-[15px] leading-relaxed text-ink-muted">
+        Free to start, on iPhone and Android.
+      </p>
+      <div className="mt-8 flex justify-center">
+        <StoreButtons />
+      </div>
+    </section>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/privacy/page.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { Company, LegalPage } from "@/components/legal";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${site.name}`,
+  description: `How ${site.name} handles your data.`,
+};
+
+/**
+ * Both stores require a reachable privacy policy URL before they will accept
+ * a build, and Apple checks that it matches the App Privacy answers you give
+ * in App Store Connect. This text describes what the template's app really
+ * does: accounts, notes, and store subscriptions, with no advertising or
+ * tracking. Change it as your app changes.
+ */
+export default function PrivacyPage() {
+  return (
+    <LegalPage title="Privacy Policy">
+      <p>
+        {site.name} is published by <Company />. This page explains what we
+        collect, why we have it, and how to get rid of it.
+      </p>
+
+      <h2>What we collect</h2>
+      <ul>
+        <li>
+          <strong>Your account.</strong> An email address when you sign in with
+          a code, or the account identifier and email that Apple or Google
+          gives us when you use their sign-in. Apple lets you hide your real
+          address, and that works here.
+        </li>
+        <li>
+          <strong>What you write.</strong> The notes you create, so we can
+          store them and sync them to your other devices.
+        </li>
+        <li>
+          <strong>Your subscription status.</strong> Whether a subscription is
+          active, and which product it is. Apple and Google take the payment.
+          We never receive your card details.
+        </li>
+        <li>
+          <strong>Technical records.</strong> Ordinary server logs, including
+          the internet address your device connects from and the time of the
+          request. We use them to keep the service running and to spot abuse.
+        </li>
+      </ul>
+      <p>
+        You can use the app without an account. In that case the app still
+        creates an anonymous identifier so your notes can sync to the server
+        and back. Sign in later and that content moves to your account.
+      </p>
+
+      <h2>What we do not do</h2>
+      <ul>
+        <li>We do not sell your data.</li>
+        <li>
+          We do not use it for advertising, and we do not track you across
+          other apps or websites.
+        </li>
+        <li>We do not read your notes, except when you ask us to help.</li>
+      </ul>
+
+      <h2>Who else touches it</h2>
+      <p>
+        We use a small number of companies to run the service, and they may
+        process data on our behalf:
+      </p>
+      <ul>
+        <li>Apple and Google, for sign-in, payments, and app distribution.</li>
+        <li>RevenueCat, to tell us whether a subscription is active.</li>
+        <li>Our hosting provider, which stores the data and serves the API.</li>
+        <li>Our email provider, to deliver sign-in codes.</li>
+      </ul>
+
+      <h2>How long we keep it</h2>
+      <p>
+        Your notes stay until you delete them or delete your account. Logs are
+        kept for a short period and then discarded.
+      </p>
+
+      <h2>Deleting your account</h2>
+      <p>
+        Open the app and go to Settings, then Delete account. This removes your
+        account and the notes attached to it. It happens immediately and it
+        cannot be undone. A subscription is billed by the store, so cancel it
+        in your App Store or Play Store account as well.
+      </p>
+
+      <h2>Your rights</h2>
+      <p>
+        You can ask what we hold about you, ask for a copy, ask us to correct
+        it, or ask us to delete it. Write to us at the address below. Depending
+        on where you live, you may have further rights under local law.
+      </p>
+
+      <h2>Children</h2>
+      <p>
+        {site.name} is not directed at children under 13, and we do not
+        knowingly collect their data. If you believe a child has given us
+        information, contact us and we will remove it.
+      </p>
+
+      <h2>Security</h2>
+      <p>
+        Traffic between the app and our servers is encrypted in transit. We
+        limit who can reach production data. No service can promise perfect
+        security, and we do not.
+      </p>
+
+      <h2>Changes</h2>
+      <p>
+        If this policy changes in a way that matters, we will update the date
+        at the top of this page and, where the change is significant, tell you
+        in the app.
+      </p>
+
+      <h2>Contact</h2>
+      <p>
+        <Company />
+        {site.address ? <>, {site.address}</> : null}
+        {site.supportEmail ? (
+          <>
+            . Email <a href={`mailto:${site.supportEmail}`}>{site.supportEmail}</a>.
+          </>
+        ) : null}
+      </p>
+    </LegalPage>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/support/page.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Link, type Metadata } from "@pylonsync/react";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Support — ${site.name}`,
+  description: `Get help with ${site.name}.`,
+};
+
+/**
+ * App Store Connect asks for a support URL, and Play requires a contact
+ * address on the listing. This page is both. The answers repeat what the app
+ * does so a reviewer can check a claim without installing anything.
+ */
+export default function SupportPage() {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-16 sm:py-20">
+      <h1 className="text-3xl font-semibold tracking-[-0.02em]">Support</h1>
+      <p className="mt-4 text-[15px] leading-relaxed text-ink-muted">
+        {site.supportEmail ? (
+          <>
+            Email{" "}
+            <a
+              href={`mailto:${site.supportEmail}`}
+              className="text-brand underline underline-offset-2"
+            >
+              {site.supportEmail}
+            </a>{" "}
+            and tell us what happened, what you expected, and which device you
+            are on. That is usually enough to sort it out in one reply.
+          </>
+        ) : (
+          <>Add a support address in lib/site.ts and it will appear here.</>
+        )}
+      </p>
+
+      <h2 className="mt-12 text-xl font-semibold tracking-[-0.015em]">
+        Common questions
+      </h2>
+      <dl className="mt-6 divide-y divide-line border-y border-line">
+        {site.faq.map((item) => (
+          <div key={item.q} className="py-5">
+            <dt className="text-[15px] font-medium">{item.q}</dt>
+            <dd className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+              {item.a}
+            </dd>
+          </div>
+        ))}
+        <div className="py-5">
+          <dt className="text-[15px] font-medium">
+            How do I delete my account?
+          </dt>
+          <dd className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            In the app, open Settings and choose Delete account. It removes the
+            account and its notes straight away. Cancel a subscription
+            separately in the App Store or Play Store.
+          </dd>
+        </div>
+        <div className="py-5">
+          <dt className="text-[15px] font-medium">
+            My notes are not showing on my other device.
+          </dt>
+          <dd className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            Check that both devices are signed in to the same account. Notes
+            written before you signed in move to the account the first time you
+            sign in on that device.
+          </dd>
+        </div>
+      </dl>
+
+      <p className="mt-10 text-[14px] text-ink-muted">
+        See also our <Link href="/privacy" className="text-brand underline underline-offset-2">privacy policy</Link>{" "}
+        and{" "}
+        <Link href="/terms" className="text-brand underline underline-offset-2">terms</Link>.
+      </p>
+    </div>
+  );
+}