From fcf3078d5b8116060bdd03a21955b7cbf110f11d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 5 Nov 2023 12:25:56 +0100
Subject: [PATCH] docs(guide): cleanup

---
 docs/src/guide/getting-started.md | 48 +++++++++++++++++--------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 82b2e7a5..c9e3c552 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -1,18 +1,18 @@
-# Getting Started with Vue Flow
+# Kickstart Your Journey with Vue Flow!
 
 This guide covers the basics of setting up and using Vue Flow. You'll learn how to install Vue Flow, configure it, and
 utilize it within your own projects.
 
 ## Prerequisites
 
-Before you begin, ensure you have the following installed on your machine:
+Before you strap in, make sure you're equipped with:
 
-- [Node.js v14 or above](https://nodejs.org/)
+- [Node.js v16 or above](https://nodejs.org/)
 - [Vue 3.0 or above](https://vuejs.org/)
 
 ## Installation
 
-Install Vue Flow using any of the following package managers:
+Use your preferred package manager to install Vue Flow:
 
 ```bash
 npm i --save @vue-flow/core
@@ -25,19 +25,23 @@ pnpm i @vue-flow/core
 ## Usage
 
 In Vue Flow, an application structure consists
-of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
-and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge), all of which are categorised as
-[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements).
-<span class="font-bold text-blue-500">Each element requires a unique id.</span>
-Nodes additionally need a specific position, while edges require a source and a
+of [<span class="font-bold">nodes</span>](/typedocs/interfaces/Node)
+and [<span class="font-bold">edges</span>](/typedocs/types/Edge), all of which are categorised as
+[<span class="font-bold">elements</span>](/typedocs/types/Elements).
+
+<span class="font-bold">Each element requires a unique id.</span>
+
+Nodes additionally need an [XY-position](/typedocs/interfaces/XYPosition), while edges require a source and a
 target, both represented by node ids.
 
-::: warning Attention!
+::: warning Pay Attention!
 To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
 
 Refer to the [Theming](/guide/theming) section for additional information.
 :::
 
+Here's a simple Vue Flow example to get you started:
+
 ```vue
 <script setup>
 import { VueFlow } from '@vue-flow/core'
@@ -45,21 +49,21 @@ import { VueFlow } from '@vue-flow/core'
 const elements = ref([
   // Nodes
   // An input node, specified by using `type: 'input'`
-  {id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
 
   // Default nodes, you can omit `type: 'default'`
-  {id: '2', label: 'Node 2', position: {x: 100, y: 100},},
-  {id: '3', label: 'Node 3', position: {x: 400, y: 100}},
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
 
   // An output node, specified by using `type: 'output'`
-  {id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
+  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
 
   // Edges
   // Most basic edge, only consists of an id, source-id and target-id
-  {id: 'e1-3', source: '1', target: '3'},
+  { id: 'e1-3', source: '1', target: '3' },
 
   // An animated edge
-  {id: 'e1-2', source: '1', target: '2', animated: true},
+  { id: 'e1-2', source: '1', target: '2', animated: true },
 ])
 </script>
 
@@ -68,11 +72,11 @@ const elements = ref([
 </template>
 
 <style>
-  /* import the necessary styles for Vue Flow to work */
-  @import '@vue-flow/core/dist/style.css';
-  
-  /* import the default theme, this is optional but generally recommended */
-  @import '@vue-flow/core/dist/theme-default.css';
+/* import the necessary styles for Vue Flow to work */
+@import '@vue-flow/core/dist/style.css';
+
+/* import the default theme, this is optional but generally recommended */
+@import '@vue-flow/core/dist/theme-default.css';
 </style>
 ```
 
@@ -82,4 +86,4 @@ As Vue Flow is entirely written in TypeScript, we highly recommend utilizing Typ
 experience and prevention of common errors.
 The necessary type definitions are included with the library.
 
-For more information, review our [TypeDocs documentation](/typedocs).
+For more information, review our [TypeDocs documentation](/typedocs/).