Why not Essential?

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode"]
+}

app.vue

@@ -1,7 +1,5 @@
 <template>
-
   <NuxtLayout>
-      <NuxtPage />
+    <NuxtPage />
   </NuxtLayout>
-
-</template>
+</template>

components/bigButton.vue

@@ -1,9 +1,7 @@
 <template>
-
-<div class="select-none w-full sm:w-fit sm:px-20 rounded-xl max-w-full p-8 flex flex-row items-center bg-[var(--brand-background-old)] justify-center">
-
-  <slot />
-
-</div>
-
-</template>
+  <div
+    class="select-none w-full sm:w-fit sm:px-20 rounded-xl max-w-full p-8 flex flex-row items-center bg-[var(--brand-background-old)] justify-center"
+  >
+    <slot />
+  </div>
+</template>

components/navBar.vue

@@ -1,32 +1,35 @@
 <template>
-
-    <div class="sm:mx-[5%] text-[color:var(--big-text-colour)] select-none font-bold bg-[color:var(--brand-colour)] w-[calc(100%-1.5rem-var(--scrollbar-width))] p-2.5 rounded-3xl flex flex-row items-center text-base justify-between">
-
-        <NuxtLink class="font-[500] italic text-lg flex items-center flex-row gap-4 tracking-wider" to="/">
-
-            <img class="h-4" src="/img/logotype.svg">
-
-        </NuxtLink>
-
-        <NuxtLink class="text-[0.5rem] sm:text-[1rem] internalFont" to="/alternatives"> Alternatives </NuxtLink>
-
-    </div>
-
+  <div
+    class="sm:mx-[5%] text-[color:var(--big-text-colour)] select-none font-bold bg-[color:var(--brand-colour)] w-[calc(100%-1.5rem-var(--scrollbar-width))] p-2.5 rounded-3xl flex flex-row items-center text-base justify-between"
+  >
+    <NuxtLink
+      class="font-[500] italic text-lg flex items-center flex-row gap-4 tracking-wider"
+      to="/"
+    >
+      <img class="h-4" src="/img/logotype.svg" />
+    </NuxtLink>
+
+    <NuxtLink
+      class="text-[0.5rem] sm:text-[1rem] internalFont"
+      to="/alternatives"
+    >
+      Alternatives
+    </NuxtLink>
+
+  </div>
 </template>
 
 <script setup lang="ts">
-
 const isBrowseMenuOpen = ref(false)
 isBrowseMenuOpen.value = false
 
 function toggleDropdown() {
   isBrowseMenuOpen.value = !isBrowseMenuOpen.value
 
- /* if (isBrowseMenuOpen.value) {
+  /* if (isBrowseMenuOpen.value) {
     isMobileMenuOpen.value = false
   } */
 }
 
 var name = "ESSENTIAL"
-
 </script>

components/pageFooter.vue

@@ -1,11 +1,14 @@
 <template>
-
-    <div class="flex flex-col gap-1">
-        <span class="font-[500] text-white text-xs text-center"> THANKS FOR READING - WRITTEN BY BLURRYFACE - DESIGNED
-            BY WORLDWIDEPIXEL &bull; <a class="underline" href="https://github.com/blryface/notessential"> PAGE SOURCE </a></span>
-        <span class="font-[500] italic text-slate-400 text-xs text-center"> THIS SITE IS IN NO WAY AFFILIATED WITH ESSENTIAL OR
-            SPARK UNIVERSE </span>
-
-    </div>
-
-</template>
+  <div class="flex flex-col gap-1">
+    <span class="font-[500] text-white text-xs text-center">
+      THANKS FOR READING - WRITTEN BY BLURRYFACE - DESIGNED BY WORLDWIDEPIXEL
+      &bull;
+      <a class="underline" href="https://github.com/blryface/notessential">
+        PAGE SOURCE
+      </a></span
+    >
+    <span class="font-[500] italic text-slate-400 text-xs text-center">
+      THIS SITE IS IN NO WAY AFFILIATED WITH ESSENTIAL OR SPARK UNIVERSE
+    </span>
+  </div>
+</template>

components/projectBadge.vue

@@ -1,9 +1,5 @@
 <template>
-
-    <span class="text-sm bg-[#d1d3ff] p-2 rounded-xl select-none">
-
-        <slot />
-
-    </span>
-
-</template>
+  <span class="text-sm bg-[#d1d3ff] p-2 rounded-xl select-none">
+    <slot />
+  </span>
+</template>

components/projectContainer.vue

@@ -1,9 +1,7 @@
 <template>
-
-    <div class="flex flex-col gap-2	bg-[color:var(--brand-colour)] p-4 rounded-2xl">
-
-        <slot />
-
-    </div>
-
-</template>
+  <div
+    class="flex flex-col gap-2 bg-[color:var(--brand-colour)] p-4 rounded-2xl"
+  >
+    <slot />
+  </div>
+</template>

components/projectParagraph.vue

@@ -1,10 +1,5 @@
-
 <template>
-
-    <div class="text-2xl">
-
-        <slot />
-
-    </div>
-
-</template>
+  <div class="text-2xl">
+    <slot />
+  </div>
+</template>

components/projectTitle.vue

@@ -1,10 +1,7 @@
-
 <template>
-
-    <span class="gap-4 flex flex-row items-center text-[color:var(--big-text-colour)] text-5xl font-bold">
-
-        <slot />
-
-    </span>
-
-</template>
+  <span
+    class="gap-4 flex flex-row items-center text-[color:var(--big-text-colour)] text-5xl font-bold"
+  >
+    <slot />
+  </span>
+</template>

components/projectTitleBar.vue

@@ -1,10 +1,5 @@
-
 <template>
-
-    <span class="flex items-center gap-4">
-
-        <slot />
-
-    </span>
-
-</template>
+  <span class="flex items-center gap-4">
+    <slot />
+  </span>
+</template>

components/user.vue

@@ -1,9 +1,7 @@
 <template>
-
-    <span class="gap-4 flex flex-row font-bold text-2xl bg-[color:var(--brand-colour)] items-center p-4 rounded-2xl select-none duration-[0.4s] active:scale-[0.9]">
-
-        <slot />
-
-    </span>
-
-</template>
+  <span
+    class="gap-4 flex flex-row font-bold text-2xl bg-[color:var(--brand-colour)] items-center p-4 rounded-2xl select-none duration-[0.4s] active:scale-[0.9]"
+  >
+    <slot />
+  </span>
+</template>

layouts/default.vue

@@ -1,32 +1,27 @@
 <template>
-
   <div class="flex justify-center flex-col p-6 gap-8">
-
     <navBar />
 
     <div class="m-[5%] gap-8 flex-col flex">
       <slot />
-
     </div>
 
     <pageFooter />
-
   </div>
-
 </template>
 
 <style>
 @import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
 
 @font-face {
-  font-family: 'Internal';
-  src: url('/font/QuinqueFive.ttf') format('truetype');
+  font-family: "Internal";
+  src: url("/font/QuinqueFive.ttf") format("truetype");
   font-weight: 500;
 }
 
 @font-face {
-  font-family: 'InternalBold';
-  src: url('/font/PublicPixel.ttf') format('truetype');
+  font-family: "InternalBold";
+  src: url("/font/PublicPixel.ttf") format("truetype");
   font-weight: 900;
 }
 
@@ -48,22 +43,29 @@
   --brand-scrollbar: rgb(0, 86, 234);
 
   scrollbar-color: var(--brand-scrollbar) var(--brand-colour);
-
 }
 
 .brand-gradient {
-  background: linear-gradient(90deg, rgb(0, 106, 255) 0%, rgb(31, 180, 255) 100%);
+  background: linear-gradient(
+    90deg,
+    rgb(0, 106, 255) 0%,
+    rgb(31, 180, 255) 100%
+  );
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
 }
 
 .brand-gradient-bg {
-  background: linear-gradient(90deg, rgb(0, 106, 255) 0%, rgb(31, 180, 255) 100%);
+  background: linear-gradient(
+    90deg,
+    rgb(0, 106, 255) 0%,
+    rgb(31, 180, 255) 100%
+  );
 }
 
 body {
   background-color: var(--brand-background);
   color: var(--text-colour);
 }
-</style>
+</style>

nuxt.config.ts

@@ -1,5 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxtjs/tailwindcss", 'nuxt-lucide-icons']
-})
+  modules: ["@nuxtjs/tailwindcss", "nuxt-lucide-icons"],
+})

package.json

@@ -20,6 +20,7 @@
     "autoprefixer": "^10.4.17",
     "nuxt-lucide-icons": "^1.0.3",
     "postcss": "^8.4.35",
+    "prettier": "3.3.2",
     "tailwindcss": "^3.4.1"
   }
 }