I made a Profile Card Widget for Bluesky 🦋

Hey there! 👋 It’s been a while since my last post here—four years, to be exact. But I’m back, excited to share something cool I built: a Profile Card Widget for Bluesky!

Lets get to the topic! I recently joined Bluesky and I was exploring their APIs and I realised, what if we could render our bluesky's profile into our websites.

This is something that I had done in the past by creating dev.to widget for this platform.

I made DEV.to widget for websites/blogs

Saurabh Daware 🌻 ・ Oct 20 '19

#showdev #javascript #webdev

Just like dev.to widget, I want bsky-widget to work in all frameworks and setups without me having to write libraries for each and every one of them so I went with the same approach as dev.to widget, web components!!

I'll probably write a different article on web components if you all are interested. Until then, here's how you can use bsky-widget

Here's how it looks like

How to use bsky-widget?

In Vanilla Projects

You just need 2 lines of code to use bsky-widget

<!-- Use your bluesky profile handle -->
<bsky-widget handle="srbh.dev"></bsky-widget>

<!-- Paste before end of body -->
<script 
  src="https://unpkg.com/bsky-widget@~0.1/dist/index.js" 
  type="module"
>
</script>

In Frameworks

In frameworks, you can skip adding <script src=""> and instead follow this-

npm install --save bsky-widget@latest

// along with other imports of framework
import 'bsky-widget';


// Wherever you want to render the card
<bsky-widget handle="srbh.dev"></bsky-widget>

React Example

Customization

Checkout Override Styles Documentation to know which CSS variables and styles can be overriden

---

Thanks for reading! Let me know if you all are interested in an article on web components and how I used it for bsky-widget.

Do ⭐️ the repo or build your own card using the link below.

• GitHub: https://github.com/saurabhdaware/bsky-widget
• Card Generator: https://bsky-widget.srbh.dev/

saurabhdaware / bsky-widget

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

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"

…

View on GitHub

Generate your own Bluesky profile card