feat(docs): Add docs index page

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/app.vue

@@ -1,14 +1,12 @@
 <template>
   <Header />
   <div id="app" class="flex">
-    <Sidebar />
-    <div id="vue-flow-docs" class="flex-1">
-      <NuxtPage />
-    </div>
+    <NuxtPage />
   </div>
 </template>
 <style>
 @import 'assets/index.css';
+
 /* these are necessary styles for vue flow */
 @import 'node_modules/@braks/vue-flow/dist/style.css';
 

docs/assets/index.css

@@ -1,6 +1,4 @@
 #__nuxt {
-  text-transform: uppercase;
-  font-family: 'JetBrains Mono', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -13,7 +11,7 @@ body,
 #__nuxt {
   position: relative;
   margin: 0;
-  height: 100%;
+  min-height: 100%;
   color: #111;
   background-position: center;
   background-size: cover;
@@ -65,8 +63,38 @@ body,
   }
 }
 
+#vue-flow-examples {
+  @apply flex m-0 bg-white h-full;
+  height: 100vh;
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 #vue-flow-docs {
   @apply flex m-0 bg-white h-full;
+
+  h1 {
+    @apply text-4xl mb-4 font-bold;
+  }
+
+  p {
+    @apply text-lg font-qtype;
+  }
+
+  p ~ h1 {
+    @apply mt-6;
+  }
+
+  a {
+    @apply text-green-500 font-semibold hover:text-green-300;
+  }
+
+  li {
+    @apply mt-2;
+    list-style-type: circle;
+  }
 }
 
 .button {

docs/components/DocsSidebar.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const examples = [
+  {
+    path: '/',
+    label: 'Introduction',
+  },
+]
+</script>
+<template>
+  <aside>
+    <div class="flex flex-col text-left items-start">
+      <router-link v-for="(e, i) of examples" :key="`docs-link-${i}`" class="docs-link" :to="`/docs${e.path}`">
+        {{ e.label }}
+      </router-link>
+    </div>
+  </aside>
+</template>
+<style scoped>
+.docs-link {
+  @apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
+}
+.router-link-active {
+  @apply rounded-lg bg-white font-semibold text-yellow-500;
+}
+aside {
+  @apply w-[280px] px-[10px] py-[15px];
+  background: rgba(0, 0, 0, 0.25) !important;
+  overflow-x: hidden; /* Disable horizontal scroll */
+}
+</style>

docs/components/Sidebar.vue → docs/components/ExamplesSidebar.vue

@@ -112,19 +112,18 @@ const examples = [
         {{ e.label }}
       </router-link>
     </div>
-    <slot></slot>
   </aside>
 </template>
 <style scoped>
 .example-link {
-  @apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
+  @apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2 leading-tight;
 }
 .router-link-active {
-  @apply rounded-lg bg-white font-semibold text-yellow-500;
+  @apply rounded-lg bg-white font-semibold text-yellow-500 shadow-lg;
 }
 aside {
-  @apply w-[280px] h-full px-[10px] py-[15px];
-  background: rgba(0, 0, 0, 0.25);
+  @apply relative w-[280px] h-full px-[10px] py-[15px];
+  background: rgba(0, 0, 0, 0.25) !important;
   overflow-x: hidden; /* Disable horizontal scroll */
 }
 </style>

docs/components/Header.vue

@@ -1,17 +1,27 @@
+<script setup>
+import { useStore } from '@braks/vue-flow'
+const store = useStore()
+</script>
 <template>
   <header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
     <div class="flex flex-col">
-      <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
+      <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow">
+        Vue Flow <span class="text-xs">v{{ store.vueFlowVersion }}</span></a
+      >
       <span class="text-xs text-gray-800 mt-2"
         >An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
         Based on <a href="https://reactflow.dev">React Flow</a>
       </span>
     </div>
-    <div class="flex-1"><span class="button text-gray-400">Docs</span></div>
     <div class="flex-1">
-      <router-link class="link" to="/examples"> Examples</router-link>
+      <router-link class="link" to="/docs">Docs</router-link>
+    </div>
+    <div class="flex-1">
+      <router-link class="link" to="/examples">Examples</router-link>
+    </div>
+    <div class="flex-1">
+      <a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a>
     </div>
-    <div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
   </header>
 </template>
 <style scoped>

docs/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <ExamplesSidebar />
+  <div id="vue-flow-examples" class="flex-1">
+    <slot />
+  </div>
+</template>

docs/layouts/docs.vue

@@ -0,0 +1,8 @@
+<template>
+  <DocsSidebar />
+  <div id="vue-flow-docs" class="flex-1 flex flex-col items-center justify-center">
+    <div class="p-6 text-left gap-2 w-1/2">
+      <slot />
+    </div>
+  </div>
+</template>

docs/nuxt.config.ts

@@ -18,7 +18,6 @@ export default defineNuxtConfig({
       preserveSymlinks: false,
     },
   },
-  target: 'server',
   ssr: true,
   buildModules: ['nuxt-windicss'],
 })

docs/pages/docs/getting-started.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  layout: 'docs',
+}
+</script>
+<template>
+  <h1>Getting started</h1>
+  <p>
+    Vue Flow, just like React Flow, is a library for building node-based applications. These can be simple static diagrams or
+    complex node-based editors. You can implement custom node types and edge types and it comes with components like a mini-map
+    and graph controls. Feel free to check out the <router-link to="/examples">examples</router-link>.
+  </p>
+</template>

docs/pages/docs/index.vue

@@ -0,0 +1,49 @@
+<script>
+export default {
+  layout: 'docs',
+}
+</script>
+<template>
+  <div class="p-4 bg-yellow-200 rounded-xl mb-4">
+    <p class="italic font-bold">
+      Vue Flow is not ready for production use yet. If you want to contribute getting the library ready, feel free to do so!
+      Improvements need to be made on perfomance, documentation and testing.
+    </p>
+  </div>
+
+  <h1>Introduction</h1>
+  <p>
+    Vue Flow, just like React Flow, is a library for building node-based applications. These can be simple static diagrams or
+    complex node-based editors. You can implement custom node types and edge types and it comes with components like a mini-map
+    and graph controls. Feel free to check out the <router-link to="/examples">examples</router-link>.
+  </p>
+
+  <h1>Key Features</h1>
+  <ul>
+    <li>
+      <span class="font-semibold">👶 Easy to use</span>: Seamless zooming & panning behaviour and single and multi-selections of
+      elements
+    </li>
+    <li>
+      <span class="font-semibold">🎨 Customizable</span>: Different <router-link to="/docs/api/node-types">node</router-link> and
+      <router-link to="/docs/api/edge-types">edge types</router-link> and support for custom nodes with multiple handles and
+      custom edges
+    </li>
+    <li>
+      <span class="font-semibold">(🚧 Kinda, it's a work in progress) Fast rendering</span>: Only nodes that have changed are
+      re-rendered and only those that are in the viewport are displayed (optionally)
+    </li>
+    <li>
+      <span class="font-semibold">🧲 Utils</span>: Snap-to-grid and graph
+      <router-link to="/docs/api/helper-functions">helper functions</router-link>
+    </li>
+    <li>
+      <span class="font-semibold">📦 Components</span>: <router-link to="/docs/api/background">Background</router-link>,
+      <router-link to="/docs/api/minimap">Minimap</router-link> and <router-link to="/docs/api/controls">Controls</router-link>
+    </li>
+    <li>
+      <span class="font-semibold">🦾 Reliable</span>: Written in <a href="https://www.typescriptlang.org/">TypeScript</a>(🚧 and
+      not yet tested with <a href="https://cypress.io">Cypress</a>)
+    </li>
+  </ul>
+</template>