{"id":29595376,"url":"https://github.com/shayanb/buymeacoffee-module","last_synced_at":"2025-07-20T08:08:33.384Z","repository":{"id":297528298,"uuid":"997073419","full_name":"shayanb/buymeacoffee-module","owner":"shayanb","description":"A lightweight, customizable donation modal component that supports cryptocurrency addresses (EVM/Bitcoin) and Buy Me a Coffee integration","archived":false,"fork":false,"pushed_at":"2025-06-06T00:50:15.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-15T06:07:03.879Z","etag":null,"topics":["buymeacoffee","crypto","donation"],"latest_commit_sha":null,"homepage":"https://shayanb.github.io/buymeacoffee-module/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shayanb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-05T23:09:30.000Z","updated_at":"2025-06-06T00:50:16.000Z","dependencies_parsed_at":"2025-06-06T00:40:50.130Z","dependency_job_id":null,"html_url":"https://github.com/shayanb/buymeacoffee-module","commit_stats":null,"previous_names":["shayanb/buymeacoffee-module"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shayanb/buymeacoffee-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Fbuymeacoffee-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Fbuymeacoffee-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Fbuymeacoffee-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Fbuymeacoffee-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shayanb","download_url":"https://codeload.github.com/shayanb/buymeacoffee-module/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayanb%2Fbuymeacoffee-module/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266087790,"owners_count":23874519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buymeacoffee","crypto","donation"],"created_at":"2025-07-20T08:08:32.807Z","updated_at":"2025-07-20T08:08:33.359Z","avatar_url":"https://github.com/shayanb.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/yourname'","https://buymeacoffee.com/yourname'","https://buymeacoffee.com/example'"],"categories":[],"sub_categories":[],"readme":"# Donation Modal Module\n\nA lightweight, customizable donation modal component that supports cryptocurrency addresses (Ethereum/Bitcoin) and Buy Me a Coffee integration. Perfect for adding donation functionality to your web projects with minimal effort.\n\n## Features\n\n- 🎨 Clean, modern design with dark mode support\n- 💰 Cryptocurrency support (Ethereum/EVM chains \u0026 Bitcoin)\n- ☕ Buy Me a Coffee integration\n- 📱 Fully responsive and mobile-friendly\n- 📋 Click-to-copy addresses with visual feedback\n- 🔲 QR code generation for Ethereum address\n- 🎯 Zero dependencies (QR code library loaded on-demand)\n- 🔧 Easy to customize and integrate\n- ♿ Keyboard accessible\n\n## Installation\n\n### NPM (Recommended)\n\nInstall from GitHub Packages:\n\n```bash\nnpm install @shayan/buymeacoffee-module\n```\n\nOr install directly from GitHub:\n\n```bash\nnpm install shayanb/buymeacoffee-module\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/shayanb/buymeacoffee-module@main/donation-modal.min.js\"\u003e\u003c/script\u003e\n```\n\n### Download\n\nDownload the `donation-modal.min.js` file directly from the [releases page](https://github.com/shayanb/buymeacoffee-module/releases).\n\n## Quick Start\n\n### Option 1: Single File (Recommended)\n\nInclude the minified version that contains everything:\n\n```html\n\u003c!-- Include the all-in-one file --\u003e\n\u003cscript src=\"donation-modal.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Initialize the modal --\u003e\n\u003cscript\u003e\n  const donationModal = new DonationModal({\n    ethAddress: 'ETHORANYEVMADDRESS',\n    btcAddress: 'BTCADDRESS',\n    buyMeCoffeeUrl: 'https://www.buymeacoffee.com/yourname'\n  });\n  \n  donationModal.init();\n  \n  // Attach to a button\n  const donateBtn = document.getElementById('donate-btn');\n  donationModal.attachToTrigger(donateBtn);\n\u003c/script\u003e\n```\n\n### Option 2: Separate Files\n\nIf you prefer to load CSS and JS separately:\n\n```html\n\u003c!-- Include CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"css/donation-modal.css\"\u003e\n\n\u003c!-- Include JavaScript --\u003e\n\u003cscript src=\"js/donation-modal.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Initialize the modal --\u003e\n\u003cscript\u003e\n  const donationModal = new DonationModal({\n    ethAddress: 'your-eth-address',\n    btcAddress: 'your-btc-address',\n    buyMeCoffeeUrl: 'https://buymeacoffee.com/yourname'\n  });\n  \n  donationModal.init();\n\u003c/script\u003e\n```\n\n## Configuration Options\n\n```javascript\nconst donationModal = new DonationModal({\n  // Cryptocurrency addresses\n  ethAddress: '',           // Ethereum/EVM address\n  btcAddress: '',           // Bitcoin address\n  \n  // Buy Me a Coffee\n  buyMeCoffeeUrl: '',       // Your Buy Me a Coffee URL\n  buyMeButtonText: '☕️ Buy Me a Coffee',  // Button text\n  \n  // Modal content\n  modalTitle: 'Simply always free \u0026 Ad free.',\n  modalDescription: 'This app will always be free...',\n  \n  // QR code options\n  qrCodeOptions: {\n    width: 110,\n    margin: 1,\n    color: {\n      dark: '#000',\n      light: '#FFF'\n    },\n    errorCorrectionLevel: 'H'\n  }\n});\n```\n\n## API Methods\n\n### `init()`\nInitialize the modal and inject it into the DOM.\n\n```javascript\ndonationModal.init();\n```\n\n### `open()`\nOpen the donation modal programmatically.\n\n```javascript\ndonationModal.open();\n```\n\n### `close()`\nClose the donation modal programmatically.\n\n```javascript\ndonationModal.close();\n```\n\n### `attachToTrigger(element)`\nAttach the modal to a trigger element (button, link, etc.).\n\n```javascript\nconst button = document.getElementById('donate-button');\ndonationModal.attachToTrigger(button);\n```\n\n### `destroy()`\nRemove the modal from the DOM and clean up.\n\n```javascript\ndonationModal.destroy();\n```\n\n## Events\n\nThe modal dispatches custom events:\n\n```javascript\n// Listen for modal open\ndocument.getElementById('donation-modal').addEventListener('donationModalOpened', () =\u003e {\n  console.log('Donation modal opened');\n});\n\n// Listen for modal close\ndocument.getElementById('donation-modal').addEventListener('donationModalClosed', () =\u003e {\n  console.log('Donation modal closed');\n});\n```\n\n## Customization\n\n### CSS Variables\n\nThe modal uses CSS variables for easy theming:\n\n```css\n.donation-modal {\n  --bg-container: #ffffff;\n  --color-text: #000000;\n  --color-muted: #999999;\n  --color-accent: #F26D5B;\n  --color-accent-hover: #d95b4b;\n  --bg-primary: #f5f5f5;\n  --border-color: #e0e0e0;\n  --color-text-secondary: #666666;\n  --highlight-bg: #f0f0f0;\n  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n```\n\n### Dark Mode\n\nThe modal automatically supports dark mode through CSS media queries:\n\n```css\n@media (prefers-color-scheme: dark) {\n  .donation-modal {\n    --bg-container: #1a1a1a;\n    --color-text: #ffffff;\n    /* ... other dark mode colors ... */\n  }\n}\n```\n\n### Custom Styling\n\nYou can override any styles by targeting the modal classes:\n\n```css\n/* Custom modal width */\n.donation-content {\n  max-width: 600px;\n}\n\n/* Custom button style */\n.donation-modal .bmc-link {\n  background: #FF813F;\n  border-radius: 20px;\n}\n\n/* Custom address style */\n.donation-modal .donation-address {\n  font-family: monospace;\n  font-size: 12px;\n}\n```\n\n## Examples\n\n### Basic Implementation\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eDonation Modal Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbutton id=\"donate-btn\"\u003eDonate\u003c/button\u003e\n  \n  \u003cscript src=\"donation-modal.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    // Initialize with your addresses\n    const modal = new DonationModal({\n      ethAddress: '0x5214e7601682dEE3397666b8bBaeDBD682d19186',\n      buyMeCoffeeUrl: 'https://buymeacoffee.com/example'\n    });\n    \n    modal.init();\n    modal.attachToTrigger(document.getElementById('donate-btn'));\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Advanced Implementation\n\n```javascript\n// Initialize with full configuration\nconst donationModal = new DonationModal({\n  ethAddress: '0x5214e7601682dEE3397666b8bBaeDBD682d19186',\n  btcAddress: '3BHETs8Fby8RmYhuqQqFBLfc7vMYD1R1mA',\n  buyMeCoffeeUrl: 'https://buymeacoffee.com/yourname',\n  buyMeButtonText: '☕ Support My Work',\n  modalTitle: 'Support Open Source',\n  modalDescription: 'Your support helps keep this project free and ad-free. Thank you!',\n  qrCodeOptions: {\n    width: 150,\n    margin: 2,\n    color: {\n      dark: '#1a1a1a',\n      light: '#ffffff'\n    }\n  }\n});\n\n// Initialize the modal\ndonationModal.init();\n\n// Attach to multiple triggers\ndocument.querySelectorAll('.donate-trigger').forEach(el =\u003e {\n  donationModal.attachToTrigger(el);\n});\n\n// Listen for events\ndocument.getElementById('donation-modal').addEventListener('donationModalOpened', () =\u003e {\n  // Track analytics event\n  gtag('event', 'donation_modal_opened');\n});\n\n// Open programmatically after 30 seconds\nsetTimeout(() =\u003e {\n  donationModal.open();\n}, 30000);\n```\n\n### Minimal Implementation (Only Buy Me a Coffee)\n\n```javascript\nconst donationModal = new DonationModal({\n  buyMeCoffeeUrl: 'https://buymeacoffee.com/yourname'\n});\n\ndonationModal.init();\ndonationModal.attachToTrigger(document.getElementById('support-btn'));\n```\n\n## Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- Mobile browsers (iOS Safari, Chrome Android)\n\n## Dependencies\n\n- None! The modal is self-contained.\n- QR code library (qrcode.js) is loaded on-demand only if Ethereum address is provided.\n\n## File Structure\n\n```\ndonation-modal/\n├── README.md              # This file\n├── template.html          # HTML template (reference only)\n├── donation-modal.min.js  # All-in-one minified file (recommended)\n├── css/\n│   └── donation-modal.css # Standalone CSS file\n├── js/\n│   └── donation-modal.js  # Standalone JavaScript file\n└── demo/\n    └── index.html         # Demo implementation\n```\n\n## License\n\nMIT License - feel free to use this in your projects!\n\n## Credits\n\nCreated by extracting and modularizing the donation functionality from [PadSnap](https://padsnap.app).\n\n## Support\n\nIf you find this useful, consider supporting the project using the donation modal itself! 😄","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayanb%2Fbuymeacoffee-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshayanb%2Fbuymeacoffee-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayanb%2Fbuymeacoffee-module/lists"}