feat: implement widget asset fetching script and update feedback modal with success message handling

Author: onmax

package.json

@@ -6,12 +6,13 @@
   "scripts": {
     "astro": "astro",
     "build": "astro check && astro build",
-    "dev": "astro dev",
+    "dev": "node scripts/fetch-widget-assets.js && astro dev",
     "preview": "astro preview",
     "start": "astro dev",
     "postbuild": "cp _headers ./dist/",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "prebuild": "node scripts/fetch-widget-assets.js"
   },
   "dependencies": {
     "@astrojs/vue": "^5.1.0",
@@ -38,6 +39,7 @@
     "eslint-plugin-format": "^1.0.1",
     "fast-glob": "^3.3.3",
     "nimiq-css": "1.0.0-beta.54",
+    "pathe": "^2.0.3",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.4.5"
   }

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+// ESM version: Fetch Nimiq Feedback Widget assets using fetch and pathe
+// Usage: node scripts/fetch-widget-assets.js
+
+import fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'pathe'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const files = [
+  {
+    url: 'https://nimiq-feedback.je-cf9.workers.dev/widget.css',
+    dest: join(__dirname, '../public/widget.css'),
+  },
+  {
+    url: 'https://nimiq-feedback.je-cf9.workers.dev/widget.js',
+    dest: join(__dirname, '../public/widget.js'),
+  },
+]
+
+for (const { url, dest } of files) {
+  try {
+    const res = await fetch(url)
+    if (!res.ok)
+      throw new Error(`Failed to fetch ${url}: ${res.status}`)
+    const buf = Buffer.from(await res.arrayBuffer())
+    await fs.writeFile(dest, buf)
+    console.log(`✅ Downloaded ${url} → ${dest}`)
+  }
+  catch (err) {
+    console.error(`❌ Failed to download ${url}:`, err.message)
+  }
+}

public/assets/fonts/FiraCode-VariableFont_wght.ttf

@@ -3,6 +3,6 @@
 <slot name="meta" />
 
 <!-- Nimiq Feedback Widget CSS/JS -->
-<link rel="preload" href="https://nimiq-feedback.je-cf9.workers.dev/widget.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<noscript><link rel="stylesheet" href="https://nimiq-feedback.je-cf9.workers.dev/widget.css"></noscript>
-<script src="https://nimiq-feedback.je-cf9.workers.dev/widget.js" defer></script> 
+<link rel="preload" href="/widget.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+<noscript><link rel="stylesheet" href="/widget.css" /></noscript>
+<script src="/widget.js" defer></script>

public/assets/fonts/Mulish-VariableFont_wght.ttf

@@ -3,7 +3,6 @@ import type { WidgetInstance } from '../types/feedback-widget'
 import {
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogOverlay,
   DialogPortal,
   DialogRoot,
@@ -16,6 +15,7 @@ const widgetContainer = ref<HTMLDivElement>()
 const isWidgetLoaded = ref(false)
 const widgetInstance = ref<WidgetInstance>()
 const showFallbackForm = ref(false)
+const showSuccessMessage = ref(false)
 
 const open = ref(false)
 
@@ -37,7 +37,11 @@ async function mountWidget() {
     })
     widgetInstance.value.communication?.on('form-submitted', (data) => {
       console.log('Feedback submitted successfully:', data)
-      setTimeout(() => open.value = false, 2000)
+      showSuccessMessage.value = true
+      setTimeout(() => {
+        showSuccessMessage.value = false
+        open.value = false
+      }, 2000)
     })
     widgetInstance.value.communication?.on('form-error', (error) => {
       console.error('Feedback submission error:', error)
@@ -72,6 +76,7 @@ watch(open, async (newValue) => {
   if (newValue) {
     document.body.style.overflow = 'hidden'
     showFallbackForm.value = false
+    showSuccessMessage.value = false
     try {
       await mountWidget()
     }
@@ -108,34 +113,38 @@ onUnmounted(() => {
           @open-auto-focus.prevent
         >
           <div class="relative bg-white py-8 ring-1 ring-neutral-200 dark:bg-neutral-900 dark:ring-neutral-800">
-            <DialogTitle class="mb-3 px-6 text-center text-2xl text-neutral-900 font-bold leading-none lg:px-10 dark:text-neutral" as="h2">
+            <DialogTitle class="sr-only mb-3 px-6 text-center text-2xl text-neutral-900 font-bold leading-none lg:px-10 dark:text-neutral" as="h2">
               Share Your Feedback
             </DialogTitle>
 
-            <DialogDescription class="block px-6 text-center text-neutral-700 lg:px-10 dark:text-neutral-400">
-              Help us improve the Nimiq Tutorial by sharing your thoughts, reporting bugs, or suggesting new tutorials.
-            </DialogDescription>
-
             <div class="mt-3 px-6 lg:px-10">
               <!-- Loading state -->
-              <div v-if="!isWidgetLoaded && !showFallbackForm" class="h-64 flex items-center justify-center">
+              <div v-if="!isWidgetLoaded && !showFallbackForm && !showSuccessMessage" class="h-64 flex items-center justify-center">
                 <div class="flex items-center text-neutral-500 space-x-2 dark:text-neutral-400">
-                  <div class="i-nimiq:spinner h-5 w-5" />
+                  <div class="i-ph:spinner h-5 w-5" />
                   <span>Loading feedback form...</span>
                 </div>
               </div>
 
+              <!-- Success state -->
+              <div v-if="showSuccessMessage" class="h-64 flex flex-col items-center justify-center space-y-4">
+                <div class="i-ph:check-circle h-12 w-12 text-green-500" />
+                <div class="text-lg text-green-600 font-medium dark:text-green-400">
+                  Thank you for your feedback!
+                </div>
+              </div>
+
               <!-- External Widget -->
               <div
                 id="feedback-widget"
                 ref="widgetContainer"
-                :class="{ block: isWidgetLoaded, hidden: !isWidgetLoaded }"
+                :class="{ block: isWidgetLoaded && !showSuccessMessage, hidden: !isWidgetLoaded || showSuccessMessage }"
               />
 
               <!-- Error state -->
               <div v-if="showFallbackForm && !isWidgetLoaded" class="h-64 flex items-center justify-center">
                 <div class="text-center space-y-4">
-                  <div class="i-nimiq:warning mx-auto h-12 w-12 text-yellow-500" />
+                  <div class="i-ph:warning-circle mx-auto h-12 w-12 text-yellow-500" />
                   <div class="text-neutral-500 dark:text-neutral-400">
                     Unable to load feedback form
                   </div>
@@ -156,7 +165,7 @@ onUnmounted(() => {
               class="absolute right-4 top-4 cursor-pointer transition-colors hover:text-neutral-600 dark:hover:text-neutral-300"
               aria-label="Close"
             >
-              <div class="i-nimiq:cross h-6 w-6" />
+              <div class="i-ph:x h-6 w-6" />
             </DialogClose>
           </div>
         </DialogContent>

public/widget.css

@@ -2,14 +2,30 @@
 @import './node_modules/nimiq-css/dist/css/colors.css';
 @import './node_modules/nimiq-css/dist/css/fonts.css';
 
+/* Add Mulish Variable Font (local) */
+@font-face {
+  font-family: 'Mulish';
+  src: url('/assets/fonts/Mulish-VariableFont_wght.ttf') format('truetype');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Add Fira Code from Google Fonts */
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/assets/fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
+  font-weight: 400 700;
+  font-display: swap;
+}
+
 /* TutorialKit Theme using Nimiq Design System */
 :root,
 :root[data-theme='light'] {
   /* High-level app styling */
   --tk-elements-app-textColor: var(--colors-neutral);
   --tk-elements-app-backgroundColor: var(--colors-neutral-0);
   --tk-elements-app-borderColor: var(--colors-neutral-300);
-
+  
   /* Background tokens */
   --tk-background-primary: var(--colors-neutral-0);
   --tk-background-secondary: var(--colors-neutral-200);
@@ -138,6 +154,15 @@
   --tk-terminal-background: var(--colors-darkblue);
 }
 
+.markdown-content :where(h1, h2, h3, h4) {
+  --heading-font-weight: 700;
+}
+
+:where(:not(:where(.nq-raw *, [nq-raw] *))):where(p, span):empty {
+  display: inherit !important;
+}
+
+
 /* Custom styling for Nimiq branding touches */
 .tk-topbar {
   background: var(--colors-neutral-gradient);
@@ -178,6 +203,7 @@
 :root {
   font-family:
     'Muli',
+    'Mulish'
     'Inter',
     system-ui,
     -apple-system,
@@ -191,3 +217,13 @@ div[role='separator']:hover::after {
     background-color: color-mix(in srgb, var(--colors-neutral-0) 8%, transparent);
   }
 }
+
+.cm-editor * {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8rem;
+}
+
+.terminal * {
+  letter-spacing: normal !important;
+  font-family: 'Fira Code', monospace;
+}