bsky-widget

Bluesky Widget

Unofficial Bluesky Profile Cards for Bluesky Friends 🦋

Card Generator UI: https://bsky-widget.srbh.dev/

Usage

Code	Preview
<!-- Paste in your CSS to avoid layout shift --> <style> bsky-widget { min-height: 387px; width: 350px; } </style> <!-- Paste wherever you want to render the card --> <bsky-widget handle="patak.dev"></bsky-widget> <!-- Paste before end of body --> <script src="https://unpkg.com/bsky-widget@~0.1/dist/index.js" type="module" ></script>

Usage as NPM module

Install

npm install bsky-widget@latest --save

Import and Use

import "bsky-widget";

<bsky-widget handle="srbh.dev"></bsky-widget>;

Props

Prop	Description	Example value
handle	handle of your bluesky account	"srbh.dev"
show-description	hide / show your description / bio from profile	"true" (default) or "false"
show-banner	hide / show your banner (only applicable if you have a banner)	"true" (default) or "false"
theme	theme of the card (dark, dim, auto, auto-dim, light)	"light"

Override Styles

You can go ahead and override any of these styles to customize your card further, create custom themes, or adjust the card in your website's layout

bsky-widget {
  --bsky-background: #fff;
  --bsky-primary: #1185fe;
  --bsky-primary-hover: #4ca2fe;
  --bsky-text-on-primary: #fff;
  --bsky-text-on-background: #0b0f14;
  --bsky-text-on-background-subtle: #42576c;
  --bsky-text-large: 1.4rem;
  --bsky-text-large-line-height: 1.8rem;
  --bsky-text-medium: 1rem;
  --bsky-text-small: 0.9rem;

  font-family: Arial, Helvetica, sans-serif, -apple-system, sans-serif;
  width: 350px;
  max-width: 100%;
  min-height: 170px;
  display: inline-block;
  box-shadow: 1px 1px 8px 1px #0002;
  border-radius: 8px;
}

Migration from v0.0 -> v0.1

[!Note]

You are using v0.0 already? no worries! It's a no breaking change release. Click the link below to see how you can migrate to new version and enjoy new features 🚀

Check out the release notes at v0.1 Release Notes

CONTRIBUTING

The project is open for contributions, you can check CONTRIBUTING.md for more information on local setup and commands.

---

Like my work? You can star this repo or you can sponsor me from GitHub Sponsors @saurabhdaware ⭐️