A web-component to easily embed a bluesky feed.
See it in action on CodePen.
<script src="https://cdn.jsdelivr.net/npm/bsky-embed@0.1.4/dist/bsky-embed.es.js" async></script>
<bsky-embed
username="vincentwill.com"
mode="dark"
limit="5"
>
</bsky-embed>
<script src="https://cdn.jsdelivr.net/npm/bsky-embed@0.1.4/dist/bsky-embed.es.js" async></script>
Install via CLI
npm i bsky-embed --save
Import in any framework using:
import "bsky-embed/dist/bsky-embed.es.js"
<bsky-embed
username="vincentwill.com"
feed="at://...(decide between username, feed, or search)"
search="#BuildInPublic (decide between username, feed, and search)"
mode="dark"
limit="5"
link-target="_blank"
link-image="true"
custom-styles=".border-slate-300 { border-color: red; }"
>
</bsky-embed>
username
: the handle of the user whos feed you want to embed. It can be found at the and of the URL (https://bsky.app/profile/__your-handle__)feed
: the id of your feed
limit
: how many posts you want to load (default = 10)mode
: "dark" | "". Use the dark mode if you want to render the embed in front of a dark background.link-target
: "_self" | "_blank" | "_parent" | "_top". How the links to the post or Bluesky user should be opened (default = "_self")link-image
: "true" | "false". If the image should go to the bluesky post instead of opening the lightbox. (default = "false")custom-styles
: A string that will overwrite the default styles.
The project is written in Solid.js.
Clone the repository and Run
npm i
To start the dev server use:
npm run dev
To build the web component use
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.