Support Our Work

Thank you for reading our blog! This post demonstrates our new donation system that allows readers to support our content creation efforts.

How It Works

Our donation system is flexible and configurable through page metadata:

Multiple Payment Methods: PayPal, GitHub Sponsors, Buy Me a Coffee, Ko-fi, Patreon, Open Collective
Regional Support: Google Pay, Paytm, PhonePe (India), Alipay, WeChat Pay (China)
Page-Specific Configuration: Each page can have its own donation settings
Global Control: Enable donations for all blog posts or control manually per page
Responsive Design: Works beautifully on desktop and mobile devices
Interactive Elements: Hover effects and QR code popups for scan-based payment methods

Features

🎨 Beautiful Design

Gradient backgrounds with subtle patterns
Smooth animations and hover effects
Professional card-based layout
Dark theme support

📱 Mobile Optimized

Touch-friendly interactions
Responsive layout
Auto-hiding QR codes on mobile

🔧 Easy Configuration

You can enable donations on any page by adding frontmatter:

1
---
2
showDonate: true
3
donateMessage: "Custom message here"
4
customDonate:
5
  enable: true
6
  paypalUrl: "your-paypal-url"
7
  githubSponsors: "your-username"
8
---

🌍 Global Support

PayPal for international payments
GitHub Sponsors for developer community
Buy Me a Coffee for casual support
Ko-fi for creator community
Patreon for subscription-based support
Open Collective for transparent funding
Google Pay, Paytm, PhonePe for Indian users
Alipay and WeChat Pay for Chinese users

🎛️ Smart Controls

Global Enable/Disable: Turn donation system on/off site-wide
Blog-wide Default: Enable donations on all blog posts by default
Manual Override: Each page can override global settings
Priority System: Manual settings always take precedence

Configuration Examples

Global Settings (in `src/consts.ts`):

1
export const donate = {
2
  enable: true, // Master switch
3
  enableForAllBlogs: false, // Default for all blog posts
4
  // Payment configurations...
5
};

Page-Level Control:

1
# Enable donations (overrides global setting)
2
showDonate: true
3

4
# Disable donations (overrides global setting)
5
showDonate: false
6

7
# Use global setting (enableForAllBlogs)
8
# showDonate: undefined (or omit the field)