From 0a2a788ae5d9e5c702b2914ce1f8426fad4aa4e6 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 14 Jan 2023 21:00:07 +0530
Subject: [PATCH] update docs

---
 docs/components/ModalDemo.vue | 13 +++---
 docs/config/app-configs.md    | 76 ++++++++++++++++++-----------------
 docs/guide/using-vue.md       | 18 ++++-----
 3 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/docs/components/ModalDemo.vue b/docs/components/ModalDemo.vue
index 85d30144d98e..93dbab8f641f 100644
--- a/docs/components/ModalDemo.vue
+++ b/docs/components/ModalDemo.vue
@@ -4,12 +4,10 @@ const showModal = ref(false)
 </script>
 
 <template>
-  <button class="modal-button" @click="showModal = true">
-    Show Modal
-  </button>
+  <button class="modal-button" @click="showModal = true">Show Modal</button>
 
-  <teleport to="body">
-    <transition name="modal">
+  <Teleport to="body">
+    <Transition name="modal">
       <div v-show="showModal" class="modal-mask">
         <div class="modal-container">
           <p>Hello from the modal!</p>
@@ -20,8 +18,8 @@ const showModal = ref(false)
           </div>
         </div>
       </div>
-    </transition>
-  </teleport>
+    </Transition>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -72,6 +70,7 @@ const showModal = ref(false)
 .modal-leave-to {
   opacity: 0;
 }
+
 .modal-enter-from .modal-container,
 .modal-leave-to .modal-container {
   transform: scale(1.1);
diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
index 6f54d338c6f9..73ee2d41e82a 100644
--- a/docs/config/app-configs.md
+++ b/docs/config/app-configs.md
@@ -298,10 +298,47 @@ VitePress build hooks allow you to add new functionality and behaviors to your w
 - Sitemap
 - Search Indexing
 - PWA
+- Teleports
+
+### buildEnd
+
+- Type: `(siteConfig: SiteConfig) => Awaitable<void>`
+
+`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.
+
+```ts
+export default {
+  async buildEnd(siteConfig) {
+    // ...
+  }
+}
+```
+
+### postRender
+
+- Type: `(context: SSGContext) => Awaitable<SSGContext | void>`
+
+`postRender` is a build hook, called when SSG rendering is done. It will allow you to handle the teleports content during SSG.
+
+```ts
+export default {
+  async postRender(context) {
+    // ...
+  }
+}
+```
+
+```ts
+interface SSGContext {
+  content: string
+  teleports?: Record<string, string>
+  [key: string]: any
+}
+```
 
 ### transformHead
 
-- Type: `(ctx: TransformContext) => Awaitable<HeadConfig[]>`
+- Type: `(context: TransformContext) => Awaitable<HeadConfig[]>`
 
 `transformHead` is a build hook to transform the head before generating each page. It will allow you to add head entries that cannot be statically added to your VitePress config. You only need to return extra entries, they will be merged automatically with the existing ones.
 
@@ -311,7 +348,7 @@ Don't mutate anything inside the `ctx`.
 
 ```ts
 export default {
-  async transformHead(ctx) {
+  async transformHead(context) {
     // ...
   }
 }
@@ -367,38 +404,3 @@ export default {
   }
 }
 ```
-
-### rendered
-
-- Type: `(context: SSGContext) => Awaitable<SSGContext | void>`
-
-`rendered` is a build hook, called when SSG rendering is done. It will allow you to handling the teleports content during SSG.
-
-```ts
-export default {
-  async rendered(context) {
-  }
-}
-```
-
-```ts
-interface SSGContext {
-  content: string
-  teleports?: Record<string, string>
-  [key: string]: any
-}
-```
-
-### buildEnd
-
-- Type: `(siteConfig: SiteConfig) => Awaitable<void>`
-
-`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.
-
-```ts
-export default {
-  async buildEnd(siteConfig) {
-    // ...
-  }
-}
-```
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 56b9575b4505..94b3126224bb 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -42,9 +42,9 @@ You can use the [`useData` helper](./api#usedata) in a `<script>` block and expo
 
 ```html
 <script setup>
-import { useData } from 'vitepress'
+  import { useData } from 'vitepress'
 
-const { page } = useData()
+  const { page } = useData()
 </script>
 
 <pre>{{ page }}</pre>
@@ -261,13 +261,9 @@ export default {
 
 - [Vue.js > Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
 
-## Useing Teleports
+## Using Teleports
 
-Vitepress currently has SSG support for teleports to body only. For other targets, you can wrap them inside the built-in `<ClientOnly>` component or inject the teleport markup into the correct location in your final page HTML through [rendered](../config/app-configs#rendered).
-
-<script setup>
-import ModalDemo from '../components/ModalDemo.vue'
-</script>
+Vitepress currently has SSG support for teleports to body only. For other targets, you can wrap them inside the built-in `<ClientOnly>` component or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../config/app-configs#postrender).
 
 <ModalDemo />
 
@@ -279,8 +275,12 @@ import ModalDemo from '../components/ModalDemo.vue'
 <ClientOnly>
   <Teleport to="#modal">
     <div>
-      //...
+      // ...
     </div>
   </Teleport>
 </ClientOnly>
 ```
+
+<script setup>
+import ModalDemo from '../components/ModalDemo.vue'
+</script>