Ng-bsky-rss-reader NPM

BlueSky Profile RSS Reader

BlueSky Profile RSS Reader is a library designed to fetch and display RSS feeds from BlueSky profiles. It allows users to enter a BlueSky profile and view their updates in a consolidated feed. This project focuses on using modern Angular practices and not relying on Zone.js or RxJS.

Key Features:

Load BlueSky post from a given profile handle or id.
Show selected profile description.
Zone.js-Free Angular: Demonstrates the use of Angular without Zone.js using only Signals.
No use of RxJS relying only on the new resource API for asynchronous requests.
All styles were created with Tailwind CSS.

Live Demo

Try out the live demo: https://monsieur-ricky.github.io/bsky-profile-rss-reader/

Prerequisites

Node.js (v20.15.0 or higher recommended)
Angular CLI (v19+)
Tailwind CSS (v4)
A modern browser (e.g., Chrome, Edge, or Safari)

NOTE: Angular (at v19.1.3) isn't fully compatible with TailwindCSS v4. For that reason, it's necessary to add `--force` or `--legacy-peer-deps` when installing the NPM dependencies, i.e., via `npm install`.

Installation

Install Tailwind CSS and dependencies (more information in the official installation documentation). Jump to step 4 if Tailwind v4 is already present in the project:
```
npm install tailwindcss @tailwindcss/postcss postcss --force
```
Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.:
```
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}
```
Import Tailwind CSS to your main styles file (e.g., src/styles.css):
```
@import "tailwindcss";
```

Install the library using NPM:

npm install ng-bsky-rss-reader --legacy-peer-deps

Usage

Import the library in your component:

import { BskyRssReaderComponent } from 'ng-bsky-rss-reader';

@Component({
  selector: 'app-root',
  imports: [BskyRssReaderComponent],
})

Add the component to your template:

<ng-bsky-rss-reader profileId="your.bsky.handle" />

Full example:

import { Component, signal } from '@angular/core';
import { BskyRssReaderComponent } from 'ng-bsky-rss-reader';

@Component({
  selector: 'bpr-root',
  imports: [BskyRssReaderComponent],
  template: `
    <div class="h-full w-screen flex items-center justify-center">
      <div class="h-[500px] w-[500px]">
        <ng-bsky-rss-reader [profileId]="profile()" />
      </div>
    </div>
  `
})
export class AppComponent {
  profile = signal('ricky.pt');
}