@gridd/feedback-stickers 1.0.3 โ 1.0.4
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 +119 -33
- package/dist/feedback-stickers.min.js +12 -0
- package/package.json +5 -12
package/README.md
CHANGED
|
@@ -62,14 +62,20 @@ The package is published to npm as `@gridd/feedback-stickers` and is available o
|
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
> **SRI integrity hashes** โ for pinned production deployments, generate a hash with:
|
|
65
|
+
>
|
|
65
66
|
> ```bash
|
|
66
67
|
> curl -s https://cdn.jsdelivr.net/npm/@gridd/feedback-stickers@1.0.0/dist/feedback-stickers.min.js \
|
|
67
68
|
> | openssl dgst -sha384 -binary | openssl base64 -A
|
|
68
69
|
> ```
|
|
70
|
+
>
|
|
69
71
|
> Then add it to the tag:
|
|
72
|
+
>
|
|
70
73
|
> ```html
|
|
71
|
-
> <script
|
|
72
|
-
>
|
|
74
|
+
> <script
|
|
75
|
+
> src="https://cdn.jsdelivr.net/npm/@gridd/feedback-stickers@1.0.0/dist/feedback-stickers.min.js"
|
|
76
|
+
> integrity="sha384-<hash>"
|
|
77
|
+
> crossorigin="anonymous"
|
|
78
|
+
> ></script>
|
|
73
79
|
> ```
|
|
74
80
|
|
|
75
81
|
### From a local file
|
|
@@ -88,7 +94,7 @@ Inline the script so the HTML is self-contained and can be shared as a single at
|
|
|
88
94
|
|
|
89
95
|
```html
|
|
90
96
|
<script>
|
|
91
|
-
/* paste contents of dist/feedback-stickers.min.js here */
|
|
97
|
+
/* paste contents of dist/feedback-stickers.min.js here */
|
|
92
98
|
</script>
|
|
93
99
|
```
|
|
94
100
|
|
|
@@ -109,33 +115,33 @@ echo '</script>' >> page-review.html
|
|
|
109
115
|
|
|
110
116
|
Click the **๐ button** in the bottom-right corner of any page to open the panel.
|
|
111
117
|
|
|
112
|
-
| Control
|
|
113
|
-
|
|
114
|
-
| **Reviewer** field
|
|
115
|
-
| **Color grid**
|
|
116
|
-
| Color labels
|
|
117
|
-
| **Start Reviewing** | Activates placement mode (cursor turns to crosshair)
|
|
118
|
-
| **Stop Reviewing**
|
|
119
|
-
| **Export YAML**
|
|
120
|
-
| **Import YAML**
|
|
121
|
-
| **Clear**
|
|
118
|
+
| Control | Purpose |
|
|
119
|
+
| ------------------- | -------------------------------------------------------------------------------------------- |
|
|
120
|
+
| **Reviewer** field | Your name or initials โ shown on every sticky you place |
|
|
121
|
+
| **Color grid** | 12 color categories; click a swatch to select it as the active color |
|
|
122
|
+
| Color labels | Click the small text under any swatch to rename that category; saved globally in the browser |
|
|
123
|
+
| **Start Reviewing** | Activates placement mode (cursor turns to crosshair) |
|
|
124
|
+
| **Stop Reviewing** | Deactivates placement mode; stickies remain visible |
|
|
125
|
+
| **Export YAML** | Downloads all stickies as a `.review.yaml` file |
|
|
126
|
+
| **Import YAML** | Loads a `.review.yaml` file and merges its stickies onto the page |
|
|
127
|
+
| **Clear** | Removes all stickies for the current page (asks for confirmation) |
|
|
122
128
|
|
|
123
129
|
### Color categories (defaults)
|
|
124
130
|
|
|
125
|
-
| Color
|
|
126
|
-
|
|
127
|
-
| ๐ก Yellow | Note
|
|
128
|
-
| ๐ Amber
|
|
129
|
-
| ๐ง Orange | Caution
|
|
130
|
-
| ๐ด Red
|
|
131
|
-
| ๐ธ Rose
|
|
132
|
-
| ๐ Pink
|
|
133
|
-
| ๐ฃ Purple | UX
|
|
134
|
-
| ๐ต Indigo | Dev
|
|
135
|
-
| ๐ Blue
|
|
136
|
-
| ๐ฉต Teal
|
|
137
|
-
| ๐ข Green
|
|
138
|
-
| ๐ฉ Lime
|
|
131
|
+
| Color | Default label | Suggested use |
|
|
132
|
+
| --------- | ------------- | --------------------------- |
|
|
133
|
+
| ๐ก Yellow | Note | General observation |
|
|
134
|
+
| ๐ Amber | Flag | Needs attention |
|
|
135
|
+
| ๐ง Orange | Caution | Risk or concern |
|
|
136
|
+
| ๐ด Red | Blocker | Must fix before release |
|
|
137
|
+
| ๐ธ Rose | Critical | Severe issue |
|
|
138
|
+
| ๐ Pink | Design | Visual / layout feedback |
|
|
139
|
+
| ๐ฃ Purple | UX | Interaction / flow feedback |
|
|
140
|
+
| ๐ต Indigo | Dev | Implementation comment |
|
|
141
|
+
| ๐ Blue | Info | Background context |
|
|
142
|
+
| ๐ฉต Teal | Content | Copy or text feedback |
|
|
143
|
+
| ๐ข Green | OK | Explicitly approved |
|
|
144
|
+
| ๐ฉ Lime | Approved | Sign-off |
|
|
139
145
|
|
|
140
146
|
Labels are customisable per session. Renamed labels are saved in the browser's local storage and persist across page loads.
|
|
141
147
|
|
|
@@ -167,7 +173,7 @@ Build the script and embed it in the HTML page you want reviewed:
|
|
|
167
173
|
<script src="feedback-stickers.min.js"></script>
|
|
168
174
|
```
|
|
169
175
|
|
|
170
|
-
Or inline the minified script for a single self-contained file (see
|
|
176
|
+
Or inline the minified script for a single self-contained file (see _Single-file distribution_ above).
|
|
171
177
|
|
|
172
178
|
Send the HTML file to the reviewer. If the script is not inlined, include `feedback-stickers.min.js` alongside it in the same folder (or zip archive).
|
|
173
179
|
|
|
@@ -239,11 +245,11 @@ stickers:
|
|
|
239
245
|
comment: "This section needs a clearer heading"
|
|
240
246
|
color: orange
|
|
241
247
|
position:
|
|
242
|
-
xPct: 0.4531
|
|
243
|
-
yPct: 0.2341
|
|
244
|
-
anchorSelector: "#intro > p:nth-of-type(2)"
|
|
245
|
-
anchorOffsetXPct: 0.05
|
|
246
|
-
anchorOffsetYPct: 0.12
|
|
248
|
+
xPct: 0.4531 # fallback: fraction of page width
|
|
249
|
+
yPct: 0.2341 # fallback: fraction of page height
|
|
250
|
+
anchorSelector: "#intro > p:nth-of-type(2)" # element the sticky is pinned to
|
|
251
|
+
anchorOffsetXPct: 0.05 # position within that element (fraction of its width)
|
|
252
|
+
anchorOffsetYPct: 0.12 # position within that element (fraction of its height)
|
|
247
253
|
minimized: false
|
|
248
254
|
rotation: -1.2
|
|
249
255
|
createdAt: "2026-05-28T10:00:00.000Z"
|
|
@@ -251,6 +257,7 @@ stickers:
|
|
|
251
257
|
```
|
|
252
258
|
|
|
253
259
|
**Position resolution order:**
|
|
260
|
+
|
|
254
261
|
1. If `anchorSelector` is present and the element is found on the page โ position relative to that element.
|
|
255
262
|
2. Otherwise fall back to `xPct` / `yPct` (percentage of page scroll dimensions).
|
|
256
263
|
3. Legacy files with `top` / `left` (absolute pixels from older versions) are still accepted on import.
|
|
@@ -260,3 +267,82 @@ stickers:
|
|
|
260
267
|
## Browser compatibility
|
|
261
268
|
|
|
262
269
|
Requires a modern browser with Shadow DOM v1 support: Chrome 53+, Firefox 63+, Safari 10.1+, Edge 79+. All features used (Shadow DOM, Pointer Events, `crypto.randomUUID`, `CSS.escape`, `URL.createObjectURL`) are available without polyfills in these versions.
|
|
270
|
+
|
|
271
|
+
# NOTICE
|
|
272
|
+
|
|
273
|
+
https://github.com/GriddApp/gridd-docusaurus-feedback-plugin
|
|
274
|
+
|
|
275
|
+
Copyright (c) 2026 DeckAI Inc. All rights reserved.
|
|
276
|
+
|
|
277
|
+
## 1. LICENCE
|
|
278
|
+
|
|
279
|
+
This library is licensed under the GNU Lesser General Public License, version 3 ("LGPL v3"), the full text of which is available at:
|
|
280
|
+
https://www.gnu.org/licenses/lgpl-3.0.html
|
|
281
|
+
|
|
282
|
+
You may use, copy, modify, and distribute this library under the terms of the LGPL v3. If you modify the library, you must release your modifications under the same licence.
|
|
283
|
+
|
|
284
|
+
## 2. ADDITIONAL ATTRIBUTION REQUIREMENT (permitted additional term under LGPL v3 ยง 7)
|
|
285
|
+
|
|
286
|
+
As a condition of using this library โ whether via CDN, inline embed, or any other distribution method โ you must comply with the following attribution requirement in addition to the LGPL v3 terms:
|
|
287
|
+
|
|
288
|
+
a) SCRIPT BANNER PRESERVATION
|
|
289
|
+
|
|
290
|
+
The copyright and attribution banner comment at the top of feedback-stickers.min.js must be preserved in its entirety in all copies and distributions, including inline embeds. The banner reads:
|
|
291
|
+
|
|
292
|
+
```js
|
|
293
|
+
/*!
|
|
294
|
+
* @gridd/feedback-stickers v1.0.0
|
|
295
|
+
* Copyright (c) 2026 DeckAI Inc. (deckai.co)
|
|
296
|
+
* Licensed under LGPL v3 + Attribution Notice
|
|
297
|
+
* https://www.npmjs.com/package/@gridd/feedback-stickers
|
|
298
|
+
*
|
|
299
|
+
* You may use and redistribute this library freely under LGPL v2.1,
|
|
300
|
+
* provided this banner is preserved in all copies (including inline embeds)
|
|
301
|
+
* and attribution is given in your project documentation.
|
|
302
|
+
* See NOTICE file for full attribution requirements.
|
|
303
|
+
* Commercial / white-label licences: hello@deckai.co
|
|
304
|
+
*/
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
You must not alter, obscure, or remove this banner.
|
|
308
|
+
|
|
309
|
+
b) DOCUMENTATION OR README ATTRIBUTION
|
|
310
|
+
|
|
311
|
+
Any project, product, tool, or document that ships with or depends on this library must include the following notice in its documentation, README, or equivalent end-user-facing material:
|
|
312
|
+
|
|
313
|
+
> Feedback annotation powered by @gridd/feedback-stickers (deckai.co) โ used under LGPL v3 + Attribution Notice.
|
|
314
|
+
|
|
315
|
+
A hyperlink to https://deckai.co or https://github.com/GriddApp/gridd-docusaurus-feedback-plugin is strongly preferred wherever the format supports links.
|
|
316
|
+
|
|
317
|
+
c) INLINE EMBED COMPLIANCE
|
|
318
|
+
|
|
319
|
+
When this library is embedded inline (i.e. the minified source
|
|
320
|
+
is copied directly into a `<script>` tag rather than loaded from
|
|
321
|
+
an external URL), the banner comment in clause (a) above must
|
|
322
|
+
still be present immediately before the inlined code. The inline
|
|
323
|
+
embed does not exempt you from either clause (a) or clause (b).
|
|
324
|
+
|
|
325
|
+
d) NO REBRANDING
|
|
326
|
+
|
|
327
|
+
You may not republish this library โ whether modified or unmodified โ under a name, npm package identifier, or CDN path that does not include the "@gridd/" namespace prefix or that removes or replaces the "DeckAI" attribution, without a separate
|
|
328
|
+
written commercial licence from DeckAI Inc.
|
|
329
|
+
|
|
330
|
+
## 3. COMMERCIAL LICENSING
|
|
331
|
+
|
|
332
|
+
If you wish to:
|
|
333
|
+
|
|
334
|
+
โ use this library without the attribution requirements above, or
|
|
335
|
+
โ white-label or rebrand the library under a different namespace, or
|
|
336
|
+
โ incorporate it into a commercial product sold to end-users where the LGPL v3 terms are incompatible with your distribution model,
|
|
337
|
+
|
|
338
|
+
please contact DeckAI Inc. to obtain a commercial licence:
|
|
339
|
+
|
|
340
|
+
fajth@deckai.co
|
|
341
|
+
|
|
342
|
+
https://deckai.co
|
|
343
|
+
|
|
344
|
+
## 4. NO WARRANTY
|
|
345
|
+
|
|
346
|
+
This library is provided "as is", without warranty of any kind,
|
|
347
|
+
express or implied. See the LGPL v3 for the full disclaimer of
|
|
348
|
+
warranties and limitation of liability.
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @gridd/feedback-stickers v1.0.3
|
|
3
|
+
* Copyright (c) 2026 DeckAI Inc. (deckai.co)
|
|
4
|
+
* Licensed under LGPL v3 + Attribution Notice
|
|
5
|
+
* https://www.npmjs.com/package/@gridd/feedback-stickers
|
|
6
|
+
*
|
|
7
|
+
* You may use and redistribute this library freely under LGPL v2.1,
|
|
8
|
+
* provided this banner is preserved in all copies (including inline embeds)
|
|
9
|
+
* and attribution is given in your project documentation.
|
|
10
|
+
* See NOTICE file for full attribution requirements.
|
|
11
|
+
* Commercial / white-label licences: hello@deckai.co
|
|
12
|
+
*/
|
|
1
13
|
"use strict";var FeedbackStickers=(()=>{var H=["yellow","amber","orange","red","rose","pink","purple","indigo","blue","teal","green","lime"],D={yellow:{bg:"#FDE047",border:"#CA8A04",text:"#000",defaultLabel:"Question"},amber:{bg:"#FCD34D",border:"#B45309",text:"#000",defaultLabel:"Comment"},orange:{bg:"#FB923C",border:"#C2410C",text:"#000",defaultLabel:"Check"},red:{bg:"#F87171",border:"#B91C1C",text:"#fff",defaultLabel:"Blocker"},rose:{bg:"#FB7185",border:"#BE123C",text:"#fff",defaultLabel:"Critical"},pink:{bg:"#F472B6",border:"#BE185D",text:"#fff",defaultLabel:"Visual"},purple:{bg:"#C084FC",border:"#7E22CE",text:"#fff",defaultLabel:"Message"},indigo:{bg:"#818CF8",border:"#3730A3",text:"#fff",defaultLabel:"Technical"},blue:{bg:"#60A5FA",border:"#1D4ED8",text:"#fff",defaultLabel:"Usability"},teal:{bg:"#2DD4BF",border:"#0F766E",text:"#000",defaultLabel:"FYI"},green:{bg:"#4ADE80",border:"#15803D",text:"#000",defaultLabel:"Looks good"},lime:{bg:"#A3E635",border:"#4D7C0F",text:"#000",defaultLabel:"Approved"}};var U="fs_",ce=U+"colorLabels",de=U+"reviewer";function ke(s){let r=2166136261;for(let a=0;a<s.length;a++)r^=s.charCodeAt(a),r=Math.imul(r,16777619)>>>0;return r.toString(36)}function pe(){return U+"s_"+ke(location.href)}function J(s,r){try{let a=localStorage.getItem(s);return a!==null?JSON.parse(a):r}catch{return r}}function V(s,r){try{localStorage.setItem(s,JSON.stringify(r))}catch{}}function G(){return J(pe(),[])}function C(s){V(pe(),s)}function fe(s){return{...s,...J(ce,{})}}function Q(s){V(ce,s)}function ue(){return J(de,"")}function me(s){V(de,s)}function w(s){return'"'+s.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"")+'"'}function ge(s){let r=['version: "1.0"',"page:",` url: ${w(s.page.url)}`,` title: ${w(s.page.title)}`,` exportedAt: ${w(s.page.exportedAt)}`,"colorLabels:",...Object.entries(s.colorLabels).map(([a,p])=>` ${a}: ${w(p)}`),"stickers:"];if(s.stickers.length===0)r.push(" []");else for(let a of s.stickers){let p=a.position;r.push(` - id: ${w(a.id)}`,` reviewer: ${w(a.reviewer)}`,` comment: ${w(a.comment)}`,` color: ${a.color}`," position:",` xPct: ${p.xPct??0}`,` yPct: ${p.yPct??0}`),p.anchorSelector&&r.push(` anchorSelector: ${w(p.anchorSelector)}`,` anchorOffsetXPct: ${p.anchorOffsetXPct??0}`,` anchorOffsetYPct: ${p.anchorOffsetYPct??0}`),r.push(` minimized: ${a.minimized}`,` rotation: ${a.rotation??0}`,` createdAt: ${w(a.createdAt)}`,` updatedAt: ${w(a.updatedAt)}`)}return r.join(`
|
|
2
14
|
`)+`
|
|
3
15
|
`}function be(s){let r={version:"1.0",page:{url:"",title:"",exportedAt:""},colorLabels:{},stickers:[]},a=s.split(`
|
package/package.json
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridd/feedback-stickers",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Drop-in sticky-note annotation panel for any HTML page. Self-contained IIFE โ no framework required.",
|
|
5
|
-
"keywords": [
|
|
6
|
-
|
|
7
|
-
"review",
|
|
8
|
-
"sticky",
|
|
9
|
-
"annotation",
|
|
10
|
-
"stickers",
|
|
11
|
-
"docusaurus"
|
|
12
|
-
],
|
|
13
|
-
"license": "UNLICENSED",
|
|
5
|
+
"keywords": ["feedback", "review", "sticky", "annotation", "stickers", "docusaurus"],
|
|
6
|
+
"license": "LGPL-3.0-only",
|
|
14
7
|
"main": "dist/feedback-stickers.min.js",
|
|
15
8
|
"jsdelivr": "dist/feedback-stickers.min.js",
|
|
16
9
|
"unpkg": "dist/feedback-stickers.min.js",
|
|
@@ -18,8 +11,8 @@
|
|
|
18
11
|
"dist/feedback-stickers.min.js"
|
|
19
12
|
],
|
|
20
13
|
"scripts": {
|
|
21
|
-
"build": "
|
|
22
|
-
"dev": "
|
|
14
|
+
"build": "node build.mjs",
|
|
15
|
+
"dev": "node build.mjs --watch"
|
|
23
16
|
},
|
|
24
17
|
"devDependencies": {
|
|
25
18
|
"esbuild": "^0.21.0",
|