Improve docs

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.