Bluesky Widget

Unofficial Bluesky Profile Cards for Bluesky Friends 🦋

Card Generator UI: https://bsky-widget.saurabhdaware.in/

Usage

<!-- 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 ⭐️