From c63cc684ac5ff84e366dd96ecf4a29858f7fc1f8 Mon Sep 17 00:00:00 2001 From: BTCforPlebs Date: Mon, 6 Oct 2025 13:08:47 -0400 Subject: [PATCH] readme --- readme.md | 81 +++++++++++++++---------------------------------------- 1 file changed, 21 insertions(+), 60 deletions(-) diff --git a/readme.md b/readme.md index 21746d7..da34d3f 100644 --- a/readme.md +++ b/readme.md @@ -6,12 +6,7 @@ A lightweight, client‑only Nostr chat widget that can be dropped into any webs ## 🚀 Quick Start -```bash -# clone and open the demo page -git clone https://github.com/yourusername/nostr-web-chat-plugin.git -cd nostr-web-chat-plugin -open demo/index.html # use your preferred browser -``` + Once the demo page is open you can immediately play with the widget: 1. **Add the public key** – see *Configuring the Public Key* section below. @@ -21,45 +16,23 @@ Once the demo page is open you can immediately play with the widget: ## 🔑 Configuring the Public Key (npub) on the Demo Page -We added an easy‑to‑use input bar at the top‑center of the demo page that lets you quickly test the widget with any Nostr npub. The JS code reads the key from **localStorage** under the key `cs_pubkey`. When you set a new npub it temporarily overwrites the hard‑coded `csPubkey` value in `src/chat.js`. This makes testing live chats a breeze without touching the source. +We added an easy‑to‑use input bar at the top‑center of the demo page that lets you quickly test the widget with any Nostr npub. The JS code reads the key from **localStorage** under the key . When you set a new npub it temporarily overwrites the hard‑coded value in . This makes testing live chats a breeze without touching the source. ### How It Works -1. **Add the input bar** – The demo page already contains a small form (see `demo/index.html`). +1. **Add the input bar** – The demo page already contains a small form (see ). 2. **Enter an npub** – Click *Set Npub* to store the value in localStorage. 3. **Reload the page** – The widget automatically loads the new key from localStorage and uses it for all DM interactions. -4. **Clear** – Delete `cs_pubkey` from localStorage or set it back to the original value to revert. +4. **Clear** – Delete from localStorage or set it back to the original value to revert. -Below is a quick snippet of the relevant part of `demo/index.html` for reference: +Below is a quick snippet of the relevant part of for reference: -```html -
- - -
- -``` -The source file `src/chat.js` then checks localStorage on initialization: -```js -// At runtime, override the hard‑coded key if present in localStorage -const stored = localStorage.getItem('cs_pubkey'); -if (stored) { - CONFIG.csPubkey = stored; -} -``` +The source file then checks localStorage on initialization: -You can keep the original placeholder in `src/chat.js` for production releases. For development or demo purposes, this pattern is the recommended way. + + +You can keep the original placeholder in for production releases. For development or demo purposes, this pattern is the recommended way. --- @@ -67,7 +40,7 @@ You can keep the original placeholder in `src/chat.js` for production releases. 1. Create a Nostr identity using any Nostr client. 2. Export your public key in hex format (not npub). -3. Add it to the `csPubkey` field in `src/chat.js`. +3. Add it to the field in . **Tip:** You can convert npub to hex at [nostr.band/tools](https://nostr.band/tools). @@ -77,29 +50,24 @@ You can keep the original placeholder in `src/chat.js` for production releases. ### Styling -The widget uses Tailwind CSS utility classes. To customize colors, search for these classes in `chat.js`: -- Primary color: `from-[#fdad01] to-[#ff8c00]` (orange gradient) +The widget uses Tailwind CSS utility classes. To customize colors, search for these classes in : +- Primary color: (orange gradient) - Change it to your brand colors. ### Mobile Behavior On mobile devices, the chat expands to fullscreen automatically. Customize this in the CSS: -```css -@media (max-width: 600px) { - /* Adjust mobile styles here */ -} -``` --- ## 🔒 How It Works 1. **Session Creation**: Generates an in‑memory keypair stored locally for the session. -2. **Message Encryption**: All messages are encrypted using NIP‑04 (end‑to‑end encryption). -3. **Relay Publishing**: Encrypted messages are published to multiple Nostr relays. -4. **Real‑time Updates**: Subscribes to replies from your team's public key. -5. **Local Storage**: Messages persist locally for 24 hours per session. +2. **Message Encryption**: All messages encrypted using NIP‑04. +3. **Relay Publishing**: Sent to multiple Nostr relays. +4. **Real‑time Updates**: Subscribes to replies from your public key. +5. **Local Storage**: Messages persist for 24 hours. --- @@ -113,15 +81,10 @@ On mobile devices, the chat expands to fullscreen automatically. Customize this ### Local Testing -```bash -# Clone and test the demo -git clone https://github.com/yourusername/nostr-web-chat-plugin.git -cd nostr-web-chat-plugin -open demo/index.html # or serve with a static server -``` -1. Open `demo/index.html` in a browser. -2. Use the npub input bar to test with any key. + +1. Open in a browser. +2. Use the npub input bar for testing. --- @@ -134,10 +97,9 @@ To receive and respond to chat messages, use any Nostr client: --- ## 🔐 Security Considerations - - **Ephemeral Keys**: New keypair per session (24‑hr expiration). - **No User Data**: No cookies or tracking. -- **E2E Encryption**: Messages are encrypted before being sent. +- **E2E Encryption**: Messages encrypted before sending. - **Relay Privacy**: Distributed across multiple relays. --- @@ -148,14 +110,13 @@ MIT License – see [LICENSE](LICENSE). --- ## 🤝 Contributing - Pull requests welcome! Please open an issue first if you plan a large change. --- ## 💬 Support - **Issues**: [GitHub Issues](https://github.com/yourusername/nostr-web-chat-plugin/issues) -- **Nostr DM**: Use any DM to contact the maintainer. +- **Nostr DM**: Any DM to contact the maintainer. ---