From 1b0602dcce420a3e0dc6ad5ae7e36e731b836b7d Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 6 Nov 2021 13:31:42 +0100
Subject: [PATCH] update(docs): README.md

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 README.md                  | 79 +++++++++++++++++++++++++-------------
 docs/components/Header.vue |  3 --
 2 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 07e831db..78c5e5c4 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
-# Vue Flow
+# Vue Flow 🌊
+
 [![vue flow](./src/assets/vue-flow.gif)](https://reactflow.dev/)
 ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
 [![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
@@ -7,42 +8,68 @@
 ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
 ![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
 
-This repo is still a big construction site with nothing really finished.
-You can check the examples to see what's working and what's not.
-Please visit [React Flow](https://reactflow.dev/) and support them if you like the idea. 
-They did most of the heavy lifting by writing the library in the first place.
-All I did is bring it to Vue.
+__A customizable Vue3 Flowchart.__
 
-### Motivation
-Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
-love and attention, I decided to port the React Flow library to Vue.js.
+### __🚧 This library is still under construction__
 
-## Usage
-Check the React Flow docs for usage. It's really the same.
+_Docs aren't available yet_ but if you still want to try it out, check the available [examples](./examples) to get an
+idea how to start using Vue Flow.
+
+## Features
+
+- 🎨 Customizable
+
+- 🦾 Fully written in TypeScript
+
+
+## Table of Contents
+
+* [🛠 Setup](#-setup)
+
+* [🎮 Quickstart](#-quickstart)
+
+* [🧪 Development](#-development)
+
+
+## 🛠 Setup
 
-### Vue 3
 ```bash
-# install vue flow
-$ pnpm add @braks/vue-flow
-
+$ npm i @braks/vue-flow
 # or
-$ npm i --save @braks/vue-flow
+$ yarn add @braks/vue-flow
 ```
 
-### Vue 2
-Vue Flow doesn't work with Vue 2, sorry.
+## 🎮 Quickstart
+
+```vue
+<template>
+  <Flow :elements="elements"></Flow>
+</template>
+<script setup>
+import { Flow, Elements } from '@braks/vue-flow'
+
+const elements = ref<Elements>([
+  {
+    id: '1',
+    data: {
+      label: 'This is a <strong>default node</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+])
+</script>
+```
+
+### ▸ Vue 2
+
+**_This library doesn't work with Vue2._**
 
 ## 🧪 Development
+
 ```bash
 # start (dev)
-$ pnpm dev
-
-# build app
-$ pnpm build
-
-# serve app from build
-$ pnpm serve
+$ yarn dev
 
 # build dist
-$ pnpm build:dist
+$ yarn build
 ```
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index ada6325d..b6c71f47 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -27,7 +27,4 @@ a {
 .link {
   @apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
 }
-.router-link-active {
-  @apply rounded-lg bg-white font-semibold text-yellow-500;
-}
 </style>