Improve docs

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: [

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.
 

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.
 
 

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>

docs/src/components/introduction.md

@@ -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)

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.

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>

docs/src/components/polygon.md

@@ -1,2 +1,4 @@
 # Polygon
+[[toc]]
+
 Polygon is a simple wrapper around google's polygon component.

docs/src/components/rectangle.md

@@ -1,3 +1,4 @@
 # Rectangle
+[[toc]]
 Polygon is a simple wrapper around google's polygon component.
 

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:

docs/src/docs/getting-started.md

@@ -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>
-```

docs/src/docs/introduction.md

@@ -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>
-```