@pigmilcom/a11y 1.0.8 → 1.1.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 +107 -18
- package/dist/a11y.cdn.js +96 -16
- package/dist/index.css +90 -10
- package/dist/index.js +126 -8
- package/dist/index.min.css +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.mjs +124 -7
- package/package.json +1 -1
- package/src/cdn.jsx +2 -2
package/README.md
CHANGED
|
@@ -61,6 +61,43 @@ PigmilA11y.unmount(); // remove the widget and clean up
|
|
|
61
61
|
|
|
62
62
|
---
|
|
63
63
|
|
|
64
|
+
## Plans & domain validation
|
|
65
|
+
|
|
66
|
+
Starting from v1.1.0, the widget validates the hosting domain against the **PIGMIL API** before rendering. This enables usage-based quotas and per-domain access control.
|
|
67
|
+
|
|
68
|
+
### Tiers
|
|
69
|
+
|
|
70
|
+
| Plan | Requests / day | Requests / month | PIGMIL branding |
|
|
71
|
+
| ------ | -------------- | ---------------- | --------------- |
|
|
72
|
+
| Free | 1,000 | 30,000 | Shown in footer |
|
|
73
|
+
| Pro | Unlimited | Unlimited | Hidden |
|
|
74
|
+
|
|
75
|
+
A "request" is one widget initialisation (page load / route change).
|
|
76
|
+
|
|
77
|
+
### How validation works
|
|
78
|
+
|
|
79
|
+
1. On widget mount the browser makes a single `GET` request to the PIGMIL API.
|
|
80
|
+
2. The API checks whether the domain is registered and within quota.
|
|
81
|
+
3. The response (`valid`, `blocked`, or error) controls whether the widget renders:
|
|
82
|
+
- **`valid`** — widget renders normally.
|
|
83
|
+
- **`blocked`** — quota exceeded; widget does not render until the day / month resets or the plan is upgraded.
|
|
84
|
+
- **`error`** / API unreachable — widget does not render (fail-closed on non-local domains).
|
|
85
|
+
4. The result is cached in `sessionStorage` for 30 minutes to avoid redundant calls.
|
|
86
|
+
|
|
87
|
+
### Local / development environments
|
|
88
|
+
|
|
89
|
+
Validation is **automatically skipped** when the page runs on:
|
|
90
|
+
- `localhost`, `127.x.x.x`, `::1`, `0.0.0.0`
|
|
91
|
+
- Any non-standard port (e.g. `:3000`, `:5173`, `:8080`)
|
|
92
|
+
|
|
93
|
+
The widget always renders in these environments with a free-plan appearance. No API key or sign-up is required during development.
|
|
94
|
+
|
|
95
|
+
### Current status (mock mode)
|
|
96
|
+
|
|
97
|
+
The API endpoint is being implemented in the PIGMIL backend. Until it is live, `src/license.js` uses a **mock response** that always returns `{ ok: true, plan: 'free', blocked: false }`. To switch to the real API, remove the `_mock` block and uncomment the `fetch` block in that file.
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
64
101
|
## Features
|
|
65
102
|
|
|
66
103
|
- Text size — Normal / Large / X-Large
|
|
@@ -120,13 +157,71 @@ class rules applied to `<html>`.
|
|
|
120
157
|
### 2 — Drop in the widget
|
|
121
158
|
|
|
122
159
|
```jsx
|
|
123
|
-
import
|
|
160
|
+
import a11y from '@pigmilcom/a11y';
|
|
161
|
+
|
|
162
|
+
// Assign to a capitalized variable to use in JSX
|
|
163
|
+
const A11y = a11y;
|
|
164
|
+
|
|
165
|
+
<A11y className="fixed bottom-4 right-4 rounded" />
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
The `className` prop is merged onto the trigger button — use Tailwind classes,
|
|
169
|
+
custom classes, or anything your bundler supports to position the widget.
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
## Customising the widget with CSS
|
|
174
|
+
|
|
175
|
+
The widget exposes stable **`a11y-widget-*`** class names on its key elements
|
|
176
|
+
as a public API. Target them from a `<style>` tag (CDN / self-hosted) or your
|
|
177
|
+
own stylesheet (React):
|
|
178
|
+
|
|
179
|
+
```html
|
|
180
|
+
<style>
|
|
181
|
+
/* Trigger button */
|
|
182
|
+
.a11y-widget-btn {
|
|
183
|
+
border-radius: 8px !important;
|
|
184
|
+
background: rgba(15, 15, 40, 0.9) !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Dialog panel */
|
|
188
|
+
.a11y-widget-dialog {
|
|
189
|
+
border-color: rgba(99, 102, 241, 0.4) !important;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Toggle option rows */
|
|
193
|
+
.a11y-widget-toggle-btn:hover {
|
|
194
|
+
background: rgba(99, 102, 241, 0.06) !important;
|
|
195
|
+
}
|
|
196
|
+
</style>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
| Public class | Element |
|
|
200
|
+
| --------------------------- | -------------------- |
|
|
201
|
+
| `a11y-widget-btn` | Trigger button |
|
|
202
|
+
| `a11y-widget-dialog` | Dialog panel |
|
|
203
|
+
| `a11y-widget-toggle-btn` | Each toggle option |
|
|
204
|
+
|
|
205
|
+
> Place your `<style>` tag **after** the widget `<script>` tag so it takes
|
|
206
|
+
> precedence in the cascade. Use `!important` where the widget's base styles
|
|
207
|
+
> have higher specificity.
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
## Tailwind CSS support
|
|
212
|
+
|
|
213
|
+
Tailwind utility classes work transparently via the `className` prop:
|
|
214
|
+
|
|
215
|
+
```jsx
|
|
216
|
+
import a11y from '@pigmilcom/a11y';
|
|
217
|
+
const A11y = a11y;
|
|
124
218
|
|
|
125
|
-
|
|
219
|
+
// Tailwind classes are passed straight through to the trigger button
|
|
220
|
+
<A11y className="fixed bottom-6 right-6 rounded-full shadow-xl" />
|
|
126
221
|
```
|
|
127
222
|
|
|
128
|
-
|
|
129
|
-
|
|
223
|
+
Because the classes come from *your* source files, Tailwind's JIT scanner
|
|
224
|
+
picks them up automatically. No purge exceptions or safelist entries needed.
|
|
130
225
|
|
|
131
226
|
---
|
|
132
227
|
|
|
@@ -137,14 +232,16 @@ the widget wherever suits your layout.
|
|
|
137
232
|
```jsx
|
|
138
233
|
// app/layout.jsx
|
|
139
234
|
import '@pigmilcom/a11y/styles';
|
|
140
|
-
import
|
|
235
|
+
import a11y from '@pigmilcom/a11y';
|
|
236
|
+
|
|
237
|
+
const A11y = a11y;
|
|
141
238
|
|
|
142
239
|
export default function RootLayout({ children }) {
|
|
143
240
|
return (
|
|
144
241
|
<html lang="en">
|
|
145
242
|
<body>
|
|
146
243
|
{children}
|
|
147
|
-
<
|
|
244
|
+
<A11y className="fixed bottom-4 right-4 rounded" />
|
|
148
245
|
</body>
|
|
149
246
|
</html>
|
|
150
247
|
);
|
|
@@ -155,25 +252,17 @@ export default function RootLayout({ children }) {
|
|
|
155
252
|
|
|
156
253
|
### Vite + React
|
|
157
254
|
|
|
158
|
-
```jsx
|
|
159
|
-
// src/main.jsx
|
|
160
|
-
import '@pigmilcom/a11y/styles';
|
|
161
|
-
import React from 'react';
|
|
162
|
-
import ReactDOM from 'react-dom/client';
|
|
163
|
-
import App from './App';
|
|
164
|
-
|
|
165
|
-
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
166
|
-
```
|
|
167
|
-
|
|
168
255
|
```jsx
|
|
169
256
|
// src/App.jsx
|
|
170
|
-
import
|
|
257
|
+
import a11y from '@pigmilcom/a11y';
|
|
258
|
+
|
|
259
|
+
const A11y = a11y;
|
|
171
260
|
|
|
172
261
|
export default function App() {
|
|
173
262
|
return (
|
|
174
263
|
<>
|
|
175
264
|
{/* …your content… */}
|
|
176
|
-
<
|
|
265
|
+
<A11y className="fixed bottom-4 right-4 rounded" />
|
|
177
266
|
</>
|
|
178
267
|
);
|
|
179
268
|
}
|