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

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