DEV Community

Cover image for I made a Profile Card Widget for Bluesky 🦋
Saurabh Daware 🌻
Saurabh Daware 🌻

Posted on

5 1 1 1

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.

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>
Enter fullscreen mode Exit fullscreen mode

In Frameworks

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

npm install --save bsky-widget@latest
Enter fullscreen mode Exit fullscreen mode
// along with other imports of framework
import 'bsky-widget';


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

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 logo 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>
Enter fullscreen mode Exit fullscreen mode
Patak's Bluesky Profile Widget

Usage as NPM module

Install

npm install bsky-widget@latest --save
Enter fullscreen mode Exit fullscreen mode

Import and Use

import "bsky-widget";

<bsky-widget handle="srbh.dev"></bsky-widget>;
Enter fullscreen mode Exit fullscreen mode

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"





Generate your own Bluesky profile card

👋 Was this post useful to you?

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Join now

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay