From f386ea454c23eead3c995f96d9087217d2ba2db4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 30 Jul 2022 16:30:59 +0200
Subject: [PATCH] docs: replace vuepress specific components

---
 docs/components/home/Features.vue          |   9 +-
 docs/components/home/flows/Additional.vue  |   2 +-
 docs/components/home/flows/Basic.vue       |   2 +-
 docs/components/home/flows/Nested.vue      |   2 +-
 docs/components/home/flows/RGB.vue         |   2 +-
 docs/src/examples/dnd.md                   |   4 +-
 docs/src/examples/edges/connection-line.md |   4 +-
 docs/src/examples/edges/index.md           |   4 +-
 docs/src/examples/edges/updatable-edge.md  |   4 +-
 docs/src/examples/edges/validation.md      |   4 +-
 docs/src/examples/empty.md                 |   4 +-
 docs/src/examples/hidden.md                |   4 +-
 docs/src/examples/horizontal.md            |   4 +-
 docs/src/examples/index.md                 |   4 +-
 docs/src/examples/interaction.md           |   4 +-
 docs/src/examples/multi.md                 |   4 +-
 docs/src/examples/nodes/index.md           |   4 +-
 docs/src/examples/nodes/nesting.md         |   4 +-
 docs/src/examples/nodes/update-node.md     |   4 +-
 docs/src/examples/save.md                  |   4 +-
 docs/src/examples/stress.md                |   4 +-
 docs/src/examples/teleport.md              |   4 +-
 docs/src/guide/getting-started.md          |  44 +-------
 docs/src/guide/utils/instance.md           |  11 +-
 docs/src/guide/vue-flow/config.md          | 112 +++++++++------------
 docs/src/index.md                          |   3 +-
 26 files changed, 99 insertions(+), 156 deletions(-)

diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index 81a2bf7f..e9503cf3 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import type { VueFlowStore } from '@braks/vue-flow'
+import Basic from './flows/Basic.vue'
+import RGB from './flows/RGB.vue'
+import Nested from './flows/Nested.vue'
+import Additional from './flows/Additional.vue'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const el = ref()
+const el = ref<HTMLDivElement>()
 const instances: VueFlowStore[] = []
 
 const onLoad = (instance: VueFlowStore) => {
diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index 8d7d9b67..9af98be3 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -106,7 +106,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
 </template>
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index 45c0d97e..c207bc02 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -111,7 +111,7 @@ onConnect((param) => {
         Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
         elements, customizable nodes and edges and a bunch of event handlers.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
   <div
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 261c7ca0..d9dbc655 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -65,7 +65,7 @@ onPaneReady((i) => emit('pane', i))
         <br />
         No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
+      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
     </div>
   </div>
   <div
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index 7af38546..25c5f339 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -108,7 +108,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
         You can expand on the existing features by using your own custom nodes and edges and implement any design and
         functionality you want.
       </p>
-      <router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link>
+      <a class="docs-button max-w-max" href="/guide/">Documentation</a>
     </div>
   </div>
 </template>
diff --git a/docs/src/examples/dnd.md b/docs/src/examples/dnd.md
index 9c2a8722..91346ea1 100644
--- a/docs/src/examples/dnd.md
+++ b/docs/src/examples/dnd.md
@@ -16,9 +16,9 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
 is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="dnd"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/edges/connection-line.md b/docs/src/examples/edges/connection-line.md
index bf80d509..004cbf1e 100644
--- a/docs/src/examples/edges/connection-line.md
+++ b/docs/src/examples/edges/connection-line.md
@@ -11,9 +11,9 @@ functionality you can use your own custom connection line.
 Simply pass a component in the designated template slot, and you're good to go.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="connectionline"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/edges/index.md b/docs/src/examples/edges/index.md
index 0fe0772a..d63f34cd 100644
--- a/docs/src/examples/edges/index.md
+++ b/docs/src/examples/edges/index.md
@@ -9,9 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
 In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="edges"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/edges/updatable-edge.md b/docs/src/examples/edges/updatable-edge.md
index 762a6b91..c7baa4da 100644
--- a/docs/src/examples/edges/updatable-edge.md
+++ b/docs/src/examples/edges/updatable-edge.md
@@ -14,9 +14,9 @@ for specific edges by using the `updatable` attribute.
 
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="updateEdge"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/edges/validation.md b/docs/src/examples/edges/validation.md
index d458e020..0a37b74d 100644
--- a/docs/src/examples/edges/validation.md
+++ b/docs/src/examples/edges/validation.md
@@ -31,9 +31,9 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="validation"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/empty.md b/docs/src/examples/empty.md
index f87c48be..fb9f7c9d 100644
--- a/docs/src/examples/empty.md
+++ b/docs/src/examples/empty.md
@@ -9,9 +9,9 @@ Similar to the drag and drop example, we can also add nodes to an empty graph on
 which triggers a push into our elements / nodes array.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="empty"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/hidden.md b/docs/src/examples/hidden.md
index 95ff0105..942bdf68 100644
--- a/docs/src/examples/hidden.md
+++ b/docs/src/examples/hidden.md
@@ -16,9 +16,9 @@ This can save you some time on initial renders but consider that moving the pane
 which can cause performance spikes depending on the complexity of the components that have to be mounted.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="hidden"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/horizontal.md b/docs/src/examples/horizontal.md
index dedb5106..a2a8d776 100644
--- a/docs/src/examples/horizontal.md
+++ b/docs/src/examples/horizontal.md
@@ -11,9 +11,9 @@ You can use horizontal layouts with the default node types as well.
 You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="horizontal"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/index.md b/docs/src/examples/index.md
index ee2cd9ae..d80fd09c 100644
--- a/docs/src/examples/index.md
+++ b/docs/src/examples/index.md
@@ -11,9 +11,9 @@ On the bottom left you see the viewport-controls and on the bottom right the min
 You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="basic"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/interaction.md b/docs/src/examples/interaction.md
index 8a5132a5..d27986f9 100644
--- a/docs/src/examples/interaction.md
+++ b/docs/src/examples/interaction.md
@@ -10,9 +10,9 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
 In the sandbox below you can find an example showing you how to toggle interaction options.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="interaction"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/multi.md b/docs/src/examples/multi.md
index 0cb69d8a..6c274700 100644
--- a/docs/src/examples/multi.md
+++ b/docs/src/examples/multi.md
@@ -10,9 +10,9 @@ Vue Flow is not limited to a single instance on a page.
 You can use as many component instances as you like.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="multi"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/nodes/index.md b/docs/src/examples/nodes/index.md
index 14d7f02c..391eb21b 100644
--- a/docs/src/examples/nodes/index.md
+++ b/docs/src/examples/nodes/index.md
@@ -11,9 +11,9 @@ You can display any content and functionality inside a custom node. More documen
 up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="customNode"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/nodes/nesting.md b/docs/src/examples/nodes/nesting.md
index 1b757736..2d569d87 100644
--- a/docs/src/examples/nodes/nesting.md
+++ b/docs/src/examples/nodes/nesting.md
@@ -12,9 +12,9 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
 or even let Vue Flow extend the area of a node to fit all it's children.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="nested"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/nodes/update-node.md b/docs/src/examples/nodes/update-node.md
index f6484362..1955373f 100644
--- a/docs/src/examples/nodes/update-node.md
+++ b/docs/src/examples/nodes/update-node.md
@@ -14,9 +14,9 @@ That means you can manipulate any property of your original nodes, and it will t
 You can of course also access the nodes directly from the state and change their properties from there.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="updateNode"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/save.md b/docs/src/examples/save.md
index 1cdc18f2..36ad0112 100644
--- a/docs/src/examples/save.md
+++ b/docs/src/examples/save.md
@@ -17,9 +17,9 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
 some other business logic you would like to handle.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="saveRestore"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/stress.md b/docs/src/examples/stress.md
index 4488da44..939d9077 100644
--- a/docs/src/examples/stress.md
+++ b/docs/src/examples/stress.md
@@ -10,9 +10,9 @@ Vue Flow is built to be fast but there are limits.
 Try out how many nodes you can get to render before your browser crashes.
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="stress"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/examples/teleport.md b/docs/src/examples/teleport.md
index 5a700f0b..30eb14e6 100644
--- a/docs/src/examples/teleport.md
+++ b/docs/src/examples/teleport.md
@@ -8,9 +8,9 @@ layout: page
 Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
 
 <div class="mt-6">
-  <client-only>
+  <ClientOnly>
     <Suspense>
       <Repl example="teleport"></Repl>
     </Suspense>
-  </client-only>
+  </ClientOnly>
 </div>
diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index be6f15b5..6ae4182c 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -7,24 +7,13 @@
 
 ## Installation
 
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-yarn add @braks/vue-flow
-```
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="NPM">
-
 ```bash
 npm i --save @braks/vue-flow
-```
 
-  </CodeGroupItem>
-</CodeGroup>
+yarn i @braks/vue-flow
+
+pnpm i @braks/vue-flow
+```
 
 ## Usage
 
@@ -66,31 +55,6 @@ const elements = ref([
 </template>
 ```
 
-## Quickstart
-
-The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
-composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject). You can even
-access the state outside the context and manipulate it to your liking. However, using the options API is possible,
-though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
-states.
-
-A basic setup would look like this:
-
-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
-
-@[code vue](../../../examples/vite/src/Basic/Basic.vue)
-
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
-
-@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
-
-  </CodeGroupItem>
-</CodeGroup>
-
 ## TypeScript
 
 Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and
diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md
index ec443b88..84be0ca2 100644
--- a/docs/src/guide/utils/instance.md
+++ b/docs/src/guide/utils/instance.md
@@ -8,8 +8,7 @@ Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#use
 utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
 instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
 
-<CodeGroup>
-  <CodeGroupItem title="Composition API" active>
+- Using Event Hooks (Composable)
 
 ```vue
 <script setup>
@@ -22,10 +21,7 @@ onPaneReady((instance) => instance.fitView())
 </script>
 ```
 
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Options API">
+- Using Event Listener 
 
 ```vue
 <script>
@@ -51,9 +47,6 @@ export default defineComponent({
 </template>
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
-
 ### [project](/typedocs/types/Project)
 
 - Details:
diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md
index de683e65..bbedf06e 100644
--- a/docs/src/guide/vue-flow/config.md
+++ b/docs/src/guide/vue-flow/config.md
@@ -4,8 +4,7 @@ Vue Flow allows you to configure zoom, graph and flow behavior.
 Configuration can be passed either as props to the `VueFlow` component or
 as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
 
-<CodeGroup>
-  <CodeGroupItem title="Props" active>
+- Using Component Props
 
 ```vue
 <!-- Pass configuration as props -->
@@ -14,10 +13,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
 </template>
 ```
 
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
+- Using Composable Options
 
 ```vue
 <script setup>
@@ -31,16 +27,12 @@ useVueFlow({
 </script>
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
-
 ## Updating Config
 
 You can update the configuration at any point, either by having them bound as props or using the state values returned
 by `useVueFlow`.
 
-<CodeGroup>
-  <CodeGroupItem title="Props" active>
+- Using Component Props
 
 ```vue{2,5-6,10}
 <script setup>
@@ -56,10 +48,7 @@ onMounted(() => {
 </template>
 ```
 
-  </CodeGroupItem>
-
-
-  <CodeGroupItem title="Composable">
+- Using State (Composable)
 
 ```vue{2,7-8}
 <script setup>
@@ -74,12 +63,9 @@ onMounted(() => {
 </script>
 ```
 
-  </CodeGroupItem>
-</CodeGroup>
-
 ## Basic Options
 
-### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### id (optional)
 
 - Type: `string`
 
@@ -89,7 +75,7 @@ onMounted(() => {
 
   It is used for the lookup and injection of the state instance.
 
-### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### modelValue (optional)
 
 - Type: [`Elements`](/typedocs/types/Elements)
 
@@ -121,7 +107,7 @@ const elements = ref([
 </template>
 ```
 
-### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes (optional)
 
 - Type: [`Node[]`](/typedocs/interfaces/Node)
 
@@ -151,7 +137,7 @@ const nodes = ref([
 </template>
 ```
 
-### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edges (optional)
 
 - Type: [`Edge[]`](/typedocs/interfaces/Edge)
 
@@ -186,7 +172,7 @@ const edges = ref([
 </template>
 ```
 
-### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### node-types (optional)
 
 - Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)
 
@@ -223,7 +209,7 @@ const edges = ref([
 </template>
 ```
 
-### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edge-types (optional)
 
 - Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)
 
@@ -260,7 +246,7 @@ const edges = ref([
 </template>
 ```
 
-### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### apply-default (optional)
 
 - Type: `boolean`
 
@@ -295,7 +281,7 @@ const edges = ref([
 </template>
 ```
 
-### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### connection-mode (optional)
 
 - Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)
 
@@ -315,7 +301,7 @@ const edges = ref([
   
   The options include the connection line type, style and possible marker types (marker-end/marker-start).
 
-### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
+### connection-line-type (optional) (deprecated)
 
 - Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)
 
@@ -327,7 +313,7 @@ const edges = ref([
 
   When using a custom connection line this prop does nothing.
 
-### connection-line-style <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
+### connection-line-style (optional) (deprecated)
 
 - Type: `CSSProperties` | `null`
 
@@ -335,7 +321,7 @@ const edges = ref([
 
   Additional styles to add to the default connection-line.
 
-### fit-view-on-init <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### fit-view-on-init (optional)
 
 - Type: `boolean`
 
@@ -347,7 +333,7 @@ const edges = ref([
 
 ## Viewport Options
 
-### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-activation-key-code (optional)
 
 - Type: `KeyCode`
 
@@ -359,7 +345,7 @@ const edges = ref([
 
   Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.
 
-### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-scroll (optional)
 
 - Type: `boolean`
 
@@ -369,7 +355,7 @@ const edges = ref([
 
   Whether to allow zooming in and out when scrolling inside the Vue Flow container.
 
-### zoom-on-pinch <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-pinch (optional)
 
 - Type: `boolean`
 
@@ -379,7 +365,7 @@ const edges = ref([
 
   Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.
 
-### zoom-on-double-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### zoom-on-double-click (optional)
 
 - Type: `boolean`
 
@@ -389,7 +375,7 @@ const edges = ref([
 
   Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.
 
-### pan-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll (optional)
 
 - Type: `boolean`
 
@@ -401,13 +387,13 @@ const edges = ref([
 
   Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`.
 
-### pan-on-scroll-speed <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll-speed (optional)
 
 - Type: `number`
 
 - Default: `0.5`
 
-### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-scroll-mode (optional)
 
 - Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)
 
@@ -417,7 +403,7 @@ const edges = ref([
 
   Specify on which axis panning is allowed (x, y or both).
 
-### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### pan-on-drag (optional)
 
 - Old name: `paneMovable`
 
@@ -429,7 +415,7 @@ const edges = ref([
 
   Whether to allow moving the pane when dragging inside the Vue Flow container.
 
-### prevent-scrolling <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### prevent-scrolling (optional)
 
 - Type: `boolean`
 
@@ -439,7 +425,7 @@ const edges = ref([
 
   Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.
 
-### no-wheel-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### no-wheel-class-name (optional)
 
 - Type: `string`
 
@@ -452,7 +438,7 @@ const edges = ref([
 
   Useful if you want to allow for scrolling _inside_ a node
 
-### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### no-pan-class-name (optional)
 
 - Type: `string`
 
@@ -462,25 +448,25 @@ const edges = ref([
 
   Set a class name which prevents elements from triggering pan-scroll events.
 
-### min-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### min-zoom (optional)
 
 - Type: `number`
 
 - Default: `0.5`
 
-### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### max-zoom (optional)
 
 - Type: `number`
 
 - Default: `2`
 
-### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-zoom (optional)
 
 - Type: `number`
 
 - Default: `1`
 
-### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-position (optional)
 
 - Type: `[x: number, y: number]`
 
@@ -490,7 +476,7 @@ const edges = ref([
 
   Default viewport position on initial load.
 
-### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### translate-extent (optional)
 
 - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
 
@@ -509,7 +495,7 @@ const edges = ref([
 
 ## Selection Options
 
-### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### selection-key-code (optional)
 
 - Type: `KeyCode`
 
@@ -519,7 +505,7 @@ const edges = ref([
 
   Define a key which can be used to activate the selection rect.
 
-### multi-selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### multi-selection-key-code (optional)
 
 - Type: `KeyCode`
 
@@ -531,7 +517,7 @@ const edges = ref([
 
   Multi-selection can be used to select multiple nodes with clicks.
 
-### delete-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### delete-key-code (optional)
 
 - Type: `KeyCode`
 
@@ -543,7 +529,7 @@ const edges = ref([
 
 ## Global Node Options
 
-### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-draggable (optional)
 
 - Type: `boolean`
 
@@ -571,7 +557,7 @@ const elements = ref([
 </template>
 ```
 
-### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-connectable (optional)
 
 - Type: `boolean`
 
@@ -599,7 +585,7 @@ const elements = ref([
 </template>
 ```
 
-### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### nodes-extent (optional)
 
 - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
 
@@ -634,13 +620,13 @@ const elements = ref([
 </template>
 ```
 
-### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### select-nodes-on-drag (optional)
 
 - Type: `boolean`
 
 - Default: `true`
 
-### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### snap-to-grid (optional)
 
 - Type: `boolean`
 
@@ -650,7 +636,7 @@ const elements = ref([
 
   If enabled, nodes will be placed and moved in a grid-like fashion.
 
-### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### snap-grid (optional)
 
 - Type: [`SnapGrid`](/typedocs/types/SnapGrid)
 
@@ -662,7 +648,7 @@ const elements = ref([
 
 ## Global Edge Options
 
-### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edges-updatable (optional)
 
 - Type: `boolean`
 
@@ -692,7 +678,7 @@ const elements = ref([
 </template>
 ```
 
-### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-marker-color (optional)
 
 - Type: `string`
 
@@ -702,7 +688,7 @@ const elements = ref([
 
   The default color value which is used when presenting edge-markers (arrowheads).
 
-### edge-updater-radius <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### edge-updater-radius (optional)
 
 - Type: `number`
 
@@ -712,7 +698,7 @@ const elements = ref([
 
   The radius at which an edge-updater can be triggered.
 
-### connect-on-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### connect-on-click (optional)
 
 - Type: `boolean`
 
@@ -724,7 +710,7 @@ const elements = ref([
 
   Useful if you want to enable creating edges on a touch device.
 
-### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### default-edge-options (optional)
 
 - Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
 
@@ -734,7 +720,7 @@ const elements = ref([
 
   Does not work for the `addEdge` utility!
 
-### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### auto-connect (optional)
 
 - Type: `boolean` | [`Connector`](/typedocs/types/Connector)
 
@@ -787,7 +773,7 @@ const connector = (params) => {
 </template>
 ```
 
-### elevate-edges-on-select <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### elevate-edges-on-select (optional)
 
 - Type: `boolean`
 
@@ -803,7 +789,7 @@ const connector = (params) => {
 
 ## Global Element Options
 
-### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### only-render-visible-elements (optional)
 
 - Type: `boolean`
 
@@ -813,7 +799,7 @@ const connector = (params) => {
 
   Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).
 
-### elements-selectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+### elements-selectable (optional)
 
 - Type: `boolean`
 
diff --git a/docs/src/index.md b/docs/src/index.md
index 38171587..dabc01bc 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
-heroText: null
-tagline: null
+
 ---
 
 <Home />