@konemono/nostr-share-component 0.1.0 → 0.2.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 +63 -16
- package/dist/nostr-share-component.es.js +605 -626
- package/dist/nostr-share-component.js +13 -16
- package/dist/nostr-share-component.umd.js +13 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,80 @@
|
|
|
1
1
|
|
|
2
|
+
[EN](./README-EN.md)
|
|
2
3
|
# nostr-share-component
|
|
3
4
|
[](https://www.jsdelivr.com/package/npm/@konemono/nostr-share-component)
|
|
5
|
+
## 使い方
|
|
6
|
+
[Demo](https://tsukemonogit.github.io/nostr-share-component/)
|
|
7
|
+
### 1. `<head>`に以下のコードを挿入
|
|
8
|
+
バージョン部分 `{version}` を適切なバージョン（例: `0.0.10`）に置き換えてください。
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
```html
|
|
11
|
+
<script src="
|
|
12
|
+
https://cdn.jsdelivr.net/npm/@konemono/nostr-share-component@{version}/dist/nostr-share-component.min.js
|
|
13
|
+
"></script>
|
|
14
|
+
```
|
|
6
15
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
### 2. 任意の位置に以下のコードを配置
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<nostr-share></nostr-share>
|
|
11
20
|
```
|
|
12
21
|
|
|
13
|
-
|
|
22
|
+
- data-url、data-title、data-text にそれぞれ共有したい文字列を指定することができます。
|
|
23
|
+
- url、title、text が指定されていない場合、設置したサイトのURLとタイトルが共有されます。
|
|
14
24
|
|
|
15
|
-
{url}{title}{text}はそれぞれ共有したい文字列に変換
|
|
16
|
-
（なくても良い）
|
|
17
25
|
|
|
18
|
-
|
|
26
|
+
例:
|
|
27
|
+
```html
|
|
28
|
+
<nostr-share data-url="https://example.com" data-title="Example Title" data-text="Example Text"></nostr-share>
|
|
29
|
+
```
|
|
19
30
|
|
|
20
|
-
icon={true}にすると◯サイズのボタン(なくても良い。defaultはfalse)
|
|
21
31
|
|
|
32
|
+
### 3. ボタンの種類を指定（任意）
|
|
33
|
+
data-type に以下の値を指定できます：
|
|
34
|
+
- mini
|
|
35
|
+
- icon ( icon-size で アイコンのサイズを指定できます。)
|
|
36
|
+
- 指定なしの場合は default になります。
|
|
22
37
|
|
|
23
|
-
|
|
24
|
-
|
|
38
|
+
|
|
39
|
+
### 4. カスタム共有ボタンを作成
|
|
40
|
+
コンポーネント内に任意のコンテンツを挿入することで、共有ボタンをカスタマイズできます。
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<nostr-share style="" data-url="https://example.com" data-title="Example Title" data-text="Example Text">
|
|
44
|
+
Share on Nostr
|
|
45
|
+
</nostr-share>
|
|
25
46
|
```
|
|
26
47
|
|
|
27
|
-
buttonType は mini か icon （指定なしだと default）
|
|
28
48
|
|
|
29
|
-
|
|
49
|
+
-----
|
|
30
50
|
|
|
51
|
+
|
|
52
|
+
# クライアント追加ガイド
|
|
53
|
+
|
|
54
|
+
このプロジェクトでは、リンク共有機能を提供するために複数のクライアントをサポートしています。以下のガイドに従って、新しいクライアントをリストに追加し、プルリクエストを送信してください。
|
|
55
|
+
|
|
56
|
+
## クライアントリストの形式
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
[list](src/lib/list.ts) 配列に新しいクライアントを以下の形式で追加します：
|
|
61
|
+
```javascript
|
|
62
|
+
{
|
|
63
|
+
name: "クライアント名",
|
|
64
|
+
url: "https://example.com/share?text={text}&url={url}&title={title}",
|
|
65
|
+
icon: "https://example.com/favicon.ico",
|
|
66
|
+
}
|
|
31
67
|
```
|
|
32
|
-
|
|
33
|
-
|
|
68
|
+
## フィールドの説明
|
|
69
|
+
- name: クライアントの名前（短くわかりやすいものを推奨）。
|
|
70
|
+
- url: クライアントのリンク共有URL。
|
|
71
|
+
- {text}, {url}, {title} のパラメータを含めることで動的なリンク生成を可能にします。
|
|
72
|
+
- icon: クライアントのファビコンURL（任意ですが、できるだけ提供してください）。
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
## 注意事項
|
|
76
|
+
- 現在のリスト形式は試験的なものであり、今後変更される可能性があります。そのため、追加されたクライアントは将来的に形式変更への対応が必要になる場合があります。
|
|
77
|
+
- 新しいクライアントを追加する際は、他のクライアントに影響を与えないよう注意してください。
|
|
78
|
+
|
|
79
|
+
## サポート
|
|
80
|
+
ご不明点がある場合や提案がある場合は、Issue を作成してください。
|