I made a Profile Card Widget for Bluesky 🦋
#javascript#webdev#webcomponents
Saurabh Daware 🌻

Saurabh Daware 🌻 @saurabhdaware

About: - JavaScript <3 - I make silly libraries - Building Abell, A new static-site-generator.

Location:
Bengaluru, India 🇮🇳
Joined:
May 31, 2019

I made a Profile Card Widget for Bluesky 🦋

Publish Date: Nov 24 '24
8 0

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.

saurabhdaware

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>
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"
…



View on GitHub


Generate your own Bluesky profile card

Comments 0 total

    Add comment