use prettier to format docs

docs/.gitignore

@@ -1 +1,2 @@
-src/.vitepress/dist
+src/.vitepress/cache
+src/.vitepress/dist

docs/.prettierignore

@@ -0,0 +1,2 @@
+src/.vitepress/cache
+src/.vitepress/dist

docs/package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "start": "vitepress dev src",
     "build": "vitepress build src",
-    "serve": "vitepress serve src"
+    "serve": "vitepress serve src",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
   },
   "author": "Roman Kushyn",
   "license": "ISC",

docs/src/.vitepress/theme/Layout.vue

@@ -1,53 +1,56 @@
 <script setup>
-import DefaultTheme from 'vitepress/theme'
+import DefaultTheme from 'vitepress/theme';
 import { useRouter } from 'vitepress';
-import { watch } from "vue";
+import { watch } from 'vue';
 
 // localStorage and window are not available during the build
-const isBuild = typeof window === 'undefined'
+const isBuild = typeof window === 'undefined';
 
 if (!isBuild && !localStorage.getItem('vitepress-theme-appearance')) {
-  document.documentElement.classList.add('dark')
-  localStorage.setItem('vitepress-theme-appearance', 'dark')
+  document.documentElement.classList.add('dark');
+  localStorage.setItem('vitepress-theme-appearance', 'dark');
 }
 
 const router = useRouter();
 
 // Only run this on the client. Not during build.
 if (!isBuild) {
-  window.dataLayer = window.dataLayer || []
-  function gtag(){ dataLayer.push(arguments) }
-  gtag('js', new Date())
-
-  const analyticsId = 'G-PV4PL9TK79'
-  gtag('config', analyticsId)
-
-  watch(() => router.route.data.relativePath, () => {
-    setTimeout(() => {
-      gtag('event', 'page_view', {
-        page_title: document.title,
-        page_location: window.location.href,
-        page_path: window.location.pathname,
-        send_to: analyticsId,
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  const analyticsId = 'G-PV4PL9TK79';
+  gtag('config', analyticsId);
+
+  watch(
+    () => router.route.data.relativePath,
+    () => {
+      setTimeout(() => {
+        gtag('event', 'page_view', {
+          page_title: document.title,
+          page_location: window.location.href,
+          page_path: window.location.pathname,
+          send_to: analyticsId,
+        });
       });
-    })
-  }, { immediate: true });
+    },
+    { immediate: true },
+  );
 }
 
-const { Layout } = DefaultTheme
+const { Layout } = DefaultTheme;
 </script>
 
 <template>
   <Layout>
     <template v-slot:nav-bar-content-before>
-      <a
-        href='https://stand-with-ukraine.pp.ua/'
-        class='stand-with-ukraine'
-      >
-        <div class='flag'></div>
-        <div class='text'>
-          <span class='stand-with'>Stand With </span>
-          <span class='Ukraine'>Ukraine</span>
+      <a href="https://stand-with-ukraine.pp.ua/" class="stand-with-ukraine">
+        <div class="flag"></div>
+        <div class="text">
+          <span class="stand-with">Stand With </span>
+          <span class="Ukraine">Ukraine</span>
         </div>
       </a>
     </template>

docs/src/.vitepress/theme/components/Chart.vue

@@ -1,30 +1,44 @@
 <template>
-  <Bar
-      :chart-options="chartOptions"
-      :chart-data="chartData"
-      :height="250"
-  />
+  <Bar :chart-options="chartOptions" :chart-data="chartData" :height="250" />
 </template>
 
 <script>
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js/dist/chart.mjs'
+import { Bar } from 'vue-chartjs';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js/dist/chart.mjs';
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+);
 
 export default {
   name: 'BarChart',
   components: { Bar },
   props: {
     chartData: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
   },
   data() {
-    if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
-      ChartJS.defaults.color = 'rgba(255, 255, 255, .8)'
-      ChartJS.defaults.borderColor = 'rgba(0, 0, 0, .4)'
+    if (
+      typeof document !== 'undefined' &&
+      document.documentElement.classList.contains('dark')
+    ) {
+      ChartJS.defaults.color = 'rgba(255, 255, 255, .8)';
+      ChartJS.defaults.borderColor = 'rgba(0, 0, 0, .4)';
     }
 
     return {
@@ -35,8 +49,8 @@ export default {
             display: false,
           },
         },
-      }
-    }
-  }
-}
-</script>
+      },
+    };
+  },
+};
+</script>

docs/src/.vitepress/theme/components/Home.vue

@@ -1,28 +1,34 @@
 <script setup>
-  import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 </script>
 
 <template>
   <div class="container">
-    <div class="title">
-      Orchid ORM
-    </div>
+    <div class="title">Orchid ORM</div>
 
-    <h1 class='text'>Postgres ORM, query builder, migration tool.<br />First-class TypeScript support.</h1>
+    <h1 class="text">
+      Postgres ORM, query builder, migration tool.<br />First-class TypeScript
+      support.
+    </h1>
 
-    <ul class='list'>
+    <ul class="list">
       <li>🚀️ productive way to work with models and relations</li>
       <li>🧐️ full control over the database with powerful query builder</li>
-      <li>😎️ model schema can be converted to <a href='https://github.com/colinhacks/zod' target='_blank' class='link'>Zod</a> for validations</li>
+      <li>
+        😎️ model schema can be converted to
+        <a href="https://github.com/colinhacks/zod" target="_blank" class="link"
+          >Zod</a
+        >
+        for validations
+      </li>
       <li>🛳️ migration tools</li>
-      <li>💯 100% TypeScript, define a schema and everything else will be inferred</li>
+      <li>
+        💯 100% TypeScript, define a schema and everything else will be inferred
+      </li>
     </ul>
 
-    <div class='buttons'>
-      <VPButton
-        text="Get Started"
-        href="/guide/"
-      />
+    <div class="buttons">
+      <VPButton text="Get Started" href="/guide/" />
       <VPButton
         theme="alt"
         text="⭐ Star on GitHub"
@@ -33,72 +39,73 @@
 </template>
 
 <style scoped>
-  .container {
-    text-align: center;
-    padding: 0 20px;
-  }
-
+.container {
+  text-align: center;
+  padding: 0 20px;
+}
+
+.title {
+  margin: 32px 0 16px;
+  font-size: 52px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: #c04c8b;
+  line-height: 1;
+  background: -webkit-linear-gradient(#c04c8b, var(--vp-button-brand-bg));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text {
+  line-height: 1.3;
+  font-size: 28px;
+  font-weight: 800;
+}
+
+.list {
+  display: inline-block;
+  text-align: left;
+}
+
+.list li {
+  margin: 16px 0;
+}
+
+.link {
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  text-decoration-style: dotted;
+  transition: color 0.25s;
+}
+
+.buttons {
+  margin-top: 12px;
+}
+
+.buttons a:first-child {
+  margin-right: 16px;
+}
+
+@media (min-width: 480px) {
   .title {
-    margin: 32px 0 16px;
-    font-size: 52px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    color: #c04c8b;
-    line-height: 1;
-    background: -webkit-linear-gradient(#c04c8b, var(--vp-button-brand-bg));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    margin: 60px 0;
+    font-size: 72px;
   }
 
   .text {
-    line-height: 1.3;
-    font-size: 28px;
-    font-weight: 800;
-  }
-
-  .list {
-    display: inline-block;
-    text-align: left;
-  }
-
-  .list li {
-    margin: 16px 0;
-  }
-
-  .link {
-    font-weight: 500;
-    color: var(--vp-c-brand);
-    text-decoration-style: dotted;
-    transition: color .25s;
+    line-height: 1.5;
+    font-size: 36px;
   }
 
+  .list,
   .buttons {
-    margin-top: 12px;
-  }
-
-  .buttons a:first-child {
-    margin-right: 16px;
+    margin-top: 40px;
   }
 
-  @media (min-width: 480px) {
-    .title {
-      margin: 60px 0;
-      font-size: 72px;
-    }
-
-    .text {
-      line-height: 1.5;
-      font-size: 36px;
-    }
-
-    .list, .buttons {
-      margin-top: 40px;
-    }
-
-    .list li {
-      margin: 8px 0;
-    }
+  .list li {
+    margin: 8px 0;
   }
+}
 </style>