glossator 1.0.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 +172 -0
- package/dist/feedback-layer.js +1122 -0
- package/dist/feedback-layer.js.map +7 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
# Glossator
|
|
2
|
+
|
|
3
|
+
Lightweight annotation and feedback layer for HTML documents. Add collaborative commenting, highlighting, and threaded discussions to any webpage.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
✨ **Text Highlighting** - Select any text and add comments
|
|
10
|
+
💬 **Threaded Discussions** - Reply to annotations with nested conversations
|
|
11
|
+
✏️ **Edit Comments** - Update your feedback anytime
|
|
12
|
+
📍 **Document-Order Display** - Annotations appear in reading order
|
|
13
|
+
🎯 **Smart Anchoring** - Comments stay attached even when content changes
|
|
14
|
+
🔍 **Filter & Resolve** - Mark feedback as resolved, toggle visibility
|
|
15
|
+
⚡ **Zero Dependencies** - Just one script tag
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
### Option 1: CDN (Easiest)
|
|
20
|
+
|
|
21
|
+
Just add one script tag to your HTML:
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script
|
|
25
|
+
src="https://unpkg.com/glossator@1/dist/feedback-layer.js"
|
|
26
|
+
data-api-url="http://localhost:3333"
|
|
27
|
+
data-content-selector="article"
|
|
28
|
+
></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Option 2: NPM
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install glossator
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Copy the built file to your public directory:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
cp node_modules/glossator/dist/feedback-layer.js public/
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Then add to your HTML:
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<script
|
|
47
|
+
src="/feedback-layer.js"
|
|
48
|
+
data-api-url="http://localhost:3333"
|
|
49
|
+
data-content-selector="article"
|
|
50
|
+
></script>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Configuration
|
|
54
|
+
|
|
55
|
+
Configure via data attributes on the script tag:
|
|
56
|
+
|
|
57
|
+
| Attribute | Required | Default | Description |
|
|
58
|
+
|-----------|----------|---------|-------------|
|
|
59
|
+
| `data-api-url` | Yes | - | URL of your annotation server |
|
|
60
|
+
| `data-content-selector` | No | `"body"` | CSS selector for annotatable content |
|
|
61
|
+
| `data-document-uri` | No | `window.location.pathname` | Unique identifier for this document |
|
|
62
|
+
|
|
63
|
+
### Examples
|
|
64
|
+
|
|
65
|
+
**Annotate just the main article:**
|
|
66
|
+
```html
|
|
67
|
+
<script
|
|
68
|
+
src="https://unpkg.com/glossator@1/dist/feedback-layer.js"
|
|
69
|
+
data-api-url="http://localhost:3333"
|
|
70
|
+
data-content-selector="article"
|
|
71
|
+
></script>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Annotate a specific div:**
|
|
75
|
+
```html
|
|
76
|
+
<script
|
|
77
|
+
src="https://unpkg.com/glossator@1/dist/feedback-layer.js"
|
|
78
|
+
data-api-url="http://localhost:3333"
|
|
79
|
+
data-content-selector=".content"
|
|
80
|
+
></script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**Multiple documents on same domain:**
|
|
84
|
+
```html
|
|
85
|
+
<script
|
|
86
|
+
src="https://unpkg.com/glossator@1/dist/feedback-layer.js"
|
|
87
|
+
data-api-url="http://localhost:3333"
|
|
88
|
+
data-content-selector="article"
|
|
89
|
+
data-document-uri="/docs/getting-started"
|
|
90
|
+
></script>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Annotation Server
|
|
94
|
+
|
|
95
|
+
Glossator requires a backend server to store annotations.
|
|
96
|
+
|
|
97
|
+
### Quick Start with the Example Server
|
|
98
|
+
|
|
99
|
+
Clone the repository and run the included server:
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
# Clone the repo
|
|
103
|
+
git clone https://github.com/yourusername/glossator.git
|
|
104
|
+
cd glossator/server
|
|
105
|
+
|
|
106
|
+
# Start the server
|
|
107
|
+
npm install
|
|
108
|
+
node index.js
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The server runs on `http://localhost:3333` by default.
|
|
112
|
+
|
|
113
|
+
### API Endpoints
|
|
114
|
+
|
|
115
|
+
The server must implement these endpoints:
|
|
116
|
+
|
|
117
|
+
- `GET /api/annotations?uri={documentUri}` - Fetch annotations
|
|
118
|
+
- `POST /api/annotations` - Create annotation
|
|
119
|
+
- `PATCH /api/annotations/:id` - Update annotation
|
|
120
|
+
- `DELETE /api/annotations/:id` - Delete annotation
|
|
121
|
+
|
|
122
|
+
See the [API specification](./server/README.md) for details.
|
|
123
|
+
|
|
124
|
+
## Usage
|
|
125
|
+
|
|
126
|
+
1. **Select text** - Highlight any text in your document
|
|
127
|
+
2. **Click "Annotate"** - Add your comment
|
|
128
|
+
3. **View annotations** - Click highlights or open the sidebar
|
|
129
|
+
4. **Reply** - Click "Reply" to start a discussion
|
|
130
|
+
5. **Edit** - Click the pencil icon (✎) to edit comments
|
|
131
|
+
6. **Resolve** - Click the checkmark (✓) to mark as resolved
|
|
132
|
+
|
|
133
|
+
## Keyboard Shortcuts
|
|
134
|
+
|
|
135
|
+
- `Cmd+Enter` / `Ctrl+Enter` - Submit comment or reply
|
|
136
|
+
|
|
137
|
+
## Browser Support
|
|
138
|
+
|
|
139
|
+
- Chrome/Edge 90+
|
|
140
|
+
- Firefox 88+
|
|
141
|
+
- Safari 14+
|
|
142
|
+
|
|
143
|
+
## Development
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
# Clone the repo
|
|
147
|
+
git clone https://github.com/yourusername/glossator.git
|
|
148
|
+
cd glossator/feedback-layer
|
|
149
|
+
|
|
150
|
+
# Install dependencies
|
|
151
|
+
npm install
|
|
152
|
+
|
|
153
|
+
# Build
|
|
154
|
+
npm run build
|
|
155
|
+
|
|
156
|
+
# Watch mode
|
|
157
|
+
npm run watch
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## License
|
|
161
|
+
|
|
162
|
+
MIT © Your Name
|
|
163
|
+
|
|
164
|
+
## Contributing
|
|
165
|
+
|
|
166
|
+
Contributions welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) first.
|
|
167
|
+
|
|
168
|
+
## Credits
|
|
169
|
+
|
|
170
|
+
Built with:
|
|
171
|
+
- [Apache Annotator](https://annotator.apache.org/) - Text anchoring
|
|
172
|
+
- [esbuild](https://esbuild.github.io/) - Bundling
|