@getvitops/create 0.9.0-alpha.0 → 0.9.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @getvitops/create
 
+## 0.9.0-alpha.1
+
+### Minor Changes
+
+- 24c568b: Escape hatches on every block, a section theme, widget areas, a badges block, Tailwind scanning of package renderers, and a sturdier `vitops audit`.
+
+  **@getvitops/emdash**
+
+  - Every `vitops.*` block and `vitops_section` gains three fields: `anchor` (rendered as the `id`, so `#contact` works), `className` (`class_name` on the section type: block-type slugs are lowercase) and `style`. `style` takes CSS custom properties only (`--p-card: 2rem`); any other declaration, and any value containing `url(`, `@`, `{`, `}` or a backslash, is dropped. With the `tailwind` format a class typed in the CMS only works if the site already uses it. They are applied to the block's own outermost element (the grid `<ul>` for `vitops.cards`), never an extra wrapper, so a block's markup is the same whether or not an editor fills them in.
+  - `vitops_section` gains a `theme` select: a role, or `<role>:solid`, with readable text chosen by the generator's contrast rules. It overrides `tone`/`color`/`solid`, which stay for existing content. Other site roles still go through `tone`.
+  - New `vitops.badges` block (a row of `.badge` or `.tag` labels, each with an optional tone, icon and link) and `vitops.widgetArea` block, plus `<VitopsWidgetArea name level />` from `@getvitops/emdash/astro`. A widget area is content defined once under Widgets and shown wherever it is placed. An area cannot hold another area, and an area containing a `core:*` component widget is rendered by EmDash's own renderer.
+  - Existing sites: re-run the block-type seed only on a new database; on an existing one add the `theme`, `anchor`, `className` and `style` fields to the `vitops_section` block type in the admin.
+
+  **@getvitops/create**: the emdash template seeds `announcement` and `pre-footer` widget areas, renders them in `Layout.astro`, and documents when to use a Section, a block or a widget area. Sites scaffolded earlier add the two `<VitopsWidgetArea>` lines and the `widgetAreas` seed entries by hand.
+
+  **@getvitops/generator / astro / vite** (`tailwind` format only): the Astro integration now adds `@source` lines for `@getvitops/astro` and `@getvitops/emdash`, because Tailwind v4 does not scan `node_modules`; utilities used only by their renderers (`font-display`, `font-caption`, `font-footnote`) were never emitted and the page silently rendered at body size. New `sources` option on `generate()` and the Vite plugin. A site's `src/package-classes.txt` workaround can be deleted. css and bricks: no change.
+
+  **@getvitops/cli**: `vitops emdash check-prerender` now also warns when a page uses a type-role class (`font-display`, …) the built CSS has no rule for; `--strict` makes it fail. `vitops audit` checks for its optional packages and a Chromium binary before starting the preview server (so a failed run no longer leaves port 4398 busy), stops the server on Ctrl+C and termination, and takes its page list from the built sitemap, then the menus; the guessed defaults (`/privacy`, `/contact`, …) are used only when neither exists.
+
+  **@getvitops/utils**: the audit helpers behind the above (`preflight`, `fetchSitemapPaths`, `sitemapLocs`, `pathsFromSitemapLocs`).
+
+  **@getvitops/core** (all formats): new `.block-anchor` rule gives an anchored block `scroll-margin-top: var(--header-offset, 5rem)`; set `--header-offset` to a sticky header's height. New `widget-area.css` partial. No other consumer-facing change.
+
+  The other fixed-group packages: no consumer-facing change beyond the above.
+
+  **Also fixed in the emdash template** (`site.json`): it defined only the `display`, `heading` and `body` type roles while the blocks use `title`, `eyebrow`, `lead`, `caption` and `footnote`, so those rendered at body size with no rule behind them. The roles are added with the reference design system's specs. A site scaffolded earlier adds the same five entries under `designSystem.themes.default.typography.roles`; `vitops emdash check-prerender` now names any that are missing.
+
 ## 0.9.0-alpha.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/create",
-  "version": "0.9.0-alpha.0",
+  "version": "0.9.0-alpha.1",
   "description": "Project templates for the Vitops design system — scaffold wired-up sites with `vp create @getvitops`.",
   "homepage": "https://docs.vitops.ca",
   "bugs": "https://github.com/getvitops/design-system/issues",
@@ -19,7 +19,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@getvitops/generator": "8.3.0-alpha.0"
+    "@getvitops/generator": "8.3.0-alpha.1"
   },
   "engines": {
     "node": ">=24"

package/templates/emdash/AGENTS.md

@@ -29,6 +29,22 @@ prerendered, the Worker serving the admin and API) styled by the Vitops design s
   tiers provide it, and which block renders it. Override a block's rendering per site with
   `<PortableText components={{ type: { 'vitops.cards': MyCards } }} />`; hide one with
   `vitopsEmdash({ blocks: { exclude: [...] } })` in `astro.config.mjs`.
+- **Escape hatches on every block.** Each `vitops.*` block (and the section type) has an
+  `anchor` (becomes the `id`, for `#links`), `className` (extra classes — with the tailwind format
+  only ones the site already uses) and `style` (CSS custom properties only, e.g. `--p-card: 2rem`;
+  anything else is dropped). `vitops_section` also has a `theme`: one pick for a tinted or solid
+  backdrop with readable text. Set `--header-offset` to the sticky header's height so anchors
+  clear it.
+- **`vitops audit`** needs optional packages and a browser, checked before it starts a server:
+  `vp add -D playwright @axe-core/playwright lighthouse && vp exec playwright install chromium`.
+  Its page list is the built sitemap, then the seed's menus.
+- **Section, block or widget area?** Copy-and-edit content is an EmDash Section. The same content
+  everywhere (an announcement bar, a pre-footer call to action, a sidebar, footer columns) is a
+  **widget area**: define it under Widgets in the admin, render it with
+  `<VitopsWidgetArea name="…" />` from `@getvitops/emdash/astro` in the layout, or place it in
+  page content with the `vitops.widgetArea` block. The layout renders `announcement` and
+  `pre-footer`. Page-specific content is blocks. An area cannot hold another area, and prerendered
+  pages show an edit after the next deploy (like menus).
 - `seed/seed.json` only applies against an empty database: structure
   (collections, menus, settings) on first boot; the `content` entries only
   when the setup wizard's "include sample content" option is chosen. Changing

package/templates/emdash/seed/seed.json

@@ -81,6 +81,48 @@
       ]
     }
   ],
+  "widgetAreas": [
+    {
+      "name": "announcement",
+      "label": "Announcement bar",
+      "description": "Shown above the header on every page. Empty until you add a widget.",
+      "widgets": []
+    },
+    {
+      "name": "pre-footer",
+      "label": "Above the footer",
+      "description": "A call to action shown above the footer on every page (Widgets in the admin).",
+      "widgets": [
+        {
+          "type": "content",
+          "title": "Ready to talk?",
+          "content": [
+            {
+              "_type": "block",
+              "_key": "pf-text",
+              "style": "normal",
+              "markDefs": [],
+              "children": [
+                {
+                  "_type": "span",
+                  "_key": "pf-text-s",
+                  "text": "Tell us what you need and we will reply within one business day.",
+                  "marks": []
+                }
+              ]
+            },
+            {
+              "_type": "vitops.actionLink",
+              "_key": "pf-cta",
+              "label": "Contact us",
+              "href": "/contact",
+              "variant": "cta"
+            }
+          ]
+        }
+      ]
+    }
+  ],
   "content": {
     "pages": [
       {
@@ -487,10 +529,30 @@
               "heading": "Send us a message",
               "level": "2",
               "fields": [
-                { "label": "Your name", "name": "name", "type": "text", "required": true },
-                { "label": "Email", "name": "email", "type": "email", "required": true },
-                { "label": "Phone", "name": "phone", "type": "tel", "required": false },
-                { "label": "Message", "name": "message", "type": "textarea", "required": true }
+                {
+                  "label": "Your name",
+                  "name": "name",
+                  "type": "text",
+                  "required": true
+                },
+                {
+                  "label": "Email",
+                  "name": "email",
+                  "type": "email",
+                  "required": true
+                },
+                {
+                  "label": "Phone",
+                  "name": "phone",
+                  "type": "tel",
+                  "required": false
+                },
+                {
+                  "label": "Message",
+                  "name": "message",
+                  "type": "textarea",
+                  "required": true
+                }
               ],
               "submitLabel": "Send message",
               "successMessage": "Thanks. Your message has been sent and we will reply soon."

package/templates/emdash/site.json

@@ -23,8 +23,14 @@
             }
           },
           "roles": {
-            "neutral": { "hue": "ink", "kind": "surface" },
-            "surface": { "hue": "ink", "kind": "surface" },
+            "neutral": {
+              "hue": "ink",
+              "kind": "surface"
+            },
+            "surface": {
+              "hue": "ink",
+              "kind": "surface"
+            },
             "ui-primary": "brand",
             "brand-primary": "brand",
             "info": "sky",
@@ -221,6 +227,46 @@
               "size": "var(--text-m)",
               "weight": 400,
               "line-height": "1.55"
+            },
+            "title": {
+              "family": "display",
+              "size": "var(--text-2xl)",
+              "weight": 600,
+              "line-height": "1.15",
+              "tracking": "-0.025em",
+              "text-wrap": "balance"
+            },
+            "lead": {
+              "family": "sans",
+              "size": "var(--text-l)",
+              "weight": 400,
+              "line-height": "1.5",
+              "text-wrap": "pretty"
+            },
+            "caption": {
+              "family": "sans",
+              "size": "var(--text-s)",
+              "weight": 400,
+              "line-height": "1.3",
+              "text-wrap": "pretty",
+              "color": "var(--color-text-neutral-muted)"
+            },
+            "eyebrow": {
+              "family": "sans",
+              "size": "var(--text-s)",
+              "weight": 600,
+              "line-height": "1.3",
+              "tracking": "0.08em",
+              "text-transform": "uppercase",
+              "text-wrap": "balance"
+            },
+            "footnote": {
+              "family": "sans",
+              "size": "var(--text-xs)",
+              "weight": 400,
+              "line-height": "1.4",
+              "text-wrap": "pretty",
+              "color": "var(--color-text-neutral-muted)"
             }
           },
           "headings": {

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

@@ -7,6 +7,7 @@ import SiteFooter from '@getvitops/astro/components/SiteFooter.astro';
 import SiteNav from '@getvitops/astro/components/SiteNav.astro';
 import { loadNavMenus } from '@getvitops/astro/components/sitenav.ts';
 import { EmDashHead } from 'emdash/ui';
+import { VitopsWidgetArea } from '@getvitops/emdash/astro';
 import config from '../../site.json' with { type: 'json' };
 // Design-system CSS, layout-scoped (vitops css.inject: false): only pages
 // rendered through this layout get it — keeps it out of /_emdash/admin, while
@@ -72,6 +73,8 @@ const orgName = config.organization?.name || siteTitle;
     <VitopsHead />
   </head>
   <body>
+    <!-- Widget areas (Widgets in the admin): the same content wherever they appear. -->
+    <VitopsWidgetArea name="announcement" class="centered" />
     <header class="navbar-sticky centered">
       <div class="navbar">
         <a class="brand flex items-center" href="/" aria-label={`${siteTitle} home`}>
@@ -89,6 +92,8 @@ const orgName = config.organization?.name || siteTitle;
       <slot />
     </main>
 
+    <VitopsWidgetArea name="pre-footer" class="centered" />
+
     <SiteFooter class="centered" sitemap={footerSitemap} legal={footerLegal} name={orgName} />
 
     <style>