Better Feedback API

.vitepress/routes/index.post.ts

@@ -1,10 +1,5 @@
 import { fetcher } from "itty-fetcher";
-
-interface Feedback {
-  message: string;
-  feedbackType?: string;
-  contactEmail?: string;
-}
+import { FeedbackSchema } from "../types/Feedback";
 
 const feedbackOptions = [
   { label: "🐞 Bug", value: "bug" },
@@ -24,12 +19,15 @@ function getFeedbackOption(value: string) {
 }
 
 export default defineEventHandler(async (event) => {
-  const { message, contactEmail, feedbackType } = await readBody<Feedback>(event);
+  const { message, page, contact, type } = await readValidatedBody(event, FeedbackSchema.parse);
   const env = useRuntimeConfig(event);
 
-  if (!["bug", "suggestion", "other", "appreciate"].includes(feedbackType!) || !message) {
+  if (!["bug", "suggestion", "other", "appreciate"].includes(type!) || !message)
     throw new Error("Invalid input.");
-  }
+
+  let description = `${message}\n\n`;
+  if (contact) description += `**Contact:** ${contact}`;
+  if (page) description += `**Page:** \`${page}\``;
 
   await fetcher()
     .post(env.WEBHOOK_URL, {
@@ -38,8 +36,8 @@ export default defineEventHandler(async (event) => {
       embeds: [
         {
           color: 3447003,
-          title: getFeedbackOption(feedbackType).label,
-          description: contactEmail ? `${message}\n\n**Contact:** ${contactEmail}` : message,
+          title: getFeedbackOption(type).label,
+          description: description,
         },
       ],
     })
@@ -47,5 +45,5 @@ export default defineEventHandler(async (event) => {
       throw new Error(error);
     });
 
-  return { status: "success" };
+  return { status: "ok" };
 });

.vitepress/theme/components/Feedback.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
+import { useRoute } from "vitepress";
+import type { FeedbackType } from "../../types/Feedback";
 
-interface Feedback {
-  message: string;
-  feedbackType?: string;
-  contactEmail?: string;
-  anonymous: boolean;
-}
-
-const loading = ref(false);
+const loading = ref<boolean>(false);
 const error = ref<unknown>(null);
-const success = ref(false);
+const success = ref<boolean>(false);
+const { path } = useRoute();
 
-const feedback = reactive<Feedback>({ message: "", anonymous: false, contactEmail: "" });
+const feedback = reactive<FeedbackType>({ message: "", contact: "" });
 
 const feedbackOptions = [
   { label: "🐞 Bug", value: "bug" },
@@ -31,18 +27,17 @@ function getFeedbackOption(value: string) {
   return feedbackOptions.find((option) => option.value === value);
 }
 
-async function handleSubmit(type?: string) {
-  if (type) feedback.feedbackType = type as string;
+async function handleSubmit(type?: FeedbackType["type"]) {
+  if (type) feedback.type = type;
   loading.value = true;
 
-  const body: Feedback = {
+  const body: FeedbackType = {
     message: feedback.message,
-    feedbackType: feedback.feedbackType,
-    anonymous: feedback.anonymous,
-    contactEmail: feedback.contactEmail,
+    type: feedback.type,
+    contact: feedback.contact,
+    page: path,
   };
 
-  // TODO: fix this horror?
   try {
     const response = await fetch("https://feedback.tasky.workers.dev", {
       method: "POST",
@@ -72,42 +67,33 @@ async function handleSubmit(type?: string) {
 <template>
   <div class="wrapper">
     <Transition name="fade" mode="out-in">
-      <div v-if="!feedback.feedbackType" class="step">
+      <div v-if="!feedback.type" class="step">
         <div>
-          <div>
+                  <div>
             <p class="heading">Feedback</p>
           </div>
         </div>
         <div class="button-container">
-          <button
-            v-for="item in feedbackOptions"
-            :key="item.value"
-            class="btn"
-            @click="handleSubmit(item.value)">
+          <button v-for="item in feedbackOptions" :key="item.value" class="btn"
+            @click="handleSubmit(item.value as FeedbackType['type'])">
             <span>{{ item.label }}</span>
-          </button>
+                 </button>
         </div>
       </div>
-      <div v-else-if="feedback.feedbackType && !success" class="step">
+       <div v-else-if="feedback.type && !success" class="step">
         <div>
-          <p class="desc">The wiki is...</p>
+          <p class="desc">The wiki is... • {{ path }}</p>
           <div>
-            <span>{{ getFeedbackOption(feedback.feedbackType)?.label }}</span>
-            <button
-              style="margin-left: 0.5rem"
-              class="btn"
-              @click="feedback.feedbackType = undefined">
+            <span>{{ getFeedbackOption(feedback.type)?.label }}</span>
+            <button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
               <span class="i-carbon-close-large">close</span>
             </button>
-          </div>
+              </div>
         </div>
         <textarea v-model="feedback.message" autofocus class="input" />
         <p class="desc">Contacts, so we can get back to you. (Optional)</p>
-        <textarea v-model="feedback.contactEmail" class="contact-input" />
-        <button
-          class="btn btn-primary"
-          :disabled="feedback.message.length > 10"
-          @click="handleSubmit()">
+        <textarea v-model="feedback.contact" class="contact-input" />
+        <button type="submit" class="btn btn-primary" :disabled="feedback.message.length > 10" @click="handleSubmit()">
           Submit
         </button>
       </div>
@@ -119,7 +105,7 @@ async function handleSubmit(type?: string) {
 </template>
 
 <style scoped>
-.step > * + * {
+.step>*+* {
   margin-top: 1rem;
 }
 

.vitepress/types/Feedback.ts

@@ -0,0 +1,10 @@
+import z from "zod";
+
+export const FeedbackSchema = z.object({
+  message: z.string().min(5).max(1000),
+  type: z.enum(["bug", "suggestion", "appreciate", "other"]),
+  contact: z.string().min(5).max(20).optional(),
+  page: z.string().min(3).max(10),
+});
+
+export type FeedbackType = z.infer<typeof FeedbackSchema>;

package.json

@@ -25,7 +25,8 @@
     "vitepress": "1.0.0-rc.25",
     "vue": "^3.3.7",
     "workbox-window": "^7.0.0",
-    "x-satori": "^0.1.5"
+    "x-satori": "^0.1.5",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.21",

pnpm-lock.yaml

@@ -43,6 +43,9 @@ dependencies:
   x-satori:
     specifier: ^0.1.5
     version: 0.1.5
+  zod:
+    specifier: ^3.22.4
+    version: 3.22.4
 
 devDependencies:
   '@iconify-json/carbon':
@@ -6619,3 +6622,7 @@ packages:
       compress-commons: 5.0.1
       readable-stream: 3.6.2
     dev: false
+
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: false