@rlse/widget 0.2.0 → 0.2.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 +103 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# @rlse/widget
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Multi-framework release notes widget for [ rlse.dev](https://rlse.dev). Works with React, Vue, Angular, Svelte, Astro, and vanilla JavaScript.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@rlse/widget)
|
|
6
6
|
[](https://socket.dev/npm/package/@rlse/widget)
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
|
+
- **Multi-framework**: React, Vue, Angular, Svelte, Astro, Vanilla JS
|
|
11
|
+
- **Three variants**: Floating button, embedded panel, dropdown menu
|
|
10
12
|
- **Smart triggers**: Manual button, auto-popup on new releases, or both
|
|
11
13
|
- **Unread badge**: Shows count of unseen changes
|
|
12
14
|
- **App filtering**: Show changes for a specific application or all
|
|
@@ -21,6 +23,8 @@ npm install @rlse/widget
|
|
|
21
23
|
|
|
22
24
|
## Quick Start
|
|
23
25
|
|
|
26
|
+
### React / Next.js
|
|
27
|
+
|
|
24
28
|
```tsx
|
|
25
29
|
import { RlseWidget } from '@rlse/widget';
|
|
26
30
|
|
|
@@ -34,6 +38,60 @@ function App() {
|
|
|
34
38
|
}
|
|
35
39
|
```
|
|
36
40
|
|
|
41
|
+
### Vue / Nuxt
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<script setup>
|
|
45
|
+
import { RlseWidget } from '@rlse/widget/vue';
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<RlseWidget org-slug="your-org-slug" />
|
|
50
|
+
</template>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Angular
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { RlseWidgetComponent } from '@rlse/widget/angular';
|
|
57
|
+
|
|
58
|
+
@Component({
|
|
59
|
+
imports: [RlseWidgetComponent],
|
|
60
|
+
template: `<rlse-widget orgSlug="your-org-slug"></rlse-widget>`
|
|
61
|
+
})
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Svelte / SvelteKit
|
|
65
|
+
|
|
66
|
+
```svelte
|
|
67
|
+
<script>
|
|
68
|
+
import { RlseWidget } from '@rlse/widget/svelte';
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<RlseWidget orgSlug="your-org-slug" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Astro
|
|
75
|
+
|
|
76
|
+
```astro
|
|
77
|
+
---
|
|
78
|
+
import { RlseWidget } from '@rlse/widget/react'; // or vue/svelte
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
<RlseWidget orgSlug="your-org-slug" client:load />
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Vanilla JS (CDN)
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<script>
|
|
88
|
+
window.rlseWidgetConfig = {
|
|
89
|
+
orgSlug: 'your-org-slug',
|
|
90
|
+
};
|
|
91
|
+
</script>
|
|
92
|
+
<script async src="https://rlse.dev/widget.js"></script>
|
|
93
|
+
```
|
|
94
|
+
|
|
37
95
|
## Configuration
|
|
38
96
|
|
|
39
97
|
### Required
|
|
@@ -56,9 +114,15 @@ function App() {
|
|
|
56
114
|
| `primaryColor` | `string` | `#3b82f6` | Accent color (hex) |
|
|
57
115
|
| `autoShowAfter` | `number` | `7` | Days before auto-popup triggers again |
|
|
58
116
|
|
|
59
|
-
##
|
|
117
|
+
## Widget Variants
|
|
118
|
+
|
|
119
|
+
### RlseWidget (Floating Button)
|
|
120
|
+
|
|
121
|
+
A floating trigger button that opens a modal. Best for standalone pages.
|
|
60
122
|
|
|
61
123
|
```tsx
|
|
124
|
+
import { RlseWidget } from '@rlse/widget';
|
|
125
|
+
|
|
62
126
|
<RlseWidget
|
|
63
127
|
orgSlug="acme-corp"
|
|
64
128
|
appSlug="dashboard"
|
|
@@ -66,13 +130,43 @@ function App() {
|
|
|
66
130
|
position="bottom-right"
|
|
67
131
|
theme="auto"
|
|
68
132
|
limit={5}
|
|
69
|
-
triggerLabel="
|
|
70
|
-
modalTitle="
|
|
71
|
-
primaryColor="#
|
|
72
|
-
|
|
73
|
-
|
|
133
|
+
triggerLabel="What's New"
|
|
134
|
+
modalTitle="Release Notes"
|
|
135
|
+
primaryColor="#3b82f6"
|
|
136
|
+
/>;
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### RlseWidgetEmbed (Inline Panel)
|
|
140
|
+
|
|
141
|
+
An embeddable panel for sidebars or dedicated pages. Great for dashboards.
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import { RlseWidgetEmbed } from '@rlse/widget';
|
|
145
|
+
|
|
146
|
+
<RlseWidgetEmbed
|
|
147
|
+
orgSlug="acme-corp"
|
|
148
|
+
appSlug="dashboard"
|
|
149
|
+
showHeader={true}
|
|
150
|
+
showFooter={true}
|
|
151
|
+
/>;
|
|
74
152
|
```
|
|
75
153
|
|
|
154
|
+
### RlseWidgetMenu (Dropdown)
|
|
155
|
+
|
|
156
|
+
A compact dropdown for navigation bars. Perfect for user menus.
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import { RlseWidgetMenu } from '@rlse/widget';
|
|
160
|
+
|
|
161
|
+
<RlseWidgetMenu
|
|
162
|
+
orgSlug="acme-corp"
|
|
163
|
+
appSlug="dashboard"
|
|
164
|
+
triggerLabel="What's New"
|
|
165
|
+
/>;
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
````
|
|
169
|
+
|
|
76
170
|
## Trigger Modes
|
|
77
171
|
|
|
78
172
|
- **`manual`** — Floating button always visible; click to open. Unread badge shows unseen count.
|
|
@@ -93,7 +187,7 @@ Use `primaryColor` to match your brand:
|
|
|
93
187
|
|
|
94
188
|
```tsx
|
|
95
189
|
<RlseWidget orgSlug="acme-corp" primaryColor="#ff6b6b" />
|
|
96
|
-
|
|
190
|
+
````
|
|
97
191
|
|
|
98
192
|
## Troubleshooting
|
|
99
193
|
|
|
@@ -119,3 +213,4 @@ Use `primaryColor` to match your brand:
|
|
|
119
213
|
|
|
120
214
|
- Email: support@rlse.dev
|
|
121
215
|
- Dashboard: Settings → Widget Embed
|
|
216
|
+
- Full documentation: https://rlse.dev/docs/widget
|