bsky-embed

A web-component to easily embed a bluesky feed.

See it in action on CodePen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/bsky-embed/dist/bsky-embed.es.js" async></script>
  <bsky-embed
    username="vincentwill.com"
    mode="dark"
    limit="5"
  >
  </bsky-embed>

screenshot-rocks

Installation

Option 1. via CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/bsky-embed/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, feed, or search)"
    search="#BuildInPublic (decide between username, feed, and search)"
    mode="dark"
    limit="5"
    link-target="_blank"
    link-image="true"
    load-more="true"
    custom-styles=".border-slate-300 { border-color: red; }"
  >
  </bsky-embed>

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.

screenshot of the developer tools

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"`
`custom-styles`	String representing custom CSS styles	-