tiltlr-blog

v1.1.1

Published

a year ago

A lightweight JavaScript library to embed Medium blog posts on any website

0High
0Medium
0Low

zuhayr_abou

medium blog embed rss web component custom-element tiltlr

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)

<head>
  <!-- Add the stylesheet in your head -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/tiltlr-blog.js"></script>
</body>

Option 2: Install via npm

npm install tiltlr-blog

Then import in your project:

// 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 and include them in your project:

<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. 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:

<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 file for details.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

🙏 Acknowledgements

rss2json for their free RSS to JSON conversion API
Medium for providing RSS feeds

Made with ❤️ by Tiltlr