@konemono/nostr-share-component 0.3.0 → 0.4.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 +59 -43
- package/dist/nostr-share-component.es.js +868 -901
- package/dist/nostr-share-component.js +16 -26
- package/dist/nostr-share-component.umd.js +16 -26
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,80 +1,96 @@
|
|
|
1
|
+
[JA](./README-ja.md)
|
|
1
2
|
|
|
2
|
-
[EN](./README-EN.md)
|
|
3
3
|
# nostr-share-component
|
|
4
|
+
|
|
4
5
|
[](https://www.jsdelivr.com/package/npm/@konemono/nostr-share-component)
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
6
9
|
[Demo](https://tsukemonogit.github.io/nostr-share-component/)
|
|
7
|
-
### 1. `<head>`に以下のコードを挿入
|
|
8
|
-
バージョン部分 `{version}` を適切なバージョン（例: `0.0.10`）に置き換えてください。
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
<script src="
|
|
12
|
-
https://cdn.jsdelivr.net/npm/@konemono/nostr-share-component@{version}/dist/nostr-share-component.min.js
|
|
13
|
-
"></script>
|
|
14
|
-
```
|
|
11
|
+
### 1. Insert the following code in `<head>`
|
|
15
12
|
|
|
16
|
-
|
|
13
|
+
Replace the version part `{version}` with the appropriate version (e.g. `0.0.10`).
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script src="
|
|
17
|
+
https://cdn.jsdelivr.net/npm/@konemono/nostr-share-component@{version}/dist/nostr-share-component.min.js
|
|
18
|
+
"></script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### 2. Place the following code anywhere
|
|
17
22
|
|
|
18
23
|
```html
|
|
19
24
|
<nostr-share></nostr-share>
|
|
20
25
|
```
|
|
21
26
|
|
|
22
|
-
- data-text
|
|
23
|
-
-
|
|
27
|
+
- You can specify the strings you want to share in data-text.
|
|
28
|
+
- If not specified, the URL and title of the site where you installed the site will be shared.
|
|
24
29
|
|
|
30
|
+
Example:
|
|
25
31
|
|
|
26
|
-
例:
|
|
27
32
|
```html
|
|
28
33
|
<nostr-share data-text="Example Text"></nostr-share>
|
|
29
34
|
```
|
|
30
35
|
|
|
36
|
+
### 3. Specify the button type (optional)
|
|
31
37
|
|
|
32
|
-
|
|
33
|
-
data-type に以下の値を指定できます：
|
|
34
|
-
- mini
|
|
35
|
-
- icon ( icon-size で アイコンのサイズを指定できます。)
|
|
36
|
-
- 指定なしの場合は default になります。
|
|
38
|
+
The following values can be specified for data-type:
|
|
37
39
|
|
|
40
|
+
- mini
|
|
41
|
+
- icon (The size of the icon can be specified with icon-size.)
|
|
42
|
+
- If not specified, default will be used.
|
|
38
43
|
|
|
39
|
-
### 4.
|
|
40
|
-
コンポーネント内に任意のコンテンツを挿入することで、共有ボタンをカスタマイズできます。
|
|
44
|
+
### 4. Create a Custom Share Button
|
|
41
45
|
|
|
42
|
-
|
|
43
|
-
<nostr-share data-style="" data-text="Example Text">
|
|
44
|
-
Share on Nostr
|
|
45
|
-
</nostr-share>
|
|
46
|
-
```
|
|
46
|
+
You can individually customize the button and text styles by using `part(button)` and `part(text)`.
|
|
47
47
|
|
|
48
|
+
```css
|
|
49
|
+
nostr-share::part(button) {
|
|
50
|
+
background-color: rgb(0, 136, 255);
|
|
51
|
+
}
|
|
48
52
|
|
|
49
|
-
|
|
53
|
+
nostr-share::part(button):hover {
|
|
54
|
+
background-color: rgb(255, 0, 0);
|
|
55
|
+
}
|
|
50
56
|
|
|
57
|
+
nostr-share::part(text) {
|
|
58
|
+
font-style: italic;
|
|
59
|
+
font-family: "Courier New", Courier, monospace;
|
|
60
|
+
font-size: medium;
|
|
61
|
+
}
|
|
62
|
+
```
|
|
51
63
|
|
|
52
|
-
|
|
64
|
+
---
|
|
53
65
|
|
|
54
|
-
|
|
66
|
+
# Client Adding Guide
|
|
55
67
|
|
|
56
|
-
|
|
68
|
+
This project supports multiple clients to provide link sharing functionality. Please follow the guide below to add new clients to your list and submit a pull request.
|
|
57
69
|
|
|
70
|
+
## Client List Format
|
|
58
71
|
|
|
72
|
+
Add new clients to the [list](src/lib/list.ts) array in the following format:
|
|
59
73
|
|
|
60
|
-
[list](src/lib/list.ts) 配列に新しいクライアントを以下の形式で追加します：
|
|
61
74
|
```javascript
|
|
62
75
|
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
76
|
+
name: "Client name",
|
|
77
|
+
url: "https://example.com/share?text={text}",
|
|
78
|
+
icon: "https://example.com/favicon.ico",
|
|
66
79
|
}
|
|
67
80
|
```
|
|
68
|
-
## フィールドの説明
|
|
69
|
-
- name: クライアントの名前（短くわかりやすいものを推奨）。
|
|
70
|
-
- url: クライアントのリンク共有URL。
|
|
71
|
-
- {text} のパラメータを含めることで動的なリンク生成を可能にします。
|
|
72
|
-
- icon: クライアントのファビコンURL（任意ですが、できるだけ提供してください）。
|
|
73
81
|
|
|
82
|
+
## Field Description
|
|
83
|
+
|
|
84
|
+
- name: Name of the client (short and descriptive is recommended).
|
|
85
|
+
- url: Link sharing URL of the client.
|
|
86
|
+
- Enable dynamic link generation by including {text} parameters.
|
|
87
|
+
- icon: Favicon URL of the client (optional, but please provide it if possible).
|
|
88
|
+
|
|
89
|
+
## Notes
|
|
90
|
+
|
|
91
|
+
- The current list format is experimental and may change in the future. Therefore, added clients may need to support format changes in the future.
|
|
92
|
+
- Be careful when adding new clients so you don't affect other clients.
|
|
74
93
|
|
|
75
|
-
##
|
|
76
|
-
- 現在のリスト形式は試験的なものであり、今後変更される可能性があります。そのため、追加されたクライアントは将来的に形式変更への対応が必要になる場合があります。
|
|
77
|
-
- 新しいクライアントを追加する際は、他のクライアントに影響を与えないよう注意してください。
|
|
94
|
+
## Support
|
|
78
95
|
|
|
79
|
-
|
|
80
|
-
ご不明点がある場合や提案がある場合は、Issue を作成してください。
|
|
96
|
+
If you have any questions or suggestions, please create an issue.
|