From 17ffd6d77960f350768ee6d553d9c13a74ef54c4 Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Sun, 14 Feb 2021 13:33:59 +0100
Subject: [PATCH] Improve docs

---
 docs/src/.vuepress/config.js        |  9 +----
 docs/src/components/README.md       |  1 +
 docs/src/components/cluster.md      |  2 +
 docs/src/components/info-window.md  |  2 +
 docs/src/components/introduction.md | 19 ---------
 docs/src/components/map.md          |  2 +-
 docs/src/components/marker.md       |  2 +
 docs/src/components/polygon.md      |  2 +
 docs/src/components/rectangle.md    |  1 +
 docs/src/docs/README.md             |  2 +-
 docs/src/docs/getting-started.md    | 60 -----------------------------
 docs/src/docs/introduction.md       | 60 -----------------------------
 12 files changed, 14 insertions(+), 148 deletions(-)
 delete mode 100755 docs/src/components/introduction.md
 delete mode 100644 docs/src/docs/getting-started.md
 delete mode 100644 docs/src/docs/introduction.md

diff --git a/docs/src/.vuepress/config.js b/docs/src/.vuepress/config.js
index b0d635f..416a905 100755
--- a/docs/src/.vuepress/config.js
+++ b/docs/src/.vuepress/config.js
@@ -43,22 +43,18 @@ module.exports = {
         link: 'https://github.com/fawmi/vue-google-maps.git'
       }
     ],
+    sidebarDepth: 0,
+    collapsable: false,
     sidebar: [
       {
         title: 'Getting started',
         path: '/docs/',
-        sidebarDepth: 0,
-        collapsable: false,
-        children: [
-        ]
       },
       {
         title: 'Components',
         collapsable: false,
         path: '/components/',
-        sidebarDepth: 0,
         children: [
-          '/components/introduction',
           '/components/map',
           '/components/marker',
           '/components/info-window',
@@ -69,7 +65,6 @@ module.exports = {
       },
       {
         title: 'Advanced',
-        collapsable: false,
         path: '/advanced/',
         sidebarDepth: 0,
         children: [
diff --git a/docs/src/components/README.md b/docs/src/components/README.md
index d4b98a7..cfecf70 100644
--- a/docs/src/components/README.md
+++ b/docs/src/components/README.md
@@ -1,4 +1,5 @@
 # Components
+[[toc]]
 
 `@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
 
diff --git a/docs/src/components/cluster.md b/docs/src/components/cluster.md
index dd2a9e5..fdbacb5 100644
--- a/docs/src/components/cluster.md
+++ b/docs/src/components/cluster.md
@@ -1,4 +1,6 @@
 # Cluster
+[[toc]]
+## Cluster your markers
 To cluster objects you simply wrap your markers with the cluster component.
 
 
diff --git a/docs/src/components/info-window.md b/docs/src/components/info-window.md
index 80c916e..9482d02 100755
--- a/docs/src/components/info-window.md
+++ b/docs/src/components/info-window.md
@@ -1,4 +1,6 @@
 # Info Window
+[[toc]]
+## Add info window to your components
 You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
 ```vue
   <GMapMap>
diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md
deleted file mode 100755
index d4b98a7..0000000
--- a/docs/src/components/introduction.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Components
-
-`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
-
-Currently `Map`, `Marker`, `InfoWindow`,  `Cluster`, `Polygon` and `Rectangle` are supported.
-
-Checkout the docs page for each component to see how to use it.
-
-[Map](./map.md)
-
-[Marker](./marker.md)
-
-[InfoWindow](./info-window.md)
-
-[Cluster](./cluster.md)
-
-[Polygon](./polygon.md)
-
-[Rectangle](./rectangle.md)
diff --git a/docs/src/components/map.md b/docs/src/components/map.md
index 1dd9106..912125e 100644
--- a/docs/src/components/map.md
+++ b/docs/src/components/map.md
@@ -1,5 +1,5 @@
 # Map
-
+[[toc]]
 ## Install
 
 This is the base Map component. If no props are provided, it shows an empty map component with default controls.
diff --git a/docs/src/components/marker.md b/docs/src/components/marker.md
index f98ec0d..129500f 100644
--- a/docs/src/components/marker.md
+++ b/docs/src/components/marker.md
@@ -1,5 +1,7 @@
 # Marker
+[[toc]]
 
+## Add marker to your components
 With a marker, you can show specific locations on the map
 ```vue
 <template>
diff --git a/docs/src/components/polygon.md b/docs/src/components/polygon.md
index 07a6eee..04d6fb3 100644
--- a/docs/src/components/polygon.md
+++ b/docs/src/components/polygon.md
@@ -1,2 +1,4 @@
 # Polygon
+[[toc]]
+
 Polygon is a simple wrapper around google's polygon component.
diff --git a/docs/src/components/rectangle.md b/docs/src/components/rectangle.md
index 8009a1e..b82fc18 100644
--- a/docs/src/components/rectangle.md
+++ b/docs/src/components/rectangle.md
@@ -1,3 +1,4 @@
 # Rectangle
+[[toc]]
 Polygon is a simple wrapper around google's polygon component.
 
diff --git a/docs/src/docs/README.md b/docs/src/docs/README.md
index 2266a50..7977187 100644
--- a/docs/src/docs/README.md
+++ b/docs/src/docs/README.md
@@ -1,5 +1,5 @@
 # Introduction
-
+[[toc]]
 `@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
 
 The following components are currently supported:
diff --git a/docs/src/docs/getting-started.md b/docs/src/docs/getting-started.md
deleted file mode 100644
index 2266a50..0000000
--- a/docs/src/docs/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Introduction
-
-`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
-
-The following components are currently supported:
-
-`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
-
-
-Checkout getting started to read, how to install and use vue-google-maps
-
-# Install and configure
-
-to install it via NPM
-```bash
-npm install -S @fawmi/vue-google-maps
-```
-
-## Basic usage
-You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
-
-## Configure Vue to use the Components
-
-Initialise the plugin in your `main.js`:
-```js
-import { createApp } from 'vue'
-import * as VueGoogleMaps from '@fawmi/vue-google-maps'
-
-const app = createApp(App);
-app.use(VueGoogleMaps, {
-    load: {
-        key: 'YOUR_API_KEY_COMES_HERE',
-    },
-}).mount('#app')
-```
-
-## Use it anywhere in your components
-
-```vue
-<template>
-  <GMapMap
-      :center="{lat: 51.093048, lng: 6.842120}"
-      :zoom="7"
-      map-type-id="terrain"
-      style="width: 100vw; height: 900px"
-  >
-  </GMapMap>
-</template>
-
-<script >
-export default {
-  name: 'App',
-  data() {
-    return {
-      center: {lat: 51.093048, lng: 6.842120},
-    }
-  }
-}
-</script>
-```
diff --git a/docs/src/docs/introduction.md b/docs/src/docs/introduction.md
deleted file mode 100644
index 2266a50..0000000
--- a/docs/src/docs/introduction.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Introduction
-
-`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
-
-The following components are currently supported:
-
-`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
-
-
-Checkout getting started to read, how to install and use vue-google-maps
-
-# Install and configure
-
-to install it via NPM
-```bash
-npm install -S @fawmi/vue-google-maps
-```
-
-## Basic usage
-You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
-
-## Configure Vue to use the Components
-
-Initialise the plugin in your `main.js`:
-```js
-import { createApp } from 'vue'
-import * as VueGoogleMaps from '@fawmi/vue-google-maps'
-
-const app = createApp(App);
-app.use(VueGoogleMaps, {
-    load: {
-        key: 'YOUR_API_KEY_COMES_HERE',
-    },
-}).mount('#app')
-```
-
-## Use it anywhere in your components
-
-```vue
-<template>
-  <GMapMap
-      :center="{lat: 51.093048, lng: 6.842120}"
-      :zoom="7"
-      map-type-id="terrain"
-      style="width: 100vw; height: 900px"
-  >
-  </GMapMap>
-</template>
-
-<script >
-export default {
-  name: 'App',
-  data() {
-    return {
-      center: {lat: 51.093048, lng: 6.842120},
-    }
-  }
-}
-</script>
-```