From e675d3d3d51d03d823dbe811a3f30e53e9e3ff58 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 12:47:18 +0000 Subject: [PATCH 1/3] Initial plan From 0b84265189956ff5d51717e4ffc8f5e5a7a2880b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 12:57:40 +0000 Subject: [PATCH 2/3] Replace emojis with professional text labels and remove hardcoded token Co-authored-by: valiantlynx <86688436+valiantlynx@users.noreply.github.com> --- README.md | 58 ++++++++++++++++++++++++------------------------ index.html | 53 +++++++++++++++++++++---------------------- package.json | 4 ++-- scripts/build.js | 12 +++++----- 4 files changed, 64 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index ddc39b2..8ee34f0 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,24 @@ -# ๐Ÿ’ฌ Universal Feedback Widget +# Universal Feedback Widget A lightweight, framework-agnostic feedback widget that automatically creates **GitHub discussions** or **GitHub issues**. Works with **any** website - React, Vue, Svelte, plain HTML, or any other framework. ![Feedback Widget Demo](https://img.shields.io/badge/demo-live-brightgreen) ![NPM Version](https://img.shields.io/npm/v/@samletnorge/feedback-widget) ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@samletnorge/feedback-widget) -## โœจ Features +## Features -- ๐ŸŽฏ **Zero Dependencies** - Works without any external libraries -- ๐ŸŒ **Universal Compatibility** - Works with any framework or vanilla HTML -- ๐Ÿ’ฌ **GitHub Discussions** - Creates threaded discussions (recommended) -- ๐Ÿ› **GitHub Issues** - Creates trackable issues for bugs/features -- ๐ŸŽจ **Flexible Theming** - Inherit page styles, Tailwind CSS, or custom colors -- ๐Ÿ“ฑ **Responsive Design** - Mobile-friendly with elegant vertical tab -- โšก **Lightweight** - Under 20KB minified and gzipped -- ๐Ÿ”ง **Custom Triggers** - Use your own buttons or the default tab -- ๐Ÿ“ **Custom Forms** - Bring your own form design -- ๐Ÿš€ **Programmatic API** - Trigger modals via JavaScript -- โŒจ๏ธ **Accessibility Ready** - Full keyboard navigation and ARIA support +- **Zero Dependencies** - Works without any external libraries +- **Universal Compatibility** - Works with any framework or vanilla HTML +- **GitHub Discussions** - Creates threaded discussions (recommended) +- **GitHub Issues** - Creates trackable issues for bugs/features +- **Flexible Theming** - Inherit page styles, Tailwind CSS, or custom colors +- **Responsive Design** - Mobile-friendly with elegant vertical tab +- **Lightweight** - Under 20KB minified and gzipped +- **Custom Triggers** - Use your own buttons or the default tab +- **Custom Forms** - Bring your own form design +- **Programmatic API** - Trigger modals via JavaScript +- **Accessibility Ready** - Full keyboard navigation and ARIA support -## ๐Ÿš€ Quick Start +## Quick Start ### Option 1: CDN (Recommended) @@ -49,7 +49,7 @@ npm install @samletnorge/feedback-widget ``` -## ๐Ÿ’ญ Discussions vs Issues +## Discussions vs Issues Choose the right GitHub feature for your feedback collection: @@ -60,7 +60,7 @@ Choose the right GitHub feature for your feedback collection: | **Workflow** | Community-driven discussions | Project management, assignees, milestones | | **Configuration** | `data-type="discussion"`
`data-category="feedback"` | `data-type="issue"`
`data-labels="feedback,bug"` | -## โš™๏ธ Configuration Reference +## Configuration Reference ### Core Options | Attribute | Type | Default | Description | @@ -99,7 +99,7 @@ Choose the right GitHub feature for your feedback collection: | `data-text-color-class` | String | CSS class for text color | | `data-border-color-class` | String | CSS class for border color | -## ๐ŸŽจ Theming & Customization +## Theming & Customization ### 1. Inherit Page Styles (Recommended) @@ -236,7 +236,7 @@ For Svelte/Vue with Tailwind: | `.feedback-widget-btn-primary` | Submit button | Primary action button | | `.feedback-widget-btn-secondary` | Cancel button | Secondary action button | -## ๐ŸŽฏ Custom Triggers & Forms +## Custom Triggers & Forms ### Custom Trigger Button @@ -289,7 +289,7 @@ Provide your own completely custom form: ``` -## ๐Ÿ”‘ GitHub Token Setup +## GitHub Token Setup ### For GitHub Discussions @@ -309,7 +309,7 @@ for these i would recomend using a github finetuned token with only the `issues` **โš ๏ธ Security Note:** Never expose your token in client-side code for production. Consider using a serverless function or GitHub App for production deployments. THIS IS ALSO WHY I RECOMMEND USING TOKEN WITH ONLY `write:discussion` SCOPE or `issues` SCOPE. -## ๐ŸŒŸ Framework Examples +## Framework Examples ### React/Next.js @@ -451,7 +451,7 @@ export class AppComponent implements OnInit { ``` -## ๐Ÿ“Š Generated Content +## Generated Content ### GitHub Discussions @@ -489,7 +489,7 @@ Page: https://mywebsite.com/login User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)... ``` -## ๐ŸŽฏ Event Handling +## Event Handling Listen for feedback submissions: @@ -514,7 +514,7 @@ document.addEventListener('feedback-success', (event) => { }); ``` -## ๐Ÿ› ๏ธ Development +## Development ### Local Development @@ -533,7 +533,7 @@ Visit `http://localhost:8080` to see the demo. pnpm run build # Creates dist/feedback-widget.min.js ``` -## ๐Ÿค Contributing +## Contributing 1. Fork the repository 2. Create a feature branch: `git checkout -b feature/amazing-feature` @@ -548,21 +548,21 @@ pnpm run build # Creates dist/feedback-widget.min.js 7. Wait for review and address any feedback 8. Once approved, your changes will be merged and included in the next release! -## ๐Ÿ“ License +## License MIT License - see [LICENSE](LICENSE) file for details. -## ๐Ÿ†˜ Support +## Support - **Demo**: [Live Demo](https://feedback-widget.samletnorge.com) - **Documentation**: [GitHub Wiki](https://github.com/samletnorge/feedback-widget/wiki) - **Issues**: [GitHub Issues](https://github.com/samletnorge/feedback-widget/issues) - **Discussions**: [GitHub Discussions](https://github.com/samletnorge/feedback-widget/discussions) -## ๐ŸŒŸ Show Your Support +## Show Your Support -If this widget helped your project, please give it a โญ on GitHub! +If this widget helped your project, please give it a star on GitHub! --- -**Made with โค๏ธ for the web community** \ No newline at end of file +**Made for the web community** \ No newline at end of file diff --git a/index.html b/index.html index 42ad93c..5c524fd 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,11 @@ @@ -291,8 +291,9 @@ } .card li:before { - content: "โœ…"; + content: "โ€ข"; margin-right: 0.5rem; + font-weight: bold; } .highlight-box { @@ -554,7 +555,7 @@
-

๐Ÿ’ฌ Universal Feedback Widget

+

Universal Feedback Widget

Collect user feedback and automatically create GitHub discussions or issues @@ -571,7 +572,7 @@

๐Ÿ’ฌ Universal Feedback Widget

-

๐Ÿš€ Getting Started

+

Getting Started

Add feedback collection to any website with just two lines of code. Choose between GitHub discussions (recommended) or issues: @@ -621,7 +622,7 @@

Alternative - GitHub Issues

-

๐Ÿงช Try the Demo

+

Try the Demo