Remove emojis in favor of professional text and icons

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
 <feedback-widget data-repo="user/repo" data-token="token"></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"`<br>`data-category="feedback"` | `data-type="issue"`<br>`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:
 </feedback-widget>
 ```
 
-## 🔑 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 {
 </html>
 ```
 
-## 📊 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,7 +548,7 @@ 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.
 
@@ -559,7 +559,7 @@ MIT License - see [LICENSE](LICENSE) file for details.
 - **Issues**: [GitHub Issues](https://feedback-widget.valiantlynx.com/issues)
 - **Discussions**: [GitHub Discussions](https://feedback-widget.valiantlynx.com/discussions)
 
-## 🌟 Show Your Support
+## Show Your Support
 
 If this widget helped your project, please give it a FEEDBACK!
 

index.html

@@ -21,11 +21,11 @@
     <!-- Favicon -->
     <link
       rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>"
+      href="data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%234A5F7A%27><path d=%27M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z%27/></svg>"
     />
     <link
       rel="apple-touch-icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>"
+      href="data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%234A5F7A%27><path d=%27M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z%27/></svg>"
     />
 
     <!-- Open Graph / Facebook -->
@@ -291,8 +291,9 @@
       }
 
       .card li:before {
-        content: "✅";
+        content: "•";
         margin-right: 0.5rem;
+        font-weight: bold;
       }
 
       .highlight-box {
@@ -554,7 +555,7 @@
     <div class="container">
       <!-- Hero Section -->
       <div class="hero">
-        <h1>💬 Universal Feedback Widget</h1>
+        <h1>Universal Feedback Widget</h1>
         <p>
           Collect user feedback and automatically create GitHub discussions or
           issues
@@ -571,7 +572,7 @@ <h1>💬 Universal Feedback Widget</h1>
       <div class="content">
         <!-- Getting Started -->
         <div class="section">
-          <h2>🚀 Getting Started</h2>
+          <h2>Getting Started</h2>
           <p>
             Add feedback collection to any website with just two lines of code.
             Choose between GitHub discussions (recommended) or issues:
@@ -621,7 +622,7 @@ <h3>Alternative - GitHub Issues</h3>
           </div>
 
           <div class="demo-controls">
-            <h4>🧪 Try the Demo</h4>
+            <h4>Try the Demo</h4>
             <button
               onclick="window.openFeedbackWidget()"
               class="btn btn-success"
@@ -644,10 +645,10 @@ <h4>🧪 Try the Demo</h4>
 
         <!-- Key Features -->
         <div class="section">
-          <h2>✨ Key Features</h2>
+          <h2>Key Features</h2>
           <div class="grid">
             <div class="card">
-              <h3>🎯 GitHub Integration</h3>
+              <h3>GitHub Integration</h3>
               <ul>
                 <li>Creates GitHub discussions</li>
                 <li>Creates GitHub issues</li>
@@ -656,7 +657,7 @@ <h3>🎯 GitHub Integration</h3>
               </ul>
             </div>
             <div class="card">
-              <h3>🎨 Flexible Theming</h3>
+              <h3>Flexible Theming</h3>
               <ul>
                 <li>Inherit page styles</li>
                 <li>Tailwind CSS support</li>
@@ -665,7 +666,7 @@ <h3>🎨 Flexible Theming</h3>
               </ul>
             </div>
             <div class="card">
-              <h3>🔧 Custom Triggers</h3>
+              <h3>Custom Triggers</h3>
               <ul>
                 <li>Vertical tab design</li>
                 <li>Custom trigger elements</li>
@@ -674,7 +675,7 @@ <h3>🔧 Custom Triggers</h3>
               </ul>
             </div>
             <div class="card">
-              <h3>📱 Universal Support</h3>
+              <h3>Universal Support</h3>
               <ul>
                 <li>React, Vue, Svelte, Angular</li>
                 <li>Plain HTML</li>
@@ -687,7 +688,7 @@ <h3>📱 Universal Support</h3>
 
         <!-- GitHub Discussions vs Issues -->
         <div class="section">
-          <h2>💭 Discussions vs Issues</h2>
+          <h2>Discussions vs Issues</h2>
           <p>Choose the right GitHub feature for your feedback collection:</p>
 
           <div class="feature-comparison">
@@ -735,7 +736,7 @@ <h2>💭 Discussions vs Issues</h2>
 
         <!-- Theming Options -->
         <div class="section">
-          <h2>🎨 Theming & Customization</h2>
+          <h2>Theming & Customization</h2>
 
           <h3>1. Inherit Page Styles (Recommended)</h3>
           <p>
@@ -1029,7 +1030,7 @@ <h3>3. Custom Colors & Button Positions</h3>
 
         <!-- Custom Triggers -->
         <div class="section">
-          <h2>🎯 Custom Triggers & Forms</h2>
+          <h2>Custom Triggers & Forms</h2>
 
           <h3>Custom Trigger Button</h3>
           <p>Use your own styled button instead of the default vertical tab:</p>
@@ -1118,7 +1119,7 @@ <h3>Custom Form</h3>
 
         <!-- Framework Examples -->
         <div class="section">
-          <h2>🔧 Framework Examples</h2>
+          <h2>Framework Examples</h2>
 
           <h3>React/Next.js</h3>
           <div class="code-block">
@@ -1282,7 +1283,7 @@ <h3>Angular</h3>
 
         <!-- Configuration Reference -->
         <div class="section">
-          <h2>⚙️ Complete Configuration Reference</h2>
+          <h2>Complete Configuration Reference</h2>
           <p>All available configuration options:</p>
 
           <div class="feature-comparison">
@@ -1381,22 +1382,22 @@ <h2>⚙️ Complete Configuration Reference</h2>
 
         <!-- GitHub Token Setup -->
         <div class="section">
-          <h2>🔑 GitHub Token Setup</h2>
+          <h2>GitHub Token Setup</h2>
           <p>
             Create a GitHub Personal Access Token with the right permissions:
           </p>
 
           <h3>For GitHub Discussions</h3>
           <div class="code-block">
             <span class="comment">Required scopes:</span>
-            ✅ public_repo (for public repositories) ✅ repo (for private
-            repositories) ✅ write:discussion
+            • public_repo (for public repositories) • repo (for private
+            repositories) • write:discussion
           </div>
 
           <h3>For GitHub Issues</h3>
           <div class="code-block">
             <span class="comment">Required scopes:</span>
-            ✅ public_repo (for public repositories) ✅ repo (for private
+            • public_repo (for public repositories) • repo (for private
             repositories)
           </div>
 
@@ -1417,7 +1418,7 @@ <h3>Steps to Create Token</h3>
 
         <!-- Call to Action -->
         <div class="highlight-box">
-          <h3>🚀 Ready to collect feedback?</h3>
+          <h3>Ready to collect feedback?</h3>
           <p>
             Get started in under 2 minutes with our universal feedback widget
           </p>
@@ -1446,7 +1447,7 @@ <h3>🚀 Ready to collect feedback?</h3>
 
         <!-- Footer -->
         <div class="footer">
-          <p>Made with ❤️ for developers everywhere</p>
+          <p>Made for developers everywhere</p>
           <p style="margin-top: 0.5rem; font-size: 0.875rem">
             <a
               href="https://github.com/samletnorge/feedback-widget"
@@ -1590,7 +1591,7 @@ <h3 style="margin: 0 0 1rem 0; color: var(--text)">
     <!-- Default widget with vertical tab -->
     <feedback-widget
       data-repo="samletnorge/feedback-widget"
-      data-token="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"
+      data-token="YOUR_GITHUB_TOKEN_HERE"
       data-type="discussion"
       data-category="feedback"
       data-title="Demo Feedback"
@@ -1603,7 +1604,7 @@ <h3 style="margin: 0 0 1rem 0; color: var(--text)">
     <feedback-widget
       id="custom-form-widget"
       data-repo="samletnorge/feedback-widget"
-      data-token="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"
+      data-token="YOUR_GITHUB_TOKEN_HERE"
       data-type="discussion"
       data-category="feedback"
       data-custom-form="#custom-form"
@@ -1615,7 +1616,7 @@ <h3 style="margin: 0 0 1rem 0; color: var(--text)">
     <feedback-widget
       id="inherit-styled-widget"
       data-repo="samletnorge/feedback-widget"
-      data-token="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"
+      data-token="YOUR_GITHUB_TOKEN_HERE"
       data-type="discussion"
       data-category="feedback"
       data-inherit-styling="true"
@@ -1699,7 +1700,7 @@ <h3 style="margin: 0 0 1rem 0; color: var(--text)">
                 font-weight: 600;
             `;
         notification.textContent =
-          "✅ Demo feedback received! Check console for details.";
+          "[SUCCESS] Demo feedback received! Check console for details.";
         document.body.appendChild(notification);
 
         setTimeout(() => {

package.json

@@ -15,9 +15,9 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "minify": "terser dist/feedback-widget.js -o dist/feedback-widget.min.js --compress --mangle && node -e \"const fs=require('fs');const s=fs.statSync('dist/feedback-widget.min.js');console.log('📦 Minified size:',(s.size/1024).toFixed(2),'KB');\"",
+    "minify": "terser dist/feedback-widget.js -o dist/feedback-widget.min.js --compress --mangle && node -e \"const fs=require('fs');const s=fs.statSync('dist/feedback-widget.min.js');console.log('[BUILD] Minified size:',(s.size/1024).toFixed(2),'KB');\"",
     "build:all": "pnpm run build && pnpm run minify",
-    "clean": "node -e \"const fs = require('fs'); if (fs.existsSync('dist')) fs.rmSync('dist', {recursive: true, force: true}); console.log('🧹 Cleaned dist directory');\"",
+    "clean": "node -e \"const fs = require('fs'); if (fs.existsSync('dist')) fs.rmSync('dist', {recursive: true, force: true}); console.log('[CLEAN] Cleaned dist directory');\"",
     "dev": "http-server . -p 8080 -o",
     "prepublishOnly": "pnpm run package",
     "package": "pnpm run clean && pnpm run build:all",