Huge clean up of types and behavior across all apis and pages

Signed-off-by: Cole Gentry <[email protected]>
Classic-Mini-DIY · Dec 8, 2023 · f992e16 · f992e16 · vercel · Dec 8, 2023
1 parent aef448d
commit f992e16
Show file tree

Hide file tree

Showing 37 changed files with 810 additions and 915 deletions.
diff --git a/components/Hero.vue b/components/Hero.vue
@@ -1,37 +1,3 @@
-<template>
-  <section
-    class="hero"
-    :class="size"
-    :style="[
-      ecuMap
-        ? {
-            backgroundImage: `url(/img/macbook.jpg)`,
-          }
-        : blog
-        ? {
-            backgroundImage: `url(/img/typewriter.jpg)`,
-          }
-        : {
-            backgroundImage: `url(https://classicminidiy.s3.amazonaws.com/misc${background}.webp)`,
-          },
-      !showImage ? { backgroundImage: 'none' } : {},
-    ]"
-  >
-    <div class="hero-body" :style="[blog ? { paddingTop: '4rem', paddingBottom: '4rem' } : {}]">
-      <div class="container" :class="{ 'has-text-centered': centered }">
-        <p class="subtitle is-6 has-text-white" :class="{ 'has-text-centered': blog }">
-          {{ subtitle }}
-        </p>
-        <h1
-          v-if="title"
-          class="title fancy-font-bold has-text-white"
-          :class="{ 'special-title': special, 'has-text-centered': blog }"
-          v-html="title"
-        />
-      </div>
-    </div>
-  </section>
-</template>
 <script setup lang="ts">
   defineProps({
     title: {
@@ -72,6 +38,41 @@
     },
   });
 </script>
+
+<template>
+  <section
+    class="hero"
+    :class="size"
+    :style="[
+      ecuMap
+        ? {
+            backgroundImage: `url(/img/macbook.jpg)`,
+          }
+        : blog
+          ? {
+              backgroundImage: `url(/img/typewriter.jpg)`,
+            }
+          : {
+              backgroundImage: `url(https://classicminidiy.s3.amazonaws.com/misc${background}.webp)`,
+            },
+      !showImage ? { backgroundImage: 'none' } : {},
+    ]"
+  >
+    <div class="hero-body" :style="[blog ? { paddingTop: '4rem', paddingBottom: '4rem' } : {}]">
+      <div class="container" :class="{ 'has-text-centered': centered }">
+        <p class="subtitle is-6 has-text-white" :class="{ 'has-text-centered': blog }">
+          {{ subtitle }}
+        </p>
+        <h1
+          v-if="title"
+          class="title fancy-font-bold has-text-white"
+          :class="{ 'special-title': special, 'has-text-centered': blog }"
+          v-html="title"
+        />
+      </div>
+    </div>
+  </section>
+</template>
 <style lang="scss">
   .hero {
     background-position: center;

diff --git a/components/ImageUploader.vue b/components/ImageUploader.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const dropFiles: any = ref([]);
+  const deleteDropFile = (index: number) => {
+    dropFiles.value.splice(index, 1);
+  };
+</script>
+
 <template>
   <div class="columns">
     <o-field class="column is-12">
@@ -46,15 +55,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { ref } from 'vue';
-
-  const dropFiles: any = ref([]);
-  const deleteDropFile = (index: number) => {
-    dropFiles.value.splice(index, 1);
-  };
-</script>
-
 <style lang="scss">
   .upload-draggable.is-hovered {
     border: #659cc8 1px solid;

diff --git a/components/MainNav.vue b/components/MainNav.vue
@@ -1,3 +1,22 @@
+<script lang="ts" setup>
+  import { useDisplay } from 'vuetify';
+  import { ToolboxItems } from '~/data/models/generic';
+  import {
+    VAppBar,
+    VBtn,
+    VDivider,
+    VMenu,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VNavigationDrawer,
+    VListSubheader,
+    VImg,
+  } from 'vuetify/components';
+  const { lgAndUp } = useDisplay();
+  const showDrawer = ref(false);
+</script>
+
 <template>
   <v-app-bar scroll-behavior="elevate">
     <template #prepend>
@@ -103,24 +122,6 @@
   </v-navigation-drawer>
 </template>
 
-<script lang="ts" setup>
-  import { useDisplay } from 'vuetify';
-  import { ToolboxItems } from '~/data/models/generic';
-  import {
-    VAppBar,
-    VBtn,
-    VDivider,
-    VMenu,
-    VList,
-    VListItem,
-    VListItemTitle,
-    VNavigationDrawer,
-    VListSubheader,
-  } from 'vuetify/components';
-  const { lgAndUp } = useDisplay();
-  const showDrawer = ref(false);
-</script>
-
 <style lang="scss">
   .donate {
     background-color: #f96854;

diff --git a/components/NeedleTable.vue b/components/NeedleTable.vue
@@ -1,3 +1,16 @@
+<script>
+  import needlesTables from '~/data/suggestedNeedles.json';
+
+  export default defineComponent({
+    data() {
+      return {
+        pagination: {},
+        tables: needlesTables,
+      };
+    },
+  });
+</script>
+
 <template>
   <div class="column is-12">
     <template v-for="(table, name, index) in tables" :key="index">
@@ -50,18 +63,7 @@
     </template>
   </div>
 </template>
-<script>
-  import needlesTables from '~/data/suggestedNeedles.json';
 
-  export default defineComponent({
-    data() {
-      return {
-        pagination: {},
-        tables: needlesTables,
-      };
-    },
-  });
-</script>
 <style lang="scss" scoped>
   .card-header {
     background-color: whitesmoke;

diff --git a/components/PatreonCard.vue b/components/PatreonCard.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+  defineProps({
+    size: {
+      type: String,
+      default: 'large',
+      required: true,
+    },
+  });
+</script>
+
 <template>
   <div>
     <template v-if="size === 'large'">
@@ -60,14 +70,3 @@
     </template>
   </div>
 </template>
-<script>
-  export default defineComponent({
-    props: {
-      size: {
-        type: String,
-        default: 'large',
-        required: true,
-      },
-    },
-  });
-</script>
diff --git a/components/RecentVideos.vue b/components/RecentVideos.vue
@@ -37,5 +37,5 @@
   import { VCard, VCardTitle, VCardSubtitle } from 'vuetify/components/VCard';
   import { VImg } from 'vuetify/components/VImg';
   import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader';
-  const { data: videos, pending, error } = await useFetch('/api/videos');
+  const { data: videos, pending, error } = await useFetch('/api/youtube/videos');
 </script>
diff --git a/components/Stats.vue b/components/Stats.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-  const { data: stats, pending, error } = await useFetch('/api/stats');
+  const { data: stats, pending, error } = await useFetch('/api/youtube/stats');
 </script>
 
 <style lang="scss" scoped>

diff --git a/components/WheelCard.vue b/components/WheelCard.vue
@@ -2,6 +2,7 @@
   import type { IWheelsData } from '~/data/models/wheels';
   import { VCard, VCardText, VCardItem } from 'vuetify/components/VCard';
   import { VIcon } from 'vuetify/components/VIcon';
+  import { VImg } from 'vuetify/components/VImg';
   import { VBtn } from 'vuetify/components/VBtn';
   import { VExpansionPanel, VExpansionPanels, VExpansionPanelText } from 'vuetify/components/VExpansionPanel';
   import { VList, VListItem } from 'vuetify/components/VList';
@@ -52,7 +53,7 @@
     </v-card-text>
     <v-card-item>
       <v-row justify="space-between">
-        <v-col cols="6">
+        <v-col>
           <v-list>
             <v-list-item
               :subtitle="wheel.size ? wheel.size : 'Unknown'"
@@ -69,7 +70,7 @@
             </v-list-item> </v-list
         ></v-col>
         <v-divider vertical thickness="3"></v-divider>
-        <v-col cols="6" class="text-right">
+        <v-col class="text-right">
           <v-list>
             <v-list-item
               :subtitle="wheel.type ? wheel.type : 'Unknown'"