comment

.vitepress/theme/components/Feedback.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
+// Import necessary functions and components from Vue and VitePress
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vitepress'
-import {
+import { type FeedbackType, getFeedbackOption, feedbackOptions } from '../../types/Feedback'
-  type FeedbackType,
-  getFeedbackOption,
-  feedbackOptions
-} from '../../types/Feedback'
 
+// Define reactive loading, error, and success states
 const loading = ref<boolean>(false)
 const error = ref<unknown>(null)
 const success = ref<boolean>(false)
 
+// Initialize the router
 const router = useRouter()
 
+// Initialize the reactive feedback object
 const feedback = reactive<FeedbackType>({ message: '' })
 
+/*
+  Define the handleSubmit function which accepts an optional type parameter
+  of FeedbackType. This function sets the feedback.type property, sets
+  the loading state to true, and then proceeds to send a POST request to
+  the feedback API endpoint with the feedback data as JSON in the request
+  body. It handles errors and updates the appropriate states accordingly.
+*/
 async function handleSubmit(type?: FeedbackType['type']) {
   if (type) feedback.type = type
   loading.value = true
@@ -53,29 +60,37 @@ async function handleSubmit(type?: FeedbackType['type']) {
 
 <template>
   <div class="wrapper">
+    <!-- Conditionally render the feedback steps based on the feedback states -->
     <Transition name="fade" mode="out-in">
       <div v-if="!feedback.type" class="step">
+        <!-- Heading for the feedback page -->
         <div>
           <div>
             <p class="heading">Feedback</p>
           </div>
         </div>
+        <!-- Container for the feedback buttons -->
         <div class="button-container">
+          <!-- Render the feedback buttons using v-for and pass the appropriate type value -->
           <button
             v-for="item in feedbackOptions"
             :key="item.value"
             class="btn"
             @click="handleSubmit(item.value as FeedbackType['type'])"
           >
+            <!-- Button label -->
             <span>{{ item.label }}</span>
           </button>
         </div>
       </div>
       <div v-else-if="feedback.type && !success" class="step">
+        <!-- Page path and feedback type -->
         <div>
           <p class="desc">Page: {{ router.route.path }}</p>
           <div>
+            <!-- Feedback type label -->
             <span>{{ getFeedbackOption(feedback.type)?.label }}</span>
+            <!-- Button to close the current feedback type -->
             <button
               style="margin-left: 0.5rem"
               class="btn"
@@ -85,7 +100,9 @@ async function handleSubmit(type?: FeedbackType['type']) {
             </button>
           </div>
         </div>
+        <!-- Container for the textarea and additional information -->
         <div v-if="feedback.type === 'suggestion'" class="text-sm mb-2">
+          <!-- Suggestions for different types of feedback -->
           <strong>🕹️ Emulators</strong>
           <p class="desc">
             They're already on the
@@ -96,6 +113,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
               Game Tech Wiki.
             </a>
           </p>
+          <!-- More suggestions for different types of feedback -->
           <strong>🔻 Leeches</strong>
           <p class="desc">
             They're already on the
@@ -106,6 +124,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
               File Hosting Wiki.
             </a>
           </p>
+          <!-- More suggestions for different types of feedback -->
           <strong>🐧 Distros</strong>
           <p class="desc">
             They're already on
@@ -116,22 +135,26 @@ async function handleSubmit(type?: FeedbackType['type']) {
               DistroWatch.
             </a>
           </p>
+          <!-- Information about inappropriate feedback -->
           <strong>🎲 Mining / Betting Sites</strong>
           <p class="desc">
             Don't post anything related to betting, mining, BINs, CCs, etc.
           </p>
+          <!-- Information about multiplayer game hacks -->
           <strong>🎮 Multiplayer Game Hacks</strong>
           <p class="desc">
             Don't post any hacks/exploits that give unfair advantages in
             multiplayer games.
           </p>
         </div>
+        <!-- Textarea for user feedback -->
         <textarea
           v-model="feedback.message"
           autofocus
           class="input"
           placeholder="What a lovely wiki!"
         />
+        <!-- Additional information about contacting the team -->
         <p class="desc mb-2">
           If you want a reply to your feedback, feel free to mention a contact
           in the message or join our
@@ -142,6 +165,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
             Discord.
           </a>
         </p>
+        <!-- Button to submit the feedback -->
         <button
           type="submit"
           class="btn btn-primary"
@@ -150,10 +174,12 @@ async function handleSubmit(type?: FeedbackType['type']) {
           "
           @click="handleSubmit()"
         >
+          <!-- Button label -->
           Submit
         </button>
       </div>
       <div v-else class="step">
+        <!-- Heading for the success step -->
         <p class="heading">Thanks for your feedback!</p>
       </div>
     </Transition>
@@ -161,95 +187,5 @@ async function handleSubmit(type?: FeedbackType['type']) {
 </template>
 
 <style scoped>
-.step > * + * {
+// Styling for the component
-  margin-top: 1rem;
-}
-
-.btn {
-  border: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg);
-  border-radius: 8px;
-  transition:
-    border-color 0.25s,
-    background-color 0.25s;
-  display: inline-block;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  margin: 0;
-  padding: 0.375rem 0.75rem;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-}
-
-.btn:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-}
-
-.btn-primary:hover {
-  background-color: var(--vp-c-brand-darker);
-  border-color: var(--vp-c-brand-darker);
-}
-
-.heading {
-  font-size: 1.2rem;
-  font-weight: 700;
-}
-
-.button-container {
-  display: grid;
-  grid-gap: 0.5rem;
-}
-
-.wrapper {
-  margin: 2rem 0;
-  padding: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg-alt);
-}
-
-.input {
-  width: 100%;
-  height: 100px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  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;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>