Skip to content

Unofficial Bluesky widget to render cute profile cards in your website ^_^

License

Notifications You must be signed in to change notification settings

w3cj/bsky-widget

 
 

Repository files navigation

Bluesky Widget

Unofficial Bluesky Profile Cards for Bluesky Friends 🦋

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

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 data-handle="patak.dev"></bsky-widget>

<!-- Paste before end of body -->
<script
  src="https://unpkg.com/bsky-widget@~0.0/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 data-handle="saurabhd.bsky.social"></bsky-widget>;

Props

Prop Description Example value
data-handle handle of your bluesky account "saurabhd.bsky.social"
data-show-description hide / show your description / bio from profile "true" (default) or "false"
data-show-banner hide / show your banner (only applicable if you have a banner) "true" (default) or "false"

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

About

Unofficial Bluesky widget to render cute profile cards in your website ^_^

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 43.9%
  • CSS 31.3%
  • HTML 21.8%
  • JavaScript 2.4%
  • Vue 0.6%