chore: reformat entire project with prettier, add prettierignore

app/components/common/ImageSkeleton.vue

@@ -1,24 +1,23 @@
 <template>
-    <div class="image-skeleton" />
+  <div class="image-skeleton" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: "ImageSkeleton",
+  name: 'ImageSkeleton',
 });
 </script>
 
 <style lang="scss">
-@use "@/scss/_variables.scss" as *;
+@use '@/scss/_variables.scss' as *;
 
 .image-skeleton {
-    width: 100%;
-    height: 100%;
-    background-color: $gray-400;
-    display: block;
-    border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  background-color: $gray-400;
+  display: block;
+  border-radius: 3px;
 }
-
 </style>

app/components/features/CharacterBadges.vue

@@ -5,7 +5,7 @@
       :id="`character-${character_id}`"
       :key="character.name"
       squared
-      class="mx-2 my-1 character-button"
+      class="character-button mx-2 my-1"
       size="sm"
       :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
       :to="{ name: 'Character', params: { character: character_id } }"
@@ -19,8 +19,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { BButton, BBadge } from 'bootstrap-vue-next'
+import { defineComponent } from 'vue';
+import { BButton, BBadge } from 'bootstrap-vue-next';
 
 export default defineComponent({
   components: {
@@ -34,5 +34,5 @@ export default defineComponent({
       required: true,
     },
   },
-})
+});
 </script>

app/components/features/DynamicSpeaker.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'DynamicSpeaker',
@@ -28,7 +28,7 @@ export default defineComponent({
   computed: {
     texts() {
       return this.text.split(/({[^}]+})/).map((item) => {
-        const id = item.substring(1, item.length - 1)
+        const id = item.substring(1, item.length - 1);
         if (item.startsWith('{'))
           return {
             text: this.characters[id],
@@ -36,12 +36,12 @@ export default defineComponent({
               name: 'Character',
               params: { character: id },
             },
-          }
-        else return item
-      })
+          };
+        else return item;
+      });
     },
   },
-})
+});
 </script>
 
 <style scoped></style>

app/components/features/SearchResult.vue

@@ -8,8 +8,8 @@
     @mouseleave="hoverOff"
     @click="toggleExpansion"
   >
-    <BCardText class="mu-2 py-1 mb-1">
-      <table v-if="expanded" class="quote-list px-3 py-1 w-100">
+    <BCardText class="mu-2 mb-1 py-1">
+      <table v-if="expanded" class="quote-list w-100 px-3 py-1">
         <tr v-for="(quote, index) in above" :key="`quote-a-${index}`" class="secondary">
           <td class="quote-speaker my-3 pl-3">
             <div>{{ quote.speaker }}</div>
@@ -31,7 +31,7 @@
           </td>
         </tr>
       </table>
-      <table v-else class="quote-list px-3 py-1 w-100">
+      <table v-else class="quote-list w-100 px-3 py-1">
         <tr>
           <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value" />
           <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value" />
@@ -39,7 +39,7 @@
       </table>
       <RouterLink
         v-if="expanded"
-        class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+        class="no-link search-result-link text-muted mb-2 ml-2 w-100"
         :to="{
           name: 'Episode',
           params: { season: item.season, episode: item.episode_rel },
@@ -92,9 +92,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
-import axios from 'axios'
+import axios from 'axios';
 
 export default defineComponent({
   props: ['item'],
@@ -106,29 +106,29 @@ export default defineComponent({
       above: null,
       below: null,
       timeoutID: null,
-    }
+    };
   },
 
   computed: {
     fetched() {
-      return this.above !== null || this.below !== null
+      return this.above !== null || this.below !== null;
     },
   },
 
   methods: {
     toggleExpansion() {
-      this.expanded = !this.expanded
+      this.expanded = !this.expanded;
       // if first time expanding, fetch quotes
       if (!this.fetchQuotes()) {
-        this.hasExpanded = true
+        this.hasExpanded = true;
         // this.fetchQuotes();
       }
     },
     hoverFetch() {
       if (!this.fetched && !this.fetching) {
-        this.fetching = true
-        this.fetchQuotes()
-        this.fetching = false
+        this.fetching = true;
+        this.fetchQuotes();
+        this.fetching = false;
       }
     },
     hoverOn() {
@@ -137,20 +137,20 @@ export default defineComponent({
     },
     hoverOff() {
       // Hover is off. Unschedule event if it has not already fetched.
-      if (this.timeoutID !== null) clearTimeout(this.timeoutID)
+      if (this.timeoutID !== null) clearTimeout(this.timeoutID);
     },
     fetchQuotes() {
-      const path = `/api/surrounding?season=${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`
+      const path = `/api/surrounding?season=${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;
       axios
         .get(path)
         .then((res) => {
-          this.above = res.data.above
-          this.below = res.data.below
+          this.above = res.data.above;
+          this.below = res.data.below;
         })
         .catch((error) => {
-          console.error(error)
-        })
+          console.error(error);
+        });
     },
   },
-})
+});
 </script>

app/components/layout/Footer.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script lang="ts">
-import { BContainer, BRow } from 'bootstrap-vue-next'
-import { defineComponent } from 'vue'
+import { BContainer, BRow } from 'bootstrap-vue-next';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'FooterComponent',
@@ -44,16 +44,16 @@ export default defineComponent({
 
   computed: {
     buildTimeString() {
-      return this.buildMoment.format('MMM Do, YYYY [at] h:mm A zz')
+      return this.buildMoment.format('MMM Do, YYYY [at] h:mm A zz');
     },
     buildISOString() {
-      return this.buildMoment.toISOString()
+      return this.buildMoment.toISOString();
     },
     latestCommitUrl() {
-      return `https://github.com/Xevion/the-office/commit/${import.meta.env.VUE_APP_GIT_HASH}`
+      return `https://github.com/Xevion/the-office/commit/${import.meta.env.VUE_APP_GIT_HASH}`;
     },
   },
-})
+});
 </script>
 
 <style lang="scss" scoped>

app/components/ui/accordion/Accordion.vue

@@ -4,12 +4,12 @@ import {
   type AccordionRootEmits,
   type AccordionRootProps,
   useForwardPropsEmits,
-} from 'reka-ui'
+} from 'reka-ui';
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

app/components/ui/accordion/AccordionContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { AccordionContent, type AccordionContentProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionContent, type AccordionContentProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

app/components/ui/accordion/AccordionItem.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

app/components/ui/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';

app/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
     <slot />
   </nav>
 </template>

app/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { MoreHorizontal } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontal } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>

app/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
     <slot />
   </li>
 </template>

app/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { Primitive, type PrimitiveProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
-})
+});
 </script>
 
 <template>

app/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+    :class="
+      cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        props.class,
+      )
+    "
   >
     <slot />
   </ol>

app/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>

app/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { ChevronRight } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>

app/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from './Breadcrumb.vue'
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
-export { default as BreadcrumbList } from './BreadcrumbList.vue'
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';