@getvitops/create 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @getvitops/create
 
+## 0.3.4
+
+### Patch Changes
+
+- bb92a14: Update the `emdash` template for the target-prefixed colour grammar.
+
+  The template's `design-system.json` and layout referenced tokens the generator no longer
+  emits — `--surface-bg`, `--surface-bg-muted`, `--neutral-border` — so a freshly scaffolded
+  project rendered a transparent card on a borderless footer. They now read
+  `--color-bg-surface-muted`, `--color-bg-surface-x-muted` and `--color-border-neutral`, and
+  `colors.utilities` picks up the new `icon` tier.
+
+  Existing scaffolds are unaffected until you upgrade `@getvitops/*`; when you do, the
+  [colour grammar migration table](https://www.npmjs.com/package/@getvitops/generator) applies
+  to your own `design-system.json` the same way.
+
+- bb92a14: Docs: import the Astro integration as `vitops`, and document the fourth output format.
+
+  Every example now reads `import vitops from '@getvitops/astro'` and calls `vitops({ … })`,
+  including the scaffolded `emdash` template. The default export is unchanged, so this is a
+  naming convention in the docs rather than an API change — existing configs that bind it as
+  `getvitops` keep working.
+
+  The `@getvitops/generator` and `@getvitops/cli` docs also describe the `design` format, which
+  was shipped without a mention in either package's output table: `--format design` writes a
+  single `DESIGN.md` and no CSS, so a run that composes it with a stylesheet wants its own
+  `--out` (the brief conventionally sits at a repo root, the stylesheet does not).
+
 ## 0.3.3
 
 ### Patch Changes

package/README.md

@@ -24,7 +24,7 @@ vp create @getvitops:emdash
 An [EmDash CMS](https://docs.emdashcms.com) website on Cloudflare Workers,
 with every relevant `@getvitops/*` package pre-wired:
 
-- **`@getvitops/astro`** — the `getvitops()` integration: design-system CSS
+- **`@getvitops/astro`** — the `vitops()` integration: design-system CSS
   generated from `design-system.json` (Tailwind v4 format, layout-scoped via
   `css.inject: false`), favicons/PWA from `src/assets/logo.svg`, and the
   web-component runtime copied into `public/vitops/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/create",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Project templates for the Vitops design system — scaffold wired-up sites with `vp create @getvitops`.",
   "license": "MIT",
   "files": [

package/templates/emdash/AGENTS.md

@@ -6,7 +6,7 @@ styled by the Vitops design system.
 - `design-system.json` is the single source of truth for the design system
   (colors, type, spacing, patterns, animations). Never edit
   `src/styles/tailwind.css` — it is generated from the JSON by the
-  `getvitops()` integration on every dev/build and is gitignored.
+  `vitops()` integration on every dev/build and is gitignored.
 - Content lives in the EmDash database, not in the repo. Query it with
   `getEmDashCollection` / `getEmDashEntry` from `emdash`; render Portable Text
   with `<PortableText />` from `emdash/ui` (the Vitops blocks from
@@ -39,7 +39,16 @@ styled by the Vitops design system.
   auto-merge; merging deploys prod. Only run it when the user explicitly asks
   to promote/ship to production.
 - Sample legal pages (`/terms`, `/privacy`) ship as seeded placeholder content
-  — remind the user to replace them before launch.
+  — remind the user to replace them before launch. They are deliberately short
+  and obviously unfinished; do not "improve" them into something that reads as
+  a finished policy, because the risk here is a plausible-looking document
+  getting shipped unread.
+  To replace them properly, write a site config and run
+  `npx vitops legal --format portable-text --out ./legal`, then paste each
+  document's blocks into the page in the admin. That renders a real policy from
+  what the site actually does — the analytics provider it uses, the fields its
+  forms collect, where it deploys — rather than from guesses. It still needs
+  review before launch.
 
 ## Docs MCP servers
 

package/templates/emdash/README.md

@@ -37,6 +37,17 @@ the seed: home, about, terms (`/terms`), and privacy policy (`/privacy`).
 Until then the home route shows a friendly empty state. Unknown paths render
 `src/pages/404.astro`.
 
+The two legal pages are placeholders. To generate real ones from what your site
+actually does, describe it in a site config and run:
+
+```sh
+npx vitops legal --format portable-text --out ./legal
+```
+
+Then paste each document's blocks into the matching page in the admin. The
+output is generated from your config, not legal advice — have it reviewed
+before you publish.
+
 ## Deploy
 
 ```bash
@@ -132,7 +143,7 @@ and media in the storage backend (bucket/directory copy).
 ## The design system
 
 `design-system.json` is the single source of truth for colors, type, spacing,
-shadows, patterns, and animations. The `getvitops()` integration regenerates
+shadows, patterns, and animations. The `vitops()` integration regenerates
 `src/styles/tailwind.css` from it on dev/build (the file is gitignored — edit
 the JSON, not the CSS). `Layout.astro` imports the stylesheet so the admin
 routes stay unstyled by it.

package/templates/emdash/_gitignore

@@ -15,7 +15,7 @@ worker-configuration.d.ts
 # node hosting target: SQLite db + local uploads
 data/
 
-# generated by the getvitops() integration on dev/build
+# generated by the vitops() integration on dev/build
 src/styles/
 public/vitops/
 

package/templates/emdash/astro.config.mjs

@@ -1,5 +1,5 @@
 import react from '@astrojs/react';
-import getvitops from '@getvitops/astro';
+import vitops from '@getvitops/astro';
 import { vitopsEmdash, vitopsHosting } from '@getvitops/emdash';
 import { defineConfig } from 'astro/config';
 import emdash from 'emdash/astro';
@@ -32,7 +32,7 @@ export default defineConfig({
       // which emits the web-component runtime tags.
       plugins: [vitopsEmdash()],
     }),
-    getvitops({
+    vitops({
       favicon: {
         source: 'src/assets/logo.svg',
         name: 'My EmDash Site',

package/templates/emdash/design-system.json

@@ -18,7 +18,7 @@
       "warning": "sun",
       "danger": "rose"
     },
-    "utilities": ["bg", "text", "border"]
+    "utilities": ["bg", "text", "icon", "border"]
   },
   "shadows": {
     "sm": "0 1px 2px rgb(0 0 0 / 0.08)",
@@ -49,7 +49,7 @@
   "patterns": {
     "defaults": {
       "ds": "none",
-      "b": "1px solid var(--surface-bg-muted)",
+      "b": "1px solid var(--color-bg-surface-x-muted)",
       "br": "0.375rem",
       "p": "1rem",
       "fs": "1rem"
@@ -99,7 +99,7 @@
         "base": {
           "border-radius": "var(--br-card-group)",
           "padding": "1.5rem",
-          "background": "var(--surface-bg)",
+          "background": "var(--color-bg-surface-muted)",
           "border": "var(--b-card-group)",
           "box-shadow": "var(--ds-card-group)"
         },

package/templates/emdash/src/assets/logo.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <!-- Placeholder mark — replace with your brand. This file is also the
-       favicon/PWA source (see astro.config.mjs → getvitops({ favicon })). -->
+       favicon/PWA source (see astro.config.mjs → vitops({ favicon })). -->
   <rect width="64" height="64" rx="14" fill="#2e9b73" />
   <path d="M18 24l14 20 14-20" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
 </svg>

package/templates/emdash/src/layouts/Layout.astro

@@ -3,7 +3,7 @@ import VitopsHead from '@getvitops/astro/Head.astro';
 import { getMenu, getSiteSettings } from 'emdash';
 import { createPublicPageContext } from 'emdash/page';
 import { EmDashHead } from 'emdash/ui';
-// Design-system CSS, layout-scoped (getvitops css.inject: false): only pages
+// Design-system CSS, layout-scoped (vitops css.inject: false): only pages
 // rendered through this layout get it — keeps it out of /_emdash/admin, while
 // EmDash previews (rendered through this layout) keep it.
 import '../styles/tailwind.css';
@@ -126,7 +126,7 @@ const year = new Date().getFullYear();
       footer {
         margin-block-start: var(--space-2xl);
         padding-block: var(--space-l);
-        border-block-start: 1px solid var(--neutral-border);
+        border-block-start: 1px solid var(--color-border-neutral);
       }
     </style>
   </body>