feat(docs): add edit page url and prev and next links

Author: koca

website/package.json

@@ -40,7 +40,7 @@
     "vite-plugin-components": "^0.8.3",
     "vite-plugin-icons": "^0.3.3",
     "vite-plugin-md": "^0.6.0",
-    "vite-plugin-mdx-vue": "^1.3.0",
+    "vite-plugin-mdx-vue": "^1.6.0",
     "vite-plugin-pages": "^0.9.2",
     "vite-ssg": "^0.9.2"
   }

website/src/docs-theme/components/AppPagination.vue

@@ -0,0 +1,102 @@
+<script lang="tsx">
+import { defineComponent, renderSlot, SetupContext } from 'vue'
+
+type PaginationLinkProps = {
+  href?: string
+  label?: string
+} & {
+  [key: string]: any
+}
+
+const PaginationLink = (
+  { href, label, ...rest }: PaginationLinkProps,
+  { slots }: SetupContext
+) => (
+  <router-link to={href} custom>
+    {
+      // converted router-link v-slot to jsx
+      // https://router.vuejs.org/api/#v-slot-api-3-1-0
+    }
+    {({ href, navigate }: any) => (
+      <c-link
+        href={href}
+        onClick={navigate}
+        _hover={{
+          textDecor: 'none',
+        }}
+        flex="1"
+        borderRadius="md"
+        {...rest}
+      >
+        <c-text fontSize="sm" px="2">
+          {label}
+        </c-text>
+        <c-text mt="1" fontSize="lg" fontWeight="bold" color="teal.400">
+          {renderSlot(slots, 'default')}
+        </c-text>
+      </c-link>
+    )}
+  </router-link>
+)
+
+export default defineComponent({
+  props: {
+    previous: Object,
+    next: Object,
+  },
+  setup(props) {
+    return () => {
+      return (
+        <c-simple-grid
+          as="nav"
+          aria-label="Pagination"
+          spacing="40px"
+          my="64px"
+          columns={2}
+        >
+          {props.previous ? (
+            <PaginationLink
+              textAlign="left"
+              label="Previous"
+              href={props.previous.path}
+              rel="prev"
+            >
+              <c-icon
+                name="chevron-left"
+                mr="1"
+                fontSize="1.2em"
+                lineHeight="1em"
+                d="inline-block"
+                verticalAlign="middle"
+              ></c-icon>
+              {props.previous.title}
+            </PaginationLink>
+          ) : (
+            <div />
+          )}
+          {props.next ? (
+            <PaginationLink
+              textAlign="right"
+              label="Next"
+              href={props.next.path}
+              rel="next"
+            >
+              {props.next.title}
+              <c-icon
+                name="chevron-right"
+                ml="1"
+                fontSize="1.2em"
+                lineHeight="1em"
+                d="inline-block"
+                verticalAlign="middle"
+              ></c-icon>
+            </PaginationLink>
+          ) : (
+            <div />
+          )}
+        </c-simple-grid>
+      )
+    }
+  },
+})
+</script>

website/src/docs-theme/layout/LayoutMdx.vue

@@ -4,6 +4,12 @@
     <template #sidebar>
       <app-sidebar :routes="routes" />
     </template>
+    <template #pagination>
+      <app-pagination
+        :previous="routeContext.prevRoute"
+        :next="routeContext.nextRoute"
+      ></app-pagination>
+    </template>
   </page-container>
 </template>
 
@@ -12,20 +18,35 @@ import { defineComponent, PropType } from 'vue'
 import { getHeadings } from '@/docs-theme/utils/get-headings'
 import { getRoutes } from '@/docs-theme/utils/get-routes'
 import { useRoute } from 'vue-router'
+import { getRouteContext } from '@/docs-theme/utils/get-route-context'
+import {
+  findRouteByPath,
+  removeFromLast,
+} from '@/docs-theme/utils/find-route-by-path'
 
 export default defineComponent({
   props: {
     frontmatter: {
-      type: Object as PropType<{ title: string }>,
+      // prettier-ignore
+      type: Object as PropType<{ title: string, slug: string }>,
+      default: () => ({}),
     },
   },
   setup(props, { slots }) {
     const { path } = useRoute()
     const routes = getRoutes(path)
     const headings = getHeadings(slots)
+
+    const route = findRouteByPath(
+      removeFromLast(props.frontmatter.slug, '#'),
+      routes
+    )
+    const routeContext = getRouteContext(route, routes)
+
     return {
       headings,
       routes,
+      routeContext,
     }
   },
 })

website/src/docs-theme/utils/find-route-by-path.ts

@@ -0,0 +1,21 @@
+import { RouteItem } from './get-route-context'
+
+export function removeFromLast(path: string, key: string) {
+  const index = path.lastIndexOf(key)
+  return index === -1 ? path : path.substring(0, index)
+}
+
+// @ts-ignore
+export function findRouteByPath(path: string, routes: RouteItem[]): RouteItem {
+  for (const route of routes) {
+    if (route.path && removeFromLast(route.path, '.') === path) {
+      return route
+    }
+
+    const childPath = route.routes && findRouteByPath(path, route.routes)
+
+    if (childPath) {
+      return childPath
+    }
+  }
+}

website/src/main.ts

@@ -90,6 +90,14 @@ export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
           path: `<path fill="currentColor" d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path>`,
           viewBox: '0 0 1024 1024',
         },
+        chevronLeft: {
+          path: `<path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>`,
+          viewBox: '0 0 24 24',
+        },
+        chevronRight: {
+          path: `<path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>`,
+          viewBox: '0 0 24 24',
+        },
       },
     },
   })

website/vite.config.ts

@@ -15,6 +15,20 @@ import remarkAutolinkHeadings from 'remark-autolink-headings'
 // @ts-ignore
 import remarkSlug from 'remark-slug'
 
+const getEditPageUrl = (resourcePath: string) => {
+  const EDIT_PAGE_PATH =
+    'https://github.com/chakra-ui/chakra-ui-vue-next/edit/develop/website/'
+  const editUrl = EDIT_PAGE_PATH + resourcePath
+  return editUrl
+}
+
+const getPageSlug = (resourcePath: string) => {
+  const { dir, name } = path.parse(resourcePath)
+  const dirPath = dir.replace('src/pages', '')
+  const fullPath = path.join(...[dirPath, name])
+  return fullPath
+}
+
 /**
  *
  * @param html Page HTML
@@ -58,6 +72,18 @@ const config: UserConfig = {
         )
         return options
       },
+      extendFrontmatter: {
+        process: (_mdxContent, frontmatter) => {
+          const editUrl = getEditPageUrl(frontmatter.__resourcePath)
+          const slug = getPageSlug(frontmatter.__resourcePath)
+
+          return {
+            ...frontmatter,
+            editUrl,
+            slug,
+          }
+        },
+      },
     }),
     Pages({
       extensions: ['vue', 'mdx'],

yarn.lock

@@ -13978,13 +13978,13 @@ vite-plugin-md@^0.6.0:
     gray-matter "^4.0.2"
     markdown-it "^12.0.4"
 
-vite-plugin-mdx-vue@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-mdx-vue/-/vite-plugin-mdx-vue-1.3.0.tgz#dd75cc0375c47797679110b26d0666877bf118c7"
-  integrity sha512-cHdi/UH+xIqZaoLmYMtNBrKuEHUMXKa7qtLuEZ8XD4ExBoJ79ZGGovJuWwjBr5Babm/CYHr4RRFgMnL5YZxaww==
+vite-plugin-mdx-vue@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-mdx-vue/-/vite-plugin-mdx-vue-1.6.0.tgz#e2e580d2c86b5dd172281e73ba4b6c326a14afac"
+  integrity sha512-blUHqDQVe4gAf3YL0H07qCvFyMcstQM4v2XBJILQ8Nh7xrLlJi/cpjWJZPI1K5/EZ9xD7G181ubGMQr9WeGc5A==
   dependencies:
     "@vue/server-renderer" "^3.0.9"
-    vue-mdx-bundler "1.3.0"
+    vue-mdx-bundler "1.6.0"
     xdm "^1.5.1"
 
 vite-plugin-pages@^0.9.2:
@@ -14109,10 +14109,10 @@ vue-jest@^5.0.0-alpha.7:
     extract-from-css "^0.4.4"
     tsconfig "^7.0.0"
 
-vue-mdx-bundler@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/vue-mdx-bundler/-/vue-mdx-bundler-1.3.0.tgz#c08e0cbe3fc21a314d3d1b72d7bfb2377540dcba"
-  integrity sha512-pIteIYX5ez2FmI0dol5p1XgiEzHacAPSFyAOdRmj+HNI/ZeyEKbN50OXCNqgCal/ACA/ZCaRBX0lZ7+arCn9Aw==
+vue-mdx-bundler@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vue-mdx-bundler/-/vue-mdx-bundler-1.6.0.tgz#1851b17dbb30eea39538c35d0c793aec0e06ddc4"
+  integrity sha512-PIjzktZgylZGBbJbr5BkDpJdK3XYT4Cz5kglB7lxi0qrb5+qqhcS8gvihZLApProtMiTaPeh8C8yK6au+somEw==
   dependencies:
     "@babel/core" "^7.13.16"
     "@babel/runtime" "^7.13.17"