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>

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

Minimal:

  <bsky-embed username="vincentwill.com"></bsky-embed>

All options:

  <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"
    disable-styles="false"
    custom-styles=".border-slate-300 { border-color: red; }"
    date-format='{"type":"absolute","locale":"de-DE","options":{"weekday":"long","year":"numeric","month":"long","day":"numeric"}}'
    disable-images="true"
    disable-videos="true"
    disable-autoplay="true"
  >
  </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.

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	-
custom-styles-file	URL to the CSS file	-
date-format	JSON String with type, locale & options (see Issue#35)	'{"type":"relative"}'

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.

Contributors

License

MIT