feat: client redirects at vue router level

cypress/e2e/theme-yun/redirect.spec.ts

@@ -0,0 +1,25 @@
+context('Client Redirect', {
+  baseUrl: Cypress.env('theme-yun'),
+}, () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('/redirect/old1', () => {
+    cy.visit('/redirect/old1')
+
+    cy.url().should('eq', `${Cypress.env('theme-yun')}posts/redirect`)
+  })
+
+  it('/redirect/old2', () => {
+    cy.visit('/redirect/old2')
+
+    cy.url().should('eq', `${Cypress.env('theme-yun')}posts/redirect`)
+  })
+
+  it('/foo', () => {
+    cy.visit('/foo')
+
+    cy.url().should('eq', `${Cypress.env('theme-yun')}about`)
+  })
+})

demo/yun/.valaxy/typed-router.d.ts

@@ -87,6 +87,7 @@ declare module 'vue-router/auto/routes' {
     '/posts/lots-of-images': RouteRecordInfo<'/posts/lots-of-images', '/posts/lots-of-images', Record<never, never>, Record<never, never>>,
     '/posts/markdown': RouteRecordInfo<'/posts/markdown', '/posts/markdown', Record<never, never>, Record<never, never>>,
     '/posts/post-updated': RouteRecordInfo<'/posts/post-updated', '/posts/post-updated', Record<never, never>, Record<never, never>>,
+    '/posts/redirect': RouteRecordInfo<'/posts/redirect', '/posts/redirect', Record<never, never>, Record<never, never>>,
     '/posts/test': RouteRecordInfo<'/posts/test', '/posts/test', Record<never, never>, Record<never, never>>,
     '/posts/test-images': RouteRecordInfo<'/posts/test-images', '/posts/test-images', Record<never, never>, Record<never, never>>,
     '/posts/test-tags': RouteRecordInfo<'/posts/test-tags', '/posts/test-tags', Record<never, never>, Record<never, never>>,

demo/yun/pages/posts/redirect.md

@@ -0,0 +1,6 @@
+---
+title: 重定向
+from:
+  - /redirect/old1
+  - /redirect/old2
+---

demo/yun/site.config.ts

@@ -145,11 +145,14 @@ export default defineSiteConfig({
     enable: true,
   },
 
-  redirects: [
-    {
-      from: '/foo',
-      to: '/about',
-    },
-  ],
+  redirects: {
+    useVueRouter: true,
+    rules: [
+      {
+        from: '/foo',
+        to: '/about',
+      },
+    ],
+  },
 
 })

docs/pages/guide/config/index.md

@@ -575,56 +575,98 @@ Examples can be found in [Partial Content Encryption](/examples/partial-content-
 
 ### Client Redirects {lang="en"}
 
+```ts
+interface Redirects {
+  // https://router.vuejs.org/guide/essentials/redirect-and-alias.html
+  // Whether to use VueRouter, default is true
+  useVueRouter?: boolean
+  rules?: RedirectRule[]
+}
+interface RedirectRule {
+  // Redirect original route
+  from: string | string[]
+  // Redirect target route
+  to: string
+}
+```
+
 ::: zh-CN
-这会生成额外的 HTML 页面，用与跳转到 valaxy 中已有的页面。
+示例：
 :::
 
 ::: en
-This will generate additional HTML pages, used to jump to the valaxy's existing pages.
+For example:
 :::
 
-::: tip
-
-<div lang="zh-CN">
-客户端重定向只在 SSG build 时启用
-</div>
+```ts
+// site.config.ts
+export default defineSiteConfig({
+  redirects: {
+    useVueRouter: true,
+    rules: [
+      {
+        from: ['/foo', '/bar'],
+        to: '/about',
+      },
+      {
+        from: '/v1/about',
+        to: '/about',
+      },
+    ]
+  },
+})
+```
 
-<div lang="en">
-Client redirects will only be enabled in SSG build
-</div>
+::: zh-CN
+`/foo`, `/bar`, `/v1/about` 这些路由会被重定向到 `/about`。
+:::
 
+::: en
+`/foo`, `/bar`, `/v1/about` these routes will be redirected to `/about`。
 :::
 
 ::: zh-CN
-例如：
+你也可以在 Front Matter 中配置：
 :::
 
 ::: en
-For example:
+You can also set it in the Front Matter:
 :::
 
-```ts
-// site.config.ts
-export default defineSiteConfig({
-  redirects: [
-    {
-      from: ['/foo', '/bar'],
-      to: '/about',
-    },
-    {
-      from: '/v1/about',
-      to: '/about',
-    },
-  ],
-})
+```md
+<!-- pages/posts/redirect.md -->
+---
+from:
+  - /redirect/old1
+  - /redirect/old2
+---
+```
+
+```md
+<!-- pages/posts/redirect.md -->
+---
+from: /v1/redirect
+---
 ```
 
 ::: zh-CN
-`/foo`, `/bar`, `/v1/about` 这些路由会被重定向到 `/about`。
+`/redirect/old1`, `/redirect/old2`, `/v1/redirect` 这些路由会被重定向到 `/posts/redirect`。
 :::
 
 ::: en
-`/foo`, `/bar`, `/v1/about` these routes will be redirected to `/about`。
+`/redirect/old1`, `/redirect/old2`, `/v1/redirect` these routes will be redirected to `/posts/redirect`。
+:::
+
+::: tip
+
+<div lang="zh-CN">
+在 SSG 构建时，如果 useVueRouter 为 false，则会为每一个源路由生成一个 html 文件
+</div>
+
+<div lang="en">
+When building SSG, if useVueRouter is false, an html file will be generated for each original route
+</div>
+
 :::
 
 ### 图片预览（Medium Zoom） {lang="zh-CN"}

packages/valaxy/client/main.ts

@@ -21,6 +21,8 @@ import 'uno.css'
 
 import setupMain from './setup/main'
 
+const valaxyConfig = initValaxyConfig()
+
 /**
  * register global components
  * @param ctx
@@ -29,9 +31,13 @@ export function registerComponents(ctx: ViteSSGContext) {
   ctx.app.component('AppLink', AppLink)
 }
 
+const { redirectRoutes, useVueRouter } = valaxyConfig.value.runtimeConfig.redirects
+if (useVueRouter)
+  routes.push(...redirectRoutes)
+
 // fix chinese path
 routes.forEach((i) => {
-  i.children?.forEach((j) => {
+  i?.children?.forEach((j) => {
     j.path = encodeURI(j.path)
   })
 })
@@ -66,10 +72,10 @@ export const createApp = ViteSSG(
   (ctx) => {
     // app-level provide
     const { app } = ctx
-    const config = initValaxyConfig()
-    app.provide(valaxyConfigSymbol, config)
+
+    app.provide(valaxyConfigSymbol, valaxyConfig)
 
     registerComponents(ctx)
-    setupMain(ctx, config)
+    setupMain(ctx, valaxyConfig)
   },
 )

packages/valaxy/node/build.ts

@@ -76,12 +76,14 @@ export async function postProcessForSSG(options: ResolvedValaxyOptions) {
     }
   }
 
-  await generateClientRedirects(options)
+  if (!options.config.siteConfig.redirects?.useVueRouter)
+    await generateClientRedirects(options)
 }
 
 export async function generateClientRedirects(options: ResolvedValaxyOptions) {
+  consola.info('generate client redirects...')
   const outputPath = resolve(options.userRoot, 'dist')
-  const redirectRules = collectRedirects(options.config.siteConfig?.redirects ?? [])
+  const redirectRules = collectRedirects(options.redirects)
 
   const task = redirectRules.map(async (rule) => {
     const fromPath = join(outputPath, `${rule.from}.html`)

packages/valaxy/node/config/site.ts

@@ -97,6 +97,11 @@ export const defaultSiteConfig: SiteConfig = {
     salt: webcrypto.getRandomValues(new Uint8Array(16)),
     iv: webcrypto.getRandomValues(new Uint8Array(16)),
   },
+
+  redirects: {
+    useVueRouter: true,
+    rules: [],
+  },
 }
 
 /**

packages/valaxy/node/config/valaxy.ts

@@ -26,7 +26,13 @@ export const defaultValaxyConfig: ValaxyNodeConfig = {
   // markdown: {
   //   excerpt: '<!-- more -->',
   // },
-  runtimeConfig: { addons: {} },
+  runtimeConfig: {
+    addons: {},
+    redirects: {
+      useVueRouter: true,
+      redirectRoutes: [],
+    },
+  },
 
   modules: {
     rss: {

packages/valaxy/node/options.ts

@@ -8,7 +8,7 @@ import { ensureSuffix, uniq } from '@antfu/utils'
 import defu from 'defu'
 import { blue, cyan, magenta, yellow } from 'picocolors'
 import consola from 'consola'
-import type { DefaultTheme, RuntimeConfig } from 'valaxy/types'
+import type { DefaultTheme, RedirectItem, RuntimeConfig } from 'valaxy/types'
 import { resolveImportPath } from './utils'
 import {
   defaultValaxyConfig,
@@ -23,6 +23,7 @@ import { parseAddons } from './utils/addons'
 import { getThemeRoot } from './utils/theme'
 import { resolveSiteConfig } from './config/site'
 import { countPerformanceTime } from './utils/performance'
+import { collectRedirects } from './utils/clientRedirects'
 
 // for cli entry
 export interface ValaxyEntryOptions {
@@ -88,6 +89,10 @@ export interface ResolvedValaxyOptions<ThemeConfig = DefaultTheme.Config> {
    * Record<package-name, OptionResolver>
    */
   addons: ValaxyAddonResolver[]
+  /**
+   * Collect redirect rule
+   */
+  redirects: RedirectItem[]
 }
 
 export interface ValaxyServerOptions {
@@ -137,6 +142,10 @@ export async function processValaxyOptions(valaxyOptions: ResolvedValaxyOptions,
     ...config,
     runtimeConfig: {
       addons: {},
+      redirects: {
+        useVueRouter: true,
+        redirectRoutes: [],
+      },
     },
   }
   valaxyOptions.addons = addons
@@ -190,6 +199,8 @@ export async function resolveOptions(
 
   const { config: themeConfig, configFile: themeConfigFile } = resolvedTheme
 
+  const redirects = collectRedirects(siteConfig.redirects?.rules)
+
   // merge with valaxy
   userValaxyConfig = defu<ValaxyNodeConfig, any>({ siteConfig }, { themeConfig }, userValaxyConfig)
 
@@ -213,13 +224,20 @@ export async function resolveOptions(
     theme,
     config: {
       ...userValaxyConfig,
-      runtimeConfig: { addons: {} },
+      runtimeConfig: {
+        addons: {},
+        redirects: {
+          useVueRouter: true,
+          redirectRoutes: [],
+        },
+      },
     },
     configFile: configFile || '',
     siteConfigFile: siteConfigFile || '',
     themeConfigFile: themeConfigFile || '',
     pages: pages.sort(),
     addons: [],
+    redirects,
   }
   debug(valaxyOptions)
 

packages/valaxy/node/plugins/valaxy.ts

@@ -10,6 +10,7 @@ import { defu } from 'defu'
 import pascalCase from 'pascalcase'
 import type { DefaultTheme, PageDataPayload, Pkg, SiteConfig } from 'valaxy/types'
 import { dim, yellow } from 'picocolors'
+import type { RouteRecordRaw } from 'vue-router'
 import { defaultSiteConfig, mergeValaxyConfig, resolveSiteConfig, resolveUserThemeConfig } from '../config'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
 import { processValaxyOptions, resolveOptions, resolveThemeValaxyConfig } from '../options'
@@ -19,6 +20,22 @@ import type { ValaxyNodeConfig } from '../types'
 import { checkMd } from '../markdown/check'
 import { vLogger } from '../logger'
 import { countPerformanceTime } from '../utils/performance'
+import { isProd } from '../utils/env'
+
+function generateConfig(options: ResolvedValaxyOptions) {
+  const routes = options.redirects.map<RouteRecordRaw>((redirect) => {
+    return {
+      path: redirect.from,
+      redirect: redirect.to,
+    }
+  })
+  options.config.runtimeConfig.redirects = {
+    useVueRouter: isProd() ? options.config.siteConfig.redirects!.useVueRouter! : true,
+    redirectRoutes: routes,
+  }
+
+  return `export default ${JSON.stringify(JSON.stringify(options.config))}`
+}
 
 /**
  * for /@valaxyjs/styles
@@ -164,7 +181,7 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
     load(id) {
       if (id === '/@valaxyjs/config')
         // stringify twice for \"
-        return `export default ${JSON.stringify(JSON.stringify(valaxyConfig))}`
+        return generateConfig(options)
 
       if (id === '/@valaxyjs/context') {
         return `export default ${JSON.stringify(JSON.stringify({