prettier reformat

josephclaytonhansen · Jan 18, 2024 · 3c717fc · 3c717fc
1 parent f592ac2
commit 3c717fc
Show file tree

Hide file tree

Showing 18 changed files with 1,208 additions and 1,296 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1 +1,6 @@
-{}
+{
+    "singleAttributePerLine": false,
+    "vueIndentScriptAndStyle": true,
+    "bracketSameLine": true,
+    "semi": false,
+}
diff --git a/package.json b/package.json
@@ -36,6 +36,6 @@
     "vite": "^5.0.8"
   },
   "lint-staged": {
-    "*.{js,css,md}": "prettier --write src/ --no-semi --bracket-same-line --vue-indent-script-and-style"
+    "*.{js,css,md}": "prettier --write src/"
   }
 }
diff --git a/src/components/main/Main.vue b/src/components/main/Main.vue
@@ -1,57 +1,56 @@
 <script setup>
-import Header from "./blocks/header/Header.vue"
-import Hero from "./blocks/hero/Hero.vue"
-import Services from "./blocks/services/Services.vue"
-import messageBanner from "./blocks/messageBanner/messageBanner.vue"
-import Pricing from "./pages/Pricing.vue"
+  import Header from "./blocks/header/Header.vue"
+  import Hero from "./blocks/hero/Hero.vue"
+  import Services from "./blocks/services/Services.vue"
+  import messageBanner from "./blocks/messageBanner/messageBanner.vue"
+  import Pricing from "./pages/Pricing.vue"
 
-import { ref, computed, onMounted } from "vue"
+  import { ref, computed, onMounted } from "vue"
 
-const brightness = ref(3)
+  const brightness = ref(3)
 
-const props = defineProps({
-  component: String,
-})
+  const props = defineProps({
+    component: String,
+  })
 
-const handleBrightnessUpdate = (value) => {
-  brightness.value = Number(value)
-  let localStorage = window.localStorage
-  localStorage.setItem("brightness", brightness.value)
-}
-
-const brightnessClass = computed(() => {
-  switch (brightness.value) {
-    case 5:
-      return "bg-gradient-to-br from-sky-300 to-sky-500"
-    case 4:
-      return "bg-gradient-to-br from-sky-400 to-sky-600"
-    case 3:
-      return "bg-gradient-to-br from-slate-400 to-slate-600"
-    case 2:
-      return "bg-gradient-to-br from-sky-800 to-slate-800"
-    case 1:
-      return "bg-gradient-to-br from-slate-700 to-slate-900"
-    default:
-      return ""
-  }
-})
-
-onMounted(() => {
-  let localStorage = window.localStorage
-  if (localStorage.getItem("brightness")) {
-    brightness.value = Number(localStorage.getItem("brightness"))
-  } else {
+  const handleBrightnessUpdate = (value) => {
+    brightness.value = Number(value)
+    let localStorage = window.localStorage
     localStorage.setItem("brightness", brightness.value)
   }
-})
+
+  const brightnessClass = computed(() => {
+    switch (brightness.value) {
+      case 5:
+        return "bg-gradient-to-br from-sky-300 to-sky-500"
+      case 4:
+        return "bg-gradient-to-br from-sky-400 to-sky-600"
+      case 3:
+        return "bg-gradient-to-br from-slate-400 to-slate-600"
+      case 2:
+        return "bg-gradient-to-br from-sky-800 to-slate-800"
+      case 1:
+        return "bg-gradient-to-br from-slate-700 to-slate-900"
+      default:
+        return ""
+    }
+  })
+
+  onMounted(() => {
+    let localStorage = window.localStorage
+    if (localStorage.getItem("brightness")) {
+      brightness.value = Number(localStorage.getItem("brightness"))
+    } else {
+      localStorage.setItem("brightness", brightness.value)
+    }
+  })
 </script>
 
 <template>
   <main
     :class="['w-dvw', brightnessClass]"
     class="md:p-7 sm:p-5"
-    style="min-height: 100vh; overflow-x: hidden"
-  >
+    style="min-height: 100vh; overflow-x: hidden">
     <Header @update:brightness="handleBrightnessUpdate" />
 
     <div class="flex justify-center w-full md:px-10 sm:px-5 mt-5">
@@ -64,8 +63,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'pricing'"
-      >
+        v-if="component == 'pricing'">
         <Pricing :brightness="brightness" />
       </div>
 
@@ -78,8 +76,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'home'"
-      >
+        v-if="component == 'home'">
         <Hero :brightness="brightness" />
       </div>
     </div>
@@ -94,8 +91,7 @@ onMounted(() => {
           'bg-slate-800': brightness == 2,
           'bg-slate-900': brightness == 1,
         }"
-        v-if="component == 'home'"
-      >
+        v-if="component == 'home'">
         <Services :brightness="brightness" />
       </div>
     </div>

diff --git a/src/components/main/blocks/Hero/Hero.vue b/src/components/main/blocks/Hero/Hero.vue
@@ -1,80 +1,80 @@
 <script setup>
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUpdate,
-  watch,
-  onUnmounted,
-} from "vue"
+  import {
+    ref,
+    computed,
+    onMounted,
+    onBeforeUpdate,
+    watch,
+    onUnmounted,
+  } from "vue"
 
-const props = defineProps({
-  brightness: Number,
-})
+  const props = defineProps({
+    brightness: Number,
+  })
 
-const headlines = ref([
-  "super fast",
-  "responsive",
-  "beautiful",
-  "secure",
-  "accessible",
-  "easy to use",
-  "efficient",
-  "ultra-functional",
-  "simple to use",
-  "powerful",
-  "optimized",
-  "SEO-optimized",
-  "lightning fast",
-  "lightweight",
-  "perfectly customized",
-  "perfectly tailored",
-  "blazing fast",
-  "extremely secure",
-  "beautifully designed",
-  "high-quality",
-  "precisely optimized",
-  "precisely tailored",
-  "your dream",
-  "your perfect",
-  "your ideal",
-  "your projects'",
-])
+  const headlines = ref([
+    "super fast",
+    "responsive",
+    "beautiful",
+    "secure",
+    "accessible",
+    "easy to use",
+    "efficient",
+    "ultra-functional",
+    "simple to use",
+    "powerful",
+    "optimized",
+    "SEO-optimized",
+    "lightning fast",
+    "lightweight",
+    "perfectly customized",
+    "perfectly tailored",
+    "blazing fast",
+    "extremely secure",
+    "beautifully designed",
+    "high-quality",
+    "precisely optimized",
+    "precisely tailored",
+    "your dream",
+    "your perfect",
+    "your ideal",
+    "your projects'",
+  ])
 
-let index = ref(0)
-let isAnimating = ref(false)
+  let index = ref(0)
+  let isAnimating = ref(false)
 
-onMounted(() => {
-  headlines.value = headlines.value.sort(() => Math.random() - 0.5)
-  setInterval(() => {
-    if (!isAnimating.value) {
-      isAnimating.value = true
-      index.value = (index.value + 1) % headlines.value.length
-    }
-  }, 4000)
+  onMounted(() => {
+    headlines.value = headlines.value.sort(() => Math.random() - 0.5)
+    setInterval(() => {
+      if (!isAnimating.value) {
+        isAnimating.value = true
+        index.value = (index.value + 1) % headlines.value.length
+      }
+    }, 4000)
 
-  const handleMouseDown = () => {
-    isAnimating.value = false
-  }
+    const handleMouseDown = () => {
+      isAnimating.value = false
+    }
 
-  const handleMouseUp = () => {
-    isAnimating.value = true
-  }
+    const handleMouseUp = () => {
+      isAnimating.value = true
+    }
 
-  window.addEventListener("mousedown", handleMouseDown)
-  window.addEventListener("mouseup", handleMouseUp)
+    window.addEventListener("mousedown", handleMouseDown)
+    window.addEventListener("mouseup", handleMouseUp)
 
-  onUnmounted(() => {
-    window.removeEventListener("mousedown", handleMouseDown)
-    window.removeEventListener("mouseup", handleMouseUp)
+    onUnmounted(() => {
+      window.removeEventListener("mousedown", handleMouseDown)
+      window.removeEventListener("mouseup", handleMouseUp)
+    })
   })
-})
 
-onBeforeUpdate(() => {
-  isAnimating.value = false
-})
+  onBeforeUpdate(() => {
+    isAnimating.value = false
+  })
 
-const currentHeadline = computed(() => headlines.value[index.value])
+  const currentHeadline = computed(() => headlines.value[index.value])
 </script>
 
 <template>
@@ -87,8 +87,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
         'text-slate-300': brightness == 3,
         'text-slate-200': brightness == 2,
         'text-slate-400': brightness == 1,
-      }"
-    >
+      }">
       I make
       <div class="inline-block relative">
         <span
@@ -103,8 +102,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
             'border-orange-200': brightness == 3,
             'border-orange-500': brightness == 2,
             'border-orange-400': brightness == 1,
-          }"
-        ></div>
+          }"></div>
       </div>
       websites.
     </h1>
@@ -116,8 +114,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
         'text-slate-400': brightness == 3,
         'text-slate-300': brightness == 2,
         'text-slate-500': brightness == 1,
-      }"
-    >
+      }">
       Hi, I'm Joseph. I'm a full-stack web developer. What can I do for you?
     </p>
     <div class="flex py-5 justify-center gap-3 w-full">
@@ -128,8 +125,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
           'bg-slate-500': brightness == 3,
           'bg-orange-600': brightness == 2,
           'bg-orange-500': brightness == 1,
-        }"
-      >
+        }">
         Portfolio
       </button>
       <a href="/pricing"
@@ -139,8 +135,7 @@ const currentHeadline = computed(() => headlines.value[index.value])
             'bg-slate-700': brightness >= 4,
             'bg-slate-500': brightness == 3,
             'bg-slate-400': brightness <= 2,
-          }"
-        >
+          }">
           Get a Quote
         </button></a
       >
@@ -149,22 +144,22 @@ const currentHeadline = computed(() => headlines.value[index.value])
 </template>
 
 <script>
-export default {
-  directives: {
-    typewriter: {
-      beforeUpdate(el, binding) {
-        if (binding.oldValue !== binding.value) {
-          let text = binding.value
-          let delay = Math.random() * 100 + 25
-          el.textContent = ""
-          text.split("").forEach((char, i) => {
-            setTimeout(() => {
-              el.textContent += char
-            }, delay * i)
-          })
-        }
+  export default {
+    directives: {
+      typewriter: {
+        beforeUpdate(el, binding) {
+          if (binding.oldValue !== binding.value) {
+            let text = binding.value
+            let delay = Math.random() * 100 + 25
+            el.textContent = ""
+            text.split("").forEach((char, i) => {
+              setTimeout(() => {
+                el.textContent += char
+              }, delay * i)
+            })
+          }
+        },
       },
     },
-  },
-}
+  }
 </script>