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
  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.
  
  

• 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.

MIT