@getvitops/generator 3.0.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +385 -0
- package/assets/bricks/elements/color-scheme-toggle.php +3 -3
- package/assets/bricks/elements/multi-field.php +3 -3
- package/assets/css/patterns/consent.css +14 -3
- package/assets/css/patterns/sitenav.css +145 -79
- package/assets/css/patterns/tree.css +118 -8
- package/assets/js/consent.js +1 -1
- package/assets/js/elements.js +25 -25
- package/config.schema.json +178 -11
- package/dist/index.d.mts +491 -13
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +1680 -46
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,390 @@
|
|
|
1
1
|
# @getvitops/generator
|
|
2
2
|
|
|
3
|
+
## 4.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 2c890c0: Link a site to its ad properties: `site.ads`, `vitops ads`, and `<Ads />`.
|
|
8
|
+
|
|
9
|
+
`vitops search` covers the whole Search Console relationship. Nothing covered the equivalent one
|
|
10
|
+
with ad platforms, and a site's ad accounts had nowhere to live — so a Meta pixel pasted into a
|
|
11
|
+
template was invisible to the rest of the toolchain. It set `_fbp` on a site whose generated cookie
|
|
12
|
+
notice never mentioned it, whose consent gate never cleared it on revoke, and — for LinkedIn and
|
|
13
|
+
Pinterest — whose attribution never captured the click ID at all, so every conversion from those
|
|
14
|
+
platforms arrived indistinguishable from organic traffic.
|
|
15
|
+
|
|
16
|
+
**New `site.ads` block**, keyed by platform (`google`, `meta`, `linkedin`, `reddit`, `tiktok`,
|
|
17
|
+
`microsoft`, `pinterest`, `snapchat`):
|
|
18
|
+
|
|
19
|
+
```jsonc
|
|
20
|
+
{
|
|
21
|
+
"site": {
|
|
22
|
+
"ads": {
|
|
23
|
+
"meta": { "pixelId": "123456789", "domainVerification": "abc123" },
|
|
24
|
+
"google": {
|
|
25
|
+
"accountId": "123-456-7890",
|
|
26
|
+
"pixelId": "AW-987654321",
|
|
27
|
+
"conversionLabel": "xyz",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
**`vitops ads setup`** ensures each platform's domain-verification DNS record. Only four platforms
|
|
35
|
+
verify a domain at all — Meta, TikTok, Pinterest and Snapchat, by apex DNS TXT — and that record is
|
|
36
|
+
the one thing created for you (in Cloudflare, via `CLOUDFLARE_API_TOKEN`; created only, never edited
|
|
37
|
+
or deleted). Google Ads, LinkedIn, Reddit and Microsoft Ads have no domain verification: linking
|
|
38
|
+
there is the tag and the account id, and the run says so rather than skipping in silence. No
|
|
39
|
+
platform Marketing API is called — Meta's needs a system-user token and Google's an approved
|
|
40
|
+
developer token with your own account on the line — so the final "Verify" click is surfaced as a
|
|
41
|
+
reminder. `--dry` prints the plan, `--check` reports drift and exits non-zero.
|
|
42
|
+
|
|
43
|
+
**It asks for what the config is missing.** A verification token does not exist until someone
|
|
44
|
+
fetches it from the platform UI, so a first run prompts for it, naming the exact UI path, folds the
|
|
45
|
+
answer into the plan and writes it to your config. The token is not a secret — it is published in
|
|
46
|
+
DNS, and the platform fetching it back is the ownership proof, exactly like the IndexNow key.
|
|
47
|
+
Prompting requires a TTY: with `--dry`, `--check`, `--no-prompt`, or in CI, you get a named error
|
|
48
|
+
instead and the run never hangs. `--no-write` keeps the answer out of the config.
|
|
49
|
+
|
|
50
|
+
**`vitops ads tags`** prints each pixel as an inert, consent-gated `<script>` — `type="text/plain"`
|
|
51
|
+
with the library URL on `data-src`, so an undecided visitor's page issues no third-party request.
|
|
52
|
+
For Bricks, WordPress, Eleventy: any stack without the Astro integration.
|
|
53
|
+
|
|
54
|
+
**`vitops ads lint`** reports the gaps that are invisible at runtime: a click ID the platform stamps
|
|
55
|
+
that attribution does not capture, a pixel while `site.tracking` is off, a property with no tag id.
|
|
56
|
+
|
|
57
|
+
**`<Ads />` in `@getvitops/astro`**, a sibling of `<Analytics />` rather than part of it — ad
|
|
58
|
+
properties come from the site config, state their own consent category (`marketing` by default,
|
|
59
|
+
rather than being derived), and switch per environment on their own
|
|
60
|
+
(`environments.<env>.ads`, defaulting to `analytics`, then true, so a preview deployment can send
|
|
61
|
+
pageviews without firing conversion pixels). Both components now render through one `<GatedTags />`,
|
|
62
|
+
so the inert markup has a single implementation.
|
|
63
|
+
|
|
64
|
+
**Your cookie notice now discloses every configured pixel** — name, cookies and opt-out — from the
|
|
65
|
+
same table that writes `data-consent-cookies`, so the notice and the revoke cannot disagree. If you
|
|
66
|
+
add `site.ads` to a config whose privacy policy or cookie notice you have already published,
|
|
67
|
+
re-generate and re-read them.
|
|
68
|
+
|
|
69
|
+
`li_fat_id` (LinkedIn) and `epik` (Pinterest) join the click-ID capture vocabulary; a site running
|
|
70
|
+
either platform starts attributing conversions it previously recorded as organic.
|
|
71
|
+
|
|
72
|
+
- e764090: Separate where a processor stores information from whose law can reach it.
|
|
73
|
+
|
|
74
|
+
A processor carried one optional `country`, and the privacy policy flat-deduped it into a single
|
|
75
|
+
sentence. That conflated two facts a disclosure has to keep apart — **where the data rests** and
|
|
76
|
+
**which jurisdiction can compel access** — and privacy law turns on the second: the OPC's concern
|
|
77
|
+
is foreign _access_, not merely foreign storage.
|
|
78
|
+
|
|
79
|
+
Ordinary arrangements were inexpressible. Azure is data-resident in Canada and US-controlled;
|
|
80
|
+
Zoho can serve mail from a Canadian datacentre and telemetry from the US while being headquartered
|
|
81
|
+
in India; a Microsoft 365 tenant can be Canadian with its identity data in the US. For all of
|
|
82
|
+
them every available option was wrong: `country: "Canada"` rendered the incoherent _"outside of
|
|
83
|
+
Canada, including Canada"_, naming the operator's country asserted storage that wasn't happening,
|
|
84
|
+
and omitting it dropped the processor from the disclosure **silently**.
|
|
85
|
+
|
|
86
|
+
**New on a processor:**
|
|
87
|
+
|
|
88
|
+
```jsonc
|
|
89
|
+
{
|
|
90
|
+
"name": "Zoho",
|
|
91
|
+
"purpose": "receiving and storing email sent to us",
|
|
92
|
+
"storage": [
|
|
93
|
+
{ "country": "Canada", "scope": "mail and productivity data" },
|
|
94
|
+
{ "country": "the United States", "scope": "analytics and telemetry" },
|
|
95
|
+
],
|
|
96
|
+
"operatorCountry": "India",
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
- `storage[]` — where information rests, each entry optionally `scope`d to a category. The scope
|
|
101
|
+
is what makes "Canadian tenant, identity data in the US" sayable.
|
|
102
|
+
- `operatorCountry` — the jurisdiction that can compel the provider to produce it. Gets its own
|
|
103
|
+
sentence: _"…established in, or controlled from, jurisdictions outside of Canada, including
|
|
104
|
+
India. Personal information those providers handle on our behalf may be subject to the laws of
|
|
105
|
+
those jurisdictions even when it is stored in Canada."_
|
|
106
|
+
- `country` still works, as shorthand asserting **both** facts — which is what it always
|
|
107
|
+
asserted, since the sentence it fed claimed storage and legal reach in one breath.
|
|
108
|
+
|
|
109
|
+
**Combining `country` with either explicit field is rejected** by `vitops validate`. Whether the
|
|
110
|
+
shorthand narrows the explicit fact or adds to it are two readings that make contradictory legal
|
|
111
|
+
claims, so neither is guessed.
|
|
112
|
+
|
|
113
|
+
A country in the policy's own jurisdiction is no longer treated as a transfer, which is the
|
|
114
|
+
`country: "Canada"` fix. Comparison ignores case and a leading "the".
|
|
115
|
+
|
|
116
|
+
### This changes text you have already published
|
|
117
|
+
|
|
118
|
+
**Cloudflare, Cloudflare Turnstile, Vercel and Netlify now assert operator jurisdiction and no
|
|
119
|
+
storage.** They previously claimed `the United States` into a sentence saying "stored or processed
|
|
120
|
+
in" — a claim about the wrong fact. Cloudflare is anycast: a request from Toronto is answered from
|
|
121
|
+
a Toronto PoP, and Workers/R2 have residency controls the config cannot see.
|
|
122
|
+
|
|
123
|
+
So a site whose only foreign element is its host or Turnstile **stops claiming foreign storage**
|
|
124
|
+
and instead discloses foreign legal reach. That is a retraction in the direction of accuracy, and
|
|
125
|
+
it deserves a re-read. **If you pin a US region, say so** — declare a processor with
|
|
126
|
+
`storage: [{ country: "the United States" }]`. This generalises the rule the provider table
|
|
127
|
+
already applied to Matomo: "we don't know" is a fact.
|
|
128
|
+
|
|
129
|
+
**Everything else renders identically.** Google Analytics, Tag Manager, Clarity, Plausible,
|
|
130
|
+
Matomo Cloud and any processor you declared with `country` produce the same words as before,
|
|
131
|
+
because the shorthand expands to both facts and the operator sentence is suppressed when it would
|
|
132
|
+
only restate a country already disclosed as storage. The one cosmetic change: the closing
|
|
133
|
+
"subject to access requests…" sentence is now its own paragraph, since it is shared by both
|
|
134
|
+
clauses.
|
|
135
|
+
|
|
136
|
+
**A processor with no location at all is now reported** on stderr by `vitops legal`, naming the
|
|
137
|
+
document it will be missing from. It cannot appear in a transfer disclosure — there is nothing
|
|
138
|
+
true to say — but it used to vanish in silence, which is the failure that looks tidy. It is not a
|
|
139
|
+
validation error: a bare `{ name, purpose }` is still valid.
|
|
140
|
+
|
|
141
|
+
New exports from `@getvitops/generator`: `processorsMissingLocation`, `JURISDICTION_COUNTRIES`,
|
|
142
|
+
and the `ProcessorStorage` type. `PolicyVars` gains `jurisdictionCountry`, `storageCountries`,
|
|
143
|
+
`scopedStorage` and `operatorCountries`; `countries` is **deprecated but retained**, and still
|
|
144
|
+
names every country it ever named, so a custom template keeps rendering what it rendered.
|
|
145
|
+
|
|
146
|
+
### Patch Changes
|
|
147
|
+
|
|
148
|
+
- Updated dependencies [2c890c0]
|
|
149
|
+
- @getvitops/utils@4.1.0
|
|
150
|
+
|
|
151
|
+
## 4.0.0
|
|
152
|
+
|
|
153
|
+
### Major Changes
|
|
154
|
+
|
|
155
|
+
- f7bc0a0: Add `vitops search setup` — onboard domains into Google Search Console as domain properties.
|
|
156
|
+
|
|
157
|
+
**Breaking:** the `vitops indexing` command has been renamed to **`vitops search notify`**. There is
|
|
158
|
+
no alias — update any scripts or CI that call `vitops indexing` to `vitops search notify` (same flags,
|
|
159
|
+
same behaviour).
|
|
160
|
+
|
|
161
|
+
**New: `vitops search setup`.** For each domain in a site config's new `site.searchConsole` block
|
|
162
|
+
(a record keyed by bare hostname), it:
|
|
163
|
+
- ensures the apex verification TXT record in Cloudflare,
|
|
164
|
+
- verifies ownership via the Site Verification API (DNS_TXT), retried with exponential backoff while
|
|
165
|
+
DNS propagates — a still-unverified domain is reported **PENDING**, not failed,
|
|
166
|
+
- adds the `sc-domain:` property via the Search Console API,
|
|
167
|
+
- adds any `delegatedOwners` to the verified Site Verification web resource.
|
|
168
|
+
|
|
169
|
+
It is idempotent (a re-run of an onboarded domain is a no-op), supports `--check` (report drift, exit
|
|
170
|
+
non-zero, mutate nothing) and `--dry` (print the plan, change nothing), and `--domain <name>` to
|
|
171
|
+
scope to one entry. DNS records are only ever created, never edited or deleted.
|
|
172
|
+
|
|
173
|
+
Credentials come from the environment, never the config: `CLOUDFLARE_API_TOKEN` (a `Zone:DNS:Edit`
|
|
174
|
+
token) and a Google **user OAuth refresh token** as `VITOPS_GOOGLE_CLIENT_ID` /
|
|
175
|
+
`VITOPS_GOOGLE_CLIENT_SECRET` / `VITOPS_GOOGLE_REFRESH_TOKEN` (scoped to `siteverification` +
|
|
176
|
+
`webmasters`). Granting a Google Group **Full-User** access has no Search Console API and is surfaced
|
|
177
|
+
as a reminder in the summary rather than automated.
|
|
178
|
+
|
|
179
|
+
### Minor Changes
|
|
180
|
+
|
|
181
|
+
- 14813fa: Document which tier provides each pattern — `vitops docs components`.
|
|
182
|
+
|
|
183
|
+
The toolkit ships four tiers that compose: CSS framework classes, `<wc-*>` web components, Astro
|
|
184
|
+
components, Bricks elements. Nothing said so. The class reference listed pattern names, the
|
|
185
|
+
elements reference listed Bricks controls, and the fact that `tree` is _also_ a web component
|
|
186
|
+
_and_ an Astro component existed only in the source layout. The cost is silent: you hand-write
|
|
187
|
+
the markup a component already emits, or you wrap a component that already emits its own tag.
|
|
188
|
+
|
|
189
|
+
`TIERS` in `@getvitops/generator` is the new manifest — per pattern, its CSS partial and
|
|
190
|
+
representative classes, its `wc-*` tag and which bundle that ships in, its Astro component(s),
|
|
191
|
+
its Bricks element, and one line saying what to actually write. `tierPatterns(tier)` projects one
|
|
192
|
+
tier. `vitops docs components` renders all four in one document, and the reference sections it
|
|
193
|
+
feeds render the same data per tier.
|
|
194
|
+
|
|
195
|
+
It is **authored rather than derived, and drift-guarded** instead. Naming convention carries most
|
|
196
|
+
of it and breaks exactly where it matters — `splitter.css` hosts two components, `tag.css` serves
|
|
197
|
+
three config patterns, `anchor-link.css` provides `.link`, `layout.css` provides `.split` and
|
|
198
|
+
`.centered` — so a derivation would need an exceptions table longer than the rule, and a rename
|
|
199
|
+
would silently drop a link. Instead, tests fail the build when a hand-written CSS partial, a
|
|
200
|
+
`customElements.define`, an exported Astro component or a Bricks element isn't accounted for.
|
|
201
|
+
|
|
202
|
+
Four things the manifest records that cannot be inferred, each a real failure mode:
|
|
203
|
+
- **Whether an Astro component wraps a web component.** `Tree` and `CookieConsent` emit the
|
|
204
|
+
`<wc-*>` tag with the fallback inside; `Details`, `Drawer`, `Popover`, `NavShell` and `Subgrid`
|
|
205
|
+
emit tier-1 markup with no web component at all. Reading the first group as the second gives
|
|
206
|
+
`<wc-tree><Tree /></wc-tree>` — two elements on one tree, which renders and misbehaves.
|
|
207
|
+
- **Where each element ships.** `elements.js` for the registered set, its own bundle for
|
|
208
|
+
`<wc-consent>` and `<wc-theme-editor>`, and **no bundle at all** for the four editor-v2 tags —
|
|
209
|
+
which are registered, importable-looking and inert in a consumer project. The guard checks this
|
|
210
|
+
against what `js/elements.ts` imports, so it can't claim an element ships when it doesn't.
|
|
211
|
+
- **Whether a pattern is config-authored.** `patterns.items` patterns get the token cascade,
|
|
212
|
+
states, role variants and override hooks; a structural partial gets none of them. The docs also
|
|
213
|
+
now say when a config-authored pattern is **absent from your config**, because naming its
|
|
214
|
+
classes while your build emits none of them is worse than omitting it.
|
|
215
|
+
- **The import specifier, verbatim.** These are published as the line to copy, so they are checked
|
|
216
|
+
against `@getvitops/astro`'s `exports`. That guard immediately caught
|
|
217
|
+
`@getvitops/astro/components/../CookieConsent.astro` — plausible-looking, right basename, not an
|
|
218
|
+
importable path (`CookieConsent.astro` ships from the package root).
|
|
219
|
+
|
|
220
|
+
- c6b99e7: Ad-click attribution and conversion notifications ship as part of the toolchain.
|
|
221
|
+
|
|
222
|
+
A visitor arriving on an ad carries a click ID in the URL; `<Tracking />` captures it into a first-party `_ac` cookie, and when that visitor later submits a form or taps a `tel:` link, the conversion handler reads the cookie back and notifies whoever the config says. Previously this was per-site code.
|
|
223
|
+
|
|
224
|
+
**Added — `@getvitops/utils/tracking`.** The attribution vocabulary and cookie, as pure functions over a cookie _string_ so the browser capture and the server-side handler share one implementation: `parseTrackingCookie`, `serializeTrackingCookie`, `mergeTracking`, `identifyPlatform`, `getPrimaryClickId`, plus the click-ID/UTM tables. No DOM, no network, no clock — every function that needs "now" takes it as an argument, so it runs unchanged in a Worker.
|
|
225
|
+
|
|
226
|
+
**Added — `@getvitops/utils/notify`.** Conversion notifications, split the way `indexing/` is: `plan.ts` decides everything purely (which channels fire, who they reach, and **why anything is skipped**), `render.ts` turns the event into prose, `email.ts` executes and decides nothing. A misconfigured site can therefore be told exactly why no notification will arrive — a silently unsent one is indistinguishable from no conversion.
|
|
227
|
+
|
|
228
|
+
The `ConversionEvent` is the abstraction: the event is the _fact_, and how it reads is the channel's business.
|
|
229
|
+
|
|
230
|
+
**Added — the `email` channel, via Cloudflare Email Sending.** Uses the current structured binding (`env.EMAIL.send({ to, from, subject, html, text })`), not the legacy `EmailMessage` + hand-built MIME path. The binding is **passed in, never imported**, so `@getvitops/utils` takes no Cloudflare dependency and the sender is testable with a stub. Retries only the transient error codes; a configuration fault like `E_SENDER_NOT_VERIFIED` is surfaced verbatim rather than collapsed into "send failed". With no binding it prints the notification — the dev path.
|
|
231
|
+
|
|
232
|
+
Remember to onboard the sending domain (`wrangler email sending enable <domain>`) and add `"send_email": [{ "name": "EMAIL" }]` to `wrangler.jsonc`, or every send fails.
|
|
233
|
+
|
|
234
|
+
**Added — `<Tracking />` and `createConversionRoute()`** in `@getvitops/astro` (`@getvitops/astro/Tracking.astro`, `@getvitops/astro/routes`). The route factory handles both the `tel:` beacon and a form POST; validation and business rules stay the consumer's, because every site's form differs. A failed notification never fails the request — the visitor has already submitted, and refusing them because our mail didn't go out turns a lost notification into a lost conversion.
|
|
235
|
+
|
|
236
|
+
**Added — `site.tracking` and a widened `site.notifications`.** `notifications.email` now accepts a full channel object as well as a bare address (which still means what it did). `tracking` gains `category`.
|
|
237
|
+
|
|
238
|
+
**Fixed — the capture script now asks for consent instead of only reading it.** It previously checked `granted('marketing')` passively, which under the demand-driven banner is a permanent no-op: nothing else on a page demands `marketing`, so the banner never offered it, so it was never granted, so `_ac` was never written — silently, on every site with the gate enabled. It now calls `require()`, which is what raises the banner, and only when the URL actually carried a click ID or UTM. A visitor arriving organically has nothing to attribute and is never asked.
|
|
239
|
+
|
|
240
|
+
The integration adds `marketing` to the offered categories when tracking is on, so the banner has a row for the category the script will demand, and warns when tracking is enabled with `consent` off.
|
|
241
|
+
|
|
242
|
+
**Fixed — revoking consent now clears `_ac`.** The marker `<Tracking />` emits carries `data-consent-cookies`, which the consent runtime's cleanup reads. There was no cleanup path for this cookie before.
|
|
243
|
+
|
|
244
|
+
**Fixed — the cookie notice discloses `_ac`.** It is first-party, so no provider table would ever name it, and a site running attribution alongside a cookieless analytics provider was previously described as setting no cookies at all.
|
|
245
|
+
|
|
246
|
+
- c6b99e7: Consent is now demand-driven: the banner appears when something actually needs permission, not on every first visit.
|
|
247
|
+
|
|
248
|
+
Previously, enabling the gate showed a banner to every new visitor regardless of what the site did — including sites whose only analytics provider was cookieless, where there was nothing to consent to. The build decided whether the machinery shipped and the runtime showed the banner because no cookie existed yet.
|
|
249
|
+
|
|
250
|
+
Now those are two separate facts. The build decides what the banner _can_ ask (rows in the markup); the runtime decides what it _does_ ask. A gated tag registers its demand when it reaches its loading strategy, and `<color-scheme-toggle>` registers `preferences` when a visitor picks a scheme. A site that gates nothing never interrupts anyone.
|
|
251
|
+
|
|
252
|
+
**Breaking — consent cookie schema (v1 → v2).** Consent is now recorded per category as granted / declined / **not yet asked**. The third state is what lets a later demand ask about a category an earlier prompt didn't cover: accepting an analytics banner no longer silently declines preferences. Every stored v1 choice is invalid and re-prompts once — a v1 cookie asserted a definite answer for categories the visitor was never shown.
|
|
253
|
+
|
|
254
|
+
**Breaking — `ConsentApi`.**
|
|
255
|
+
- `needed()` now means "something demanded a category the visitor hasn't answered", not "no cookie yet". A custom banner calling it will now stay hidden until something asks.
|
|
256
|
+
- `ConsentState.decided` (a single boolean) is gone. Use `decidedFor(state, category)`, or `undecidedCategories(state)`.
|
|
257
|
+
- New: `require(category)` registers a demand and reports whether it is granted; `request(category)` resolves once the visitor answers it; `demanded()` lists what has asked so far.
|
|
258
|
+
- `acceptAll()` / `rejectAll()` still mean every optional category. The banner no longer routes its buttons through them — "Accept" applies to the categories on screen.
|
|
259
|
+
|
|
260
|
+
**Breaking — `<color-scheme-toggle>` persistence.** The chosen scheme still applies immediately, but writing it to `localStorage` now waits on the `preferences` category **when the site has a consent gate**. Sites without `consent` enabled are unaffected and keep storing as before. If your site enables consent and offers a theme toggle, make sure `preferences` is among the offered categories (it is by default).
|
|
261
|
+
|
|
262
|
+
**Changed — offered categories.** `consent.categories` defaults to `['analytics', 'preferences']` (plus `marketing` when a configured tag needs it) rather than only what analytics detection could see. An unused row is hidden markup, so offering broadly costs nothing and covers `data-consent` markup no build-time scan can find. Pass `categories` explicitly to narrow it.
|
|
263
|
+
|
|
264
|
+
**Added — `<Head />` emits a small inline consent stub** when the gate is on. `consent.js` and `elements.js` are both deferred with no ordering between them, so without it a theme toggle could be clicked before the gate existed, read "no gate", and store. The stub answers `false` and queues, and the runtime replays the queue on load.
|
|
265
|
+
|
|
266
|
+
**Fixed — the generated cookie notice** now discloses the stored display preference when `preferences` is offered, and no longer promises a banner "shown when you first visit", which is no longer how the banner works.
|
|
267
|
+
|
|
268
|
+
- 14813fa: Document the consent, conversion-tracking, search and legal subsystems for agents.
|
|
269
|
+
|
|
270
|
+
`vitops docs` gains four topics — `consent`, `tracking`, `search`, `legal` — and the docs
|
|
271
|
+
bundle gains the matching concept docs under `concepts/`. Until now these subsystems were
|
|
272
|
+
described only by their generated config-schema field descriptions, so an agent working in a
|
|
273
|
+
consumer project had no account of the rules that make them work, and every one of those rules
|
|
274
|
+
fails **silently** when broken:
|
|
275
|
+
- a gated tag given a live `src` instead of `type="text/plain"` fetches the third party anyway,
|
|
276
|
+
so the gate becomes decorative;
|
|
277
|
+
- a caller using `granted()` instead of `require()` never raises the banner, so on a site where
|
|
278
|
+
nothing else demands that category the permission is never offered, never granted, and the
|
|
279
|
+
write never happens;
|
|
280
|
+
- an absent `window.vitopsConsent` read as "denied" rather than "this site has no gate";
|
|
281
|
+
- a consent patch widened to every category records consent nobody gave;
|
|
282
|
+
- a sitemap with no `<lastmod>` makes edited pages undetectable, so `search notify` looks
|
|
283
|
+
healthy while never resubmitting anything;
|
|
284
|
+
- a stale IndexNow key file returns `202` and is then discarded;
|
|
285
|
+
- Google's Indexing API accepts ordinary URLs, discards them, and violates its own terms.
|
|
286
|
+
|
|
287
|
+
The packaged agent skill now covers consent and conversion tracking, and its description names
|
|
288
|
+
these subsystems so it is actually surfaced when they are the task.
|
|
289
|
+
|
|
290
|
+
Also fixed: the icons concept doc still called the Astro integration `getvitops()`, renamed to
|
|
291
|
+
`vitops()` in 3.0.
|
|
292
|
+
|
|
293
|
+
- 14813fa: Add `<wc-tree>`, and a schema walker that feeds it.
|
|
294
|
+
|
|
295
|
+
`<wc-tree>` is progressive enhancement for the existing `.tree` pattern: given a nested
|
|
296
|
+
`<details>` disclosure tree it adds a filter, expand-all / collapse-all, and hash deep-linking.
|
|
297
|
+
It ships in `elements.js`.
|
|
298
|
+
|
|
299
|
+
`@getvitops/astro` gains `./components/Tree.astro` and `./components/tree.ts` (its `TreeItem`
|
|
300
|
+
type) to build that markup from data. As with every wrapper over a web component, `<Tree />`
|
|
301
|
+
emits the `<wc-tree>` tag itself with the accessible fallback inside — so `<Tree items={…} />`
|
|
302
|
+
is the whole call, and wrapping it in your own `<wc-tree>` nests two elements on one tree.
|
|
303
|
+
|
|
304
|
+
The slotted markup is the whole content and works without it — every node readable, expandable
|
|
305
|
+
and linkable — so the element only adds what CSS cannot do. Four things worth knowing:
|
|
306
|
+
- **The toolbar is generated, never authored.** A search field that does nothing is worse than
|
|
307
|
+
no search field, so the controls exist only once the element upgrades.
|
|
308
|
+
- **Deep-linking is the non-obvious one.** A node inside a closed `<details>` has no layout box,
|
|
309
|
+
so the browser's own fragment navigation finds nothing and silently stays at the top of the
|
|
310
|
+
page. `<wc-tree>` opens the target's ancestors — and the target's own disclosure — then scrolls.
|
|
311
|
+
- **Filtering matches a node's own label and description, never its subtree's text.** The obvious
|
|
312
|
+
`textContent` implementation makes every ancestor of a hit match, so the root matches any query
|
|
313
|
+
and the filter narrows nothing. That decision lives in a pure, tested module (`matchTree`)
|
|
314
|
+
rather than in the DOM wiring.
|
|
315
|
+
- **It initialises even when upgraded mid-insertion.** An element connected during an
|
|
316
|
+
`innerHTML` write — a view-transition swap, a client-side navigation — has no children yet
|
|
317
|
+
(measured: zero). Setup retries once the insertion completes, because the failure mode was
|
|
318
|
+
silent: no toolbar, no filter, no deep link, no error.
|
|
319
|
+
|
|
320
|
+
`patterns/tree.css` now supports two markup shapes: the item may be the `<details>` (the
|
|
321
|
+
pattern's original contract) or an `<li class="tree__item">` wrapping one, which is what gives
|
|
322
|
+
assistive tech list position and depth.
|
|
323
|
+
|
|
324
|
+
**`.tree` indent is fixed and now fluid**, which matters for any deep tree. Three separate leaks
|
|
325
|
+
compounded, each invisible in the CSS and each charging roughly one extra indent per level:
|
|
326
|
+
- the rule set both `margin-inline-start` and `padding-inline-start` to `--tree-indent`;
|
|
327
|
+
- `.tree { padding: var(--_p) }` applied to every nested `.tree`, not just the outermost — on all
|
|
328
|
+
four sides, so it narrowed from the end as well;
|
|
329
|
+
- `patterns/details.css` gives every non-summary child of a `<details>`
|
|
330
|
+
`margin-inline: var(--_content-margin)`, and its `details, .details` selector takes `:is()`
|
|
331
|
+
specificity under CSS nesting (**0-1-1**), so `.tree { margin: 0 }` at 0-1-0 _loses_ to it. A
|
|
332
|
+
nested tree is exactly such a child.
|
|
333
|
+
|
|
334
|
+
Measured in a browser: **41px per level against a 24px design**, so a 9-deep tree spent 382px on
|
|
335
|
+
indent and left its deepest label 162px wide. Now 24px per level, 198px total, and 653px of label.
|
|
336
|
+
The nested rule resets both box axes before applying the one indent it owes, and the default is
|
|
337
|
+
`clamp(0.75rem, 2.5vw, 1.5rem)` — 12px on a phone, 24px on a desktop — because a tree's depth is a
|
|
338
|
+
property of the data and cannot be known when the pattern is written. `--tree-indent` still
|
|
339
|
+
overrides it, and the `--lines` elbow derives from the same resolved value so the two cannot
|
|
340
|
+
disagree.
|
|
341
|
+
|
|
342
|
+
**Leaf rows now align with their branch siblings.** A branch spends a toggle column on its chevron
|
|
343
|
+
before its label; a leaf has none, so every leaf label sat one full column (24px, measured) to the
|
|
344
|
+
inline-start of its siblings and nothing at a given depth lined up. `.tree` exposes
|
|
345
|
+
`--_node-indent` (the toggle column) and `--_leaf-indent` (what a row without a toggle owes to
|
|
346
|
+
reach the same label column); `.tree__content` and `.tree__desc` both read the latter rather than
|
|
347
|
+
re-deriving the sum.
|
|
348
|
+
|
|
349
|
+
`<wc-tree>` also wraps its generated filter in `.input-group`, because `forms.css` styles text
|
|
350
|
+
controls as `.form-group > input` / `.input-group > input` — a bare `<input>` rendered with the
|
|
351
|
+
browser's 2px inset border and square corners next to the framework's own rounded controls.
|
|
352
|
+
|
|
353
|
+
`schemaTreeNodes(schema, { idPrefix, maxDepth, prune })` is new in `@getvitops/generator`: it walks
|
|
354
|
+
a JSON Schema — the same walk behind the `authoring.md` / `config.md` references — and returns tree
|
|
355
|
+
**data**, not markup, so each medium renders it (markdown for agents, an accessible `<details>`
|
|
356
|
+
tree for a site). Field ids are dotted config paths (`site.analytics.clarityId`), so any field can
|
|
357
|
+
be linked to directly.
|
|
358
|
+
|
|
359
|
+
`prune` exists for a specific hazard. The project config declares `designSystem.themes` as a
|
|
360
|
+
looser shape than `DesignSystemSchema`, because the full one is applied separately by
|
|
361
|
+
`resolveTheme` — so its embedded copy is an **approximation**, and measurably missing the
|
|
362
|
+
descriptions for `colors`, `colors.palette`, `colors.roles` and `colors.utilities`. Anything
|
|
363
|
+
rendering that copy as the token reference would silently document the colour system less well
|
|
364
|
+
than the toolchain already does; `prune` lets a caller stop at the wrapper and render `jsonSchema`
|
|
365
|
+
alongside instead.
|
|
366
|
+
|
|
367
|
+
`renderInlineMarkdown()` is exported for schema description text. It **lifts code spans out before
|
|
368
|
+
applying emphasis**, and that ordering is load-bearing rather than tidy: `colors.utilities`
|
|
369
|
+
describes its families as `` `bg-*` ``, `` `text-*` ``, `` `border-*` `` — literal asterisk
|
|
370
|
+
_wildcards_. Run emphasis over the raw string and the `*` closing `bg-*` pairs with the one
|
|
371
|
+
closing `text-*`, italicising the text between two unrelated utilities and eating both asterisks,
|
|
372
|
+
leaving prose that names families which don't exist. It also now renders single-asterisk emphasis,
|
|
373
|
+
which the schema does use (`*presentation*`, `*domain properties*`) and which previously printed
|
|
374
|
+
the asterisks literally.
|
|
375
|
+
|
|
376
|
+
Also fixed: `config.md` claimed "Only the wrapper is listed here" under `designSystem` and then
|
|
377
|
+
emitted the entire token schema anyway — `themes.<name>` _is_ a design system, so the walk
|
|
378
|
+
descended into it. It now stops at the wrapper and delegates to `authoring.md` as it always said
|
|
379
|
+
it did.
|
|
380
|
+
|
|
381
|
+
### Patch Changes
|
|
382
|
+
|
|
383
|
+
- Updated dependencies [c6b99e7]
|
|
384
|
+
- Updated dependencies [f7bc0a0]
|
|
385
|
+
- Updated dependencies [ceed51f]
|
|
386
|
+
- @getvitops/utils@4.0.0
|
|
387
|
+
|
|
3
388
|
## 3.0.0
|
|
4
389
|
|
|
5
390
|
### Major Changes
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* Vitops — Color Scheme Toggle element (Bricks Builder).
|
|
4
4
|
*
|
|
5
|
-
* Renders the <color-scheme-toggle> Lit component (src/web-components/WCColorSchemeToggle.ts):
|
|
5
|
+
* Renders the <wc-color-scheme-toggle> Lit component (src/web-components/WCColorSchemeToggle.ts):
|
|
6
6
|
* a segmented System / Light / Dark theme toggle, hidden until JS loads. Optionally seed
|
|
7
7
|
* the initial `scheme`.
|
|
8
8
|
*
|
|
@@ -21,7 +21,7 @@ class Vitops_Element_Color_Scheme_Toggle extends \Bricks\Element {
|
|
|
21
21
|
public $category = 'vitops';
|
|
22
22
|
public $name = 'vitops-color-scheme-toggle';
|
|
23
23
|
public $icon = 'ti-shine';
|
|
24
|
-
public $css_selector = 'color-scheme-toggle';
|
|
24
|
+
public $css_selector = 'wc-color-scheme-toggle';
|
|
25
25
|
|
|
26
26
|
public function get_label() {
|
|
27
27
|
return esc_html__( 'Color Scheme Toggle', 'bricks' );
|
|
@@ -56,6 +56,6 @@ class Vitops_Element_Color_Scheme_Toggle extends \Bricks\Element {
|
|
|
56
56
|
|
|
57
57
|
$attr_str = implode( ' ', $attrs );
|
|
58
58
|
|
|
59
|
-
echo "<color-scheme-toggle {$attr_str} {$this->render_attributes( '_root' )}></color-scheme-toggle>";
|
|
59
|
+
echo "<wc-color-scheme-toggle {$attr_str} {$this->render_attributes( '_root' )}></wc-color-scheme-toggle>";
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* Vitops — Multi Field element (Bricks Builder).
|
|
4
4
|
*
|
|
5
|
-
* Renders the <wc-
|
|
5
|
+
* Renders the <wc-multi-field> Lit component (src/web-components/WCMultiField.ts): a
|
|
6
6
|
* form-associated repeatable input group (add / remove entries, min / max). Default
|
|
7
7
|
* entries are supplied as slotted <input value="…"> children, which the component reads
|
|
8
8
|
* on connect.
|
|
@@ -22,7 +22,7 @@ class Vitops_Element_Multi_Field extends \Bricks\Element {
|
|
|
22
22
|
public $category = 'vitops';
|
|
23
23
|
public $name = 'vitops-multi-field';
|
|
24
24
|
public $icon = 'ti-list';
|
|
25
|
-
public $css_selector = 'wc-
|
|
25
|
+
public $css_selector = 'wc-multi-field';
|
|
26
26
|
|
|
27
27
|
public function get_label() {
|
|
28
28
|
return esc_html__( 'Multi Field', 'bricks' );
|
|
@@ -143,6 +143,6 @@ class Vitops_Element_Multi_Field extends \Bricks\Element {
|
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
echo "<wc-
|
|
146
|
+
echo "<wc-multi-field {$attr_str} {$this->render_attributes( '_root' )}>{$inputs}</wc-multi-field>";
|
|
147
147
|
}
|
|
148
148
|
}
|
|
@@ -75,15 +75,26 @@
|
|
|
75
75
|
margin-inline-start: auto;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
/* The per-category checkboxes.
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
/* The per-category checkboxes. A row is hidden unless this showing is about it,
|
|
79
|
+
so the markup can carry every category the site might ever need while the
|
|
80
|
+
banner still only asks what was actually demanded. */
|
|
81
81
|
.consent__options {
|
|
82
82
|
flex-basis: 100%;
|
|
83
83
|
display: flex;
|
|
84
84
|
flex-wrap: wrap;
|
|
85
85
|
gap: 1rem;
|
|
86
86
|
}
|
|
87
|
+
|
|
88
|
+
/* One category is a yes/no question and the Reject/Accept buttons already ask
|
|
89
|
+
it — a lone checkbox would be a third control for the same decision, and the
|
|
90
|
+
Save button a second way to press Accept. `<wc-consent>` sets this class at
|
|
91
|
+
show time because how many rows are on offer is now a runtime fact. */
|
|
92
|
+
&.consent--single {
|
|
93
|
+
.consent__options,
|
|
94
|
+
[data-consent-save] {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
87
98
|
}
|
|
88
99
|
|
|
89
100
|
/* Open, in the top layer. */
|