https://github.com/nsarrazin/bsky-comments-svelte

A simple customizable Svelte 5 component to add comments to your website using Bluesky
https://github.com/nsarrazin/bsky-comments-svelte

atproto bsky npm svelte svelte5 typescript

Last synced: 4 days ago
JSON representation

A simple customizable Svelte 5 component to add comments to your website using Bluesky

• Host: GitHub
• URL: https://github.com/nsarrazin/bsky-comments-svelte
• Owner: nsarrazin
• Created: 2024-11-26T19:17:39.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-26T19:38:11.000Z (about 1 month ago)
• Last Synced: 2024-12-06T14:49:51.016Z (28 days ago)
• Topics: atproto, bsky, npm, svelte, svelte5, typescript
• Language: Svelte
• Homepage:
• Size: 48.8 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Bluesky Comments Svelte

A Svelte 5 component for embedding Bluesky comment threads on your website. Easily add Bluesky discussions to your blog posts, documentation, or any web page. 

Comes with default styling, but you can customize it by passing in your own Svelte snippets. Also supports **filtering** and **sorting** options.

## Installation

```bash

npm i -D bsky-comments-svelte

```

## Basic Usage

```svelte

  import { BlueskyComments } from 'bsky-comments-svelte';

```

The URI can be either:

- An AT Protocol URI (e.g., `at://did:plc:user/app.bsky.feed.post/threadid`)

- A Bluesky web URL (e.g., `https://bsky.app/profile/user.bsky.social/post/threadid`)

| ![Screenshot from 2024-11-26 20-34-13](https://github.com/user-attachments/assets/a857b180-7855-41b9-8f32-580e8033069f) | ![Screenshot from 2024-11-26 20-33-14](https://github.com/user-attachments/assets/b7acc756-9152-4ec7-83fc-4720819bdcf0) |

| ------------- | ------------- |

| The default styling with no config. | However adding your own style is very easy thanks to snippets. |

## Customization Options

### Sorting and Filtering

You can customize how the thread loads with the `LoadingOptions` prop:

* `sortBy` currently takes two options, either `likes` or `recent`. Sorts by likes by default.

* `filterFn` takes a full post and return true or false. You can use this to add any filtering logic you want. By default it will filter out pins.

```svelte

 post.record.text !== '📌', // Custom filter function for which posts to show

  }}

/>

```

### Styling Components

The component is highly customizable by passing Svelte 5 snippets. You can override any of the default components:

- `LoaderSnippet` - Loading indicator

- `ErrorSnippet` - Error display

- `PostStatsSnippet` - Post statistics (likes, replies, reposts)

- `PostSnippet` - Individual post display

- `SeeMoreSnippet` - "Show more" button

- `CollapseBarSnippet` - Thread collapse controls

```svelte

  {#snippet LoaderSnippet()}

    
Loading...

  {/snippet}


  {#snippet PostSnippet({ post, collapsed, setCollapsed })}

    


      

      


        
{post.author.displayName}

        
{post.record.text}

      

    

  {/snippet}


```

## Development

Contributions are welcome! This is pretty new territory for me so I would be happy to get feedback on this.

1. Clone the repository

2. Install dependencies: `npm install`

3. Start development server: `npm run dev`

4. Build the library: `npm run package`

## License

MIT License - See LICENSE file for details.