bsky-embed

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