Merge pull request #166 from IntersectMBO/feat/feedback-widget

Feat/feedback widget

Author: Ranchhand87

.github/workflows/deploy.yml

@@ -44,6 +44,8 @@ jobs:
         run: npm ci
       - name: Build website
         run: npm run build
+        env:
+          GOOGLE_SCRIPT_URL: ${{ secrets.GOOGLE_SCRIPT_URL }}
 
       - name: Upload Build Artifact
         uses: actions/upload-pages-artifact@v4

.github/workflows/static.yml

@@ -35,6 +35,8 @@ jobs:
       - name: Build Docusaurus
         run: npm run build
         working-directory: ./website
+        env:
+          GOOGLE_SCRIPT_URL: ${{ secrets.GOOGLE_SCRIPT_URL }}
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact

website/docusaurus.config.ts

@@ -1,6 +1,9 @@
 import { themes as prismThemes } from "prism-react-renderer";
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '.env' });
 
 const organizationName = "IntersectMBO";
 const projectName = "developer-experience";
@@ -214,6 +217,10 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
+
+  customFields: {
+    googleScriptUrl: process.env.GOOGLE_SCRIPT_URL,
+  },
 };
 
 export default config;

website/google-apps-script.js

@@ -0,0 +1,68 @@
+/**
+ * DO NOT DELETE THIS FILE
+ * Google Apps Script to handle feedback submissions.
+ * 
+ * INSTRUCTIONS:
+ * 1. Open your Google Sheet.
+ * 2. Go to Extensions > Apps Script.
+ * 3. Paste this code into the editor.
+ * 4. Save the project.
+ * 5. Click "Deploy" > "New deployment".
+ * 6. Select type: "Web app".
+ * 7. Description: "Feedback Widget API".
+ * 8. Execute as: "Me" (your email).
+ * 9. Who has access: "Anyone" (IMPORTANT).
+ * 10. Click "Deploy" and copy the "Web app URL".
+ */
+
+
+function doPost(e) {
+    const lock = LockService.getScriptLock();
+    lock.tryLock(10000);
+
+    try {
+        const doc = SpreadsheetApp.getActiveSpreadsheet();
+        const sheet = doc.getSheetByName('Feedback') || doc.insertSheet('Feedback');
+
+        // Add headers if they don't exist
+        if (sheet.getLastRow() === 0) {
+            sheet.appendRow(['Timestamp', 'Page URL', 'Vote', 'Comment', 'User Agent']);
+        }
+
+        const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
+        const nextRow = sheet.getLastRow() + 1;
+
+        // Parse the request body
+        const data = JSON.parse(e.postData.contents);
+
+        const newRow = [
+            new Date(),
+            data.url || 'Unknown',
+            data.vote || 'Unknown',
+            data.comment || '',
+            data.userAgent || ''
+        ];
+
+        sheet.appendRow(newRow);
+
+        return ContentService
+            .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
+            .setMimeType(ContentService.MimeType.JSON);
+
+    } catch (e) {
+        return ContentService
+            .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
+            .setMimeType(ContentService.MimeType.JSON);
+    } finally {
+        lock.releaseLock();
+    }
+}
+
+// Handle CORS preflight requests
+function doOptions(e) {
+    return ContentService.createTextOutput("")
+        .setMimeType(ContentService.MimeType.JSON)
+        .appendHeader("Access-Control-Allow-Origin", "*")
+        .appendHeader("Access-Control-Allow-Methods", "POST")
+        .appendHeader("Access-Control-Allow-Headers", "Content-Type");
+}

website/package-lock.json

@@ -35,6 +35,7 @@
     "@docusaurus/tsconfig": "^3.9.2",
     "@docusaurus/types": "^3.9.2",
     "@types/node": "^25.3.0",
+    "dotenv": "^17.3.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.9.3"
   },

website/package.json

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export default function FeedbackWidget() {
+  const { siteConfig } = useDocusaurusContext();
+  const GOOGLE_SCRIPT_URL = siteConfig.customFields?.googleScriptUrl as string;
+  
+  const [vote, setVote] = useState<null | 'yes' | 'no'>(null);
+  const [comment, setComment] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleVote = (value: 'yes' | 'no') => {
+    setVote(value);
+    if (value === 'yes') {
+       submitFeedback(value, '');
+    }
+  };
+
+  const submitFeedback = async (voteValue: string, commentValue: string) => {
+    setSubmitting(true);
+    try {
+      const data = {
+        url: window.location.href, 
+        vote: voteValue,
+        comment: commentValue,
+        userAgent: navigator.userAgent,
+      };
+
+      await fetch(GOOGLE_SCRIPT_URL, {
+        method: 'POST',
+        mode: 'no-cors',
+        headers: {
+          'Content-Type': 'text/plain;charset=utf-8',
+        },
+        body: JSON.stringify(data),
+      });
+
+      setSubmitted(true);
+    } catch (error) {
+      setSubmitted(true);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCommentSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (vote) {
+      submitFeedback(vote, comment);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="feedback-container">
+        <div className="feedback-widget">
+          <p className="thank-you">Thanks for your feedback! 🙏🏽</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="feedback-container">
+      <div className="feedback-widget">
+        {!vote ? (
+          <div className="initial-state">
+            <span className="question">Was this helpful?</span>
+            <div className="buttons">
+              <button
+                className={clsx("button", "thumbs-up")}
+                onClick={() => handleVote('yes')}
+                aria-label="Yes"
+              >
+                👍 Yes
+              </button>
+              <button
+                className={clsx("button", "thumbs-down")}
+                onClick={() => setVote('no')}
+                aria-label="No"
+              >
+                👎 No
+              </button>
+            </div>
+          </div>
+        ) : (
+          <form className="comment-form" onSubmit={handleCommentSubmit}>
+            <p className="follow-up">
+              {vote === 'yes' ? 'What was most helpful?' : 'How can we improve this page?'}
+            </p>
+            <textarea
+              className="textarea"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder={vote === 'yes' ? "Optional comments..." : "Please tell us what's missing or unclear..."}
+              rows={3}
+            />
+            <div className="form-actions">
+              <button
+                type="button"
+                className="cancel-button"
+                onClick={() => setVote(null)}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="submit-button"
+                disabled={submitting}
+              >
+                {submitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}