@getvitops/create 0.8.2 → 0.9.0-alpha.1

package/templates/static/README.md

@@ -4,7 +4,7 @@ A static [Astro](https://astro.build) website on Cloudflare Workers (static
 assets — no server runtime), styled by the
 [Vitops design system](https://www.npmjs.com/org/getvitops).
 
-Scaffolded from `vp create @getvitops:static`.
+Scaffolded from `vp create @getvitops:static --directory <client-slug>` (pass a directory: `vp create` derives the package name from it and invents a random slug otherwise).
 
 ## Stack
 
@@ -20,8 +20,8 @@ before real imagery exists — delete once real assets land.
 ## Local development
 
 ```bash
-pnpm install
-pnpm dev
+vp install
+vpr dev
 ```
 
 - Site: <http://localhost:4321>
@@ -29,8 +29,8 @@ pnpm dev
 ## Deploy
 
 ```bash
-npx wrangler login
-pnpm deploy
+vp exec wrangler login
+vpr deploy
 ```
 
 For a custom domain, uncomment the `routes` block in `wrangler.jsonc` and set
@@ -55,7 +55,7 @@ The repo ships a two-environment flow modeled on branch = environment:
 One-time setup — work through the checklist:
 
 ```bash
-pnpm run sop && open SETUP.html   # or: xdg-open SETUP.html
+vpr sop && open SETUP.html   # or: xdg-open SETUP.html
 ```
 
 It covers host choice, GitHub + branch policy, hosting resources, going live
@@ -65,7 +65,7 @@ command per step. An AI agent can work the same list autonomously via
 `.agents/skills/setup/`; it stops at the steps that genuinely need a human
 (the Cloudflare API token, the domain cutover, publishing legal documents).
 
-`pnpm run deploy:dev` reproduces the dev deploy locally: it writes a
+`vpr deploy:dev` reproduces the dev deploy locally: it writes a
 gitignored `.wrangler.dev.json` with the worker renamed and any custom-domain
 route prefixed `dev.` (`scripts/dev-wrangler-config.mjs`), so it never
 touches the prod worker.

package/templates/static/SETUP.html

@@ -7,7 +7,7 @@
     <!--
       Opened straight from disk (file://) before anything is deployed, which is
       when most of these steps happen — so it links a relative, pre-generated
-      stylesheet rather than the site's own build output. Run `pnpm run sop`
+      stylesheet rather than the site's own build output. Run `vpr sop`
       first (it's a one-line `vitops generate -f css` into .vitops/sop/); the
       banner below explains this if the stylesheet 404s, and the markup stays
       legible either way — every item here is a real checkbox in a real
@@ -21,7 +21,7 @@
     -->
     <link id="sop-stylesheet" rel="stylesheet" href=".vitops/sop/styles.css" />
     <style>
-      /* Minimal fallback so the page is still legible before `pnpm run sop`
+      /* Minimal fallback so the page is still legible before `vpr sop`
          has run once — intentionally not framework CSS, since it only ever
          applies in the narrow window before the real stylesheet exists. */
       body {
@@ -42,7 +42,7 @@
       <header class="region rhythm">
         <h1>Client onboarding checklist</h1>
         <p id="no-stylesheet-notice" class="banner" hidden>
-          This page isn't styled yet — run <code>pnpm run sop</code> once (it generates
+          This page isn't styled yet — run <code>vpr sop</code> once (it generates
           <code>.vitops/sop/styles.css</code>), then reload.
         </p>
         <p>
@@ -90,7 +90,7 @@
               <span class="custom-check__box"
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
-              <span> Preview it: <code>npx vitops setup repo --dry</code> </span>
+              <span> Preview it: <code>vp exec vitops setup repo --dry</code> </span>
             </label>
             <label class="custom-check">
               <input type="checkbox" data-sop="repo.run" />
@@ -98,7 +98,7 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Run it: <code>npx vitops setup repo</code> — creates the GitHub repo, pushes
+                Run it: <code>vp exec vitops setup repo</code> — creates the GitHub repo, pushes
                 <code>main</code> + <code>dev</code>, makes <code>dev</code> default, and requests
                 branch protection + the <code>production</code>/<code>dev</code>
                 environments.
@@ -126,7 +126,7 @@
               <span class="custom-check__box"
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
-              <span> Preview it: <code>npx vitops setup hosting --dry</code> </span>
+              <span> Preview it: <code>vp exec vitops setup hosting --dry</code> </span>
             </label>
             <label class="custom-check">
               <input type="checkbox" data-sop="hosting.run" />
@@ -134,10 +134,10 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Run it: <code>npx vitops setup hosting</code> — provisions the isolated dev D1
+                Run it: <code>vp exec vitops setup hosting</code> — provisions the isolated dev D1
                 database + R2 bucket (EmDash template) and sets the <code>DEV_D1_ID</code> /
                 <code>CLOUDFLARE_ACCOUNT_ID</code> repo secrets. Requires
-                <code>npx wrangler login</code> first.
+                <code>vp exec wrangler login</code> first.
               </span>
             </label>
             <label class="custom-check">
@@ -276,7 +276,7 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Deploy once (<code>pnpm deploy</code>), note the printed
+                Deploy once (<code>vpr deploy</code>), note the printed
                 <code>*.workers.dev</code> URL, and set
                 <code>site.environments.production.url</code> in <code>site.json</code> to it.
               </span>
@@ -315,8 +315,8 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Preview it: <code>npx vitops setup domain --domain &lt;apex&gt; --dry</code> — this
-                only plans and checks; it never applies the cutover itself.
+                Preview it: <code>vp exec vitops setup domain --domain &lt;apex&gt; --dry</code> —
+                this only plans and checks; it never applies the cutover itself.
               </span>
             </label>
             <label class="custom-check">
@@ -326,7 +326,7 @@
               ></span>
               <span>
                 Uncomment the <code>routes</code> block in <code>wrangler.jsonc</code>, set your
-                apex, and deploy: <code>pnpm deploy</code>.
+                apex, and deploy: <code>vpr deploy</code>.
               </span>
             </label>
             <label class="custom-check">
@@ -347,7 +347,8 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Re-run <code>npx vitops robots</code> and <code>npx vitops search notify</code>.
+                Re-run <code>vp exec vitops robots</code> and
+                <code>vp exec vitops search notify</code>.
               </span>
             </label>
           </div>
@@ -373,7 +374,7 @@
               <span class="custom-check__box"
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
-              <span> Check it: <code>npx vitops validate site.json</code> </span>
+              <span> Check it: <code>vp exec vitops validate site.json</code> </span>
             </label>
           </div>
         </details>
@@ -398,8 +399,8 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Preview then run: <code>npx vitops setup search --dry</code>, then
-                <code>npx vitops setup search</code>. This is a <strong>user OAuth</strong>
+                Preview then run: <code>vp exec vitops setup search --dry</code>, then
+                <code>vp exec vitops setup search</code>. This is a <strong>user OAuth</strong>
                 action, deliberately — verifying a site makes the caller an owner, and that should
                 be a person, not a deploy robot.
               </span>
@@ -410,8 +411,25 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                Preview then run: <code>npx vitops setup ads --dry</code>, then
-                <code>npx vitops setup ads</code>.
+                Preview then run: <code>vp exec vitops setup ads --dry</code>, then
+                <code>vp exec vitops setup ads</code>.
+              </span>
+            </label>
+            <label class="custom-check">
+              <input type="checkbox" data-sop="connections.turnstile" />
+              <span class="custom-check__box"
+                ><span class="custom-check__indicator custom-check__indicator--check"></span
+              ></span>
+              <span>
+                If the site has a contact form, create its spam check:
+                <code>vp exec vitops setup turnstile --dry</code>, then
+                <code>vp exec vitops setup turnstile</code>. It needs
+                <code>CLOUDFLARE_API_TOKEN</code> with
+                <strong>Account &gt; Turnstile &gt; Edit</strong> (plus
+                <code>CLOUDFLARE_ACCOUNT_ID</code>) and <code>wrangler login</code>. The public site
+                key goes into <code>site.security.turnstile.siteKey</code>; the secret is saved as
+                the Worker secret <code>VITOPS_TURNSTILE_SECRET</code> and never touches
+                <code>site.json</code>. It never edits or deletes an existing widget.
               </span>
             </label>
             <label class="custom-check">
@@ -453,10 +471,10 @@
               ></span>
               <span>
                 Generate real documents from the filled-in config —
-                <code>npx vitops legal --format portable-text</code> (EmDash; paste into the admin)
-                or <code>npx vitops legal --format md</code> (static; commit the output). The seeded
-                <code>/terms</code> and <code>/privacy</code> pages are deliberately short,
-                obviously-unfinished placeholders.
+                <code>vp exec vitops legal --format portable-text</code> (EmDash; paste into the
+                admin) or <code>vp exec vitops legal --format md</code> (static; commit the output).
+                The seeded <code>/terms</code> and <code>/privacy</code> pages are deliberately
+                short, obviously-unfinished placeholders.
               </span>
             </label>
             <label class="custom-check">
@@ -484,7 +502,7 @@
               ></span>
               <span>
                 Robots directive matches the live origin's intent (blocked while on workers.dev,
-                open after cutover) — <code>npx vitops robots</code>.
+                open after cutover) — <code>vp exec vitops robots</code>.
               </span>
             </label>
             <label class="custom-check">
@@ -509,7 +527,7 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                <code>npx vitops lint --src</code> and <code>pnpm typecheck</code> both clean.
+                <code>vp exec vitops lint --src</code> and <code>vpr typecheck</code> both clean.
               </span>
             </label>
             <label class="custom-check">
@@ -527,7 +545,7 @@
               <span class="custom-check__box"
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
-              <span> <code>npx vitops search notify</code> run once live. </span>
+              <span> <code>vp exec vitops search notify</code> run once live. </span>
             </label>
             <label class="custom-check">
               <input type="checkbox" data-sop="launch.check" />
@@ -535,8 +553,8 @@
                 ><span class="custom-check__indicator custom-check__indicator--check"></span
               ></span>
               <span>
-                A day or two later: <code>npx vitops search notify --check</code> confirms Google
-                actually indexed it.
+                A day or two later: <code>vp exec vitops search notify --check</code> confirms
+                Google actually indexed it.
               </span>
             </label>
           </div>

package/templates/static/public/_headers

@@ -1,9 +1,21 @@
-# Cloudflare Workers static assets apply this file to every asset response.
+# Cloudflare static-assets response headers for the whole site (every page here is
+# a static asset). See AGENTS.md "Content Security Policy".
 #
-# A baseline that cannot break a page. No Content-Security-Policy on purpose: <Head /> emits
-# inline scripts (the consent stub, the colour-scheme bootstrap), so a strict policy needs
-# per-site nonces or hashes — add one deliberately once you know which third-party tags you load.
+# REPORT-ONLY on purpose: violations are logged to the browser console and
+# nothing is blocked, so this cannot break a page. Read the console on the
+# pages you ship, add what is legitimately needed, then rename the header to
+# `Content-Security-Policy` to enforce it.
+#
+# The two sha256 values are the inline scripts <Head /> emits (the colour-scheme
+# bootstrap and the consent-gate stub). They change only when
+# @getvitops/astro changes those scripts; regenerate with
+#   vp exec node -e "import('@getvitops/astro').then(m => console.log(m.contentSecurityPolicy()))"
+# `templates.test.ts` in the toolchain repo guards that they match.
+#
+# Third-party tags the consent gate activates need their origins in
+# script-src/connect-src before you enforce.
 /*
+  Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'sha256-CEiVlTo192T9Rug/nAl+ihvkqOQkYdr6Rq3oc+gR9JU=' 'sha256-z/UqsITVvNGOJSaOSvhN1rdtyYdMIxpQ/lMXM1q0g90=' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-src https://challenges.cloudflare.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()

package/templates/static/site.json

@@ -93,6 +93,13 @@
               "br": "0.5rem",
               "p": "1rem",
               "fs": "var(--fs-default)"
+            },
+            "label": {
+              "ds": "var(--ds-default)",
+              "b": "none",
+              "br": "0.25rem",
+              "p": "0.25em 0.5em",
+              "fs": "0.75rem"
             }
           },
           "z": {
@@ -126,7 +133,8 @@
                   "ring": true
                 }
               },
-              "roles": []
+              "roles": ["success", "danger", "warning", "info"],
+              "class": "btn"
             },
             "card": {
               "group": "panel",
@@ -140,6 +148,51 @@
               },
               "states": {},
               "roles": []
+            },
+            "badge": {
+              "group": "label",
+              "class": "badge",
+              "default_role": "brand-primary",
+              "overrides": {
+                "p": "0.2em 0.6em",
+                "br": "999px",
+                "fs": "0.85em"
+              },
+              "base": {
+                "display": "inline-block",
+                "padding": "var(--p-badge-group)",
+                "border-radius": "var(--br-badge-group)",
+                "font-size": "var(--fs-badge-group)",
+                "font-weight": "600",
+                "color": "var(--color-text-on-brand-primary)"
+              },
+              "states": {},
+              "roles": ["success", "danger", "warning", "info"]
+            },
+            "tag": {
+              "group": "label",
+              "class": "tag",
+              "default_role": "neutral",
+              "overrides": {
+                "p": "0.25em 0.6em",
+                "b": "1px solid currentColor",
+                "fs": "0.85em"
+              },
+              "base": {
+                "display": "inline-flex",
+                "align-items": "center",
+                "gap": "0.25em",
+                "padding": "var(--p-tag-group)",
+                "border": "var(--b-tag-group)",
+                "border-radius": "var(--br-tag-group)",
+                "font-size": "var(--fs-tag-group)",
+                "font-weight": "500",
+                "line-height": "1.2",
+                "white-space": "nowrap",
+                "color": "var(--color-text-neutral-bold)"
+              },
+              "states": {},
+              "roles": ["success", "danger", "warning", "info"]
             }
           }
         },