diff --git a/index.html b/index.html index 42ad93c..a74ad79 100644 --- a/index.html +++ b/index.html @@ -226,7 +226,7 @@ margin-bottom: 1rem; } - .code-block { + .block { background: #2C3E50; color: #E8EEF2; padding: 1.5rem; @@ -239,12 +239,17 @@ border: 1px solid var(--primary); } - .code-block .comment { + .block .comment { color: #8B9EB0; } - .code-block .tag { + .block .tag { color: #6B8E9F; } + .code-block { + background: #8b9eb026; + white-space: pre-wrap; + padding: 20px; + } .code-block .attr { color: #9FA8B0; } @@ -761,134 +766,104 @@

Step 1: Enable inherit styling

Step 2: Add CSS styles for widget components

- <!-- Regular CSS --> - <style> - .feedback-widget-modal { - background: - white; - border: - 1px solid #e5e7eb; - border-radius: - 0.5rem; - box-shadow: - 0 10px 25px rgba(0, 0, 0, 0.1); - padding: - 1.5rem; } - - .feedback-widget-header { - display: - flex; - justify-content: - space-between; - align-items: - center; - margin-bottom: - 1.5rem; } - - .feedback-widget-title { - font-size: - 1.25rem; - font-weight: - 600; - color: - #111827; - margin: - 0; } - - .feedback-widget-input, - .feedback-widget-textarea { - width: - 100%; - padding: - 0.75rem; - border: - 1px solid #d1d5db; - border-radius: - 0.375rem; - background: - white; } - - .feedback-widget-btn-primary { - background: - #3b82f6; - color: - white; - border: - none; - padding: - 0.5rem 1rem; - border-radius: - 0.375rem; - cursor: - pointer; } - </style> +<!-- Regular CSS --> +<style> +.feedback-widget-modal { + background: white; + border: 1px solid #e5e7eb; + border-radius: 0.5rem; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + padding: 1.5rem; +} + +.feedback-widget-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} + +.feedback-widget-title { + font-size: 1.25rem; + font-weight: 600; + color: #111827; + margin: 0; +} + +.feedback-widget-input, +.feedback-widget-textarea { + width: 100%; + padding: 0.75rem; + border: 1px solid #d1d5db; + border-radius: 0.375rem; + background: white; +} + +.feedback-widget-btn-primary { + background: #3b82f6; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + cursor: pointer; +} +</style>

Step 3: Tailwind CSS Version

- <!-- Tailwind CSS classes --> - <style> - :global(.feedback-widget-modal) - { @apply bg-white border - border-gray-200 rounded-lg shadow-lg p-6; } - - :global(.feedback-widget-header) - { @apply flex justify-between - items-center mb-6; } - - :global(.feedback-widget-title) - { @apply text-xl font-semibold - text-gray-900 m-0; } - - :global(.feedback-widget-close-btn) - { @apply text-2xl bg-transparent - border-0 cursor-pointer text-gray-400 hover:text-gray-600; } - - :global(.feedback-widget-field) - { @apply mb-4; } - - :global(.feedback-widget-label) - { @apply block mb-2 font-medium - text-gray-700; } - - :global(.feedback-widget-input), - :global(.feedback-widget-textarea) - { @apply w-full p-3 border - border-gray-300 rounded-md bg-white text-gray-900 - placeholder:text-gray-400 focus:outline-none focus:ring-2 - focus:ring-blue-500; } - - :global(.feedback-widget-textarea) - { @apply resize-y; } - - :global(.feedback-widget-actions) - { @apply flex gap-3 justify-end; - } - - :global(.feedback-widget-btn) { - @apply px-4 py-2 rounded-md - font-medium cursor-pointer transition-colors; } - - :global(.feedback-widget-btn-primary) - { @apply bg-blue-600 text-white - hover:bg-blue-700; } - - :global(.feedback-widget-btn-secondary) - { @apply bg-gray-100 - text-gray-700 hover:bg-gray-200; } - </style> +<!-- Tailwind CSS classes --> +<style> +:global(.feedback-widget-modal) { + @apply bg-white border border-gray-200 rounded-lg shadow-lg p-6; +} + +:global(.feedback-widget-header) { + @apply flex justify-between items-center mb-6; +} + +:global(.feedback-widget-title) { + @apply text-xl font-semibold text-gray-900 m-0; +} + +:global(.feedback-widget-close-btn) { + @apply text-2xl bg-transparent border-0 cursor-pointer text-gray-400 hover:text-gray-600; +} + +:global(.feedback-widget-field) { + @apply mb-4; +} + +:global(.feedback-widget-label) { + @apply block mb-2 font-medium text-gray-700; +} + +:global(.feedback-widget-input), +:global(.feedback-widget-textarea) { + @apply w-full p-3 border border-gray-300 rounded-md bg-white text-gray-900 + placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500; +} + +:global(.feedback-widget-textarea) { + @apply resize-y; +} + +:global(.feedback-widget-actions) { + @apply flex gap-3 justify-end; +} + +:global(.feedback-widget-btn) { + @apply px-4 py-2 rounded-md font-medium cursor-pointer transition-colors; +} + +:global(.feedback-widget-btn-primary) { + @apply bg-blue-600 text-white hover:bg-blue-700; +} + +:global(.feedback-widget-btn-secondary) { + @apply bg-gray-100 text-gray-700 hover:bg-gray-200; +} +</style>

Available CSS Classes for Styling

@@ -1057,18 +1032,13 @@

Custom Trigger Button

Programmatic API

Trigger the feedback modal programmatically:

- // Simple helper function - window.openFeedbackWidget(); +// Simple helper function +window.openFeedbackWidget(); - // Or dispatch custom event - document.dispatchEvent(new - Event('feedback-widget-open')); +// Or dispatch custom event +document.dispatchEvent( + new Event('feedback-widget-open') +);

Custom Form

@@ -1122,161 +1092,111 @@

🔧 Framework Examples

React/Next.js

- import { useEffect } - from - 'react'; - - function - App() { useEffect(() => { - const script = - document.createElement('script'); script.src = - 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; document.head.appendChild(script); }, []); - - return ( <div> <feedback-widget - data-repo="myuser/myrepo" - data-token={process.env.REACT_APP_GITHUB_TOKEN} - data-type="discussion" - data-inherit-styling="true" - /> </div> ); } +import { useEffect } from 'react'; + +function App() { + useEffect(() => { + const script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; + document.head.appendChild(script); + }, []); + + return ( + <div> + <feedback-widget + data-repo="myuser/myrepo" + data-token={process.env.REACT_APP_GITHUB_TOKEN} + data-type="discussion" + data-inherit-styling="true" + /> + </div> + ); +}

Svelte/SvelteKit

- <script> - import { onMount } - from - 'svelte'; onMount(() => { - const script = - document.createElement('script'); script.src = - 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; document.head.appendChild(script); }); - </script> - - <!-- CSS for custom styling --> - <style> - :global(.feedback-widget-modal) { @apply bg-background border - border-border rounded-lg; } - </style> - - <feedback-widget - data-repo="myuser/myrepo" - data-token="token" - data-primary-color-class="bg-primary" - data-background-color-class="bg-background" - data-inherit-styling="true" - /> +<script> + import { onMount } from 'svelte'; + + onMount(() => { + const script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; + document.head.appendChild(script); + }); +</script> + +<!-- CSS for custom styling --> +<style> + :global(.feedback-widget-modal) { + @apply bg-background border border-border rounded-lg; + } +</style> + +<feedback-widget + data-repo="myuser/myrepo" + data-token="token" + data-primary-color-class="bg-primary" + data-background-color-class="bg-background" + data-inherit-styling="true" +/>

Vue.js

- <template> <feedback-widget - :data-repo="repo" - :data-token="token" - data-type="discussion" - data-category="general" - data-position="left" - /> </template> - <script> - export default { - data() { - return { repo: - 'myuser/myrepo', token: - process.env.VUE_APP_GITHUB_TOKEN - } }, - mounted() { - const script = - document.createElement('script'); script.src = - 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; document.head.appendChild(script); } } </script> +<template> + <feedback-widget + :data-repo="repo" + :data-token="token" + data-type="discussion" + data-category="general" + data-position="left" + /> +</template> + +<script> +export default { + data() { + return { + repo: 'myuser/myrepo', + token: process.env.VUE_APP_GITHUB_TOKEN + } + }, + mounted() { + const script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; + document.head.appendChild(script); + } +} +</script>

Angular

- // app.component.ts - import { Component, OnInit } - from - '@angular/core'; - - @Component({ selector: - 'app-root', template: - ` <feedback-widget [attr.data-repo]="repo" - [attr.data-token]="token" data-type="discussion" - data-inherit-styling="true"> </feedback-widget> ` - }) - export class - AppComponent - implements OnInit { repo = - 'myuser/myrepo'; token = - environment.githubToken; - - ngOnInit() { - const script = - document.createElement('script'); script.src = - 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; document.head.appendChild(script); } } +// app.component.ts +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` + <feedback-widget + [attr.data-repo]="repo" + [attr.data-token]="token" + data-type="discussion" + data-inherit-styling="true"> + </feedback-widget> + ` +}) +export class AppComponent implements OnInit { + repo = 'myuser/myrepo'; + token = environment.githubToken; + + ngOnInit() { + const script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/@samletnorge/feedback-widget@latest/dist/feedback-widget.min.js'; + document.head.appendChild(script); + } +}