feat: optimizing redirect interactions

.vitepress/config/shared.mts

@@ -90,6 +90,9 @@ export const shared = defineConfig({
     ]
   },
   transformPageData(pageData) {
+    if (process.env.NODE_ENV !== 'production') {
+      return
+    }
     pageData.frontmatter.head ??= []
     pageData.frontmatter.head.push([
       'script',

.vitepress/theme/components/Api/Results.vue

@@ -18,10 +18,11 @@
           />
           {{ code }}
         </div>
-        <div class="p-2 max-h-[500px] overflow-auto">
+        <div class="p-2 max-h-[320px] overflow-auto">
           <ClientOnly>
             <vue-json-pretty
               showIcon
+              :deep="1"
               :data="item"
               :theme="isDark ? 'dark' : 'light'"
             />

.vitepress/theme/components/Layout.vue

@@ -3,6 +3,9 @@
     <template #doc-before>
       <DocInfo />
     </template>
+    <template #not-found>
+      <NotFound />
+    </template>
   </Layout>
 </template>
 
@@ -11,6 +14,7 @@ import { watch } from 'vue'
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import DocInfo from './DocInfo/index.vue'
+import NotFound from './NotFound.vue'
 
 const { isDark } = useData()
 const { Layout } = DefaultTheme

.vitepress/theme/components/NotFound.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="h-full pt-[36vh] flex flex-col items-center justify-center">
+    <span class="daisy-loading daisy-loading-ball daisy-loading-lg" />
+    <a class="text-sm" :href="target">redirecting...</a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter, withBase } from 'vitepress'
+import { redirectRouteMap } from '../../config/routes.mts'
+import { computed } from 'vue'
+
+const router = useRouter()
+
+const redirectTo = (path: string) => {
+  const { search, hash } = location
+  const target = withBase(`${path}${search}${hash}`)
+  router.go(target), location.replace(target)
+}
+
+const target = computed(() => {
+  const pathname = router.route.path.replace(/\/$/g, '')
+  if (redirectRouteMap[pathname]) {
+    return redirectRouteMap[pathname]
+  }
+  if (pathname.startsWith('/en/')) {
+    return pathname.replace('/en/', '/')
+  }
+  return '/'
+})
+
+if (!import.meta.env.SSR) {
+  document.title = 'Redirecting...'
+  redirectTo(target.value)
+}
+</script>

.vitepress/theme/index.ts

@@ -1,9 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
-import { withBase } from 'vitepress'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import Glossary from './components/Glossary.vue'
-import { redirectRouteMap } from '../config/routes.mts'
 import Layout from './components/Layout.vue'
 import API from './components/Api/index.vue'
 import APIRequest from './components/Api/Request/index.vue'
@@ -13,25 +11,10 @@ import './style.css'
 export default {
   extends: DefaultTheme,
   Layout,
-  enhanceApp({ app, router }) {
+  enhanceApp({ app }) {
     app.component('API', API)
     app.component('ApiRequest', APIRequest)
     app.component('ApiResults', APIResults)
     app.component('Glossary', Glossary)
-
-    if (import.meta.env.SSR) return
-
-    const redirectTo = (path: string) => {
-      const { search, hash } = location
-      const target = withBase(`${path}${search}${hash}`)
-      router.go(target), location.replace(target)
-    }
-
-    const pathname = location.pathname.replace(/\/$/g, '')
-    if (redirectRouteMap[pathname]) {
-      redirectTo(redirectRouteMap[pathname])
-    } else if (pathname.startsWith('/en/')) {
-      redirectTo(pathname.replace('/en/', '/'))
-    }
   }
 } satisfies Theme