Add feedback API

.vitepress/routes/index.post.ts

@@ -0,0 +1,51 @@
+import { fetcher } from "itty-fetcher";
+
+interface Feedback {
+  message: string;
+  feedbackType?: string;
+  contactEmail?: string;
+}
+
+const feedbackOptions = [
+  { label: "🐞 Bug", value: "bug" },
+  {
+    label: "♻️ Suggestion",
+    value: "suggestion",
+  },
+  { label: "📂 Other", value: "other" },
+  {
+    label: "❤️ Appreciation",
+    value: "appreciate",
+  },
+];
+
+function getFeedbackOption(value: string) {
+  return feedbackOptions.find((option) => option.value === value);
+}
+
+export default defineEventHandler(async (event) => {
+  const { message, contactEmail, feedbackType } = await readBody<Feedback>(event);
+  const env = useRuntimeConfig(event);
+
+  if (!["bug", "suggestion", "other", "appreciate"].includes(feedbackType!) || !message) {
+    throw new Error("Invalid input.");
+  }
+
+  await fetcher()
+    .post(env.WEBHOOK_URL, {
+      username: "Feedback",
+      avatar_url: "https://i.kym-cdn.com/entries/icons/facebook/000/043/403/cover3.jpg",
+      embeds: [
+        {
+          color: 3447003,
+          title: getFeedbackOption(feedbackType).label,
+          description: contactEmail ? `${message}\n\n**Contact:** ${contactEmail}` : message,
+        },
+      ],
+    })
+    .catch(({ status, error }) => {
+      throw new Error(`Error code ${status}: ${error}`);
+    });
+
+  return "success";
+});

.vitepress/routes/test.ts

@@ -0,0 +1,3 @@
+export default eventHandler(() => {
+  return { nitro: "works" };
+});

.vitepress/theme/components/Feedback.vue

@@ -43,7 +43,7 @@ async function handleSubmit(type?: string) {
   };
 
   try {
-    const response = await fetch("https://fmhy.tk/api/feedback", {
+    const response = await fetch("https://feedback.tasky.workers.dev", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -76,11 +76,7 @@ async function handleSubmit(type?: string) {
           </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)">
             <span>{{ item.label }}</span>
           </button>
         </div>
@@ -90,15 +86,14 @@ async function handleSubmit(type?: string) {
           <p class="desc">The wiki is...</p>
           <div>
             <span>{{ getFeedbackOption(feedback.feedbackType)?.label }}</span>
-            <button
-              style="margin-left: 0.5rem"
-              class="btn"
-              @click="feedback.feedbackType = undefined">
+            <button style="margin-left: 0.5rem" class="btn" @click="feedback.feedbackType = undefined">
               <span class="i-carbon-close-large">close</span>
             </button>
           </div>
         </div>
         <textarea v-model="feedback.message" autofocus class="input" />
+        <p class="desc">Contact, 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" @click="handleSubmit()">
           Submit
         </button>
@@ -111,7 +106,7 @@ async function handleSubmit(type?: string) {
 </template>
 
 <style scoped>
-.step > * + * {
+.step>*+* {
   margin-top: 1rem;
 }
 
@@ -178,6 +173,13 @@ async function handleSubmit(type?: string) {
   padding: 0.375rem 0.75rem;
 }
 
+.contact-input {
+  height: 50px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.375rem 0.75rem;
+}
+
 .desc {
   display: block;
   line-height: 20px;

.vitepress/theme/components/SidebarCard.vue

@@ -20,11 +20,11 @@ import InputField from "./InputField.vue";
         <Modal />
       </template>
     </InputField>
-    <InputField id="toggle-starred" label="Toggle Starred">
-      <template #display>
-        <button class="p-[4px 8px] text-xl i-carbon:star"></button>
-      </template>
-    </InputField>
+    <!-- <InputField id="toggle-starred" label="Toggle Starred"> -->
+    <!--   <template #display> -->
+    <!--     <button class="p-[4px 8px] text-xl i-carbon:star"></button> -->
+    <!--   </template> -->
+    <!-- </InputField> -->
   </div>
 </template>