From 79c4b79581aafe6d6dc69b8046ef9b52c95e946d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diego=20A=2E=20Zapata=20H=C3=A4ntsch?=
 <diegoazh2003@gmail.com>
Date: Mon, 1 Apr 2024 16:54:31 -0300
Subject: [PATCH] docs(docs): improve and update docs

---
 .../docs/vue-3-version/examples/examples.md   |  9 ++++++
 .../guide/basic-usage/dynamic-load.md         | 32 +++++++++++++------
 .../guide/basic-usage/map-reference.md        | 18 +++++------
 packages/documentation/docusaurus.config.ts   |  6 ++--
 4 files changed, 43 insertions(+), 22 deletions(-)
 create mode 100644 packages/documentation/docs/vue-3-version/examples/examples.md

diff --git a/packages/documentation/docs/vue-3-version/examples/examples.md b/packages/documentation/docs/vue-3-version/examples/examples.md
new file mode 100644
index 000000000..58f5c85c9
--- /dev/null
+++ b/packages/documentation/docs/vue-3-version/examples/examples.md
@@ -0,0 +1,9 @@
+---
+id: examples
+sidebar_position: 5
+sidebar_label: Examples
+---
+
+# Examples
+
+Here you can play with a CodeSandbox project to test all the examples provided in this documentation.
diff --git a/packages/documentation/docs/vue-3-version/guide/basic-usage/dynamic-load.md b/packages/documentation/docs/vue-3-version/guide/basic-usage/dynamic-load.md
index 136b8d13f..a1b87e0ea 100644
--- a/packages/documentation/docs/vue-3-version/guide/basic-usage/dynamic-load.md
+++ b/packages/documentation/docs/vue-3-version/guide/basic-usage/dynamic-load.md
@@ -3,40 +3,52 @@ id: dynamic-load
 sidebar_position: 1
 sidebar_label: Dynamic load
 ---
+
 # Dynamic load
 
 If you need to initialize the Google Maps API in a dynamic way you can use the `dynamicLoad` option of the plugin
 configuration, this option start the plugin but **it doesn't load the Google Maps API**, **you need to load it manually** using
 the `googleMapsApiInitializer` function from the `utilities` object exposed by the plugin as we show below
 
+```ts title="main.ts" showLineNumbers
+//...
+
+createApp(App)
+  .use(router)
+  .use(createGmapVuePlugin({ dynamicLoad: true }))
+  .mount("#app");
+
+//...
+```
+
 In setup script
 
-```ts title="[your-component].vue" showLineNumbers {5,6,9}
-import { onMounted } from 'vue'
-import { utilities } from '@gmap-vue/v3';
-import { usePluginOptions } from '@gmap-vue/v3/composables';
+```ts title="[your-component].vue - Composition API" showLineNumbers {5,6,9}
+import { onMounted } from "vue";
+import { utilities } from "@gmap-vue/v3";
+import { usePluginOptions } from "@gmap-vue/v3/composables";
 
 const { googleMapsApiInitializer } = utilities;
 const options = usePluginOptions();
 
 onMounted(() => {
   googleMapsApiInitializer(options);
-})
+});
 ```
 
 or in options API
 
-```ts title="[your-component].vue" showLineNumbers {4,8}
-import { onMounted } from 'vue'
-import { utilities } from '@gmap-vue/v3';
+```ts title="[your-component].vue - Options API" showLineNumbers {4,8}
+import { onMounted } from "vue";
+import { utilities } from "@gmap-vue/v3";
 
 const { googleMapsApiInitializer } = utilities;
 
 export default {
   mounted() {
     googleMapsApiInitializer(this.$gmapOptions);
-  }
-}
+  },
+};
 ```
 
 :::info
diff --git a/packages/documentation/docs/vue-3-version/guide/basic-usage/map-reference.md b/packages/documentation/docs/vue-3-version/guide/basic-usage/map-reference.md
index a11a42496..c9943ef44 100644
--- a/packages/documentation/docs/vue-3-version/guide/basic-usage/map-reference.md
+++ b/packages/documentation/docs/vue-3-version/guide/basic-usage/map-reference.md
@@ -55,9 +55,9 @@ If you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `p
 </template>
 
 <script setup lang="ts">
-  import { useMapPromise } from '@gmap-vue/v3/composables';
-  import { onMounted, ref } from 'vue';
-  import { MapLayer } from '@gmap-vue/v3/components';
+  import { useMapPromise } from "@gmap-vue/v3/composables";
+  import { onMounted, ref } from "vue";
+  import { MapLayer } from "@gmap-vue/v3/components";
 
   const mapRef = ref<typeof MapLayer | null>(null);
   const mapPromise = useMapPromise();
@@ -91,14 +91,14 @@ If you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `p
 To safety type a ref of one of the plugin components is to add the following to your `main.ts` file
 
 ```ts title="main.ts" showLineNumbers {11}
-import { ComponentInstance } from 'vue';
-import { MapLayer } from '@gmap-vue/v3/components';
-import { type IMapLayerVueComponentExpose } from '@gmap-vue/v3/interfaces';
+import { ComponentInstance } from "vue";
+import { MapLayer } from "@gmap-vue/v3/components";
+import { type IMapLayerVueComponentExpose } from "@gmap-vue/v3/interfaces";
 
 /**
  * Vue augmentations
  */
-declare module 'vue' {
+declare module "vue" {
   interface ComponentCustomProperties {
     $refs: {
       mapRef: ComponentInstance<typeof MapLayer & IMapLayerVueComponentExpose>;
@@ -116,8 +116,8 @@ declare module 'vue' {
 In this example you can not use the `inject` method to get the mapPromise as we show below
 
 ```ts title="Composition API" showLineNumbers
-import { inject } from 'vue';
-import { $mapPromise } from '@gmap-vue/v3/keys';
+import { inject } from "vue";
+import { $mapPromise } from "@gmap-vue/v3/keys";
 
 const mapPromise = inject($mapPromise);
 ```
diff --git a/packages/documentation/docusaurus.config.ts b/packages/documentation/docusaurus.config.ts
index af2ae4c2c..94b87a0dc 100644
--- a/packages/documentation/docusaurus.config.ts
+++ b/packages/documentation/docusaurus.config.ts
@@ -104,15 +104,15 @@ const config: Config = {
           items: [
             {
               label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+              href: 'https://stackoverflow.com',
             },
             {
               label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
+              href: 'https://discordapp.com/',
             },
             {
               label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
+              href: 'https://twitter.com/',
             },
           ],
         },