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

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

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