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

Unofficial Bluesky Profile Cards for Bluesky Gang 🦋

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"

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%