Skip to content

TsukemonoGit/nostr-share-component

Repository files navigation

JA

nostr-share-component

Usage

Demo

1. Insert the following code in <head>

Replace the version part {version} with the appropriate version (e.g. 0.0.10).

<script src="
https://cdn.jsdelivr.net/npm/@konemono/nostr-share-component@{version}/dist/nostr-share-component.min.js
"></script>

2. Place the following code anywhere

<nostr-share></nostr-share>
  • You can specify the strings you want to share in data-text.
  • If not specified, the URL and title of the site where you installed the site will be shared.

Example:

<nostr-share data-text="Example Text"></nostr-share>

3. Specify the button type (optional)

The following values ​​can be specified for data-type:

  • mini
  • icon (The size of the icon can be specified with icon-size.)
  • If not specified, default will be used.

4. Create a Custom Share Button

You can individually customize the button and text styles by using part(button) and part(text).

nostr-share::part(button) {
  background-color: rgb(0, 136, 255);
}

nostr-share::part(button):hover {
  background-color: rgb(255, 0, 0);
}

nostr-share::part(text) {
  font-style: italic;
  font-family: "Courier New", Courier, monospace;
  font-size: medium;
}

Client Adding Guide

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.

Client List Format

Add new clients to the list array in the following format:

{
name: "Client name",
url: "https://example.com/share?text={text}",
icon: "https://example.com/favicon.ico",
}

Field Description

  • name: Name of the client (short and descriptive is recommended).
  • url: Link sharing URL of the client.
  • Enable dynamic link generation by including {text} parameters.
  • icon: Favicon URL of the client (optional, but please provide it if possible).

Notes

  • The current list format is experimental and may change in the future. Therefore, added clients may need to support format changes in the future.
  • Be careful when adding new clients so you don't affect other clients.

Support

If you have any questions or suggestions, please create an issue.