Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andyj/alpine.js-rss-reader
Alpine.js RSS reader using my BlueSky profile for the feed
https://github.com/andyj/alpine.js-rss-reader
alpinejs bluesky-feed bootstrap bootstrap5 html5 rss
Last synced: about 5 hours ago
JSON representation
Alpine.js RSS reader using my BlueSky profile for the feed
- Host: GitHub
- URL: https://github.com/andyj/alpine.js-rss-reader
- Owner: andyj
- License: mit
- Created: 2024-08-14T21:26:18.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-18T16:27:32.000Z (3 months ago)
- Last Synced: 2024-08-18T17:52:11.777Z (3 months ago)
- Topics: alpinejs, bluesky-feed, bootstrap, bootstrap5, html5, rss
- Language: HTML
- Homepage:
- Size: 84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Alpine.js RSS Reader
A simple RSS feed reader application using Alpine.js. This app fetches and displays posts from a BlueSky user feed, presenting them in a card layout using Bootstrap.
## Features
- Fetches and displays RSS feed data from BlueSky.
- Uses Alpine.js for interactivity and state management.
- Utilises Bootstrap for responsive styling and layout.
- Uniform card height to ensure a clean and consistent look.
## Live Demo
You can view a live demo at [https://andyj.github.io/alpine.js-rss-reader/](https://andyj.github.io/alpine.js-rss-reader/).
## Installation
To run this application locally, follow these steps:
1. **Clone the Repository**
```bash
git clone https://github.com/andyj/alpine.js-rss-reader.git
```
2. **Navigate to the Project Directory**
```bash
cd alpine.js-rss-reader
```
3. **Open the HTML File**
Open `index.html` in your preferred web browser.
## How It Works
1. **Fetch RSS Feed:**
The application fetches the RSS feed from BlueSky using a proxy service called [allorigins.win](https://allorigins.win) to bypass any CORS restrictions.
2. **Parse XML:**
The fetched RSS feed is parsed using the `DOMParser` API to extract relevant data.
3. **Display Feed Items:**
Feed items are displayed in a Bootstrap 5 grid
## Dependencies (CDN's)
- [Alpine.js](https://alpinejs.dev/)
- [Bootstrap](https://getbootstrap.com/)
- [All Origins](https://allorigins.win/)
## Code Overview
- **HTML:** Contains the structure and layout of the application, including Bootstrap classes for styling and Alpine.js directives for interactivity.
- **CSS:** Provides custom styles to ensure uniform card heights and layout consistency.
- **JavaScript:** Handles fetching, parsing, and displaying RSS feed data using Alpine.js.
## Customisation
To customise the feed URL or adjust the layout, modify the following sections:
- **Feed URL:** Change the URL in the `fetchFeed()` function inside the `` tag in `index.html`.
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
For any issues or feature requests, please open an issue on the [GitHub repository](https://github.com/andyj/alpine.js-rss-reader/issues).
## License
This project is licensed under the [MIT License](https://andyj.github.io/alpine.js-rss-reader/Licence).
## Contact
If you have any questions leave a message through [Github issues](https://github.com/andyj/alpine.js-rss-reader/issues)