@getvitops/astro 0.4.2 → 0.8.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 +276 -0
- package/README.md +85 -0
- package/dist/index.d.mts +12 -0
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +10 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -7
- package/src/components/Head.astro +39 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
# @getvitops/astro
|
|
2
|
+
|
|
3
|
+
## 0.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- a334049: Make the semantic icon mapping reachable, and fail the build on unresolvable names.
|
|
8
|
+
|
|
9
|
+
`generateIconInclude()` — declare the semantic icon names a site needs plus which sets to draw
|
|
10
|
+
them from, get back the `include` map that keeps the bundle to just those glyphs — already existed
|
|
11
|
+
but was unreachable: it lived in `@getvitops/core/src/utils/`, which the package doesn't export.
|
|
12
|
+
It has moved to `@getvitops/utils` (a build-time concern, in the build-time utilities package),
|
|
13
|
+
which `@getvitops/astro` re-exports wholesale. So from `astro.config.mjs`:
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { generateIconInclude } from '@getvitops/astro';
|
|
17
|
+
import icon from 'astro-icon';
|
|
18
|
+
|
|
19
|
+
integrations: [
|
|
20
|
+
icon({
|
|
21
|
+
include: generateIconInclude({
|
|
22
|
+
ui: 'fa7-solid',
|
|
23
|
+
brand: 'simple-icons',
|
|
24
|
+
semantic: ['menu', 'close', 'search', 'github'],
|
|
25
|
+
}),
|
|
26
|
+
}),
|
|
27
|
+
];
|
|
28
|
+
// → { "fa7-solid": ["bars","xmark","magnifying-glass"], "simple-icons": ["github"] }
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Swapping `ui` to `'lucide'` yields `{ lucide: ["menu","x","search"] }` from the same declaration —
|
|
32
|
+
which is the point: the semantic names are what your markup commits to, and the set is a config
|
|
33
|
+
choice. The output shape is the `include` both `astro-icon` and `astro-iconset` accept, so the
|
|
34
|
+
mapping doesn't tie you to either.
|
|
35
|
+
|
|
36
|
+
**Unresolvable names are now a build error.** Previously they were skipped silently, so swapping
|
|
37
|
+
sets appeared to succeed and the gaps surfaced as missing glyphs in production. The error names
|
|
38
|
+
every offender; an unknown set name throws too, listing the known sets.
|
|
39
|
+
|
|
40
|
+
Also fixes `@getvitops/create`'s emdash template, which pinned `@getvitops/astro: ^0.4.0` — a range
|
|
41
|
+
that stopped resolving when astro joined the fixed group at 0.7.0, so scaffolded projects were
|
|
42
|
+
stuck on the old line.
|
|
43
|
+
|
|
44
|
+
- **New: `<wc-theme-editor>`, a live theme editor you can ship with your site.**
|
|
45
|
+
|
|
46
|
+
Tune the whole design system in the browser — palette, semantic roles, type roles, spacing, layout,
|
|
47
|
+
pattern geometry, radii, shadows — with no rebuild. Edits are layered as `:root` custom-property
|
|
48
|
+
overrides, persist to localStorage, and export as CSS or as a `design-system.json` patch. It follows
|
|
49
|
+
your site's colour scheme and drives the same `data-theme` + storage key as `<color-scheme-toggle>`,
|
|
50
|
+
so the two no longer fight.
|
|
51
|
+
|
|
52
|
+
It ships as a **separate, opt-in bundle** (`@getvitops/core/editor`, ~13 kB, no Lit) and is never
|
|
53
|
+
registered in `elements.js`: a page that doesn't ask for it pays nothing.
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
// astro.config.mjs
|
|
57
|
+
getvitops({
|
|
58
|
+
css: { input: 'design-system.json', format: 'css', out: 'src/styles' },
|
|
59
|
+
editor: true,
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<!-- anywhere in your layout -->
|
|
65
|
+
<wc-theme-editor></wc-theme-editor>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
`editor: true` copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors
|
|
69
|
+
`design-manifest.json` to `/vitops/design-manifest.json` (override with the `manifest` attribute).
|
|
70
|
+
Outside Astro, load the bundle yourself and point `manifest` at the file.
|
|
71
|
+
|
|
72
|
+
**Save straight back to your config, in dev.** `@getvitops/vite` now serves a dev-only
|
|
73
|
+
`/__vitops/design-system` endpoint: the editor POSTs its patch, the plugin deep-merges it into your
|
|
74
|
+
`design-system.json`, validates the _merged_ result, writes it back preserving the file's formatting,
|
|
75
|
+
then regenerates and reloads. The endpoint exists only under `vite dev` — on a static deploy the
|
|
76
|
+
editor detects its absence and hides the button, while everything else still works.
|
|
77
|
+
|
|
78
|
+
**Added:** `colors.roleTokens` in `design-manifest.json` — the functional token set (bg / border /
|
|
79
|
+
solid / on-solid / text / emphasis stops) precomputed per hue, in `default` and `surface` variants for
|
|
80
|
+
both appearances. Re-pointing a role at another hue needs these: `solid` is chosen by scanning the hue
|
|
81
|
+
and `on-solid` is a computed contrast value, so neither is derivable by a browser client.
|
|
82
|
+
|
|
83
|
+
**Removed:** the dead `interaction` block from `design-manifest.json` — a hardcoded
|
|
84
|
+
`{duration, easing}` literal with no schema key, no reverse-index entry, and no corresponding CSS
|
|
85
|
+
variable. Nothing could have consumed it meaningfully. The real animation knobs are
|
|
86
|
+
`--animation-duration-*` / `--custom-ease-*`.
|
|
87
|
+
|
|
88
|
+
**Fixed:** a `[popover]` reset in `popover.css` was stripping the background, padding and border from
|
|
89
|
+
any pattern used as a popover. It is imported after `drawer.css`, so at equal specificity it beat
|
|
90
|
+
`.drawer` — and `dialog` (0-0-1) too — leaving a `.drawer[popover]` transparent and unpadded despite
|
|
91
|
+
drawer.css documenting popover as supported. The reset now sits in `:where()` at zero specificity, so
|
|
92
|
+
it still overrides the UA stylesheet but any pattern class takes its surface back. Open/closed
|
|
93
|
+
behaviour is unchanged.
|
|
94
|
+
|
|
95
|
+
**Added:** `input[type="range"]` and `input[type="color"]` now have baseline styling in `forms.css`
|
|
96
|
+
(accent colour from `--ui-primary-solid`; the colour swatch picks up the control border and radius).
|
|
97
|
+
|
|
98
|
+
### Patch Changes
|
|
99
|
+
|
|
100
|
+
- aa2863d: Persist the colour scheme across navigations, and drop the UA body margin.
|
|
101
|
+
|
|
102
|
+
**The colour scheme now sticks.** `<color-scheme-toggle>` records the explicit choice in
|
|
103
|
+
`localStorage` (`vitops-color-scheme`) and restores it on load. Previously every navigation reset
|
|
104
|
+
to System — the component defaulted to `system` on each page and its `disconnectedCallback` even
|
|
105
|
+
deleted the attribute on unmount, so the scheme was per-page state rather than a user preference.
|
|
106
|
+
Choosing System clears the key, so a visitor can go back to following their OS.
|
|
107
|
+
|
|
108
|
+
`<Head />` from `@getvitops/astro` now also emits a tiny synchronous script that applies the stored
|
|
109
|
+
value **before first paint**. Without it the persisted choice would still work, but every page
|
|
110
|
+
would render light and flip once the deferred element bundle upgraded. A test asserts the storage
|
|
111
|
+
key stays in step between the two (they can't share an import: core exports only prebuilt bundles,
|
|
112
|
+
and the Head script must be a literal in the emitted HTML).
|
|
113
|
+
|
|
114
|
+
**`body { margin: 0 }`** is now part of the framework. The UA's 8px margin offset every full-bleed
|
|
115
|
+
surface — sticky headers and `bg-*` bands rendered inset with a sliver of canvas around them, since
|
|
116
|
+
the framework owns page gutters through `.centered`'s `--gutter`. This is the only UA reset the
|
|
117
|
+
framework makes; it deliberately still ships no general reset (no global `box-sizing` change),
|
|
118
|
+
which would silently reflow existing layouts.
|
|
119
|
+
|
|
120
|
+
**Migration:** if you were compensating for the body margin with a negative offset or your own
|
|
121
|
+
`body { margin: 0 }`, you can drop it. Sites relying on the 8px inset will need to add their own
|
|
122
|
+
padding.
|
|
123
|
+
|
|
124
|
+
- Updated dependencies
|
|
125
|
+
- @getvitops/core@0.8.0
|
|
126
|
+
- @getvitops/generator@0.8.0
|
|
127
|
+
- @getvitops/vite@0.8.0
|
|
128
|
+
- @getvitops/utils@0.8.0
|
|
129
|
+
|
|
130
|
+
## 0.7.0
|
|
131
|
+
|
|
132
|
+
### Minor Changes
|
|
133
|
+
|
|
134
|
+
- 44de07f: Split the button pattern into two tiers named by intent: `.cta` (persuasion) and `.btn`
|
|
135
|
+
(affordance).
|
|
136
|
+
|
|
137
|
+
**Breaking: a bare `<button>` is no longer a filled brand-primary button.** It now renders as a
|
|
138
|
+
quiet interactive control — geometry, cursor, subtle hover, focus ring — with no fill, no
|
|
139
|
+
`font-weight: 600`, and no shadow.
|
|
140
|
+
|
|
141
|
+
**Migration:** add `class="cta"` to any button that should stay prominent. Submit buttons, hero
|
|
142
|
+
actions, and anything driving a conversion are the usual candidates; dialog closes, toolbar
|
|
143
|
+
buttons, icon buttons and toggles should keep the new default. If you want the old behaviour
|
|
144
|
+
globally, set `patterns.items.btn` in your `design-system.json` back to the previous filled base.
|
|
145
|
+
|
|
146
|
+
New in this release:
|
|
147
|
+
- **`.cta`** — filled, bolder, roomier, lifts on hover. It is a class, not an element rule, so it
|
|
148
|
+
finally works on `<a>` — which is what a call to action usually is, since it navigates. Role
|
|
149
|
+
variants: `.cta-{success,danger,warning,info}`.
|
|
150
|
+
- **`.btn`** — the affordance tier. Emitted as one zero-specificity `:where(button, .btn)` rule, so
|
|
151
|
+
a bare `<button>` gets it with no class, `.btn` carries it to any other tag, and any explicit
|
|
152
|
+
class (including `.cta`, or a component's own class) overrides it without `!important`.
|
|
153
|
+
- **`:where(a, .link)`** — the link pattern now pairs its element with a class the same way.
|
|
154
|
+
- A pattern may now set **both `element` and `class`**, emitting one combined
|
|
155
|
+
`:where(<element>, .<class>)` rule. This is the general mechanism behind the above.
|
|
156
|
+
- A pattern may declare **`fill: true|false`** to state whether states and role variants drive
|
|
157
|
+
`background-color` (plus `on-solid` text) or `color`, instead of relying on the previous
|
|
158
|
+
inference from the pattern's name and base declarations. Existing configs are unaffected — the
|
|
159
|
+
old inference is still the fallback.
|
|
160
|
+
|
|
161
|
+
**Breaking: `chip` is retired as vocabulary.** The two small-label patterns are now split by
|
|
162
|
+
behaviour, not size: **`badge`** is a _static_ label (status, count, category) and **`tag`** is an
|
|
163
|
+
_editable and/or dismissable_ one (e.g. entries in a filter list).
|
|
164
|
+
- `.chip-list` → **`.tag-list`**, and its `--*-chip-list` / `--chip-list-focus-color` tokens →
|
|
165
|
+
`--*-tag-list` / `--tag-list-focus-color`.
|
|
166
|
+
- `.chip-list__chip` and `.chip-list__chip-remove` are **removed**. A tag list is a list of tags, so
|
|
167
|
+
its items are now the existing `.tag` / `.tag__remove` — which also means they pick up tag role
|
|
168
|
+
variants. **Migration:** replace `<span class="chip-list__chip">x <button
|
|
169
|
+
class="chip-list__chip-remove">` with `<span class="tag">x <button class="tag__remove">`. Note the
|
|
170
|
+
items change appearance: `.tag` is outlined (border + neutral text) where the old chip was filled
|
|
171
|
+
with `--color-surface-muted`.
|
|
172
|
+
- The `radii.chip` primitive is **removed** from the example config; it was only ever an alias of
|
|
173
|
+
`--br-tag`. Consumers who set `--br-chip` should use `--br-tag`.
|
|
174
|
+
|
|
175
|
+
**Pattern geometry now resolves through the group alias layer.** Every grouped pattern already
|
|
176
|
+
emitted `--<prop>-<name>-group` aliases (e.g. `--br-btn-group: var(--br-control)`), but most
|
|
177
|
+
patterns bypassed them and hard-coded `var(--br-control, …)` into the rule. `btn`, `cta`, `badge`,
|
|
178
|
+
`tag`, `card` and `status` now reference the alias and restate only their deviations via
|
|
179
|
+
`overrides`, so the whole chain — `--p-btn` → `--p-btn-group` → `--p-control` → `--p-default` — is
|
|
180
|
+
live CSS custom properties, inspectable and editable in the browser. Computed values are unchanged.
|
|
181
|
+
|
|
182
|
+
Also fixed:
|
|
183
|
+
- Role variants on element patterns were emitted at specificity 0-1-1 (`button.danger`), which
|
|
184
|
+
outranked any plain class. They now emit as `:where(button, .btn).danger, .btn-danger` — both at
|
|
185
|
+
class specificity, and reachable from a non-`<button>` host.
|
|
186
|
+
- The `link` pattern declared `default_role: "brand-primary"` while hard-coding a `ui-primary` base
|
|
187
|
+
colour, so hovering shifted hue instead of intensifying. Its `default_role` is now `ui-primary`.
|
|
188
|
+
- `@getvitops/astro`'s `FormRenderer` defaulted its submit button to `class="btn btn-primary"`, a
|
|
189
|
+
class that never existed and a role that is not emitted; it now defaults to `.cta`.
|
|
190
|
+
- The Tailwind bundle is no longer assembled during `css` / `bricks` builds, where it was computed
|
|
191
|
+
and discarded (it also read every framework partial off disk).
|
|
192
|
+
|
|
193
|
+
### Patch Changes
|
|
194
|
+
|
|
195
|
+
- @getvitops/core@0.7.0
|
|
196
|
+
- @getvitops/generator@0.7.0
|
|
197
|
+
- @getvitops/utils@0.7.0
|
|
198
|
+
- @getvitops/vite@0.7.0
|
|
199
|
+
|
|
200
|
+
## 0.4.2
|
|
201
|
+
|
|
202
|
+
### Patch Changes
|
|
203
|
+
|
|
204
|
+
- Updated dependencies [2cc847d]
|
|
205
|
+
- @getvitops/generator@0.6.0
|
|
206
|
+
- @getvitops/vite@0.6.0
|
|
207
|
+
- @getvitops/core@0.6.0
|
|
208
|
+
- @getvitops/utils@0.6.0
|
|
209
|
+
|
|
210
|
+
## 0.4.1
|
|
211
|
+
|
|
212
|
+
### Patch Changes
|
|
213
|
+
|
|
214
|
+
- Updated dependencies
|
|
215
|
+
- @getvitops/generator@0.5.0
|
|
216
|
+
- @getvitops/vite@0.5.0
|
|
217
|
+
- @getvitops/core@0.5.0
|
|
218
|
+
- @getvitops/utils@0.5.0
|
|
219
|
+
|
|
220
|
+
## 0.4.0
|
|
221
|
+
|
|
222
|
+
### Minor Changes
|
|
223
|
+
|
|
224
|
+
- 54a06e9: Add `css.inject` option to `getvitops()` (default `true`). Set `inject: false` to stop the global `page-ssr` stylesheet injection and import the generated CSS from your site layout instead — needed when other integrations add routes that must not inherit the design system (e.g. EmDash's `/_emdash/admin`, which the auto-injected CSS was bleeding into).
|
|
225
|
+
|
|
226
|
+
## 0.3.1
|
|
227
|
+
|
|
228
|
+
### Patch Changes
|
|
229
|
+
|
|
230
|
+
- d7e6491: Extract schema.org JSON-LD graph builders (articleGraph/organizationGraph/breadcrumbGraph/faqGraph) into @getvitops/utils so platform hooks (e.g. the new @getvitops/emdash plugin's future page:metadata contributions) can share them; the corresponding schemas/\*.astro become thin wrappers. Also removes Layout.astro's import of the deleted Polyfills.astro.
|
|
231
|
+
- Updated dependencies [d7e6491]
|
|
232
|
+
- @getvitops/utils@0.4.0
|
|
233
|
+
- @getvitops/core@0.4.0
|
|
234
|
+
- @getvitops/generator@0.4.0
|
|
235
|
+
- @getvitops/vite@0.4.0
|
|
236
|
+
|
|
237
|
+
## 0.3.0
|
|
238
|
+
|
|
239
|
+
### Minor Changes
|
|
240
|
+
|
|
241
|
+
- Extract the framework-agnostic content model + HTML helpers into `@getvitops/utils`
|
|
242
|
+
(new `content`/`html` exports: `Elmnt`/`Link`/`ContentNode` types + guards, `t`,
|
|
243
|
+
`partAttrs`, `parseRenderedSlots`, `toHtml`, `nodesToHtml`, `styleList`, …), and ship
|
|
244
|
+
the generic Astro component tier from `@getvitops/astro/components/*`: `Subgrid`,
|
|
245
|
+
`Cards`, `NodeRenderer`, `WebComponentLoader`, plus `Popover`/`Details`/`Drawer`
|
|
246
|
+
(the latter three use `astro-icon`, now declared as an optional peer). Config-bound
|
|
247
|
+
chrome (Template/SEO/ContentInfo/FormRenderer/Nav/Submenu) stays internal pending the
|
|
248
|
+
EmDash integration.
|
|
249
|
+
|
|
250
|
+
### Patch Changes
|
|
251
|
+
|
|
252
|
+
- Updated dependencies
|
|
253
|
+
- @getvitops/utils@0.3.0
|
|
254
|
+
- @getvitops/core@0.3.0
|
|
255
|
+
- @getvitops/generator@0.3.0
|
|
256
|
+
- @getvitops/vite@0.3.0
|
|
257
|
+
|
|
258
|
+
## 0.2.0
|
|
259
|
+
|
|
260
|
+
### Minor Changes
|
|
261
|
+
|
|
262
|
+
- 4d89eca: Add Schema.org / JSON-LD structured-data components, exported at `@getvitops/astro/schemas/*`
|
|
263
|
+
(`Article`, `Organization`, `LocalBusiness`, `Product`, `Review`, `Event`, `FAQ`, `Recipe`,
|
|
264
|
+
`Breadcrumb`, `JobPosting`, and more) — each emits a typed `<script type="application/ld+json">`
|
|
265
|
+
block at SSR time with no runtime JS. `Head.astro` moved to `src/components/` (the public
|
|
266
|
+
`@getvitops/astro/Head.astro` import is unchanged).
|
|
267
|
+
|
|
268
|
+
## 0.1.1
|
|
269
|
+
|
|
270
|
+
### Patch Changes
|
|
271
|
+
|
|
272
|
+
- Updated dependencies [d28aae7]
|
|
273
|
+
- @getvitops/generator@0.2.1
|
|
274
|
+
- @getvitops/vite@0.2.1
|
|
275
|
+
- @getvitops/core@0.2.1
|
|
276
|
+
- @getvitops/utils@0.2.1
|
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @getvitops/astro
|
|
2
|
+
|
|
3
|
+
Astro integration for the Vitops design system. Generates your design-system CSS at build time,
|
|
4
|
+
copies the web-component bundles into `public/`, generates favicons + a PWA manifest, and gives you
|
|
5
|
+
a `<Head />` component that wires it all into the page.
|
|
6
|
+
|
|
7
|
+
Requires Astro >= 7 (and `astro-icon` >= 1).
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i -D @getvitops/astro
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
// astro.config.mjs
|
|
17
|
+
import { defineConfig } from 'astro/config';
|
|
18
|
+
import getvitops from '@getvitops/astro';
|
|
19
|
+
|
|
20
|
+
export default defineConfig({
|
|
21
|
+
integrations: [
|
|
22
|
+
getvitops({
|
|
23
|
+
css: { input: 'design-system.json', format: 'tailwind', out: 'src/styles' },
|
|
24
|
+
favicon: { source: 'src/assets/logo.svg', name: 'My Site', themeColor: '#0b0b0c' },
|
|
25
|
+
}),
|
|
26
|
+
],
|
|
27
|
+
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```astro
|
|
31
|
+
---
|
|
32
|
+
// src/layouts/Base.astro
|
|
33
|
+
import Head from '@getvitops/astro/Head.astro';
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
<html lang="en">
|
|
37
|
+
<head>
|
|
38
|
+
<Head />
|
|
39
|
+
</head>
|
|
40
|
+
<body><slot /></body>
|
|
41
|
+
</html>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
`<Head />` emits the favicon/PWA tags and the web-component runtime scripts in the correct order and
|
|
45
|
+
priority. It does **not** emit a stylesheet `<link>` — the integration imports the generated CSS into
|
|
46
|
+
Astro's module graph and Astro emits that link itself.
|
|
47
|
+
|
|
48
|
+
## Options
|
|
49
|
+
|
|
50
|
+
| option | default | does |
|
|
51
|
+
| --------------- | -------------------- | ----------------------------------------------------------------- |
|
|
52
|
+
| `css` | off unless given | generate + auto-inject the design-system CSS |
|
|
53
|
+
| `css.input` | `design-system.json` | source config |
|
|
54
|
+
| `css.format` | `tailwind` | `tailwind` \| `css` \| `bricks` |
|
|
55
|
+
| `css.out` | `src/styles` | directory the generated CSS is written to |
|
|
56
|
+
| `css.inject` | `true` | inject the stylesheet into every SSR page |
|
|
57
|
+
| `webComponents` | `true` | copy + link the web-component bundles |
|
|
58
|
+
| `favicon` | off unless given | `source`, `lowResSource`, `name`, `themeColor`, `backgroundColor` |
|
|
59
|
+
|
|
60
|
+
Set `css.inject: false` when another integration adds routes that must not inherit the design system
|
|
61
|
+
(e.g. EmDash's `/_emdash/admin`) — then import the generated file (`<out>/tailwind.css` or
|
|
62
|
+
`<out>/styles.css`) from your own layout, so only your pages are styled.
|
|
63
|
+
|
|
64
|
+
## Components
|
|
65
|
+
|
|
66
|
+
Thin authoring helpers that emit the framework's HTML/CSS patterns — **none require runtime JS**:
|
|
67
|
+
|
|
68
|
+
```astro
|
|
69
|
+
import Subgrid from '@getvitops/astro/components/Subgrid.astro';
|
|
70
|
+
import Cards from '@getvitops/astro/components/Cards.astro';
|
|
71
|
+
import NodeRenderer from '@getvitops/astro/components/NodeRenderer.astro';
|
|
72
|
+
import Popover from '@getvitops/astro/components/Popover.astro';
|
|
73
|
+
import Details from '@getvitops/astro/components/Details.astro';
|
|
74
|
+
import Drawer from '@getvitops/astro/components/Drawer.astro';
|
|
75
|
+
import WebComponentLoader from '@getvitops/astro/components/WebComponentLoader.astro';
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Changelog
|
|
79
|
+
|
|
80
|
+
This package's history: [`CHANGELOG.md`](./CHANGELOG.md) (shipped in the npm tarball, so it
|
|
81
|
+
also reads from `node_modules/@getvitops/astro/CHANGELOG.md`). `@getvitops/core`, `generator`,
|
|
82
|
+
`utils`, `cli`, `vite` and `astro` share one version and are released together — install this at the
|
|
83
|
+
same version as your `@getvitops/cli` / `@getvitops/generator`.
|
|
84
|
+
|
|
85
|
+
Powered by [`@getvitops/generator`](https://www.npmjs.com/package/@getvitops/generator).
|
package/dist/index.d.mts
CHANGED
|
@@ -35,6 +35,18 @@ interface GetvitopsOptions {
|
|
|
35
35
|
webComponents?: boolean;
|
|
36
36
|
/** Generate + auto-inject the design-system CSS. Off unless provided. */
|
|
37
37
|
css?: GetvitopsCssOptions;
|
|
38
|
+
/**
|
|
39
|
+
* Ship the live theme editor (default false).
|
|
40
|
+
*
|
|
41
|
+
* Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors
|
|
42
|
+
* the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves
|
|
43
|
+
* its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a
|
|
44
|
+
* `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.
|
|
45
|
+
*
|
|
46
|
+
* Editing is live on any deploy; **saving back** to `design-system.json` needs the
|
|
47
|
+
* dev server, so on a static build that button simply isn't rendered.
|
|
48
|
+
*/
|
|
49
|
+
editor?: boolean;
|
|
38
50
|
}
|
|
39
51
|
declare function getvitops(opts?: GetvitopsOptions): AstroIntegration;
|
|
40
52
|
//#endregion
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/integration.ts"],"mappings":";;;;;UAuBiB,uBAAA;;EAEf,MAAA;EACA,YAAA;EAHe;EAKf,IAAA;;EAEA,UAAA;EACA,eAAA;AAAA;AAAA,UAGe,mBAAA;EAJf;EAMA,KAAA;EALe;EAOf,MAAA,GAAS,MAAM;EAJA;EAMf,GAAA;;;;;;;;EAQA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,OAAA,GAAU,uBAAA;;EAEV,aAAA;EAFA;EAIA,GAAA,GAAM,mBAAmB;EAFzB;;;;;AAcM;AACP;;;;;EADC,MAAA;AAAA;AAAA,iBA2BsB,SAAA,CAAU,IAAA,GAAM,gBAAA,GAAwB,gBAAgB"}
|
package/dist/index.mjs
CHANGED
|
@@ -37,6 +37,8 @@ function getvitops(opts = {}) {
|
|
|
37
37
|
const root = fileURLToPath(config.root);
|
|
38
38
|
const publicDir = fileURLToPath(config.publicDir);
|
|
39
39
|
const webComponents = opts.webComponents !== false;
|
|
40
|
+
const editor = opts.editor === true;
|
|
41
|
+
if (editor && !opts.css) logger.warn("editor: true needs a `css` config — it reads design-manifest.json.");
|
|
40
42
|
const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);
|
|
41
43
|
let hasSvg = false;
|
|
42
44
|
if (opts.favicon) {
|
|
@@ -58,12 +60,14 @@ function getvitops(opts = {}) {
|
|
|
58
60
|
const coreDist = join(dirname(fileURLToPath(import.meta.resolve("@getvitops/core/package.json"))), "dist");
|
|
59
61
|
const dest = join(publicDir, "vitops");
|
|
60
62
|
if (existsSync(coreDist)) {
|
|
61
|
-
|
|
63
|
+
const bundles = [
|
|
62
64
|
"polyfills.js",
|
|
63
65
|
"deferred.js",
|
|
64
66
|
"elements.js",
|
|
65
67
|
"polyfills"
|
|
66
|
-
]
|
|
68
|
+
];
|
|
69
|
+
if (editor) bundles.push("editor.js");
|
|
70
|
+
for (const f of bundles) {
|
|
67
71
|
const src = join(coreDist, f);
|
|
68
72
|
if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });
|
|
69
73
|
}
|
|
@@ -78,7 +82,8 @@ function getvitops(opts = {}) {
|
|
|
78
82
|
}) : [],
|
|
79
83
|
themeColor: opts.favicon?.themeColor ?? null,
|
|
80
84
|
webComponents,
|
|
81
|
-
wcBase: "/vitops"
|
|
85
|
+
wcBase: "/vitops",
|
|
86
|
+
editor
|
|
82
87
|
})] } });
|
|
83
88
|
if (opts.css) {
|
|
84
89
|
const format = opts.css.format ?? "tailwind";
|
|
@@ -86,7 +91,8 @@ function getvitops(opts = {}) {
|
|
|
86
91
|
const plugins = [vitops({
|
|
87
92
|
input: opts.css.input ?? "design-system.json",
|
|
88
93
|
format,
|
|
89
|
-
out
|
|
94
|
+
out,
|
|
95
|
+
...editor ? { editorManifestDir: publicDir } : {}
|
|
90
96
|
})];
|
|
91
97
|
if (format === "tailwind") plugins.push(...tailwindcss());
|
|
92
98
|
updateConfig({ vite: { plugins } });
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n * - favicons + PWA manifest (generated into public/),\n * - the web-component runtime bundles (copied into public/vitops/),\n * - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n type FaviconLink,\n faviconLinks,\n generateFavicons,\n writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n /** Source SVG or PNG. */\n source: string;\n lowResSource?: string;\n /** App name → enables `site.webmanifest`. */\n name?: string;\n /** PWA theme color (also `<meta name=\"theme-color\">`). */\n themeColor?: string;\n backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n /** Path to design-system.json (default 'design-system.json'). */\n input?: string;\n /** Output format (default 'tailwind'). */\n format?: Format;\n /** Directory the generated CSS is written to (default 'src/styles'). */\n out?: string;\n /**\n * Auto-inject the generated stylesheet into every SSR page (default true).\n * Set false when other integrations add routes that must not inherit the\n * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n * only your own pages (and previews rendered through them) are styled.\n */\n inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n favicon?: GetvitopsFaviconOptions;\n /** Copy + link the web-component bundles (default true). */\n webComponents?: boolean;\n /** Generate + auto-inject the design-system CSS. Off unless provided. */\n css?: GetvitopsCssOptions;\n}\n\ninterface HeadData {\n favicons: boolean;\n faviconLinks: FaviconLink[];\n themeColor: string | null;\n webComponents: boolean;\n wcBase: string;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n return {\n name: '@getvitops/astro:virtual-head',\n resolveId(id: string) {\n return id === VIRTUAL_ID ? RESOLVED_ID : null;\n },\n load(id: string) {\n return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n },\n };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n return {\n name: '@getvitops/astro',\n hooks: {\n 'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n const root = fileURLToPath(config.root);\n const publicDir = fileURLToPath(config.publicDir);\n const webComponents = opts.webComponents !== false;\n const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n let hasSvg = false;\n\n // 1. Favicons + manifest → public/\n if (opts.favicon) {\n const source = resolve(root, opts.favicon.source);\n hasSvg = source.endsWith('.svg');\n await generateFavicons({\n source,\n outputDir: publicDir,\n ...(opts.favicon.lowResSource\n ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n : {}),\n });\n if (opts.favicon.name && opts.favicon.themeColor) {\n await writeFaviconManifest(publicDir, {\n name: opts.favicon.name,\n themeColor: opts.favicon.themeColor,\n ...(opts.favicon.backgroundColor\n ? { backgroundColor: opts.favicon.backgroundColor }\n : {}),\n });\n }\n logger.info('generated favicons + manifest → public/');\n }\n\n // 2. Web-component bundles → public/vitops/\n if (webComponents) {\n const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n const coreDist = join(dirname(corePkg), 'dist');\n const dest = join(publicDir, 'vitops');\n if (existsSync(coreDist)) {\n for (const f of ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills']) {\n const src = join(coreDist, f);\n if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n }\n logger.info('copied web-component bundles → public/vitops/');\n } else {\n logger.warn(\n `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n );\n }\n }\n\n // 3. Virtual head module for <Head/>\n updateConfig({\n vite: {\n plugins: [\n virtualHeadPlugin({\n favicons: !!opts.favicon,\n faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n themeColor: opts.favicon?.themeColor ?? null,\n webComponents,\n wcBase: '/vitops',\n }),\n ],\n },\n });\n\n // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n if (opts.css) {\n const format: Format = opts.css.format ?? 'tailwind';\n const out = opts.css.out ?? 'src/styles';\n const plugins = [vitops({ input: opts.css.input ?? 'design-system.json', format, out })];\n // tailwindcss() is typed against a newer vite than @getvitops/vite's\n // peer; the Plugin shapes are structurally compatible at runtime\n // (Astro forwards them verbatim), so bridge the two type identities.\n if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n updateConfig({ vite: { plugins } });\n const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n if (opts.css.inject !== false) {\n const cssPath = resolve(root, out, cssFile);\n injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n } else {\n logger.info(\n `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n );\n }\n }\n },\n },\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/integration.ts"],"sourcesContent":["/**\n * @getvitops/astro — the Astro integration. One entry wires the design system's\n * `<head>` contributions into a consumer site:\n * - favicons + PWA manifest (generated into public/),\n * - the web-component runtime bundles (copied into public/vitops/),\n * - (opt-in) the design-system CSS, generated + auto-injected (no manual import).\n * The `<Head />` component (shipped alongside) renders the tags, reading resolved\n * config from the `virtual:getvitops/head` module this integration provides.\n */\nimport { cpSync, existsSync } from 'node:fs';\nimport { dirname, join, resolve } from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport type { Format } from '@getvitops/generator';\nimport {\n type FaviconLink,\n faviconLinks,\n generateFavicons,\n writeFaviconManifest,\n} from '@getvitops/utils';\nimport vitops from '@getvitops/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport type { AstroIntegration } from 'astro';\n\nexport interface GetvitopsFaviconOptions {\n /** Source SVG or PNG. */\n source: string;\n lowResSource?: string;\n /** App name → enables `site.webmanifest`. */\n name?: string;\n /** PWA theme color (also `<meta name=\"theme-color\">`). */\n themeColor?: string;\n backgroundColor?: string;\n}\n\nexport interface GetvitopsCssOptions {\n /** Path to design-system.json (default 'design-system.json'). */\n input?: string;\n /** Output format (default 'tailwind'). */\n format?: Format;\n /** Directory the generated CSS is written to (default 'src/styles'). */\n out?: string;\n /**\n * Auto-inject the generated stylesheet into every SSR page (default true).\n * Set false when other integrations add routes that must not inherit the\n * design system (e.g. EmDash's `/_emdash/admin`) — then import the generated\n * file (`<out>/tailwind.css` or `<out>/styles.css`) from your site layout so\n * only your own pages (and previews rendered through them) are styled.\n */\n inject?: boolean;\n}\n\nexport interface GetvitopsOptions {\n favicon?: GetvitopsFaviconOptions;\n /** Copy + link the web-component bundles (default true). */\n webComponents?: boolean;\n /** Generate + auto-inject the design-system CSS. Off unless provided. */\n css?: GetvitopsCssOptions;\n /**\n * Ship the live theme editor (default false).\n *\n * Copies `editor.js` into `public/vitops/`, loads it from `<Head />`, and mirrors\n * the generated `design-manifest.json` next to it so `<wc-theme-editor>` resolves\n * its default `/vitops/design-manifest.json`. Requires `css` (the manifest is a\n * `css`-format output) — place the `<wc-theme-editor>` tag in your layout yourself.\n *\n * Editing is live on any deploy; **saving back** to `design-system.json` needs the\n * dev server, so on a static build that button simply isn't rendered.\n */\n editor?: boolean;\n}\n\ninterface HeadData {\n favicons: boolean;\n faviconLinks: FaviconLink[];\n themeColor: string | null;\n webComponents: boolean;\n wcBase: string;\n editor: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:getvitops/head';\nconst RESOLVED_ID = `\\0${VIRTUAL_ID}`;\n\nfunction virtualHeadPlugin(data: HeadData) {\n return {\n name: '@getvitops/astro:virtual-head',\n resolveId(id: string) {\n return id === VIRTUAL_ID ? RESOLVED_ID : null;\n },\n load(id: string) {\n return id === RESOLVED_ID ? `export default ${JSON.stringify(data)};` : null;\n },\n };\n}\n\nexport default function getvitops(opts: GetvitopsOptions = {}): AstroIntegration {\n return {\n name: '@getvitops/astro',\n hooks: {\n 'astro:config:setup': async ({ config, updateConfig, injectScript, logger }) => {\n const root = fileURLToPath(config.root);\n const publicDir = fileURLToPath(config.publicDir);\n const webComponents = opts.webComponents !== false;\n const editor = opts.editor === true;\n if (editor && !opts.css)\n logger.warn('editor: true needs a `css` config — it reads design-manifest.json.');\n const hasManifest = !!(opts.favicon?.name && opts.favicon?.themeColor);\n let hasSvg = false;\n\n // 1. Favicons + manifest → public/\n if (opts.favicon) {\n const source = resolve(root, opts.favicon.source);\n hasSvg = source.endsWith('.svg');\n await generateFavicons({\n source,\n outputDir: publicDir,\n ...(opts.favicon.lowResSource\n ? { lowResSource: resolve(root, opts.favicon.lowResSource) }\n : {}),\n });\n if (opts.favicon.name && opts.favicon.themeColor) {\n await writeFaviconManifest(publicDir, {\n name: opts.favicon.name,\n themeColor: opts.favicon.themeColor,\n ...(opts.favicon.backgroundColor\n ? { backgroundColor: opts.favicon.backgroundColor }\n : {}),\n });\n }\n logger.info('generated favicons + manifest → public/');\n }\n\n // 2. Web-component bundles → public/vitops/\n if (webComponents) {\n const corePkg = fileURLToPath(import.meta.resolve('@getvitops/core/package.json'));\n const coreDist = join(dirname(corePkg), 'dist');\n const dest = join(publicDir, 'vitops');\n if (existsSync(coreDist)) {\n const bundles = ['polyfills.js', 'deferred.js', 'elements.js', 'polyfills'];\n if (editor) bundles.push('editor.js');\n for (const f of bundles) {\n const src = join(coreDist, f);\n if (existsSync(src)) cpSync(src, join(dest, f), { recursive: true });\n }\n logger.info('copied web-component bundles → public/vitops/');\n } else {\n logger.warn(\n `@getvitops/core dist not found (${coreDist}); run build:core. Skipping WC copy.`,\n );\n }\n }\n\n // 3. Virtual head module for <Head/>\n updateConfig({\n vite: {\n plugins: [\n virtualHeadPlugin({\n favicons: !!opts.favicon,\n faviconLinks: opts.favicon ? faviconLinks({ hasSvg, manifest: hasManifest }) : [],\n themeColor: opts.favicon?.themeColor ?? null,\n webComponents,\n wcBase: '/vitops',\n editor,\n }),\n ],\n },\n });\n\n // 4. CSS — generate + compile + auto-inject (consumer imports nothing).\n if (opts.css) {\n const format: Format = opts.css.format ?? 'tailwind';\n const out = opts.css.out ?? 'src/styles';\n const plugins = [\n vitops({\n input: opts.css.input ?? 'design-system.json',\n format,\n out,\n // Mirrored inside the generate pass so the served copy can never be\n // missing on a cold start or stale after a config edit.\n ...(editor ? { editorManifestDir: publicDir } : {}),\n }),\n ];\n // tailwindcss() is typed against a newer vite than @getvitops/vite's\n // peer; the Plugin shapes are structurally compatible at runtime\n // (Astro forwards them verbatim), so bridge the two type identities.\n if (format === 'tailwind') plugins.push(...(tailwindcss() as unknown as typeof plugins));\n updateConfig({ vite: { plugins } });\n const cssFile = format === 'tailwind' ? 'tailwind.css' : 'styles.css';\n if (opts.css.inject !== false) {\n const cssPath = resolve(root, out, cssFile);\n injectScript('page-ssr', `import ${JSON.stringify(cssPath)};`);\n logger.info(`design-system CSS (${format}) auto-injected from ${out}/${cssFile}`);\n } else {\n logger.info(\n `design-system CSS (${format}) generated at ${out}/${cssFile} (inject: false — import it from your layout)`,\n );\n }\n }\n },\n },\n };\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getvitops/astro",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"src/components/Details.astro",
|
|
15
15
|
"src/components/Drawer.astro",
|
|
16
16
|
"src/schemas",
|
|
17
|
-
"virtual.d.ts"
|
|
17
|
+
"virtual.d.ts",
|
|
18
|
+
"CHANGELOG.md"
|
|
18
19
|
],
|
|
19
20
|
"type": "module",
|
|
20
21
|
"types": "./dist/index.d.mts",
|
|
@@ -40,13 +41,14 @@
|
|
|
40
41
|
"dependencies": {
|
|
41
42
|
"@tailwindcss/vite": "^4.3.3",
|
|
42
43
|
"tailwindcss": "^4.3.3",
|
|
43
|
-
"@getvitops/core": "0.
|
|
44
|
-
"@getvitops/
|
|
45
|
-
"@getvitops/
|
|
46
|
-
"@getvitops/
|
|
44
|
+
"@getvitops/core": "0.8.0",
|
|
45
|
+
"@getvitops/vite": "0.8.0",
|
|
46
|
+
"@getvitops/generator": "0.8.0",
|
|
47
|
+
"@getvitops/utils": "0.8.0"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
|
-
"astro": "^7.1.2"
|
|
50
|
+
"astro": "^7.1.2",
|
|
51
|
+
"vitest": "^4.1.9"
|
|
50
52
|
},
|
|
51
53
|
"peerDependencies": {
|
|
52
54
|
"astro": ">=7",
|
|
@@ -14,9 +14,26 @@ import head from 'virtual:getvitops/head';
|
|
|
14
14
|
interface Props {
|
|
15
15
|
favicons?: boolean;
|
|
16
16
|
webComponents?: boolean;
|
|
17
|
+
editor?: boolean;
|
|
17
18
|
}
|
|
18
|
-
const {
|
|
19
|
+
const {
|
|
20
|
+
favicons = head.favicons,
|
|
21
|
+
webComponents = head.webComponents,
|
|
22
|
+
editor = head.editor,
|
|
23
|
+
} = Astro.props;
|
|
19
24
|
const wc = head.wcBase;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Applies the remembered colour scheme before first paint.
|
|
28
|
+
*
|
|
29
|
+
* The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
|
|
30
|
+
* `head.test.ts` asserts they stay in step. try/catch because localStorage
|
|
31
|
+
* throws in private/partitioned contexts.
|
|
32
|
+
*/
|
|
33
|
+
const THEME_SCRIPT =
|
|
34
|
+
`try{var s=localStorage.getItem('vitops-color-scheme');` +
|
|
35
|
+
`if(s==='light'||s==='dark'){document.documentElement.dataset.theme=s;` +
|
|
36
|
+
`document.documentElement.style.colorScheme=s+' only'}}catch(e){}`;
|
|
20
37
|
---
|
|
21
38
|
|
|
22
39
|
{favicons && head.faviconLinks.map((l: { rel: string; href: string; type?: string; sizes?: string }) => (
|
|
@@ -26,9 +43,30 @@ const wc = head.wcBase;
|
|
|
26
43
|
|
|
27
44
|
{webComponents && (
|
|
28
45
|
<>
|
|
46
|
+
{/*
|
|
47
|
+
Apply the remembered colour scheme before first paint.
|
|
48
|
+
|
|
49
|
+
`<color-scheme-toggle>` persists the choice to localStorage, but it loads
|
|
50
|
+
as a deferred module — so without this every navigation would paint the
|
|
51
|
+
light token set and flip to dark once the element upgraded. Synchronous and
|
|
52
|
+
inline on purpose: it has to run before the body renders.
|
|
53
|
+
|
|
54
|
+
The key MUST match `WCColorSchemeToggle.STORAGE_KEY` in @getvitops/core;
|
|
55
|
+
`head.test.ts` asserts they stay in step. Wrapped in try/catch because
|
|
56
|
+
localStorage throws in private/partitioned contexts.
|
|
57
|
+
*/}
|
|
58
|
+
<script is:inline set:html={THEME_SCRIPT} />
|
|
29
59
|
<link rel="modulepreload" href={`${wc}/polyfills.js`} />
|
|
30
60
|
<script is:inline type="module" src={`${wc}/polyfills.js`}></script>
|
|
31
61
|
<script is:inline defer src={`${wc}/deferred.js`}></script>
|
|
32
62
|
<script is:inline type="module" src={`${wc}/elements.js`}></script>
|
|
33
63
|
</>
|
|
34
64
|
)}
|
|
65
|
+
|
|
66
|
+
{/*
|
|
67
|
+
The live theme editor — a separate, opt-in bundle (getvitops({ editor: true })).
|
|
68
|
+
It is tooling, not part of the runtime, so it stays out of elements.js and off
|
|
69
|
+
every page that doesn't ask for it. Loads independently of `webComponents`:
|
|
70
|
+
<wc-theme-editor> registers itself and pulls in no framework element.
|
|
71
|
+
*/}
|
|
72
|
+
{editor && <script is:inline type="module" src={`${wc}/editor.js`}></script>}
|