@getvitops/create 0.8.1 → 0.9.0-alpha.0

package/templates/static/AGENTS.md

@@ -14,7 +14,7 @@ as Cloudflare Workers static assets (no server runtime, no database).
   portrait, landscape; SVG + PNG) for layout work before real imagery
   exists. Delete the directory once real assets land.
 - Prefer framework CSS classes (utilities, patterns, type roles like
-  `font-heading`) over bespoke CSS. Run `npx vitops agents` to append the
+  `font-heading`) over bespoke CSS. Run `vp exec vitops agents` to append the
   full generated class-vocabulary reference to this file.
 - **Layout foundations — these are the answer, not a starting point.** Six
   substitutions carry the structure of nearly every page:
@@ -47,18 +47,72 @@ as Cloudflare Workers static assets (no server runtime, no database).
   PR with auto-merge; merging deploys prod. Only run it when the user
   explicitly asks to promote/ship to production.
 
+## Labels: badge and tag
+
+Two label patterns, both enabled in `site.json`'s `patterns.items`: **`badge`** is a
+static label (a status, count or category) and **`tag`** is a label that may be
+static _or_ dynamic (editable, dismissable, in a `tag-list`). Don't invent a third
+name — `chip` and `pill` are not part of this vocabulary. The button pattern's class
+is `btn` (`<a class="btn">` is styled, not just a bare `<button>`).
+
+## Content Security Policy
+
+`public/_headers` ships a **`Content-Security-Policy-Report-Only`** header for every
+page (they are all static assets): violations are logged to the browser console and
+nothing is blocked, so it can't break a page. Its `script-src` is `'self'` plus the
+SHA-256 of each inline script `<Head />` emits (the colour-scheme bootstrap and the
+consent-gate stub), with no `'unsafe-inline'`. `contentSecurityPolicy()` and
+`inlineScriptHashes()` from `@getvitops/astro` produce the same strings.
+
+Before enforcing it (rename the header to `Content-Security-Policy`), browse the pages
+with the console open: add the origins of any third-party tag the consent gate
+activates to `script-src` / `connect-src`, any embed to `frame-src`, and hash any
+inline script you add yourself. Hashes rather than nonces because a static page has no
+per-request response to carry one.
+
 ## Commands
 
-- `pnpm dev` — local dev
-- `pnpm typecheck` — `astro check`
-- `pnpm run build:css` — regenerate the framework CSS from `site.json`
-- `pnpm deploy` — build + `wrangler deploy` to prod
-- `pnpm run deploy:dev` — build + deploy the isolated dev worker
-- `pnpm run init:github` — one-time: create + push the GitHub repo (main +
-  dev, dev default, branch protection + environment policy). Only run when
-  the user asks to set up GitHub.
-- `pnpm run init:hosting` — one-time: read the Cloudflare account id and set
-  it as a repo secret. Only run when the user asks for it.
-- `npx vitops validate site.json` — schema-check the site config
-- `npx vitops lint -i site.json -f css` — find framework classes in
-  source that resolve to nothing under this format
+This is a **Vite+** project: use `vp` (and its `vpr` shorthand), not `pnpm`/`npm`/`npx`.
+The package manager underneath is pnpm, but `vp` picks it up for you.
+
+| To…                                      | Run                                                  |
+| ---------------------------------------- | ---------------------------------------------------- |
+| install dependencies                     | `vp install`                                         |
+| add / remove / update a package          | `vp add <pkg>` · `vp remove <pkg>` · `vp update`     |
+| run a `package.json` script              | `vpr <script>` (alias for `vp run <script>`)         |
+| run a locally installed binary           | `vp exec <bin>` (e.g. `vp exec vitops docs classes`) |
+| run a one-off package without installing | `vp dlx <pkg>`                                       |
+| format + lint + typecheck (files)        | `vp check`                                           |
+| typecheck Astro (`.astro` files)         | `vpr typecheck`                                      |
+
+**Scripts that wrap Astro must go through `vpr`.** `vp dev` / `vp build` run Vite
+directly and skip Astro, so use `vpr dev`, `vpr build`, `vpr preview`.
+
+**`vpr dev` returns immediately.** `astro dev` now starts the server in the
+background. Check it with `vp exec astro dev status`, read its output with
+`vp exec astro dev logs --follow`, and stop it with `vp exec astro dev stop`; the
+site is at <http://localhost:4321>. Don't wait on it as if it were a foreground
+process.
+
+| Script                                    | What it does                                                                                                                        |
+| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `vpr dev`                                 | local dev                                                                                                                           |
+| `vpr build:css`                           | regenerate the framework CSS from `site.json`                                                                                       |
+| `vpr deploy`                              | build + `wrangler deploy` to prod                                                                                                   |
+| `vpr deploy:dev`                          | build + deploy the isolated dev worker                                                                                              |
+| `vpr init:github`                         | one-time: create + push the GitHub repo (main + dev, dev default, branch protection + environment policy). Only when the user asks. |
+| `vpr init:hosting`                        | one-time: read the Cloudflare account id and set it as a repo secret. Only when the user asks.                                      |
+| `vp exec vitops validate site.json`       | schema-check the site config                                                                                                        |
+| `vp exec vitops lint -i site.json -f css` | find framework classes in source that resolve to nothing under this format                                                          |
+
+**Release flow.** A site is not a published package, so there is no changeset or
+version bump: ship by committing to `dev` (auto-deploys the dev worker) and then
+running the **promote** workflow. `vp` has no `vp change` / `vp pm change` command
+(checked against vp 1.5.0); for a _package_ it does have `vp pm version`,
+`vp pm publish` and `vp pm stage`.
+
+**Naming the project.** `vp create` takes the package name from the target
+directory and invents a random slug when none is given, so pass one:
+`vp create @getvitops:static --directory <client-slug>`. `wrangler.jsonc`'s `name`
+is separate and still says what the template shipped — rename it to match before
+the first deploy.

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"]
             }
           }
         },