chore: reformat entire project with prettier, add prettierignore

.prettierignore

@@ -0,0 +1,3 @@
+data/
+public/img/
+public/json/

README.md

@@ -10,11 +10,11 @@ A Vue.js and Flask Web Application designed to provide a quick way to search for
 ## Features
 
 - Vue.js based, providing fast SPA functionality
-    - Setup via Vue CLI
+  - Setup via Vue CLI
-    - Vue Router
+  - Vue Router
-    - Vue Bootstrap
+  - Vue Bootstrap
-    - Axios
+  - Axios
-    - Vue Instantsearch (Algolia)
+  - Vue Instantsearch (Algolia)
 - Backend API provided by Flask
 - Instant Search provided Algolia
 - Sleek, responsive design that is easy on the eyes
@@ -162,11 +162,11 @@ them.
 ### Running
 
 - Vue.js can be ran via `npm run serve`.
-    - Run this in `./client/`.
+  - Run this in `./client/`.
 - Flask can be ran via `flask run`.
-    - Run this in `./server/`.
+  - Run this in `./server/`.
-    - Add `--host=0.0.0.0` to the end to allow connections from LAN.
+  - Add `--host=0.0.0.0` to the end to allow connections from LAN.
-    
+
 Note: Readying this application for Production and wider-development is still in progress.
 
 ## Descriptions, Images, Summaries
@@ -204,28 +204,28 @@ be viewed.
 Small to-do list to complete.
 
 - Font Awesome Icons
-    - SeasonList Chevron
+  - SeasonList Chevron
-    - Quote Permalink
+  - Quote Permalink
 - Attempt Algolia Query Suggestions
-    - Redirect to SearchResults page on Enter press
+  - Redirect to SearchResults page on Enter press
 - Process all quote data
 - Site Meta Tags
 - Better Mobile Season List
-    - Smaller, collapsible?
+  - Smaller, collapsible?
 - Heroku Production Deployment
-    - Possible solution via Docker
+  - Possible solution via Docker
 - Axios 'Fetch' Error Handling
 - Navigation Bar
-    - Navbar Logo (?)
+  - Navbar Logo (?)
 - Overall Responsiveness Improvements
 - Algolia Clickthrough Events
-    - Search Results Page
+  - Search Results Page
 - Character List
 - Quote Permalink
 - Deleted Scenes Marker
-    - Possible 'Flashback' Scene Marker
+  - Possible 'Flashback' Scene Marker
 - Season List Episode Modal Popover
-    - Preview Image, Description, Episode Stats
+  - Preview Image, Description, Episode Stats
 - Quote Likes Database
-    - Requires difficult implementation of Flask controlled Postgres database
+  - Requires difficult implementation of Flask controlled Postgres database
-    - Requires funding, longterm free hosting not possible with database requirements
+  - Requires funding, longterm free hosting not possible with database requirements

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%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    background-color: $gray-400;
+  background-color: $gray-400;
-    display: block;
+  display: block;
-    border-radius: 3px;
+  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 { defineComponent } from 'vue';
-import { BButton, BBadge } from 'bootstrap-vue-next'
+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">
+    <BCardText class="mu-2 mb-1 py-1">
-      <table v-if="expanded" class="quote-list px-3 py-1 w-100">
+      <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.fetching = true;
-        this.fetchQuotes()
+        this.fetchQuotes();
-        this.fetching = false
+        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.above = res.data.above;
-          this.below = res.data.below
+          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 { BContainer, BRow } from 'bootstrap-vue-next';
-import { defineComponent } from 'vue'
+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 props = defineProps<AccordionRootProps>();
-const emits = defineEmits<AccordionRootEmits>()
+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 type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit } from '@vueuse/core';
-import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui';
-import { cn } from '@/lib/utils'
+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 type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit } from '@vueuse/core';
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui';
-import { cn } from '@/lib/utils'
+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 Accordion } from './Accordion.vue';
-export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionContent } from './AccordionContent.vue';
-export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionItem } from './AccordionItem.vue';
-export { default as AccordionTrigger } from './AccordionTrigger.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
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
-    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 type { HTMLAttributes } from 'vue';
-import { MoreHorizontal } from 'lucide-vue-next'
+import { MoreHorizontal } from 'lucide-vue-next';
-import { cn } from '@/lib/utils'
+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 type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes['class'];
-}>()
+}>();
 </script>
 
 <template>
-  <li
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
-    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 type { HTMLAttributes } from 'vue';
-import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { Primitive, type PrimitiveProps } from 'reka-ui';
-import { cn } from '@/lib/utils'
+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 type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils'
+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 type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils'
+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 type { HTMLAttributes } from 'vue';
-import { ChevronRight } from 'lucide-vue-next'
+import { ChevronRight } from 'lucide-vue-next';
-import { cn } from '@/lib/utils'
+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 Breadcrumb } from './Breadcrumb.vue';
-export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
-export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
-export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
-export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
-export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
-export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

app/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx'
+import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

app/pages/about.vue

@@ -54,7 +54,6 @@ export default defineComponent({
 
 <style scoped></style> -->
 
-
 <script setup lang="ts"></script>
 <template>
   <div>

app/pages/characters/[id].vue

@@ -106,7 +106,6 @@ export default defineComponent({
 });
 </script> -->
 
-
 <script setup lang="ts"></script>
 <template>
   <div>

app/pages/characters/index.vue

@@ -137,7 +137,6 @@ export default defineComponent({
 </script>
 -->
 
-
 <script setup lang="ts"></script>
 <template>
   <div>

app/pages/season/[id].vue

@@ -104,7 +104,6 @@ export default defineComponent({
 })
 </script> -->
 
-
 <script setup lang="ts"></script>
 <template>
   <div>

app/scss/main.scss

@@ -5,7 +5,6 @@
 // @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 // @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
-
 // $grid-breakpoints: (
 //         xs: 0,
 //         sm: 456px,

components.json

@@ -17,4 +17,4 @@
     "lib": "@/lib"
   },
   "iconLibrary": "lucide"
-}
+}

nuxt.config.ts

@@ -1,4 +1,4 @@
-import tailwindcss from "@tailwindcss/vite";
+import tailwindcss from '@tailwindcss/vite';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/image',
     'shadcn-nuxt',
-    '@pinia/nuxt'
+    '@pinia/nuxt',
   ],
   shadcn: {
     prefix: '',
@@ -22,5 +22,5 @@ export default defineNuxtConfig({
   },
   typescript: {
     typeCheck: true,
-  }
+  },
-})
+});

package.json

@@ -9,7 +9,9 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "format": "prettier --write .",
+    "lint": "eslint --fix ."
   },
   "dependencies": {
     "@fontsource-variable/roboto-slab": "^5.2.6",

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx'
+import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

vitest.config.ts

@@ -1,6 +1,6 @@
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath } from 'node:url';
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
-import viteConfig from './vite.config'
+import viteConfig from './vite.config';
 
 export default mergeConfig(
   viteConfig,
@@ -11,4 +11,4 @@ export default mergeConfig(
       root: fileURLToPath(new URL('./', import.meta.url)),
     },
   }),
-)
+);