Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nostr-components/nostr-event
nostr-event
https://github.com/nostr-components/nostr-event
component nostr webcomponent webcomponents
Last synced: 2 months ago
JSON representation
nostr-event
- Host: GitHub
- URL: https://github.com/nostr-components/nostr-event
- Owner: nostr-components
- License: mit
- Created: 2023-06-04T20:34:49.000Z (over 1 year ago)
- Default Branch: gh-pages
- Last Pushed: 2023-06-06T09:48:00.000Z (over 1 year ago)
- Last Synced: 2024-10-01T02:42:00.513Z (3 months ago)
- Topics: component, nostr, webcomponent, webcomponents
- Language: JavaScript
- Homepage: https://nostr-components.github.io/nostr-event/
- Size: 20.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
nostr-event
nostr-event---
Documentation
---
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/nostr-components/nostr-event/blob/gh-pages/LICENSE)
[![npm](https://img.shields.io/npm/v/nostr-event)](https://npmjs.com/package/nostr-event)
[![npm](https://img.shields.io/npm/dw/nostr-event.svg)](https://npmjs.com/package/nostr-event)
[![Github Stars](https://img.shields.io/github/stars/nostr-components/nostr-event.svg)](https://github.com/nostr-components/nostr-event/)# Nostr-Event Web Component
## Description
`nostr-event` is a reusable Web Component that displays Nostr events with rich media support including images, videos and YouTube embeds. It takes an event as a JSON string, rendering it beautifully in any HTML document.
## Features
- Displays user content including text, images, videos and YouTube links.
- Offers responsive design, adapting media size to the available space.
- Includes raw event data, giving insight into the underlying structure of Nostr events.## Installation
To use the `nostr-event` web component, include it via a `` tag:
```html
<script type="module" src="nostr-event.js">
```
Replace "nostr-event.js" with the actual path to your JavaScript file that contains the definition for `nostr-event` web component.## Usage
Include the `nostr-event` element in your HTML and provide an event as a JSON string via the `event` attribute:
```html
```
The `event` attribute should contain a JSON string with `content` and `pubkey` properties at a minimum.
## Example
Here is a simple HTML page that imports and uses the `nostr-event` web component:
```html
Nostr Event
```
## Support
For support or any questions, open an issue on this repository.
## License
This project is open source under the [MIT license](LICENSE).