Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saurabhdaware/bsky-widget
Unofficial Bluesky widget to render cute profile cards in your websites ^_^
https://github.com/saurabhdaware/bsky-widget
bluesky vite webcomponent widget
Last synced: 2 days ago
JSON representation
Unofficial Bluesky widget to render cute profile cards in your websites ^_^
- Host: GitHub
- URL: https://github.com/saurabhdaware/bsky-widget
- Owner: saurabhdaware
- License: mit
- Created: 2024-11-07T14:23:19.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-22T15:19:05.000Z (about 1 month ago)
- Last Synced: 2025-01-02T19:57:39.732Z (4 days ago)
- Topics: bluesky, vite, webcomponent, widget
- Language: TypeScript
- Homepage: https://bsky-widget.srbh.dev/
- Size: 3.38 MB
- Stars: 66
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Bluesky Widget
Unofficial Bluesky Profile Cards for Bluesky Friends 🦋
**Card Generator UI: https://bsky-widget.srbh.dev/**
## Usage
Code
Preview
```html
bsky-widget {
min-height: 387px;
width: 350px;
}
```
## Usage as NPM module
### Install
```sh
npm install bsky-widget@latest --save
```
### Import and Use
```jsx
import "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" |
| theme | theme of the card (`dark`, `dim`, `auto`, `auto-dim`, `light`) | "light" |
## Override Styles
You can go ahead and override any of these styles to customize your card further, create custom themes, or adjust the card in your website's layout
```css
bsky-widget {
--bsky-background: #fff;
--bsky-primary: #1185fe;
--bsky-primary-hover: #4ca2fe;
--bsky-text-on-primary: #fff;
--bsky-text-on-background: #0b0f14;
--bsky-text-on-background-subtle: #42576c;
--bsky-text-large: 1.4rem;
--bsky-text-large-line-height: 1.8rem;
--bsky-text-medium: 1rem;
--bsky-text-small: 0.9rem;
font-family: Arial, Helvetica, sans-serif, -apple-system, sans-serif;
width: 350px;
max-width: 100%;
min-height: 170px;
display: inline-block;
box-shadow: 1px 1px 8px 1px #0002;
border-radius: 8px;
}
```
## Migration from v0.0 -> v0.1
> [!Note]
>
> You are using v0.0 already? no worries! It's a no breaking change release. Click the link below to see how you can migrate to new version and enjoy new features 🚀
Check out the release notes at [v0.1 Release Notes](https://github.com/saurabhdaware/bsky-widget/releases/tag/v0.1.0)
## CONTRIBUTING
The project is open for contributions, you can check [CONTRIBUTING.md](./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](https://github.com/sponsors/saurabhdaware) ⭐️