bsky-embed

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.0.6/dist/bsky-embed.es.js" async></script>
  <bsky-embed
    username="vincentwill.com"
    mode="dark"
    limit="5"
  >
  </bsky-embed>

Installation

Option 1. via CDN

<script src="https://cdn.jsdelivr.net/npm/bsky-embed@0.0.6/dist/bsky-embed.es.js" async></script>

Option 2. via npm / yarn etc.

Install via CLI

  npm i bsky-embed --save

Import in any framework using:

  import "bsky-embed/dist/bsky-embed.es.js"

Usage

  <bsky-embed
    username="vincentwill.com"
    feed="at://...(decide between username or feed)"
    mode="dark"
    limit="5"
  >
  </bsky-embed>

Options

Required (at least one of these options)

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

Optional

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

Run Locally

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.

License

MIT