@pixelmatters/markup 1.0.1 → 1.0.2
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 +57 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -74,7 +74,7 @@ export default function App() {
|
|
|
74
74
|
{/* your app */}
|
|
75
75
|
<MarkupWidget
|
|
76
76
|
apiUrl={import.meta.env.VITE_MARKUP_API_URL}
|
|
77
|
-
apiKey={import.meta.env.
|
|
77
|
+
apiKey={import.meta.env.VITE_MARKUP_API_KEY}
|
|
78
78
|
position="bottom-right" // optional
|
|
79
79
|
theme="light" // optional
|
|
80
80
|
/>
|
|
@@ -133,6 +133,62 @@ The popup origin is validated against the project's `allowedDomains` before any
|
|
|
133
133
|
3. Click **New key**, label it, and copy the raw key — it's shown once.
|
|
134
134
|
4. Open **Settings → Domains** and add the host domain (`app.example.com`, `*.staging.example.com`). `localhost` is auto-allowed in dev.
|
|
135
135
|
|
|
136
|
+
## AI prompt
|
|
137
|
+
|
|
138
|
+
Paste the block below into Claude, ChatGPT, Cursor, or any other LLM and it'll wire the widget into your codebase end-to-end.
|
|
139
|
+
|
|
140
|
+
````markdown
|
|
141
|
+
You are helping me install the **`@pixelmatters/markup`** feedback widget into my web app.
|
|
142
|
+
|
|
143
|
+
## What it is
|
|
144
|
+
A drop-in feedback widget published on npm as `@pixelmatters/markup`. It mounts a floating action button that lets users pin threaded comments (and optional annotated screenshots) anywhere on the page. It runs inside a shadow DOM so it doesn't affect host CSS.
|
|
145
|
+
|
|
146
|
+
## My credentials
|
|
147
|
+
- `apiUrl`: `https://<MY_DEPLOYMENT>.convex.site` ← replace with the value from Markup dashboard → Settings → Install
|
|
148
|
+
- `apiKey`: `markup_...` ← replace with a key from Markup dashboard → Settings → API Keys
|
|
149
|
+
Store these in environment variables (e.g. `VITE_MARKUP_API_URL`, `VITE_MARKUP_API_KEY`, or the equivalent for my framework). Do not hardcode them.
|
|
150
|
+
|
|
151
|
+
## API
|
|
152
|
+
```ts
|
|
153
|
+
import { init, destroy } from '@pixelmatters/markup'
|
|
154
|
+
// or:
|
|
155
|
+
import { MarkupWidget } from '@pixelmatters/markup/react'
|
|
156
|
+
|
|
157
|
+
init({
|
|
158
|
+
apiUrl: string, // required
|
|
159
|
+
apiKey: string, // required
|
|
160
|
+
position?: 'bottom-right' | 'bottom-left', // default 'bottom-right'
|
|
161
|
+
theme?: 'light' | 'dark' | 'auto', // default 'auto'
|
|
162
|
+
}) // returns a destroy() function — call it on unmount / logout / route teardown
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
For a `<script>` tag drop-in (no bundler), use:
|
|
166
|
+
```html
|
|
167
|
+
<script
|
|
168
|
+
type="module"
|
|
169
|
+
src="https://unpkg.com/@pixelmatters/markup"
|
|
170
|
+
data-markup-widget="true"
|
|
171
|
+
data-api-url="..."
|
|
172
|
+
data-api-key="..."
|
|
173
|
+
data-position="bottom-right"
|
|
174
|
+
></script>
|
|
175
|
+
```
|
|
176
|
+
The `data-markup-widget="true"` attribute is required.
|
|
177
|
+
|
|
178
|
+
## Your task
|
|
179
|
+
1. Detect my framework (React, Vue, Svelte, Next.js, plain HTML, etc.) by inspecting the project.
|
|
180
|
+
2. Install `@pixelmatters/markup` with the package manager already in use (pnpm/npm/yarn).
|
|
181
|
+
3. Wire the widget into the **root layout / app shell** so it shows on every page.
|
|
182
|
+
4. Read `apiUrl` and `apiKey` from environment variables; create `.env.example` entries and update `.gitignore` if needed.
|
|
183
|
+
5. For SPAs, ensure the widget is mounted once at the root (not per route) and unmounted via `destroy()` on logout.
|
|
184
|
+
6. Show me a diff of the changes and a one-line note on how to verify (e.g. "run dev server, click the button in the bottom-right").
|
|
185
|
+
|
|
186
|
+
Constraints:
|
|
187
|
+
- Do **not** add CSS imports or provider components — the widget needs neither.
|
|
188
|
+
- Do **not** hardcode the key.
|
|
189
|
+
- If the project has a CSP, add `https://unpkg.com` to `script-src` only if I'm using the `<script>` tag path.
|
|
190
|
+
````
|
|
191
|
+
|
|
136
192
|
## Browser support
|
|
137
193
|
|
|
138
194
|
Modern evergreen browsers (Chrome, Edge, Firefox, Safari) and their mobile equivalents. The widget uses native ESM, shadow DOM, and `IntersectionObserver` — no IE11 / legacy bundle.
|