chore: add github repository link

components/EditPage.vue

@@ -0,0 +1,29 @@
+<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 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}`);
+
+</script>

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 };

layouts/default.vue

@@ -2,48 +2,37 @@
 import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
 import TopNavigation from '~/components/navigation/top-navigation.vue';
 import Sidebar from '~/components/navigation/sidebar.vue';
+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 = computed(() => useRoute());
+const path = computed(() => route.value.path);
+
 </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"
-        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-h-stack>
+          <EditPage />
         </chakra.div>
         <!-- <table-of-contents /> -->
       </chakra.main>