From 3bc0e878a2a8a29793fcc7aa2d172d21f5dbf84b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 3 Apr 2022 15:31:27 +0200
Subject: [PATCH] feat(docs): Add guide index page

---
 docs/components/home/Home.vue                | 19 +++++++++-
 docs/src/.vuepress/assets/index.css          | 24 +++++++++---
 docs/src/.vuepress/theme/layouts/default.vue |  3 +-
 docs/src/examples/index.md                   |  2 +-
 docs/src/guide/index.md                      | 39 ++++++++++++++++++++
 5 files changed, 78 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/guide/index.md

diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index dfc170e9..f862daac 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -143,7 +143,7 @@ onPaneReady(({ fitView }) => {
     </VueFlow>
   </div>
 </template>
-<style scoped>
+<style>
 .intro {
   @apply cursor-pointer
   bg-green-500
@@ -175,4 +175,21 @@ onPaneReady(({ fitView }) => {
 button:focus {
   outline: none;
 }
+
+h1 {
+  @apply text-xl lg:text-4xl mb-4 font-bold;
+}
+
+h2 {
+  @apply text-lg lg:text-2xl mb-4 font-semibold;
+}
+
+p {
+  @apply text-md lg:text-lg;
+}
+
+p ~ h1,
+p ~ h2 {
+  @apply mt-6;
+}
 </style>
diff --git a/docs/src/.vuepress/assets/index.css b/docs/src/.vuepress/assets/index.css
index abb77ea8..50e80f47 100644
--- a/docs/src/.vuepress/assets/index.css
+++ b/docs/src/.vuepress/assets/index.css
@@ -1,12 +1,14 @@
 :root {
   --primary: #BB86FC;
   --secondary: #03dac5;
-  --content-width: 100%;
 }
 
 .dark {
   --c-text-lighter: white !important;
   --c-text: white !important;
+  --c-bg: black !important;
+  --c-bg-light: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
+  --c-bg-lighter: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
 }
 
 html, body {
@@ -14,14 +16,24 @@ html, body {
 }
 
 .home {
+  --content-width: 100%;
   max-width: 100% !important;
   @apply !px-0;
 }
 
-.page, .page-meta, .footer, .sidebar {
+.page a {
+  @apply text-green-500 font-semibold;
+}
+
+.examples .page, .examples .page-meta, .footer, .sidebar {
   @apply dark:(!bg-black text-white);
 }
 
+.examples .page {
+  --content-width: 100%;
+  @apply max-w-3/4;
+}
+
 .theme-default-content {
   @apply overflow-scroll md:overflow-hidden;
 }
@@ -39,11 +51,13 @@ h2 {
 }
 
 p {
-  @apply text-md lg:text-lg font-qtype;
+  @apply text-md lg:text-lg;
+  line-height: inherit;
+  margin: inherit;
 }
 
-p ~ h1, p ~ h2 {
-  @apply mt-6;
+ul li {
+  @apply mt-2;
 }
 
 .vue-flow__node.dark {
diff --git a/docs/src/.vuepress/theme/layouts/default.vue b/docs/src/.vuepress/theme/layouts/default.vue
index 0108ab00..c13e3c99 100644
--- a/docs/src/.vuepress/theme/layouts/default.vue
+++ b/docs/src/.vuepress/theme/layouts/default.vue
@@ -16,9 +16,8 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
 </template>
 <style>
 .page-footer {
-  @apply dark:(text-white bg-black) pt-[2rem];
+  @apply dark:(text-white bg-black) pt-[2rem] text-center;
   border-top: 1px solid var(--c-border);
-  text-align: center;
   transition: border-color var(--t-color);
 }
 </style>
diff --git a/docs/src/examples/index.md b/docs/src/examples/index.md
index 05d17073..daae1c30 100644
--- a/docs/src/examples/index.md
+++ b/docs/src/examples/index.md
@@ -1,6 +1,6 @@
 ---
 title: Basic Example
-tags: ['examples', 'basic', 'get-started', 'quickstart']
+pageClass: examples
 ---
 
 # Basic Example
diff --git a/docs/src/guide/index.md b/docs/src/guide/index.md
new file mode 100644
index 00000000..c8b591ef
--- /dev/null
+++ b/docs/src/guide/index.md
@@ -0,0 +1,39 @@
+---
+title: Introduction
+
+---
+
+# Introduction
+
+Vue Flow is a library for building node-based applications. These can be simple static diagrams or complex node-based
+editors. You can implement custom nodes and edges. It also comes with components like a mini-map, zoom pane controls and
+a background. 
+
+Check out the [examples](/examples/) if you want to dive directly into the code.
+
+# Features
+
+- 👶 __Easy to use__: Seamless zooming & panning behaviour and single and multi-selections of
+  elements
+
+- 🎨 __Customizable__: Different and edge types and support for custom nodes with multiple handles and custom edges
+
+- 🚀 __Fast rendering__: Only nodes that have changed are re-rendered and only those that are in the viewport are displayed (optionally)
+
+- 🧲 __Handy utilities__: Comes with graph helper and state composable functions for advanced uses
+
+- 📦 __Additional Components__:
+
+  - 🖼 Background: With two built-in patterns and some configuration options like height, width or color.
+
+  - 🧭 Minimap: Shows current nodes in a small map shape in the bottom right corner
+
+  - 🕹 Controls: Control zoom behavior from a panel on the bottom left
+
+- 🦾 __Reliable__: Fully written in TypeScript
+
+::: warning
+  Vue Flow is still version 0.x.x.
+  
+  Expect breaking changes between versions!
+:::