Feedback

_layouts/default.html

@@ -53,6 +53,8 @@
                         Home</a></li>
                     <li class="nav-item"><a class="nav-link {% if page.title == 'About' %}active{% endif %}" href="/about/">
                         About</a></li>
+                    <li class="nav-item"><a class="nav-link {% if page.title == 'Feedback' %}active{% endif %}" href="/feedback/">
+                        Feedback</a></li>
                     <li class="nav-item"><a class="nav-link" href="{{ site.github_url }}" target="_blank" rel="noopener">
                         GitHub <i class="fa-solid fa-arrow-up-right-from-square"></i></a></li>
                 </ul>
@@ -62,7 +64,7 @@
 </header>
 
 <main class="flex-grow-1">
-    <div class="container-fluid px-3">
+    <div class="container-fluid px-3 h-100">
         {{ content }}
     </div>
 </main>
@@ -79,6 +81,8 @@
                     <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none {% if page.title == 'Home' %}fw-bold{% endif %}" href="/">Home</a></li>
                     <li class="list-inline-item">|</li>
                     <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none {% if page.title == 'About' %}fw-bold{% endif %}" href="/about/">About</a></li>
+                    <li class="list-inline-item">|</li>
+                    <li class="list-inline-item"><a class="link-body-emphasis text-decoration-none {% if page.title == 'Feedback' %}fw-bold{% endif %}" href="/feedback/">Feedback</a></li>
                 </ul>
             </div>
         </div>

feedback.html

@@ -14,33 +14,26 @@
 <div class="d-flex flex-column h-100 align-items-center">
     <div class="d-flex flex-grow-1 justify-content-center align-items-center w-100">
         <div class="row flex-grow-1">
-            <div class="col-sm-12 col-md-8 col-lg-6 m-auto">
+            <div class="col-sm-12 col-md-10 col-lg-8 m-auto">
                 <div id="login-outer" class="m-auto p-3">
                     <div class="justify-content-center align-items-center mb-2 d-flex">
                         <img src="/media/logo.png" class="img-fluid float-start me-2" alt="PlayDrift Extension" height="42" width="42">
                         <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
                     </div>
-                    <p class="text-center">
-                        Feedback Form Under Construction!
+                    <p class="text-center lead">
+                        Provide General Feedback, Ask Questions, or Select an Application.
                     </p>
                     <form id="uninstall-form">
                         <input type="hidden" value="{{ site.discord_webhook }}" id="discord-webhook" hidden="hidden">
-                        <div class="form-check form-switch fs-5">
-                            <input class="form-check-input" type="checkbox" role="switch" id="not-used">
-                            <label class="form-check-label text-success-emphasis" for="not-used">Do Not Need or Not Used</label>
-                        </div>
-                        <div class="form-check form-switch fs-5">
-                            <input class="form-check-input" type="checkbox" role="switch" id="not-expected">
-                            <label class="form-check-label text-warning-emphasis" for="not-expected">Does Not Work as Expected</label>
-                        </div>
-                        <div class="form-check form-switch fs-5">
-                            <input class="form-check-input" type="checkbox" role="switch" id="not-working">
-                            <label class="form-check-label text-danger-emphasis" for="not-working">Not Working or Broken</label>
-                        </div>
+
+                        <select id="feedback" class="form-select form-select-lg mb-3" aria-label="Select Feedback Reason">
+                            <option value="General Feedback" selected>Select an Application (Optional)</option>
+                        </select>
+
                         <div class="my-2">
                             <label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
-                            <textarea class="form-control" id="uninstall-response" rows="4" maxlength="500"
-                                      placeholder="Optional Feedback. Bugs, Missing Features, etc..." autofocus></textarea>
+                            <textarea class="form-control" id="uninstall-response" rows="5" maxlength="500"
+                                      placeholder="Questions, Comments, Concerns, etc..." autofocus></textarea>
                             <span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 500</span>
                         </div>
                         <button id="submit-btn" class="btn btn-success w-100" type="submit">
@@ -53,4 +46,5 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
     </div>
 </div>
 
+<script type="text/javascript" src="/js/config.js"></script>
 <script type="text/javascript" src="/js/feedback.js"></script>

index.html

@@ -51,4 +51,5 @@ <h4 class="card-title">
     <i class="fa-solid fa-terminal" title="Shell Script"></i>
 </div> <!-- d-none clone -->
 
+<script type="text/javascript" src="/js/config.js"></script>
 <script type="text/javascript" src="/js/index.js"></script>

js/config.js

@@ -0,0 +1,236 @@
+const webExtensions = [
+    {
+        name: 'Link Extractor',
+        url: 'https://link-extractor.cssnr.com/',
+        icon: 'https://link-extractor.cssnr.com/media/logo.png',
+        description:
+            'Web Extension to easily extract, parse, or open all links/domains from a site or text with optional filters.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp',
+            Mozilla: 'https://addons.mozilla.org/addon/link-extractor',
+            Website: 'https://link-extractor.cssnr.com/',
+            GitHub: 'https://github.com/cssnr/link-extractor',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'Open Links in New Tab',
+        url: 'https://open-links-in-new-tab.cssnr.com/',
+        icon: 'https://raw.githubusercontent.com/cssnr/open-links-in-new-tab/master/src/images/logo128.png',
+        description:
+            'Web Extension to Open Links in New Tabs for Specified Domains or Temporarily on Any Tab.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc',
+            Mozilla: 'https://addons.mozilla.org/addon/open-links-in-new-tab',
+            Website: 'https://open-links-in-new-tab.cssnr.com/',
+            GitHub: 'https://github.com/cssnr/open-links-in-new-tab',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'PlayDrift Extension',
+        url: 'https://playdrift-extension.cssnr.com/',
+        icon: 'https://playdrift-extension.cssnr.com/media/logo.png',
+        description:
+            'PlayDrift Web Extension to view Rankings and Win/Loss Records on Player Profiles plus much more.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/playdrift-extension/anlkpnbhiiojmedlkchcdmigkdccnmcn',
+            Mozilla: 'https://addons.mozilla.org/addon/playdrift-extension',
+            Website: 'https://playdrift-extension.cssnr.com/',
+            GitHub: 'https://github.com/cssnr/playdrift-extension',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'Django Files Extension',
+        url: 'https://django-files.github.io/extension/',
+        icon: 'https://raw.githubusercontent.com/django-files/web-extension/master/src/media/logo128.png',
+        description:
+            'Web Extension for Django Files to view recent uploads, shorten URLs, and upload any Image, Video or Audio.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/django-files/abpbiefojfkekhkjnpakpekkpeibnjej',
+            Mozilla: 'https://addons.mozilla.org/addon/django-files',
+            Website: 'https://django-files.github.io/extension/',
+            GitHub: 'https://github.com/django-files/web-extension',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'SMWC Web Extension',
+        url: 'https://smwc.world/',
+        icon: 'https://raw.githubusercontent.com/cssnr/smwc-web-extension/master/src/images/logo128.png',
+        description:
+            'Web Extension to to easily Patch and Play ROMs Online via the smwc.world site.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/smwc-web-extension/foalfafgmnglcgpgkhhmcfhjgmdcjide',
+            Mozilla: 'https://addons.mozilla.org/addon/smwc-web-extension',
+            Website: 'https://smwc.world/',
+            GitHub: 'https://github.com/cssnr/smwc-web-extension',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'ASN Plus',
+        url: 'https://asn-plus.cssnr.com/',
+        icon: 'https://asn-plus.cssnr.com/media/logo.png',
+        description:
+            'Aviation Safety Network Web Extension to enable dark mode plus add additional features.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/asn-plus/phcbcnpmcbkcnijkpfohkdmcofcofibh',
+            Mozilla: 'https://addons.mozilla.org/addon/asn-plus',
+            Website: 'https://asn-plus.cssnr.com/',
+            GitHub: 'https://github.com/cssnr/asn-plus',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'Text Formatter',
+        url: 'https://github.com/cssnr/text-formatter',
+        icon: 'https://raw.githubusercontent.com/cssnr/text-formatter/master/src/images/logo128.png',
+        description: 'Web Extension for Splitting and Formatting Text.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/text-formatter/medimbembaeldnglneiipkenpagjfcdj',
+            Mozilla: 'https://github.com/cssnr/text-formatter/releases/latest',
+            GitHub: 'https://github.com/cssnr/text-formatter',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'Aviation Tools',
+        url: 'https://github.com/cssnr/aviation-tools',
+        icon: 'https://raw.githubusercontent.com/cssnr/aviation-tools/master/src/images/logo128.png',
+        description:
+            'Aviation Tools Web Extension. Currently a Work in Progress.',
+        links: {
+            Google: 'https://chromewebstore.google.com/detail/aviation-tools/cjjhackeogffajjndfhemgniokonimin',
+            Mozilla: 'https://github.com/cssnr/aviation-tools/releases/latest',
+            GitHub: 'https://github.com/cssnr/aviation-tools',
+        },
+        fa: 'faJs',
+    },
+    {
+        name: 'Simple Extension',
+        url: 'https://github.com/smashedr/simple-extension',
+        icon: 'https://raw.githubusercontent.com/smashedr/simple-extension/master/src/images/logo128.png',
+        description:
+            'Example Web Extension for copying and creating new web extensions based on Manifest V3.',
+        links: {
+            GitHub: 'https://github.com/smashedr/simple-extension',
+        },
+        fa: 'faJs',
+    },
+]
+
+const webApps = [
+    {
+        name: 'Django Files',
+        url: 'https://django-files.github.io/',
+        icon: 'https://raw.githubusercontent.com/django-files/web-extension/master/src/media/logo128.png',
+        description:
+            'A Feature Packed Self-Hosted Django/Docker File Manager for Sharing Files with ShareX, Flameshot and Much more.',
+        links: {
+            Website: 'https://smwc.world/',
+            GitHub: 'https://github.com/django-files/django-files',
+        },
+        fa: 'faPython',
+    },
+    {
+        name: 'SMWC ROM Archive',
+        url: 'https://smwc.world/',
+        icon: 'https://smwc.world/static/images/logo.png',
+        description:
+            'SMWCentral ROM Archive to archive, download, send notifications, plus patch and play SMW ROMs online.',
+        links: {
+            Website: 'https://smwc.world/',
+            GitHub: 'https://github.com/cssnr/smwc-web',
+        },
+        fa: 'faPython',
+    },
+    {
+        name: 'SlashGIF',
+        url: 'https://slashgif.com/',
+        icon: 'https://slashgif.com/static/images/slashgif.png',
+        description:
+            'Slack App to search for a random GIF and preview it, before posting publicly.',
+        links: {
+            Website: 'https://slashgif.com/',
+            GitHub: 'https://github.com/cssnr/slashgif-site',
+        },
+        fa: 'faPython',
+    },
+]
+
+const githubActions = [
+    {
+        name: 'Stack Deploy',
+        url: 'https://github.com/cssnr/stack-deploy-action',
+        description:
+            'Deploy Docker Stack to Remote Host using SSH Authentication.',
+        links: {
+            GitHub: 'https://github.com/cssnr/stack-deploy-action',
+        },
+        fa: 'faShell',
+    },
+    {
+        name: 'Mozilla Addon Update File',
+        url: 'https://github.com/cssnr/mozilla-addon-update-action',
+        description:
+            'Update the Mozilla Firefox Update JSON File after a Release.',
+        links: {
+            GitHub: 'https://github.com/cssnr/mozilla-addon-update-action',
+        },
+        fa: 'faPython',
+    },
+    {
+        name: 'Push Artifacts',
+        url: 'https://github.com/cssnr/push-artifacts-action',
+        description: 'Pushes Build Artifacts to a Remote Host using rsync.',
+        links: {
+            GitHub: 'https://github.com/cssnr/push-artifacts-action',
+        },
+        fa: 'faShell',
+    },
+    {
+        name: 'Cloudflare Purge Cache',
+        url: 'https://github.com/cssnr/cf-purge-cache-action',
+        description: 'Easily Purge Cloudflare Cache.',
+        links: {
+            GitHub: 'https://github.com/cssnr/cf-purge-cache-action',
+        },
+        fa: 'faPython',
+    },
+]
+const otherSoftware = [
+    {
+        name: "Carl's Cogs",
+        url: 'https://github.com/smashedr/carl-cogs',
+        description:
+            'Red Discord Bot Cogs. Commands and Packages for the Red Discord Bot.',
+        links: {
+            'Red Discord Bot': 'https://github.com/Cog-Creators/Red-DiscordBot',
+            GitHub: 'https://github.com/cssnr/vultr-python',
+        },
+        fa: 'faPython',
+    },
+    {
+        name: 'Vultr Python',
+        url: 'https://github.com/cssnr/vultr-python',
+        description: 'Vultr Cloud Hosting Python 3 Library.',
+        links: {
+            Vultr: 'https://www.vultr.com/?ref=6905748',
+            GitHub: 'https://github.com/cssnr/vultr-python',
+        },
+        fa: 'faPython',
+    },
+    {
+        name: 'Zipline CLI',
+        url: 'https://github.com/cssnr/zipline-cli',
+        description: 'Command Line Interface for Zipline and Django Files.',
+        links: {
+            Zipline: 'https://github.com/diced/zipline',
+            'Django Files': 'https://github.com/django-files/django-files',
+            GitHub: 'https://github.com/cssnr/zipline-cli',
+        },
+        fa: 'faPython',
+    },
+]

js/feedback.js

@@ -1,5 +1,7 @@
 // JS uninstall.html
 
+document.addEventListener('DOMContentLoaded', domContentLoaded)
+
 const uninstallMessage = 'CSSNR GitHub Feedback.'
 const discordUsername = 'CSSNR'
 const discordAvatar = 'https://cssnr.github.io/media/logo.png'
@@ -11,33 +13,45 @@ const submitBtn = document.getElementById('submit-btn')
 const errorAlert = document.getElementById('error-alert')
 
 uninstallForm.addEventListener('submit', formSubmit)
+
 uninstallResponse.addEventListener('input', function (e) {
     inputCount.textContent = this.value.length
 })
 
+/**
+ * DOMContentLoaded Callback
+ * @function domContentLoaded
+ */
+async function domContentLoaded() {
+    console.debug('DOMContentLoaded')
+    const parent = document.getElementById('feedback')
+    const apps = [webExtensions, webApps, githubActions]
+    const combined = apps.flat()
+    for (const app of combined) {
+        const option = document.createElement('option')
+        option.value = app.name
+        option.textContent = app.name
+        parent.appendChild(option)
+    }
+}
+
 async function formSubmit(event) {
     console.debug('formSubmit:', event, this)
     event.preventDefault()
     errorAlert.style.display = 'none'
     const url = this[0].value
-    const notUsed = this[1].checked
-    const notExpected = this[2].checked
-    const notWorking = this[3].checked
-    const feedbackText = this[4].value
-    if (!(notUsed || notExpected || notWorking || feedbackText)) {
-        return console.warn('No Data to Send.')
+    const app = this[1].value
+    const text = this[2].value.trim()
+    if (!text) {
+        uninstallResponse.focus()
+        return console.warn('No Feedback to Send.')
     }
     submitBtn.classList.add('disabled')
     const lines = [
-        uninstallMessage,
+        `CSSNR GitHub Feedback for: **${app}**`,
         `\`${navigator.userAgent}\``,
-        `${getBoolIcon(notUsed)} Not Used`,
-        `${getBoolIcon(notExpected)} Not as Expected`,
-        `${getBoolIcon(notWorking)} Not Working`,
+        `\`\`\`\n${text}\n\`\`\``,
     ]
-    if (feedbackText) {
-        lines.push(`\`\`\`\n${feedbackText}\n\`\`\``)
-    }
     // console.debug('lines:', lines)
     const response = await sendDiscord(url, lines.join('\n'))
     console.debug('response:', response)
@@ -68,11 +82,3 @@ async function sendDiscord(url, content) {
     }
     return await fetch(url, opts)
 }
-
-function getBoolIcon(value) {
-    if (value) {
-        return '✅'
-    } else {
-        return '🔳'
-    }
-}