Add Prettier config and ignore .idea

.gitignore

@@ -7,3 +7,4 @@ node_modules
 .data
 .env
 dist
+.idea

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "vueIndentScriptAndStyle": true,
+  "trailingComma": "all",
+  "printWidth": 120
+}

app.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-useHead({
-  htmlAttrs: {
-    lang: "en",
-  },
-});
+  useHead({
+    htmlAttrs: {
+      lang: 'en',
+    },
+  })
 </script>
 
 <template>
@@ -17,33 +17,36 @@ useHead({
 </template>
 
 <style lang="scss">
-@use "~/assets/scss/main";
+  @use '~/assets/scss/main';
 </style>
 
 <style>
-.environment {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background-size: 100% auto;
-  filter: brightness(60%);
-  pointer-events: none;
-}
-.in-environment {
-  padding: 5vw 0 33vw 0;
-}
-.ceiling {
-  background-image: url("@/assets/images/ceiling.png");
-  background-position: 0 -12vw;
-  top: 0;
-  height: 21vw;
-  transform: scaleX(-1);
-}
-.floor {
-  background-image: url("@/assets/images/floor.png");
-  background-position: 0 8vw;
-  bottom: 0;
-  height: 60vw;
-  z-index: 1005;
-}
+  .environment {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-size: 100% auto;
+    filter: brightness(60%);
+    pointer-events: none;
+  }
+
+  .in-environment {
+    padding: 5vw 0 33vw 0;
+  }
+
+  .ceiling {
+    background-image: url('@/assets/images/ceiling.png');
+    background-position: 0 -12vw;
+    top: 0;
+    height: 21vw;
+    transform: scaleX(-1);
+  }
+
+  .floor {
+    background-image: url('@/assets/images/floor.png');
+    background-position: 0 8vw;
+    bottom: 0;
+    height: 60vw;
+    z-index: 1005;
+  }
 </style>

components/TableOfContents.vue

@@ -1,79 +1,68 @@
 <script setup lang="ts">
-import type { Toc } from "@nuxt/content/types";
+  import type { Toc } from '@nuxt/content/types'
 
-const props = defineProps<{ toc: Toc | undefined }>();
+  const props = defineProps<{ toc: Toc | undefined }>()
 
-const activeLink = ref("");
+  const activeLink = ref('')
 
-onMounted(() => {
-  const articleElement: HTMLElement | undefined =
-    document.getElementsByTagName("article")[0];
+  onMounted(() => {
+    const articleElement: HTMLElement | undefined = document.getElementsByTagName('article')[0]
 
-  if (articleElement?.firstElementChild) {
-    const observedElements: Map<Element, [string, boolean]> = new Map();
+    if (articleElement?.firstElementChild) {
+      const observedElements: Map<Element, [string, boolean]> = new Map()
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const target = observedElements.get(entry.target);
-          if (target) {
-            target[1] = entry.isIntersecting;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const target = observedElements.get(entry.target)
+            if (target) {
+              target[1] = entry.isIntersecting
+            }
           }
-        }
-        for (const element of observedElements.values()) {
-          if (element[1]) {
-            activeLink.value = element[0];
-            break;
+          for (const element of observedElements.values()) {
+            if (element[1]) {
+              activeLink.value = element[0]
+              break
+            }
           }
-        }
-      },
-      {
-        rootMargin: "-60px 0px 0px 0px",
-        threshold: [0, 1],
-      }
-    );
+        },
+        {
+          rootMargin: '-60px 0px 0px 0px',
+          threshold: [0, 1],
+        },
+      )
 
-    let currentId = "";
-    for (const element of articleElement.firstElementChild.children) {
-      switch (element.tagName) {
-        case "H2":
-        case "H3":
-          currentId = element.id;
-      }
-      if (currentId) {
-        observedElements.set(element, [currentId, false]);
-        observer.observe(element);
+      let currentId = ''
+      for (const element of articleElement.firstElementChild.children) {
+        switch (element.tagName) {
+          case 'H2':
+          case 'H3':
+            currentId = element.id
+        }
+        if (currentId) {
+          observedElements.set(element, [currentId, false])
+          observer.observe(element)
+        }
       }
     }
-  }
-});
+  })
 </script>
 
 <template>
   <v-list class="pt-0">
     <v-list-item subtitle="Contents" />
     <v-divider />
     <template v-if="props.toc" v-for="h2 in props.toc.links" :key="h2.id">
-      <v-list-item
-        density="compact"
-        :to="`#${h2.id}`"
-        :title="h2.text"
-        :active="activeLink === h2.id"
-      />
+      <v-list-item density="compact" :to="`#${h2.id}`" :title="h2.text" :active="activeLink === h2.id" />
       <template v-for="h3 in h2.children" :key="h3.id">
-        <v-list-item
-          :to="`#${h3.id}`"
-          :subtitle="h3.text"
-          :active="activeLink === h3.id"
-          class="ps-8 tiny"
-        />
+        <v-list-item :to="`#${h3.id}`" :subtitle="h3.text" :active="activeLink === h3.id" class="ps-8 tiny" />
       </template>
     </template>
   </v-list>
 </template>
 
 <style>
-.tiny {
-  min-height: 32px !important;
-}
+  .tiny {
+    min-height: 32px !important;
+  }
 </style>

composables/useCurrentContent.ts

@@ -1,16 +1,12 @@
 export default function () {
-  const { path } = useRoute();
-  const { data, error } = useAsyncData(
-    `content-${path}`,
-    () => queryContent(path).findOne(),
-    {
-      deep: false,
-    }
-  );
+  const { path } = useRoute()
+  const { data, error } = useAsyncData(`content-${path}`, () => queryContent(path).findOne(), {
+    deep: false,
+  })
 
   watchEffect(() => {
-    if (error.value) throw error.value;
-  });
+    if (error.value) throw error.value
+  })
 
-  return data;
+  return data
 }

error.vue

@@ -1,36 +1,25 @@
 <script setup lang="ts">
-import type { NuxtError } from "#app";
+  import type { NuxtError } from '#app'
 
-const props = defineProps({
-  error: Object as () => NuxtError,
-});
+  const props = defineProps({
+    error: Object as () => NuxtError,
+  })
 
-if (props.error) {
-  const json = props.error.toJSON
-    ? props.error.toJSON()
-    : JSON.stringify(props.error);
-  console.error(json);
-}
+  if (props.error) {
+    const json = props.error.toJSON ? props.error.toJSON() : JSON.stringify(props.error)
+    console.error(json)
+  }
 </script>
 
 <template>
   <v-app>
     <v-container class="fill-height flex-column justify-center text-center">
       <span>
-        <v-img
-          src="/emoji/orishy.png"
-          alt="oriShy"
-          :width="112"
-          :height="112"
-        />
+        <v-img src="/emoji/orishy.png" alt="oriShy" :width="112" :height="112" />
       </span>
       <template v-if="error">
         <h1>
-          {{
-            `${error.statusCode}${
-              error.statusMessage ? ": " + error.statusMessage : ""
-            }`
-          }}
+          {{ `${error.statusCode}${error.statusMessage ? ': ' + error.statusMessage : ''}` }}
         </h1>
       </template>
       <h1 v-else>Something went oribly wrong!</h1>