tiltlr-blog
Version:
A lightweight JavaScript library to embed Medium blog posts on any website
106 lines (73 loc) • 2.9 kB
Markdown
# Tiltlr Blog
A lightweight JavaScript library to easily embed your Medium blog posts on any static website without requiring any framework or external dependencies.
## 📌 Features
- Lightweight (< 5KB)
- No dependencies
- Simple to use with just HTML tags
- Responsive grid layout
- Customizable via CSS
- Fetches your latest Medium posts via RSS
## 🚀 Quick Start
### Option 1: Use via CDN (Recommended)
```html
<head>
<!-- Add the stylesheet in your head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiltlr-blog@1.0.0/style.css">
</head>
<body>
<!-- Your content -->
<!-- Add this where you want your Medium posts to appear -->
<tiltlr-blog username="yourusername"></tiltlr-blog>
<!-- Add the script at the end of your body -->
<script src="https://cdn.jsdelivr.net/npm/tiltlr-blog@1.0.0/tiltlr-blog.js"></script>
</body>
```
### Option 2: Install via npm
```bash
npm install tiltlr-blog
```
Then import in your project:
```javascript
// Import the CSS
import 'tiltlr-blog/style.css';
// Import the component
import 'tiltlr-blog';
```
### Option 3: Download Files
Download the files from our [GitHub repository](https://github.com/zuhayr123/tiltlr-blog) and include them in your project:
```html
<head>
<link rel="stylesheet" href="path/to/style.css">
</head>
<body>
<tiltlr-blog username="yourusername"></tiltlr-blog>
<script src="path/to/tiltlr-blog.js"></script>
</body>
```
Replace `"yourusername"` with your Medium username (without the @ symbol).
## ⚙️ How It Works
The library fetches your Medium RSS feed and converts it to JSON using the free [rss2json API](https://rss2json.com). Then it renders the latest 5 posts as beautiful cards with thumbnails, titles, dates, and links to the original posts.
## 🎨 Customization
You can customize the appearance by modifying the `style.css` file or overriding the CSS classes in your own stylesheet:
- `.tiltlr-container` - The grid container for all posts
- `.tiltlr-card` - Individual blog post card
- `.tiltlr-card-image` - Post thumbnail container
- `.tiltlr-card-content` - Post text content container
## 📦 Advanced Configuration
You can customize the component by adding these attributes:
```html
<tiltlr-blog
username="yourusername"
limit="3">
</tiltlr-blog>
```
*Note: Currently only the username and limit attributes are supported. Additional customization options coming soon.*
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/zuhayr123/tiltlr-blog/issues).
## 🙏 Acknowledgements
- [rss2json](https://rss2json.com) for their free RSS to JSON conversion API
- Medium for providing RSS feeds
---
Made with ❤️ by [Tiltlr](https://tiltlr.com/)