Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mary-ext/bluesky-post-embed
Custom element for embedding Bluesky posts
https://github.com/mary-ext/bluesky-post-embed
atproto bluesky webcomponents
Last synced: about 2 months ago
JSON representation
Custom element for embedding Bluesky posts
- Host: GitHub
- URL: https://github.com/mary-ext/bluesky-post-embed
- Owner: mary-ext
- License: mit
- Created: 2024-01-24T01:21:43.000Z (12 months ago)
- Default Branch: trunk
- Last Pushed: 2024-11-05T18:57:25.000Z (2 months ago)
- Last Synced: 2024-11-05T19:43:12.254Z (2 months ago)
- Topics: atproto, bluesky, webcomponents
- Language: TypeScript
- Homepage: https://mary-ext.github.io/bluesky-post-embed/
- Size: 150 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <bluesky-post>
A custom element for embedding Bluesky posts. [Live demo](https://mary-ext.codeberg.page/bluesky-post-embed)
- **Lightweight**, the entire package + dependencies is only 24 KB (7 KB gzipped)
- **Standalone**, no additional middleman involved, connects straight to Bluesky's API
- [**Server-side rendering possible**](#ssr-usage), which allows for no-JavaScript usage
## Installation
### via package manager
This custom element is available on npm.
```
npm install bluesky-post-embed
```
Then, import the package on your app.
```js
import 'bluesky-post-embed';
```
### via CDN
If you like, you can also rely on CDN services like esm.sh or JSDelivr.
```html
```
## Usage
Bluesky posts can be embedded like so:
```html
angel mode
— Paul Frazee 🦋 (@pfrazee.com)
January 16, 2024
```
Adding a fallback content like above is heavily recommended for progressive enhancement.
### Attributes
- `src` **Required**
A `bsky.app` URL of the post.
Heavily recommended that the URL points to a DID instead of a handle, otherwise, it would have to
resolve the handle into DID first (and suffer from issues like users changing their handles, etc)
An example of such URL would be: https://bsky.app/profile/did:plc:ragtjsm2j2vknwkz3zp4oxrd/post/3kj2umze7zj2n
- `contextless` **Optional**
Prevent displaying of context when `src` points to a reply.
- `allow-unauthenticated` **Optional**
Allow displaying of posts even if author has opted for no public previewing.
- `service-uri` **Optional**
URL to an AppView service, defaults to `https://public.api.bsky.app`
### Events
- `loaded`
Fired when the embed has successfully loaded the post
- `error`
Fired when the embed fails to load the post
## SSR usage
The core of this package is a static HTML renderer, so long as your framework of
choice has the means to deal with declarative shadow DOM, then it's possible to
generate a completely static embed without any JavaScript in the client.
See [this repository](https://codeberg.org/mary-ext/astro-bluesky-post) for an
SSR demo made in Astro.