https://github.com/vincenius/bsky-embed
A web-component to easily embed a bluesky feed.
https://github.com/vincenius/bsky-embed
bluesky web-component
Last synced: 9 months ago
JSON representation
A web-component to easily embed a bluesky feed.
- Host: GitHub
- URL: https://github.com/vincenius/bsky-embed
- Owner: Vincenius
- Created: 2024-02-23T15:03:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-01T11:02:10.000Z (10 months ago)
- Last Synced: 2025-10-02T16:56:58.453Z (9 months ago)
- Topics: bluesky, web-component
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 221
- Watchers: 8
- Forks: 18
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# bsky-embed
A web-component to easily embed a bluesky feed.
See it in action on [CodePen](https://codepen.io/Vincenius/pen/RwdXgyw?editors=1000).
```html
```
## Installation
### Option 1. via CDN
```html
```
### Option 2. via npm / yarn etc.
Install via CLI
```bash
npm i bsky-embed --save
```
Import in any framework using:
```javascript
import "bsky-embed/dist/bsky-embed.es.js"
```
## Usage
Minimal:
```html
```
All options:
```html
```
### Options
#### Required (at least one of these options)
| Option | Value | Default Value |
|-----------|-----------------------------|---------------|
| `username`| User handle | - |
| `feed` | Feed ID * | - |
| `search` | Search term (eg. hashtags) | - |
* How to find your feed id
Open the URL of your feed. Open the Developer tools and go to the network tab. Find the call from bluesky to the `getFeedGenerator`. It should show the feed id.
#### Optional
| Option | Value | Default Value |
|------------------|-----------------------------------------------------|---------------|
| `limit` | Positive integer | `10` |
| `mode` | `"dark"` or `""` | - |
| `link-target` | `"_self"`, `"_blank"`, `"_parent"`, `"_top"` | `"_self"` |
| `link-image` | `"true"` or `"false"` | `"false"` |
| `load-more` | `"true"` or `"false"` | `"false"` |
| `disable-styles` | `"true"` or `"false"` | `"false"` |
| `disable-images` | `"true"` or `"false"` | `"false"` |
| `disable-videos` | `"true"` or `"false"` | `"false"` |
| `disable-autoplay` | `"true"` or `"false"` | `"false"` |
| `custom-styles `| String representing custom CSS styles | - |
| `date-format` | JSON String with type, locale & options (see [Issue#35](https://github.com/Vincenius/bsky-embed/issues/35)) | `'{"type":"relative"}'` |
## Run Locally
The project is written in [Solid.js](https://www.solidjs.com/).
Clone the repository and Run
```bash
npm i
```
To start the dev server use:
```bash
npm run dev
```
To build the web component use
```bash
npm run build
```
The JavaScript file for the web component will be rendered into `./dist/`. You can test the web component with the `test.html` file.
## Contributors
[](https://github.com/Vincenius)
[](https://github.com/NicoNotAvailable)
[](https://github.com/sirteddi)
[](https://github.com/antont)
## License
[MIT](https://choosealicense.com/licenses/mit/)