Skip to content

Latest commit

 

History

History
114 lines (82 loc) · 2.92 KB

README.md

File metadata and controls

114 lines (82 loc) · 2.92 KB
Raw

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>
 Patak's Bluesky Profile Widget

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