https://github.com/nostr-components/nostr-event

nostr-event
https://github.com/nostr-components/nostr-event

component nostr webcomponent webcomponents

Last synced: about 1 month 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 (about 1 month 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).