From 139cd0ec6c404ae547cd2b281b081efb3c060310 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Tue, 30 May 2023 19:45:23 +0100
Subject: [PATCH 1/3] chore: add github repository link

---
 layouts/default.vue | 30 ++++++++----------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index a303a12..705b618 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,35 +14,21 @@ const color = useColorModeValue('gray.700', 'white');
     <TopNavigation />
     <chakra.div max-w="8xl" mx="auto" d="flex">
       <!-- Sidebar Navigation -->
-      <chakra.div
-        :display="{ base: 'none', lg: 'block' }"
-        position="fixed"
-        z-index="30"
-        bottom="0"
-        top="6rem"
-        left="max(0px, calc(50% - 45rem))"
-        right="auto"
-        width="19.5rem"
-        pb="10"
-        px="8"
-        overflow-y="auto"
-        overscroll-behavior="contain"
-      >
+      <chakra.div :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
+        left="max(0px, calc(50% - 45rem))" right="auto" width="19.5rem" pb="10" px="8" overflow-y="auto"
+        overscroll-behavior="contain">
         <sidebar />
       </chakra.div>
-      <chakra.main
-        :pl="{ base: 4, lg: '19.5rem' }"
-        pt="4"
-        pb="24"
-        :pr="{ base: 4, xl: 16 }"
-        class="chakra-prose"
-      >
+      <chakra.main :pl="{ base: 4, lg: '19.5rem' }" pt="4" pb="24" :pr="{ base: 4, xl: 16 }" class="chakra-prose">
         <chakra.div :mr="{ xl: '15.5rem' }">
           <slot />
 
           <c-h-stack align-items="center" mt="6">
             <c-icon name="info" />
-            <p>Edit this page on GitHub</p>
+            <c-link href="https://github.com/chakra-ui/vue-docs" is-external
+              :_hover="{ color: '#55c392', textDecoration: 'underline' }">
+              Edit this page on GitHub
+            </c-link>
           </c-h-stack>
         </chakra.div>
         <!-- <table-of-contents /> -->

From fec6070d8ba5b958ecffe4678560874801024b9a Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Thu, 22 Jun 2023 07:45:59 +0100
Subject: [PATCH 2/3] chore: rewrite the edit on github structure

---
 components/EditPage.vue | 17 +++++++++++++++++
 config/site-config.ts   |  3 ++-
 layouts/default.vue     | 27 +++++++++++++++++++--------
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 components/EditPage.vue

diff --git a/components/EditPage.vue b/components/EditPage.vue
new file mode 100644
index 0000000..6cc3c55
--- /dev/null
+++ b/components/EditPage.vue
@@ -0,0 +1,17 @@
+<template>
+    <c-h-stack align-items="center" mt="6">
+        <c-icon name="info" />
+        <c-link :href="editUrl ? editUrl : `https://github.com/chakra-ui/vue-docs`" is-external
+            :_hover="{ color: '#55c392', textDecoration: 'underline' }">
+            Edit this page on GitHub
+        </c-link>
+    </c-h-stack>
+</template>
+
+<script setup>
+import { CHStack, CIcon, CLink } from '@chakra-ui/vue-next';
+
+const props = defineProps({
+    editUrl: String
+})
+</script>
\ No newline at end of file
diff --git a/config/site-config.ts b/config/site-config.ts
index d6d3c37..a540ed0 100644
--- a/config/site-config.ts
+++ b/config/site-config.ts
@@ -1,6 +1,7 @@
 const baseUrl = 'https://github.com/chakra-ui/chakra-ui-vue-next';
 
 const siteUrl = 'https://vue.chakra-ui.com';
+const documentationUrl = 'https://github.com/chakra-ui/vue-docs/blob/main';
 const siteDescription =
   'Simple, Modular and Accessible UI Components for your Vue Applications.';
 const siteName = 'Chakra UI Vue | Build accessible Vue apps with speed';
@@ -54,4 +55,4 @@ const siteConfig = {
 };
 
 export default siteConfig;
-export { baseUrl, siteDescription, siteLang, siteName, siteUrl };
+export { baseUrl, documentationUrl, siteDescription, siteLang, siteName, siteUrl };
diff --git a/layouts/default.vue b/layouts/default.vue
index 705b618..9634ee0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,17 +2,34 @@
 import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
 import TopNavigation from '~/components/navigation/top-navigation.vue';
 import Sidebar from '~/components/navigation/sidebar.vue';
+import { documentationUrl } from '~/config/site-config';
+import { useRoute } from 'vue-router';
+
 
 /**
  * Styling
  */
 const color = useColorModeValue('gray.700', 'white');
+
+/**
+ * Edit pages/content on github dynamic route for edit URL at page footer
+ */
+const route = useRoute();
+const { path } = useRoute();
+
+const { data } = await useAsyncData(`content-${path}`, () => {
+  return queryContent().where({ _path: path }).findOne()
+}, { watch: [route] })
+
+const routeSlug = data.value?._id.toString().replace(/:/g, "/").replace(/\s/g, "");
+
+const editUrl = ref<string>(`${documentationUrl}/${routeSlug}`);
 </script>
 
 <template>
   <chakra.div :min-h="['auto', 'auto', '100vh']" w="100%" :color="color">
     <TopNavigation />
-    <chakra.div max-w="8xl" mx="auto" d="flex">
+    <chakra.div :key="path" max-w="8xl" mx="auto" d="flex">
       <!-- Sidebar Navigation -->
       <chakra.div :display="{ base: 'none', lg: 'block' }" position="fixed" z-index="30" bottom="0" top="6rem"
         left="max(0px, calc(50% - 45rem))" right="auto" width="19.5rem" pb="10" px="8" overflow-y="auto"
@@ -23,13 +40,7 @@ const color = useColorModeValue('gray.700', 'white');
         <chakra.div :mr="{ xl: '15.5rem' }">
           <slot />
 
-          <c-h-stack align-items="center" mt="6">
-            <c-icon name="info" />
-            <c-link href="https://github.com/chakra-ui/vue-docs" is-external
-              :_hover="{ color: '#55c392', textDecoration: 'underline' }">
-              Edit this page on GitHub
-            </c-link>
-          </c-h-stack>
+          <EditPage :editUrl="editUrl" />
         </chakra.div>
         <!-- <table-of-contents /> -->
       </chakra.main>

From 6e80ab156c6fd34a90126818793c587e7ca3ccad Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Mon, 26 Jun 2023 09:25:45 +0100
Subject: [PATCH 3/3] feat: Edit this page on github

---
 components/EditPage.vue | 20 ++++++++++++++++----
 layouts/default.vue     | 14 +++-----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/EditPage.vue b/components/EditPage.vue
index 6cc3c55..c235fec 100644
--- a/components/EditPage.vue
+++ b/components/EditPage.vue
@@ -8,10 +8,22 @@
     </c-h-stack>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CHStack, CIcon, CLink } from '@chakra-ui/vue-next';
+import { documentationUrl } from '~/config/site-config';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = computed(() => useRoute());
+const path = computed(() => route.value.path);
+
+console.log(path.value);
+
+const { data, refresh } = await useAsyncData(`content-${path}`, () => {
+    return queryContent().where({ _path: path.value }).findOne()
+}, { watch: [route] })
+
+const routeSlug = data.value?._id.toString().replace(/:/g, "/").replace(/\s/g, "");
+
+const editUrl = ref<string>(`${documentationUrl}/${routeSlug}`);
 
-const props = defineProps({
-    editUrl: String
-})
 </script>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 9634ee0..9d6a46b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,7 +2,6 @@
 import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
 import TopNavigation from '~/components/navigation/top-navigation.vue';
 import Sidebar from '~/components/navigation/sidebar.vue';
-import { documentationUrl } from '~/config/site-config';
 import { useRoute } from 'vue-router';
 
 
@@ -14,16 +13,9 @@ const color = useColorModeValue('gray.700', 'white');
 /**
  * Edit pages/content on github dynamic route for edit URL at page footer
  */
-const route = useRoute();
-const { path } = useRoute();
+const route = computed(() => useRoute());
+const path = computed(() => route.value.path);
 
-const { data } = await useAsyncData(`content-${path}`, () => {
-  return queryContent().where({ _path: path }).findOne()
-}, { watch: [route] })
-
-const routeSlug = data.value?._id.toString().replace(/:/g, "/").replace(/\s/g, "");
-
-const editUrl = ref<string>(`${documentationUrl}/${routeSlug}`);
 </script>
 
 <template>
@@ -40,7 +32,7 @@ const editUrl = ref<string>(`${documentationUrl}/${routeSlug}`);
         <chakra.div :mr="{ xl: '15.5rem' }">
           <slot />
 
-          <EditPage :editUrl="editUrl" />
+          <EditPage />
         </chakra.div>
         <!-- <table-of-contents /> -->
       </chakra.main>