Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/penpenpng/makibishi-component


https://github.com/penpenpng/makibishi-component

Last synced: 4 days ago
JSON representation

Awesome Lists containing this project

README 

        
# makibishi-component



makibishi-component is an implementation of [MAKIBISHI](https://nikolat.github.io/makibishi-demo/) with [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). By placing this on your page, the page will be able to receive emoji reactions from any user.



Because it is on [Nostr protocol](https://nostr.com/), if a user visiting the page is a Nostr user, you can also know the identity of the user who reacted. However, it is not at all essential that the end-user be a Nostr user.



## Installation



Put the following code into your pages ``. Note that you need to change the `VERSION` part as appropriate (e.g. `0.1.2`). Avalilable `VERSION`s are listed [here](https://www.npmjs.com/package/makibishi-component?activeTab=versions). [Release note](https://github.com/penpenpng/makibishi-component/releases) also may help you.



```html



```



Then, put the following code anywhere you want.



```html



```



## Customize behavior



`` accepts following attributes. Note that many attributes work reactively but not all do.





  
url


  
The target URL to be reacted. If omitted, it will be the current location.



  
relays


  
The relay URLs separated by semicolon to which reactions are sent. It is recommended to set it, but if you are not sure, you can leave it blank.



  
reaction


  
An emoji that is sent by users' reaction. It can be an URL for custom reaction.



  
displayed-reactions


  
Maximum number of reactions displayed without being omitted.



  
limit


  
`limit` filter parameter to be sent to relays.



  
live


  
If set, the reactions will be updated in real-time. For performance reasons, it is off by default.



  
disable-url-normalization


  
If set, the URL will not be normalized automatically. Usually you shouldn't do this.



  
hide-reaction-button


  
If set, reaction button is hidden.



  
hide-reaction-counter


  
If set, reaction counter is hidden.



  
hide-reaction-list


  
If set, reaction contents and who made them are hidden.



  
hide-reaction-content


  
If set, emojis or custom reaction images are hidden.



  
hide-avatar


  
If set, avatar images are hidden.



  
avatar-size


  
Avatars' width and height. It will be set into img's attribute.



  
custom-reaction-size


  
Custom reactions' width and height. It will be set into img's attribute.



  
require-sign-extension


  
By default, when the user doesn't have NIP-07 extension, they react as an anonymous. But if the option is enabled, NIP-07 extension is required to send reaction.



  
force-anonymous


  
If set, send reaction as an anonymous user even if NIP-07 extension is found.



  
custom-reaction-name


  
If `reaction` attribute is URL, this is used to the custom reaction's name like `:star:`. Note that no colon is required.



  
show-negative-reactions


  
If set, negative reaction ('-') is allowed to be listed.



  
positive


  
A emoji displayed to express '+'.



  
negative


  
A emoji displayed to express '-'.





## Customize appearance



You can use `reset.css` instead of `default-theme.css` and write your own CSS for complete control over appearance. The [default-theme implementation](https://github.com/penpenpng/makibishi-component/blob/main/public/default-theme.css) may be helpful.



```html



```