Nostr Web Components デモ
使い方ガイド
基本的なセットアップ
Nostr Web Componentsは軽量で使いやすいWebコンポーネントライブラリです。Nostrプロトコル機能をWebアプリケーションに簡単に統合できます。
CDNを使用したインストール
<script src="https://cdn.jsdelivr.net/npm/@konemono/nostr-web-components@latest/dist/nostr-web-components.iife.js"></script>主要なコンポーネント
- nostr-container: 子コンポーネントにリレー設定を提供
- nostr-note: 個別のNostr投稿を表示
- nostr-profile: ユーザープロフィールを表示
- nostr-list: 複数の投稿をリスト表示
-
nostr-naddr:
naddr形式のNostrエンコード識別子をもとにイベントリストを表示（例：kind 10003/30003のブックマークやリスト）。表示形式やソート順、ページネーションなどを属性で制御可能。
NostrNote コンポーネント
カード表示（デフォルト）
<nostr-note
id="nevent1qvzqqqqq9gpzq2aj4wlutzft00dg77x4x6pdjy7vnfzxk30pry5lpy6a3l0uks9aqyxhwumn8ghj77tpvf6jumt9qys8wumn8ghj7un9d3shjtt2wqhxummnw3ezuamfwfjkgmn9wshx5uqpr4mhxue69uhhyetvv9ujumn0wd68ytnhd9ex2erwv46zu6nsqyxhwumn8ghj7mn0wvhxcmmvqyghwumn8ghj7mnxwfjkccte9eshquqqyqv8dx4g48jf0gwdyldmsde4z0wpqj65wkpzq3a0d7zjqeacc43huavy3te"
display="card">
</nostr-note>コンパクト表示
<nostr-note
id="nevent1qvzqqqqq9gpzq2aj4wlutzft00dg77x4x6pdjy7vnfzxk30pry5lpy6a3l0uks9aqyxhwumn8ghj77tpvf6jumt9qys8wumn8ghj7un9d3shjtt2wqhxummnw3ezuamfwfjkgmn9wshx5uqpr4mhxue69uhhyetvv9ujumn0wd68ytnhd9ex2erwv46zu6nsqyxhwumn8ghj7mn0wvhxcmmvqyghwumn8ghj7mnxwfjkccte9eshquqqyqv8dx4g48jf0gwdyldmsde4z0wpqj65wkpzq3a0d7zjqeacc43huavy3te"
display="compact">
</nostr-note>