nostr-components 0.2.7 → 0.3.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 +105 -185
- package/dist/assets/{base-styles-BSEzBDsk.js → base-styles-DC0ilu4S.js} +3 -3
- package/dist/assets/{base-styles-BSEzBDsk.js.map → base-styles-DC0ilu4S.js.map} +1 -1
- package/dist/assets/{copy-delegation-B7y2q5Kn.js → copy-delegation-CcagQMIW.js} +5 -5
- package/dist/assets/{copy-delegation-B7y2q5Kn.js.map → copy-delegation-CcagQMIW.js.map} +1 -1
- package/dist/assets/{dialog-component-Da1ZIYh9.js → dialog-component-Dqg0QU9I.js} +2 -7
- package/dist/assets/dialog-component-Dqg0QU9I.js.map +1 -0
- package/dist/assets/{dialog-likers-BqDn2P_3.js → dialog-likers-D3c7WIMp.js} +5 -5
- package/dist/assets/dialog-likers-D3c7WIMp.js.map +1 -0
- package/dist/assets/index.esm-ByUtE_cm.js +2159 -0
- package/dist/assets/index.esm-ByUtE_cm.js.map +1 -0
- package/dist/assets/nip05-utils-BNBHUmkr.js.map +1 -1
- package/dist/assets/nostr-login-service-D2FmscPI.js +2 -0
- package/dist/assets/nostr-login-service-D2FmscPI.js.map +1 -0
- package/dist/assets/nostr-service-m3Hgc5Xx.js +266 -0
- package/dist/assets/nostr-service-m3Hgc5Xx.js.map +1 -0
- package/dist/assets/nostr-user-component-XEnanH-d.js +2 -0
- package/dist/assets/nostr-user-component-XEnanH-d.js.map +1 -0
- package/dist/assets/{pure-DPo-pzxM.js → pure-laCRX9eG.js} +2 -2
- package/dist/assets/pure-laCRX9eG.js.map +1 -0
- package/dist/assets/{theme-BN1Bvweb.js → theme-C1r1Zw8r.js} +2 -2
- package/dist/assets/{theme-BN1Bvweb.js.map → theme-C1r1Zw8r.js.map} +1 -1
- package/dist/assets/{user-resolver-CMmbtY9Y.js → user-resolver-DqI5KGh6.js} +2 -2
- package/dist/assets/{user-resolver-CMmbtY9Y.js.map → user-resolver-DqI5KGh6.js.map} +1 -1
- package/dist/assets/utils--bxLbhGF.js.map +1 -1
- package/dist/assets/zap-utils-BZcaCsT_.js +2 -0
- package/dist/assets/zap-utils-BZcaCsT_.js.map +1 -0
- package/dist/components/nostr-comment.es.js +26 -26
- package/dist/components/nostr-comment.es.js.map +1 -1
- package/dist/components/nostr-dm.es.js +2 -2
- package/dist/components/nostr-dm.es.js.map +1 -1
- package/dist/components/nostr-follow-button.es.js +6 -7
- package/dist/components/nostr-follow-button.es.js.map +1 -1
- package/dist/components/nostr-like.es.js +16 -16
- package/dist/components/nostr-like.es.js.map +1 -1
- package/dist/components/nostr-live-chat.es.js +3 -3
- package/dist/components/nostr-live-chat.es.js.map +1 -1
- package/dist/components/nostr-post.es.js +19 -19
- package/dist/components/nostr-post.es.js.map +1 -1
- package/dist/components/nostr-profile-badge.es.js +3 -3
- package/dist/components/nostr-profile-badge.es.js.map +1 -1
- package/dist/components/nostr-profile.es.js +2 -2
- package/dist/components/nostr-profile.es.js.map +1 -1
- package/dist/components/nostr-zap.es.js +24 -24
- package/dist/components/nostr-zap.es.js.map +1 -1
- package/dist/nostr-components.es.js +1 -1
- package/dist/nostr-components.es.js.map +1 -1
- package/dist/nostr-components.umd.js +2644 -305
- package/dist/nostr-components.umd.js.map +1 -1
- package/package.json +5 -2
- package/dist/assets/dark-nostrich-running.gif +0 -0
- package/dist/assets/default_dp-NQ3TGrtT.png +0 -0
- package/dist/assets/default_dp.png +0 -0
- package/dist/assets/default_dp_32.png +0 -0
- package/dist/assets/dialog-component-Da1ZIYh9.js.map +0 -1
- package/dist/assets/dialog-likers-BqDn2P_3.js.map +0 -1
- package/dist/assets/light-nostrich-running.gif +0 -0
- package/dist/assets/nostr-service-CnaPxjc6.js +0 -78
- package/dist/assets/nostr-service-CnaPxjc6.js.map +0 -1
- package/dist/assets/nostr-user-component-Cbs97dlK.js +0 -2
- package/dist/assets/nostr-user-component-Cbs97dlK.js.map +0 -1
- package/dist/assets/pure-DPo-pzxM.js.map +0 -1
- package/dist/assets/zap-utils-KFUD_vTU.js +0 -2
- package/dist/assets/zap-utils-KFUD_vTU.js.map +0 -1
- package/dist/index.d.ts +0 -6
- package/dist/nostr-comment.d.ts +0 -4
- package/dist/nostr-dm.d.ts +0 -4
- package/dist/nostr-follow-button.d.ts +0 -4
- package/dist/nostr-like.d.ts +0 -4
- package/dist/nostr-live-chat.d.ts +0 -4
- package/dist/nostr-post.d.ts +0 -4
- package/dist/nostr-profile-badge.d.ts +0 -4
- package/dist/nostr-profile.d.ts +0 -4
- package/dist/nostr-zap.d.ts +0 -4
- package/dist/src/base/base-component/nostr-base-component.d.ts +0 -116
- package/dist/src/base/copy-delegation.d.ts +0 -5
- package/dist/src/base/dialog-component/dialog-component.d.ts +0 -67
- package/dist/src/base/dialog-component/style.d.ts +0 -5
- package/dist/src/base/event-component/nostr-event-component.d.ts +0 -53
- package/dist/src/base/render-options.d.ts +0 -5
- package/dist/src/base/resolvers/event-resolver.d.ts +0 -20
- package/dist/src/base/resolvers/user-resolver.d.ts +0 -19
- package/dist/src/base/text-row/render-name.d.ts +0 -7
- package/dist/src/base/text-row/render-nip05.d.ts +0 -1
- package/dist/src/base/text-row/render-npub.d.ts +0 -1
- package/dist/src/base/text-row/render-text-row.d.ts +0 -9
- package/dist/src/base/user-component/nostr-user-component.d.ts +0 -43
- package/dist/src/common/base-styles.d.ts +0 -44
- package/dist/src/common/constants.d.ts +0 -4
- package/dist/src/common/date-utils.d.ts +0 -9
- package/dist/src/common/icons.d.ts +0 -7
- package/dist/src/common/nip05-utils.d.ts +0 -13
- package/dist/src/common/nostr-service.d.ts +0 -40
- package/dist/src/common/theme.d.ts +0 -4
- package/dist/src/common/types.d.ts +0 -1
- package/dist/src/common/utils.d.ts +0 -34
- package/dist/src/index.d.ts +0 -32
- package/dist/src/nostr-comment/nostr-comment.d.ts +0 -60
- package/dist/src/nostr-comment/render.d.ts +0 -15
- package/dist/src/nostr-comment/utils.d.ts +0 -81
- package/dist/src/nostr-dm/nostr-dm.d.ts +0 -34
- package/dist/src/nostr-dm/render.d.ts +0 -15
- package/dist/src/nostr-follow-button/nostr-follow-button.d.ts +0 -24
- package/dist/src/nostr-follow-button/render.d.ts +0 -11
- package/dist/src/nostr-follow-button/style.d.ts +0 -1
- package/dist/src/nostr-like/dialog-help-style.d.ts +0 -1
- package/dist/src/nostr-like/dialog-help.d.ts +0 -2
- package/dist/src/nostr-like/dialog-likers-style.d.ts +0 -1
- package/dist/src/nostr-like/dialog-likers.d.ts +0 -24
- package/dist/src/nostr-like/like-utils.d.ts +0 -52
- package/dist/src/nostr-like/nostr-like.d.ts +0 -49
- package/dist/src/nostr-like/render.d.ts +0 -10
- package/dist/src/nostr-like/style.d.ts +0 -1
- package/dist/src/nostr-live-chat/nostr-live-chat.d.ts +0 -65
- package/dist/src/nostr-live-chat/render.d.ts +0 -31
- package/dist/src/nostr-post/nostr-post.d.ts +0 -25
- package/dist/src/nostr-post/parse-text.d.ts +0 -8
- package/dist/src/nostr-post/render-content.d.ts +0 -5
- package/dist/src/nostr-post/render.d.ts +0 -19
- package/dist/src/nostr-post/style.d.ts +0 -1
- package/dist/src/nostr-profile/nostr-profile.d.ts +0 -24
- package/dist/src/nostr-profile/render-stats.d.ts +0 -1
- package/dist/src/nostr-profile/render.d.ts +0 -22
- package/dist/src/nostr-profile/style.d.ts +0 -1
- package/dist/src/nostr-profile-badge/nostr-profile-badge.d.ts +0 -34
- package/dist/src/nostr-profile-badge/render.d.ts +0 -11
- package/dist/src/nostr-profile-badge/style.d.ts +0 -1
- package/dist/src/nostr-zap/dialog-help-style.d.ts +0 -5
- package/dist/src/nostr-zap/dialog-help.d.ts +0 -2
- package/dist/src/nostr-zap/dialog-zap-style.d.ts +0 -6
- package/dist/src/nostr-zap/dialog-zap.d.ts +0 -31
- package/dist/src/nostr-zap/dialog-zappers-style.d.ts +0 -1
- package/dist/src/nostr-zap/dialog-zappers.d.ts +0 -25
- package/dist/src/nostr-zap/nostr-zap.d.ts +0 -45
- package/dist/src/nostr-zap/render.d.ts +0 -9
- package/dist/src/nostr-zap/style.d.ts +0 -1
- package/dist/src/nostr-zap/zap-utils.d.ts +0 -53
- package/dist/vite.config.d.ts +0 -2
- package/dist/vite.config.esm.d.ts +0 -2
- package/dist/vite.config.umd.d.ts +0 -2
package/README.md
CHANGED
|
@@ -6,163 +6,104 @@
|
|
|
6
6
|
|
|
7
7
|
Nostr Components makes it easy to embed Zap button, Nostr profiles, posts, and follow buttons in any website. Inspired by <a href="https://unpkg.com/nostr-web-components@0.0.15/demo.html">fiatjaf's Nostr Web Components</a>, this project adds a beautiful UI, a Storybook component generator (for webmasters), and allows embedding Nostr content anywhere on the Internet.
|
|
8
8
|
|
|
9
|
-
🔹 **[
|
|
10
|
-
🔹 **[
|
|
11
|
-
🔹 **[
|
|
12
|
-
🔹 **[
|
|
13
|
-
🔹 **[
|
|
14
|
-
🔹 **[
|
|
15
|
-
🔹 **[
|
|
16
|
-
🔹 **[Nostr Comment](#8-nostr-comment-)** - Decentralized comment system for any website (Under construction)
|
|
17
|
-
🔹 **[Wordpress Integration](#9-wordpress-integration)** - Wordpress Integration
|
|
9
|
+
🔹 **[Zap button](#1-nostr-zap-)**
|
|
10
|
+
🔹 **[Follow button](#2-nostr-follow-)**
|
|
11
|
+
🔹 **[Like button](#3-nostr-like-)**
|
|
12
|
+
🔹 **[Profile Badge](#4-nostr-profile-badge-)**
|
|
13
|
+
🔹 **[Profile](#5-nostr-profile-)**
|
|
14
|
+
🔹 **[Post](#6-nostr-post-)**
|
|
15
|
+
🔹 **[WordPress Integration](#7-wordpress-integration)** - WordPress Integration
|
|
18
16
|
|
|
19
17
|
## 🛠️ Usage
|
|
20
18
|
|
|
21
|
-
###
|
|
19
|
+
### Quick Start
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
#### Option 1: CDN (Recommended for Quick Integration)
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
// Import the main package - this automatically registers all components
|
|
27
|
-
import 'nostr-components';
|
|
28
|
-
|
|
29
|
-
// Or import specific components only
|
|
30
|
-
import 'nostr-components/components/nostr-like';
|
|
31
|
-
import 'nostr-components/components/nostr-zap';
|
|
32
|
-
|
|
33
|
-
// Import themes
|
|
34
|
-
import 'nostr-components/themes/dark';
|
|
35
|
-
// or
|
|
36
|
-
import 'nostr-components/themes/light';
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Then use the components in your JSX/HTML:
|
|
40
|
-
|
|
41
|
-
```tsx
|
|
42
|
-
function MyComponent() {
|
|
43
|
-
return (
|
|
44
|
-
<>
|
|
45
|
-
<nostr-like url="https://example.com" text="Like" />
|
|
46
|
-
<nostr-zap npub="npub1..." theme="dark" />
|
|
47
|
-
</>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
**Note:** When importing from the main package (`import 'nostr-components'`), all components are automatically registered. Individual component imports also work and register only that component.
|
|
53
|
-
|
|
54
|
-
### Option 2: Direct Script Tag Usage
|
|
55
|
-
|
|
56
|
-
For direct HTML usage without a bundler:
|
|
23
|
+
Add the component script to your HTML's `<head>`. Each component can be loaded individually or use the full bundle.
|
|
57
24
|
|
|
58
25
|
```html
|
|
59
26
|
<head>
|
|
60
|
-
<!--
|
|
61
|
-
<script src="
|
|
62
|
-
|
|
27
|
+
<!-- Load individual component (recommended for smaller bundles) -->
|
|
28
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-follow-button.es.js"></script>
|
|
29
|
+
|
|
30
|
+
<!-- Or load the full bundle -->
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/nostr-components.umd.js"></script>
|
|
63
32
|
<script>
|
|
64
|
-
// Initialize components (only needed for UMD build)
|
|
65
33
|
NostrComponents.default.init();
|
|
66
34
|
</script>
|
|
67
|
-
|
|
68
|
-
<!-- Optional: Glide.js CSS for Post Carousel -->
|
|
69
|
-
<!-- Needed only if displaying posts that might contain multiple images/videos -->
|
|
70
|
-
<link
|
|
71
|
-
rel="stylesheet"
|
|
72
|
-
href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css"
|
|
73
|
-
/>
|
|
74
|
-
<link
|
|
75
|
-
rel="stylesheet"
|
|
76
|
-
href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css"
|
|
77
|
-
/>
|
|
78
35
|
</head>
|
|
79
36
|
```
|
|
80
37
|
|
|
81
|
-
|
|
82
|
-
- **ES Module:** Use `<script type="module">import NostrComponents from './dist/nostr-components.es.js'; NostrComponents.init();</script>`.
|
|
83
|
-
|
|
84
|
-
_Note: Replace `./dist/nostr-components._.js`with the actual path to the file on your server or use a CDN link if available (e.g.,`https://nostr-components.web.app/dist/nostr-components.umd.js`).\*
|
|
85
|
-
|
|
86
|
-
### Using the Components
|
|
87
|
-
|
|
88
|
-
Place the component tags anywhere in your HTML/JSX:
|
|
38
|
+
#### Option 2: NPM Package
|
|
89
39
|
|
|
90
|
-
|
|
40
|
+
Install the package via npm:
|
|
91
41
|
|
|
92
|
-
|
|
42
|
+
```bash
|
|
43
|
+
npm install nostr-components
|
|
44
|
+
```
|
|
93
45
|
|
|
94
|
-
|
|
46
|
+
Then import components in your JavaScript/TypeScript:
|
|
95
47
|
|
|
96
|
-
|
|
48
|
+
```javascript
|
|
49
|
+
// Import individual components
|
|
50
|
+
import 'nostr-components/dist/components/nostr-follow-button.es.js';
|
|
51
|
+
import 'nostr-components/dist/components/nostr-zap.es.js';
|
|
52
|
+
import 'nostr-components/dist/components/nostr-like.es.js';
|
|
97
53
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<script
|
|
101
|
-
type="module"
|
|
102
|
-
src="./dist/components/nostr-profile-badge.es.js"
|
|
103
|
-
></script>
|
|
104
|
-
</head>
|
|
105
|
-
<body>
|
|
106
|
-
<nostr-profile-badge
|
|
107
|
-
pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
|
|
108
|
-
></nostr-profile-badge>
|
|
109
|
-
</body>
|
|
54
|
+
// Or import the full bundle
|
|
55
|
+
import 'nostr-components/dist/nostr-components.es.js';
|
|
110
56
|
```
|
|
111
57
|
|
|
112
|
-
|
|
58
|
+
For bundlers (Vite, Webpack, etc.), you can also import the source:
|
|
113
59
|
|
|
114
|
-
|
|
60
|
+
```javascript
|
|
61
|
+
// Import from source (requires bundler)
|
|
62
|
+
import { NostrFollowButton } from 'nostr-components';
|
|
63
|
+
import { NostrZap } from 'nostr-components';
|
|
64
|
+
import { NostrLike } from 'nostr-components';
|
|
65
|
+
```
|
|
115
66
|
|
|
116
|
-
|
|
67
|
+
**Note:** When using npm packages, make sure your bundler is configured to handle Web Components properly.
|
|
117
68
|
|
|
118
|
-
|
|
69
|
+
**Use the Components:** Place the component tags anywhere in your `<body>`.
|
|
119
70
|
|
|
120
|
-
|
|
71
|
+
### Authentication
|
|
121
72
|
|
|
122
|
-
|
|
73
|
+
All interactive components (Follow, Like, Zap, DM, Live Chat, Comment) require user authentication. Components use [NostrLogin](https://github.com/nostrband/nostr-login) which supports:
|
|
74
|
+
- **NIP-07 Browser Extensions** (Alby, nos2x, etc.)
|
|
75
|
+
- **NIP-46 Remote Signers** (Bunkers)
|
|
123
76
|
|
|
124
|
-
|
|
125
|
-
<head>
|
|
126
|
-
<script type="module" src="./dist/components/nostr-profile.es.js"></script>
|
|
127
|
-
</head>
|
|
128
|
-
<body>
|
|
129
|
-
<nostr-profile
|
|
130
|
-
pubkey="npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a"
|
|
131
|
-
></nostr-profile>
|
|
132
|
-
</body>
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
**Preview:**
|
|
136
|
-
|
|
137
|
-
|
|
77
|
+
The authentication flow is handled automatically when users interact with components.
|
|
138
78
|
|
|
139
79
|
---
|
|
140
80
|
|
|
141
|
-
##
|
|
81
|
+
## 1. Nostr Zap ⚡
|
|
142
82
|
|
|
143
|
-
|
|
83
|
+
A Lightning Network zap button that allows users to send sats to any Nostr user with a lightning address or LNURL.
|
|
144
84
|
|
|
145
85
|
**Usage:**
|
|
146
86
|
|
|
147
87
|
```html
|
|
148
88
|
<head>
|
|
149
|
-
<script type="module" src="
|
|
89
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-zap.es.js"></script>
|
|
150
90
|
</head>
|
|
151
91
|
<body>
|
|
152
|
-
<nostr-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
92
|
+
<nostr-zap
|
|
93
|
+
npub="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"
|
|
94
|
+
theme="dark"
|
|
95
|
+
text="⚡ Zap Me"
|
|
96
|
+
></nostr-zap>
|
|
156
97
|
</body>
|
|
157
98
|
```
|
|
158
99
|
|
|
159
100
|
**Preview:**
|
|
160
101
|
|
|
161
|
-
|
|
162
103
|
|
|
163
104
|
---
|
|
164
105
|
|
|
165
|
-
##
|
|
106
|
+
## 2. Nostr Follow ➕
|
|
166
107
|
|
|
167
108
|
A simple button that allows users to follow a Nostr profile.
|
|
168
109
|
|
|
@@ -172,12 +113,12 @@ A simple button that allows users to follow a Nostr profile.
|
|
|
172
113
|
<head>
|
|
173
114
|
<script
|
|
174
115
|
type="module"
|
|
175
|
-
src="
|
|
116
|
+
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-follow-button.es.js"
|
|
176
117
|
></script>
|
|
177
118
|
</head>
|
|
178
119
|
<body>
|
|
179
120
|
<nostr-follow-button
|
|
180
|
-
|
|
121
|
+
npub="npub1qsvv5ttv6mrlh38q8ydmw3gzwq360mdu8re2vr7rk68sqmhmsh4svhsft3"
|
|
181
122
|
></nostr-follow-button>
|
|
182
123
|
</body>
|
|
183
124
|
```
|
|
@@ -186,142 +127,111 @@ A simple button that allows users to follow a Nostr profile.
|
|
|
186
127
|
|
|
187
128
|
|
|
188
129
|
|
|
189
|
-
|
|
130
|
+
---
|
|
190
131
|
|
|
191
|
-
|
|
132
|
+
## 3. Nostr Like ❤️
|
|
133
|
+
|
|
134
|
+
A like button that uses NIP-25 (External Content Reactions) to like any URL on the web.
|
|
135
|
+
When URL is not specified, current URL is taken.
|
|
192
136
|
|
|
193
137
|
**Usage:**
|
|
194
138
|
|
|
195
139
|
```html
|
|
196
140
|
<head>
|
|
197
|
-
<script type="module" src="
|
|
141
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-like.es.js"></script>
|
|
198
142
|
</head>
|
|
199
143
|
<body>
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
amount="1000"
|
|
206
|
-
></nostr-zap>
|
|
144
|
+
<!-- Like the current page URL -->
|
|
145
|
+
<nostr-like></nostr-like>
|
|
146
|
+
|
|
147
|
+
<!-- Like a specific URL with custom text -->
|
|
148
|
+
<nostr-like url="https://github.com/saiy2k/nostr-components" text="❤️"></nostr-like>
|
|
207
149
|
</body>
|
|
208
150
|
```
|
|
209
151
|
|
|
210
152
|
**Preview:**
|
|
211
153
|
|
|
212
|
-
|
|
213
155
|
|
|
214
156
|
---
|
|
215
157
|
|
|
216
|
-
##
|
|
158
|
+
## 4. Nostr Profile Badge 🔖
|
|
217
159
|
|
|
218
|
-
A
|
|
160
|
+
A small badge displaying a Nostr profile with a username and avatar.
|
|
219
161
|
|
|
220
162
|
**Usage:**
|
|
221
163
|
|
|
222
164
|
```html
|
|
223
165
|
<head>
|
|
224
|
-
<script
|
|
166
|
+
<script
|
|
167
|
+
type="module"
|
|
168
|
+
src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-profile-badge.es.js"
|
|
169
|
+
></script>
|
|
225
170
|
</head>
|
|
226
171
|
<body>
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<!-- Pre-configured recipient with npub -->
|
|
231
|
-
<nostr-dm
|
|
232
|
-
recipient-npub="npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk"
|
|
233
|
-
theme="light"
|
|
234
|
-
relays="wss://relay.damus.io,wss://relay.primal.net"
|
|
235
|
-
></nostr-dm>
|
|
236
|
-
|
|
237
|
-
<!-- Using NIP-05 identifier -->
|
|
238
|
-
<nostr-dm
|
|
239
|
-
nip05="user@domain.com"
|
|
240
|
-
theme="dark"
|
|
241
|
-
></nostr-dm>
|
|
172
|
+
<nostr-profile-badge
|
|
173
|
+
pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
|
|
174
|
+
></nostr-profile-badge>
|
|
242
175
|
</body>
|
|
243
176
|
```
|
|
244
177
|
|
|
245
|
-
|
|
246
178
|
**Preview:**
|
|
247
179
|
|
|
248
|
-
|
|
249
181
|
|
|
250
182
|
---
|
|
251
183
|
|
|
252
|
-
##
|
|
184
|
+
## 5. Nostr Profile 👤
|
|
253
185
|
|
|
254
|
-
|
|
186
|
+
A detailed profile card showing avatar, name, bio, notes count, followers, etc.
|
|
255
187
|
|
|
256
188
|
**Usage:**
|
|
257
189
|
|
|
258
190
|
```html
|
|
259
191
|
<head>
|
|
260
|
-
<script type="module" src="
|
|
192
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-profile.es.js"></script>
|
|
261
193
|
</head>
|
|
262
194
|
<body>
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
<!-- Pre-configured recipient with npub -->
|
|
267
|
-
<nostr-live-chat
|
|
268
|
-
recipient-npub="npub1g53mukxnjkcmr94fhryzkqutdz2ukq4ks0gvy5af25rgmwsl4ngq43drvk"
|
|
269
|
-
theme="light"
|
|
270
|
-
relays="wss://relay.damus.io,wss://relay.primal.net,wss://relay.snort.social"
|
|
271
|
-
></nostr-live-chat>
|
|
272
|
-
|
|
273
|
-
<!-- Using NIP-05 identifier -->
|
|
274
|
-
<nostr-live-chat
|
|
275
|
-
nip05="user@domain.com"
|
|
276
|
-
theme="dark"
|
|
277
|
-
></nostr-live-chat>
|
|
195
|
+
<nostr-profile
|
|
196
|
+
pubkey="npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a"
|
|
197
|
+
></nostr-profile>
|
|
278
198
|
</body>
|
|
279
199
|
```
|
|
280
200
|
|
|
281
|
-
|
|
282
|
-
|
|
283
201
|
**Preview:**
|
|
284
202
|
|
|
285
|
-
|
|
286
204
|
|
|
287
205
|
---
|
|
288
206
|
|
|
289
|
-
##
|
|
207
|
+
## 6. Nostr Post 📝
|
|
290
208
|
|
|
291
|
-
|
|
209
|
+
Embed any Nostr post by providing the event ID.
|
|
292
210
|
|
|
293
211
|
**Usage:**
|
|
294
212
|
|
|
295
213
|
```html
|
|
296
214
|
<head>
|
|
297
|
-
<script type="
|
|
298
|
-
{
|
|
299
|
-
"imports": {
|
|
300
|
-
"lit": "https://unpkg.com/lit@3.1.0/index.js?module",
|
|
301
|
-
"dayjs": "https://unpkg.com/dayjs@1.11.10/dayjs.min.js?module"
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
</script>
|
|
305
|
-
<script type="module" src="./dist/components/nostr-comment.es.js"></script>
|
|
215
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/nostr-components@latest/dist/components/nostr-post.es.js"></script>
|
|
306
216
|
</head>
|
|
307
217
|
<body>
|
|
308
|
-
<nostr-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
relays="wss://relay.damus.io,wss://nostr.wine,wss://relay.nostr.net"
|
|
312
|
-
></nostr-comment>
|
|
218
|
+
<nostr-post
|
|
219
|
+
eventId="note1t2jvt5vpusrwrxkfu8x8r7q65zzvm32xuur6y7am4zn475r8ucjqmwwhd2"
|
|
220
|
+
></nostr-post>
|
|
313
221
|
</body>
|
|
314
222
|
```
|
|
315
223
|
|
|
316
224
|
**Preview:**
|
|
317
225
|
|
|
318
|
-
|
|
319
227
|
|
|
320
228
|
---
|
|
321
229
|
|
|
322
|
-
##
|
|
230
|
+
## 7. WordPress Integration 🔌
|
|
231
|
+
|
|
232
|
+
The Nostr Components WordPress plugin provides Gutenberg blocks and shortcodes for all components, making it easy to embed Nostr functionality in your WordPress site.
|
|
323
233
|
|
|
324
|
-
|
|
234
|
+
For more details, see the [WordPress Plugin](https://wordpress.org/plugins/saiy2k-nostr-components/).
|
|
325
235
|
|
|
326
236
|
---
|
|
327
237
|
|
|
@@ -333,6 +243,15 @@ Check out our full documentation [here](https://nostr-components.web.app).
|
|
|
333
243
|
|
|
334
244
|
## 🛠️ Development
|
|
335
245
|
|
|
246
|
+
### npm Installation Notes (Windows / newer npm versions)
|
|
247
|
+
|
|
248
|
+
If you encounter dependency resolution errors (`ERESOLVE`) when running `npm install`
|
|
249
|
+
with newer versions of npm, use:
|
|
250
|
+
|
|
251
|
+
````bash
|
|
252
|
+
npm install --legacy-peer-deps
|
|
253
|
+
|
|
254
|
+
|
|
336
255
|
### Storybook Setup
|
|
337
256
|
|
|
338
257
|
This project uses Storybook for component development and testing. The setup includes both public showcase stories and private testing stories.
|
|
@@ -345,9 +264,10 @@ npm run storybook
|
|
|
345
264
|
|
|
346
265
|
# Build Storybook for production (excludes testing stories)
|
|
347
266
|
STORYBOOK_ENV=production npm run build-storybook
|
|
348
|
-
|
|
267
|
+
````
|
|
349
268
|
|
|
350
269
|
**Story Organization:**
|
|
270
|
+
|
|
351
271
|
- **Public Stories**: Showcase stories for component demos and documentation
|
|
352
272
|
- **Testing Stories**: Private stories for development testing (excluded from production builds)
|
|
353
273
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var w=Object.defineProperty;var k=(t,r,e)=>r in t?w(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e;var c=(t,r,e)=>k(t,typeof r!="symbol"?r+"":r,e);import{
|
|
1
|
+
var w=Object.defineProperty;var k=(t,r,e)=>r in t?w(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e;var c=(t,r,e)=>k(t,typeof r!="symbol"?r+"":r,e);import{D as v,c as p,g as m,M as E,N as T}from"./nostr-service-m3Hgc5Xx.js";const I=t=>{if(typeof t!="string"||!t.startsWith("npub1"))return"";try{const r=p.decode(t);if(r&&typeof r.data=="string")return r.data}catch(r){console.error("Failed to decode npub:",r)}return""};function M(t){if(!t||!N(t))return"";try{return p.npubEncode(t.toLowerCase())}catch(r){return console.error("Failed to encode hex to npub:",r),""}}function O(t="",r=3){const e=t.length;if(!t.startsWith("npub1"))return"Invalid nPub: expected npub1...";if(!S(t))return"Invalid nPub";let s="npub1";for(let n=5;n<r+5;n++)s+=t[n];s+="...";let o="";for(let n=e-1;n>=e-r;n--)o=t[n]+o;return s+=o,s}async function z(t,r){const e=await t.fetchEvents({kinds:[m.Repost],"#e":[r||""]}),s=d=>d.tags.filter(g=>g[0]==="p").length===1,o=d=>d.tags.filter(g=>g[0]==="e").length===1,n=Array.from(e).filter(s).length,a=await t.fetchEvents({kinds:[m.Reaction],"#e":[r||""]}),i=0,u=await t.fetchEvents({kinds:[m.Text],"#e":[r||""]}),l=Array.from(u).filter(o).length;return{likes:a.size,reposts:n,zaps:i/E,replies:l}}function C(t){if(t){const r=t.split(",").map(e=>e.trim()).filter(Boolean).filter(y);return r.length?Array.from(new Set(r)):[...v]}return[...v]}function L(t){const r=t==null?void 0:t.trim().toLowerCase();return r==="light"||r==="dark"?r:"light"}function P(t){return t===null?!1:t===""||t.toLowerCase()==="true"}function B(t){const r=document.createElement("div");return r.textContent=t,r.innerHTML}function F(t){try{const r=new URL(t);return["http:","https:"].includes(r.protocol)}catch{return!1}}function y(t){try{const r=new URL(t);return r.protocol==="wss:"||r.protocol==="ws:"}catch{return!1}}function N(t){return/^[0-9a-fA-F]+$/.test(t)&&t.length===64}function S(t){try{const{type:r}=p.decode(t);return r==="npub"}catch{return!1}}function j(t){return/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-\.]+\.[a-zA-Z]{2,}$/.test(t)}function b(t,r){try{const{type:e}=p.decode(t);return e===r}catch{return!1}}function U(t){return b(t,"note")}function D(t){return b(t,"nevent")}function H(t){return navigator.clipboard.writeText(t)}function q(t){try{const r=Date.now(),e=t*1e3,s=r-e,o=Math.floor(s/1e3);if(o<60)return"just now";if(o<3600){const a=Math.floor(o/60);return`${a} ${a===1?"min":"mins"} ago`}if(o<86400){const a=Math.floor(o/3600);return`${a} ${a===1?"hour":"hours"} ago`}if(o<2592e3){const a=Math.floor(o/86400);return`${a} ${a===1?"day":"days"} ago`}if(o<31536e3){const a=Math.floor(o/2592e3);return`${a} ${a===1?"month":"months"} ago`}const n=Math.floor(o/31536e3);return`${n} ${n===1?"year":"years"} ago`}catch(r){return console.error("Error formatting relative time:",r),"unknown"}}var f=(t=>(t[t.Idle=0]="Idle",t[t.Loading=1]="Loading",t[t.Ready=2]="Ready",t[t.Error=3]="Error",t))(f||{});const $="nc:status";class K extends HTMLElement{constructor(e=!0){super();c(this,"nostrService",T.getInstance());c(this,"theme","light");c(this,"errorMessage","");c(this,"nostrReady");c(this,"nostrReadyResolve");c(this,"nostrReadyReject");c(this,"conn",this.channel("connection"));c(this,"_statuses",new Map);c(this,"_overall",0);c(this,"connectSeq",0);e&&this.attachShadow({mode:"open"}),this.resetNostrReadyBarrier()}static get observedAttributes(){return["data-theme","relays"]}connectedCallback(){this.validateInputs()&&(this.getTheme(),this.conn.get()===0&&this.connectToNostr())}disconnectedCallback(){this.shadowRoot&&this._delegated&&this._delegated.clear()}attributeChangedCallback(e,s,o){s!==o&&(e==="data-theme"||e==="relays")&&this.validateInputs()&&(e==="relays"&&(this.resetNostrReadyBarrier(),this.connectToNostr()),e==="data-theme"&&(this.getTheme(),this.render()))}setStatusFor(e,s,o){const n=this._statuses.get(e);if(!(n!==s||s===3&&!!o))return;this._statuses.set(e,s),s===3&&o?this.errorMessage=o:n===3&&s!==3&&(this.errorMessage="");const i=`${e}-status`,u=f[s].toLowerCase();this.getAttribute(i)!==u&&this.setAttribute(i,u);const l=this.computeOverall(),d=f[l].toLowerCase();this._overall!==l?(this._overall=l,this.setAttribute("status",d),this.onStatusChange(l)):l===3&&o&&this.onStatusChange(l),this.dispatchEvent(new CustomEvent($,{detail:{key:e,status:s,all:this.snapshotStatuses(),overall:this._overall,errorMessage:this.errorMessage||void 0},bubbles:!0,composed:!0}))}getStatusFor(e){return this._statuses.get(e)??0}snapshotStatuses(){return Object.fromEntries(this._statuses.entries())}onStatusChange(e){}onNostrRelaysConnected(){}computeOverall(){const e=[...this._statuses.values()];return e.includes(3)?3:e.includes(1)?1:e.includes(2)?2:0}initChannelStatus(e,s,o={reflectOverall:!1}){if(this._statuses.set(e,s),this.setAttribute(`${e}-status`,f[s].toLowerCase()),o.reflectOverall){const n=this.computeOverall();this._overall=n,this.setAttribute("status",f[n].toLowerCase())}}channel(e){return{set:(s,o)=>this.setStatusFor(e,s,o),get:()=>this.getStatusFor(e)}}validateInputs(){const e=this.getAttribute("data-theme")||"light",s=this.getAttribute("relays"),o=this.tagName.toLowerCase();if(e==="light"||e==="dark"){if(s&&typeof s!="string")return this.conn.set(3,"Invalid relays list"),console.error(`Nostr-Components: ${o}: ${this.errorMessage}`),!1;if(s){const a=s.split(",").map(i=>i.trim()).filter(Boolean).filter(i=>!y(i));if(a.length>0){const i=a.join(", ");return this.conn.set(3,`Invalid relay URLs: ${i}. Relay URLs must start with 'wss://' or 'ws://'`),console.error(`Nostr-Components: ${o}: ${this.errorMessage}`),!1}}}else return this.conn.set(3,`Invalid theme '${e}'. Accepted values are 'light', 'dark'`),console.error(`Nostr-Components: ${o}: ${this.errorMessage}`),!1;return this.errorMessage="",!0}async connectToNostr(){var s,o;const e=++this.connectSeq;this.conn.set(1);try{if(await this.nostrService.connectToNostr(this.getRelays()),e!==this.connectSeq)return;this.conn.set(2),(s=this.nostrReadyResolve)==null||s.call(this);try{this.onNostrRelaysConnected()}catch(n){console.error("Error in onNostrRelaysConnected hook:",n)}}catch(n){if(e!==this.connectSeq)return;console.error("Failed to connect to Nostr relays:",n),this.conn.set(3,"Failed to connect to relays"),(o=this.nostrReadyReject)==null||o.call(this,n)}}ensureNostrConnected(){return this.nostrReady}getRelays(){return C(this.getAttribute("relays"))}getTheme(){this.theme=L(this.getAttribute("data-theme"))}delegateEvent(e,s,o){var i;const n=this.shadowRoot;if(!n)return;const a=`${e}:${s}`;(i=this._delegated)!=null&&i.has(a)||(this._delegated||(this._delegated=new Set),this._delegated.add(a),n.addEventListener(e,u=>{u.target.closest(s)&&o(u)}))}addDelegatedListener(e,s,o){this.delegateEvent(e,s,o)}renderError(e){return`Error: ${e}`}updateHostClasses(){const e=this.computeOverall()===1,s=this.computeOverall()===3,o=this.computeOverall()===2;this.classList.remove("is-clickable","is-disabled","is-error"),e?this.classList.add("is-disabled"):s?this.classList.add("is-error"):o&&this.classList.add("is-clickable")}render(){this.updateHostClasses(),this.renderContent()}handleNjumpClick(e,s,o){if(this.computeOverall()!==2)return;const n=new CustomEvent(e,{detail:s,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(n)&&window.open(`https://njump.me/${o}`,"_blank","noopener,noreferrer")}resetNostrReadyBarrier(){this.connectSeq++,this.nostrReady=new Promise((e,s)=>{this.nostrReadyResolve=e,this.nostrReadyReject=s})}}function x(){return`
|
|
2
2
|
:host {
|
|
3
3
|
/* === GENERIC DESIGN TOKENS === */
|
|
4
4
|
--nostrc-color-background: #ffffff;
|
|
@@ -141,5 +141,5 @@ var w=Object.defineProperty;var k=(t,r,e)=>r in t?w(t,r,{enumerable:!0,configura
|
|
|
141
141
|
font-size: 2em;
|
|
142
142
|
margin: auto;
|
|
143
143
|
}
|
|
144
|
-
`};export{
|
|
145
|
-
//# sourceMappingURL=base-styles-
|
|
144
|
+
`};export{K as N,f as a,S as b,F as c,H as d,B as e,q as f,V as g,M as h,N as i,U as j,D as k,z as l,O as m,I as n,P as p,j as v};
|
|
145
|
+
//# sourceMappingURL=base-styles-DC0ilu4S.js.map
|