@pixelmatters/markup 1.33.0 → 1.34.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/README.md +16 -16
- package/dist/widget.js +8 -8
- package/dist/widget.js.map +1 -1
- package/package.json +1 -1
- package/skills/install-markup-widget/SKILL.md +6 -6
package/README.md
CHANGED
|
@@ -37,9 +37,9 @@ CDN drop-in, no build step. Paste this just before `</body>`:
|
|
|
37
37
|
```html
|
|
38
38
|
<script type="module">
|
|
39
39
|
// Pin the exact version; esm.sh resolves it from npm
|
|
40
|
-
import { init } from 'https://esm.sh/@pixelmatters/markup@1.
|
|
40
|
+
import { init } from 'https://esm.sh/@pixelmatters/markup@1.34.0'
|
|
41
41
|
// or
|
|
42
|
-
// import { init } from 'https://esm.run/@pixelmatters/markup@1.
|
|
42
|
+
// import { init } from 'https://esm.run/@pixelmatters/markup@1.34.0'
|
|
43
43
|
|
|
44
44
|
init({
|
|
45
45
|
apiUrl: 'https://your-deployment.convex.site',
|
|
@@ -50,14 +50,14 @@ CDN drop-in, no build step. Paste this just before `</body>`:
|
|
|
50
50
|
</script>
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.
|
|
53
|
+
> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.34.0`).
|
|
54
54
|
|
|
55
55
|
If your platform doesn't allow inline JS (some CMS / page-builder editors), use the auto-init form instead. Point a `<script src=…>` at the bundle and pass config via `data-*` attributes:
|
|
56
56
|
|
|
57
57
|
```html
|
|
58
58
|
<script
|
|
59
59
|
type="module"
|
|
60
|
-
src="https://esm.sh/@pixelmatters/markup@1.
|
|
60
|
+
src="https://esm.sh/@pixelmatters/markup@1.34.0"
|
|
61
61
|
data-markup-widget="true"
|
|
62
62
|
data-api-url="https://your-deployment.convex.site"
|
|
63
63
|
data-api-key="markup_..."
|
|
@@ -525,7 +525,7 @@ For a `<script>` tag drop-in (no bundler), use the inline ESM form and **pin the
|
|
|
525
525
|
|
|
526
526
|
```html
|
|
527
527
|
<script type="module">
|
|
528
|
-
import { init } from 'https://esm.sh/@pixelmatters/markup@1.
|
|
528
|
+
import { init } from 'https://esm.sh/@pixelmatters/markup@1.34.0'
|
|
529
529
|
|
|
530
530
|
init({
|
|
531
531
|
apiUrl: '...',
|
|
@@ -541,7 +541,7 @@ If inline JS is disallowed (some CMS / page-builder editors), use the auto-init
|
|
|
541
541
|
```html
|
|
542
542
|
<script
|
|
543
543
|
type="module"
|
|
544
|
-
src="https://esm.sh/@pixelmatters/markup@1.
|
|
544
|
+
src="https://esm.sh/@pixelmatters/markup@1.34.0"
|
|
545
545
|
data-markup-widget="true"
|
|
546
546
|
data-api-url="..."
|
|
547
547
|
data-api-key="..."
|
|
@@ -562,23 +562,23 @@ Constraints:
|
|
|
562
562
|
|
|
563
563
|
- Do **not** add CSS imports or provider components. The widget needs neither.
|
|
564
564
|
- Do **not** hardcode the key.
|
|
565
|
-
- If the project has a CSP: add `https://<MY_DEPLOYMENT>.convex.site` and `wss://<MY_DEPLOYMENT>.convex.cloud` to `connect-src`, `blob:` and `data:` (plus the host of our profile pictures) to `img-src`, and `'unsafe-inline'` to `style-src
|
|
565
|
+
- If the project has a CSP: add `https://<MY_DEPLOYMENT>.convex.site` and `wss://<MY_DEPLOYMENT>.convex.cloud` to `connect-src`, `blob:` and `data:` (plus the host of our profile pictures) to `img-src`, and `'unsafe-inline'` to `style-src` only if we support Safari before 16.4 or Firefox before 101. Add `https://esm.sh` to `script-src` only if I'm using the `<script>` tag path.
|
|
566
566
|
````
|
|
567
567
|
|
|
568
568
|
## Content Security Policy
|
|
569
569
|
|
|
570
570
|
If the host page ships a CSP, the widget needs:
|
|
571
571
|
|
|
572
|
-
| Directive | Value | Why
|
|
573
|
-
| ------------- | ------------------------------------------------------------------------------------------------------ |
|
|
574
|
-
| `connect-src` | `https://<deployment>.convex.site` | threads, comments, identity, screenshot upload, error reports
|
|
575
|
-
| `connect-src` | `wss://<deployment>.convex.cloud` | live thread updates
|
|
576
|
-
| `connect-src` | your own origin, and any CDN serving your webfonts, CSS backgrounds, cross-origin images or SVG sprite | fetched so screenshots include them, such as `<use href="/sprite.svg#icon">` icons
|
|
577
|
-
| `img-src` | wherever your team's profile pictures are hosted, plus `blob:` and `data:` | avatars, the screenshot preview thumbnail, and the capture pipeline
|
|
578
|
-
| `script-src` | `https://esm.sh` | CDN path only; a bundled install needs nothing here
|
|
579
|
-
| `style-src` | `'unsafe-inline'
|
|
572
|
+
| Directive | Value | Why |
|
|
573
|
+
| ------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
|
574
|
+
| `connect-src` | `https://<deployment>.convex.site` | threads, comments, identity, screenshot upload, error reports |
|
|
575
|
+
| `connect-src` | `wss://<deployment>.convex.cloud` | live thread updates |
|
|
576
|
+
| `connect-src` | your own origin, and any CDN serving your webfonts, CSS backgrounds, cross-origin images or SVG sprite | fetched so screenshots include them, such as `<use href="/sprite.svg#icon">` icons |
|
|
577
|
+
| `img-src` | wherever your team's profile pictures are hosted, plus `blob:` and `data:` | avatars, the screenshot preview thumbnail, and the capture pipeline |
|
|
578
|
+
| `script-src` | `https://esm.sh` | CDN path only; a bundled install needs nothing here |
|
|
579
|
+
| `style-src` | `'unsafe-inline'`, for Safari before 16.4 and Firefox before 101 only | those browsers have no constructed stylesheets, so the widget falls back to a `<style>` element inside its own shadow root |
|
|
580
580
|
|
|
581
|
-
Only `img-src` and the asset entry degrade gracefully: a blocked avatar falls back to initials, and a blocked image or sprite in a capture comes through blank. Without `data:` in `img-src` the capture itself can't load, and the composer reads _Screenshot unavailable_. A missing `https://…convex.site` entry stops the widget working at all. A missing `wss://…convex.cloud` entry leaves the toolbar up and posting working, but threads never load; the widget reports that once rather than retrying. A missing `style-src`
|
|
581
|
+
Only `img-src` and the asset entry degrade gracefully: a blocked avatar falls back to initials, and a blocked image or sprite in a capture comes through blank. Without `data:` in `img-src` the capture itself can't load, and the composer reads _Screenshot unavailable_. A missing `https://…convex.site` entry stops the widget working at all. A missing `wss://…convex.cloud` entry leaves the toolbar up and posting working, but threads never load; the widget reports that once rather than retrying. A missing `'unsafe-inline'` in `style-src` leaves it unstyled only on Safari before 16.4 and Firefox before 101; everywhere else the widget adopts a constructed stylesheet, which `style-src` does not block.
|
|
582
582
|
|
|
583
583
|
## Browser support
|
|
584
584
|
|