@appbuildersph/badge 0.1.0 → 0.1.1
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 +77 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,79 @@
|
|
|
1
1
|
# @appbuildersph/badge
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Floating "Verified Badge" web component for the App Builders PH SDK — a small,
|
|
4
|
+
self-contained widget any site can append to show it's built/monitored by App
|
|
5
|
+
Builders PH.
|
|
6
|
+
|
|
7
|
+
## How it works
|
|
8
|
+
|
|
9
|
+
- Renders as a `<appbuilders-badge>` custom element with a Shadow DOM, so its
|
|
10
|
+
styles never leak into (or get overridden by) the host page.
|
|
11
|
+
- Pure client-side: `mount()`/`unmount()` are safe no-ops when there's no
|
|
12
|
+
`document` (SSR, Node scripts), so the package can be imported anywhere
|
|
13
|
+
without guards.
|
|
14
|
+
- v1 is a static badge: it shows "Verified by App Builders PH" and, if
|
|
15
|
+
`expandable`, expands on click to show the app name, organization, and
|
|
16
|
+
environment.
|
|
17
|
+
|
|
18
|
+
## Usage via `@appbuildersph/core` (recommended)
|
|
19
|
+
|
|
20
|
+
If you're using `AppBuilders.init()`, the badge is wired up automatically —
|
|
21
|
+
enabled by default and mounted for you:
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import { AppBuilders } from "@appbuildersph/core";
|
|
25
|
+
|
|
26
|
+
AppBuilders.init({
|
|
27
|
+
appName: "My App",
|
|
28
|
+
organization: "Acme Inc",
|
|
29
|
+
environment: "production",
|
|
30
|
+
badge: {
|
|
31
|
+
position: "bottom-left",
|
|
32
|
+
theme: "dark",
|
|
33
|
+
expandable: true,
|
|
34
|
+
},
|
|
35
|
+
// or simply `badge: false` to disable it
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// later, e.g. on unmount/cleanup:
|
|
39
|
+
AppBuilders.badge()?.unmount();
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Standalone usage (no core)
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
import { Badge } from "@appbuildersph/badge";
|
|
46
|
+
|
|
47
|
+
const badge = new Badge(
|
|
48
|
+
{ appName: "My App", organization: "Acme Inc", environment: "production", verified: true },
|
|
49
|
+
{ position: "bottom-right", theme: "system", expandable: true },
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
badge.mount(); // appends <appbuilders-badge> to document.body
|
|
53
|
+
badge.update({ theme: "dark" }); // re-render with new config
|
|
54
|
+
badge.unmount(); // remove it
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Script tag / CDN usage
|
|
58
|
+
|
|
59
|
+
For plain HTML pages with no build step, use the prebuilt IIFE bundle
|
|
60
|
+
(`dist/appbuilders-badge.global.js`), which exposes a global `AppBuildersBadge`:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<script src="https://unpkg.com/@appbuildersph/badge/dist/appbuilders-badge.global.js"></script>
|
|
64
|
+
<script>
|
|
65
|
+
new AppBuildersBadge.Badge({ appName: "My Site" }, true).mount();
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Config
|
|
70
|
+
|
|
71
|
+
`badge` accepts `true` / `false` or a `BadgeConfig` object (all fields optional):
|
|
72
|
+
|
|
73
|
+
| Field | Values | Default |
|
|
74
|
+
| ------------ | ---------------------------------------------------------- | -------------- |
|
|
75
|
+
| `enabled` | `boolean` | `true` |
|
|
76
|
+
| `theme` | `"dark" \| "light" \| "system"` | `"system"` |
|
|
77
|
+
| `position` | `"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"` | `"bottom-right"` |
|
|
78
|
+
| `animation` | `boolean` | `true` |
|
|
79
|
+
| `expandable` | `boolean` | `true` |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appbuildersph/badge",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Floating Verified Badge UI web component for the App Builders PH SDK.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dist"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@appbuildersph/shared": "0.0.
|
|
20
|
+
"@appbuildersph/shared": "0.0.3"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"tsup": "^8.3.5",
|