valaxy 0.27.0 → 0.28.0-beta.2

package/client/main.ts

@@ -1,12 +1,15 @@
+import type { ValaxySSGContext } from './setups'
+
 import { dataSymbol, initValaxyConfig, valaxyConfigSymbol } from 'valaxy'
 import { setupLayouts } from 'virtual:generated-layouts'
-import { ViteSSG } from 'vite-ssg'
+import { createSSRApp, createApp as vueCreateApp } from 'vue'
+import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
 import { routes as autoRoutes } from 'vue-router/auto-routes'
 
 // import App from '/@valaxyjs/App.vue'
 import App from './App.vue'
-
 import { initData } from './app/data'
+import ClientOnly from './components/ClientOnly'
 
 import setupMain from './setup/main'
 import { setupValaxyDevTools } from './utils/dev'
@@ -32,6 +35,45 @@ routes.forEach((i) => {
   })
 })
 
+/**
+ * Flatten nested routes so that `setupLayouts` can wrap every leaf route.
+ *
+ * `vue-router/vite` (file-based routing) generates nested route trees for subdirectories
+ * (e.g. `pages/zh/guide/foo.md` → `{ path: '/zh', children: [{ path: 'guide', children: … }] }`).
+ * `vite-plugin-vue-layouts-next`' `setupLayouts` only wraps **top-level** routes,
+ * so nested children would miss the layout wrapper entirely.
+ *
+ * This function extracts every leaf (component-bearing or redirect) route into a flat
+ * top-level entry with a fully-resolved path, preserving its `meta`.
+ */
+function flattenRoutes(routes: any[]): any[] {
+  const flat: any[] = []
+  function walk(route: any, parentPath: string) {
+    const fullPath = parentPath
+      ? `${parentPath.replace(/\/$/, '')}/${route.path.replace(/^\//, '')}`
+      : route.path
+
+    if (route.component || route.components || route.redirect) {
+      flat.push({
+        ...route,
+        path: fullPath,
+        children: undefined,
+      })
+    }
+
+    if (route.children) {
+      for (const child of route.children) {
+        walk(child, fullPath)
+      }
+    }
+  }
+
+  for (const route of routes) {
+    walk(route, '')
+  }
+  return flat
+}
+
 // filter children recursive
 function filterDraft(routes: any[]) {
   return routes.filter((i) => {
@@ -43,39 +85,95 @@ function filterDraft(routes: any[]) {
 }
 
 // not filter hide for ssg
-const routesWithLayout = setupLayouts(import.meta.env.DEV
-  ? routes
-  : filterDraft(routes),
+export const routesWithLayout = setupLayouts(import.meta.env.DEV
+  ? flattenRoutes(routes)
+  : filterDraft(flattenRoutes(routes)),
 )
 
 if (import.meta.env.DEV)
   setupValaxyDevTools()
 
-// https://github.com/antfu/vite-ssg
-export const createApp = ViteSSG(
-  App,
-  {
+interface CreateValaxyAppOptions {
+  routePath?: string
+  createHead?: () => any
+  hydrate?: boolean
+}
+
+export function createValaxyApp(options: CreateValaxyAppOptions = {}): ValaxySSGContext {
+  const { routePath, createHead, hydrate } = options
+  const isSSR = import.meta.env.SSR
+
+  // Use createSSRApp for server-side rendering and for client-side hydration
+  // of SSG pre-rendered pages. vueCreateApp is only for pure SPA mode.
+  const app = (isSSR || hydrate) ? createSSRApp(App) : vueCreateApp(App)
+
+  const history = isSSR
+    ? createMemoryHistory(import.meta.env.BASE_URL)
+    : createWebHistory(import.meta.env.BASE_URL)
+
+  const router = createRouter({
+    history,
     routes: routesWithLayout,
-    base: import.meta.env.BASE_URL,
     scrollBehavior(to, from) {
       if (to.path !== from.path)
         return { top: 0 }
     },
-  },
-  (ctx) => {
-    // app-level provide
-    const { app, router } = ctx
+  })
 
-    const data = initData(router)
-    app.provide(dataSymbol, data)
+  const head = createHead ? createHead() : undefined
 
-    // Note: DataLoaderPlugin is not compatible with vite-ssg because vite-ssg
-    // calls this callback BEFORE app.use(router), but DataLoaderPlugin requires
-    // the router to be installed first for useRouter()/useRoute() to work.
-    // The page data is loaded via route.meta.frontmatter instead.
+  app.use(router)
+  if (head)
+    app.use(head)
+  app.component('ClientOnly', ClientOnly)
 
-    app.provide(valaxyConfigSymbol, valaxyConfig)
+  // SSR render callback management
+  const appRenderCallbacks: (() => void)[] = []
 
-    setupMain(ctx, valaxyConfig)
-  },
-)
+  const ctx: ValaxySSGContext = {
+    app,
+    router,
+    head,
+    routes: routesWithLayout,
+    isClient: !isSSR,
+    initialState: {},
+    onSSRAppRendered: isSSR ? (cb: () => void) => appRenderCallbacks.push(cb) : () => {},
+    triggerOnSSRAppRendered: () => Promise.all(appRenderCallbacks.map(cb => cb())),
+    routePath,
+  }
+
+  // Restore serialised state on client
+  if (!isSSR && typeof window !== 'undefined' && (window as any).__INITIAL_STATE__) {
+    ctx.initialState = JSON.parse((window as any).__INITIAL_STATE__)
+  }
+
+  // app-level provide
+  const data = initData(router)
+  app.provide(dataSymbol, data)
+  app.provide(valaxyConfigSymbol, valaxyConfig)
+
+  setupMain(ctx, valaxyConfig)
+
+  return ctx
+}
+
+// Client-side auto-mount
+if (!import.meta.env.SSR) {
+  ;(async () => {
+    const { createHead } = await import('@unhead/vue/client')
+    // Detect SSG pre-rendered content for proper hydration
+    const appEl = document.getElementById('app')
+    const hydrate = !!(appEl && appEl.innerHTML.trim())
+    const { app, router } = createValaxyApp({ createHead, hydrate })
+    await router.isReady()
+    app.mount('#app', hydrate)
+  })()
+}
+
+/**
+ * Legacy compatibility export for vite-ssg.
+ * vite-ssg expects `createApp(routePath)` returning `{ app, router, ... }`.
+ * This wraps `createValaxyApp` to match that signature so
+ * `--ssg-engine vite-ssg` continues to work.
+ */
+export const createApp = (routePath?: string) => createValaxyApp({ routePath })

package/client/modules/components.ts

@@ -1,4 +1,4 @@
-import type { ViteSSGContext } from 'vite-ssg'
+import type { ValaxySSGContext } from '../setups'
 
 import AppLink from '../components/AppLink.vue'
 import ValaxyTranslate from '../components/builtin/ValaxyTranslate.vue'
@@ -7,7 +7,7 @@ import ValaxyTranslate from '../components/builtin/ValaxyTranslate.vue'
  * register global components
  * @param ctx
  */
-export function registerGlobalComponents(ctx: ViteSSGContext) {
+export function registerGlobalComponents(ctx: ValaxySSGContext) {
   ctx.app.component('AppLink', AppLink)
   ctx.app.component('VT', ValaxyTranslate)
 }

package/client/modules/floating-vue.ts

@@ -1,11 +1,10 @@
 import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
-import type { ViteSSGContext } from 'vite-ssg'
-
 import type { ComputedRef } from 'vue'
+import type { ValaxySSGContext } from '../setups'
 import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 
-export async function install({ app }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
+export async function install({ app }: ValaxySSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   // @see https://floating-vue.starpad.dev/guide/config#default-values
   const defaultFloatingVueConfig = {}
   app.use(FloatingVue, Object.assign(defaultFloatingVueConfig, config.value.siteConfig.floatingVue || {}))

package/client/modules/valaxy.ts

@@ -8,11 +8,10 @@ import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
  */
 // import messages from '@intlify/unplugin-vue-i18n/messages'
 
-import type { ViteSSGContext } from 'vite-ssg'
-
 import type { ComputedRef } from 'vue'
 import type { Router } from 'vue-router'
 import type { PageDataPayload } from '../../types'
+import type { ValaxySSGContext } from '../setups'
 import { ensureSuffix } from '@antfu/utils'
 import { useStorage } from '@vueuse/core'
 import { createI18n } from 'vue-i18n'
@@ -52,7 +51,7 @@ export const i18n = createI18n({
   missingWarn: false,
 })
 
-export async function install({ app, router }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
+export async function install({ app, router }: ValaxySSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   const locale = useStorage('valaxy-locale', config?.value.siteConfig.lang || 'en')
   i18n.global.locale.value = locale.value
 

package/client/setup/main.ts

@@ -4,9 +4,8 @@
 // https://github.com/microsoft/TypeScript/issues/42873
 import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 /* __imports__ */
-import type { ViteSSGContext } from 'vite-ssg'
-
 import type { ComputedRef } from 'vue'
+import type { ValaxySSGContext } from '../setups'
 
 import { consola } from 'consola'
 import { registerGlobalComponents } from '../modules/components'
@@ -16,7 +15,7 @@ import { install as installPinia } from '../modules/pinia'
 import { install as installUnhead } from '../modules/unhead'
 import { install as installValaxy } from '../modules/valaxy'
 
-export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
+export default function setupMain(ctx: ValaxySSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   // @ts-expect-error inject in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars
   const injection_arg = ctx

package/client/setups.ts

@@ -1,16 +1,37 @@
 import type { Awaitable } from '@antfu/utils'
-import type { ViteSSGContext } from 'vite-ssg'
+import type { App } from 'vue'
+import type { Router, RouteRecordRaw } from 'vue-router'
 import type { MermaidOptions } from './types'
 
+/**
+ * @en
+ * SSG context interface — property-compatible with ViteSSGContext so that
+ * downstream themes / addons only need to change their import path.
+ *
+ * @zh
+ * SSG 上下文接口 — 属性签名与 ViteSSGContext 完全兼容，下游主题/插件只需更改 import 路径。
+ */
+export interface ValaxySSGContext {
+  app: App
+  router: Router
+  routes: RouteRecordRaw[]
+  head: any
+  isClient: boolean
+  initialState: Record<string, any>
+  onSSRAppRendered: (cb: () => void) => void
+  triggerOnSSRAppRendered: () => Promise<unknown[]>
+  routePath?: string
+}
+
 /**
  * @see https://github.com/antfu-collective/vite-ssg
  * @en
  * The context object for the application setup function.
  *
  * @zh
- * 应用 setup 函数的上下文对象。（包括了 `ViteSSGContext`）
+ * 应用 setup 函数的上下文对象。
  */
-export type AppContext = ViteSSGContext
+export type AppContext = ValaxySSGContext
 
 export type AppSetup = (ctx: AppContext) => Awaitable<void>
 

package/client/styles/common/code.scss

@@ -80,12 +80,12 @@ html:not(.dark) .vp-code-dark {
     line-height: var(--va-code-line-height);
     font-size: var(--va-code-font-size);
     color: var(--va-code-block-color);
-    transition: color 0.5s;
+    transition: color var(--va-transition-duration-moderate);
   }
 
   [class*='language-'] code .highlighted {
     background-color: var(--va-code-line-highlight-color);
-    transition: background-color 0.5s;
+    transition: background-color var(--va-transition-duration-moderate);
     margin: 0 -24px;
     padding: 0 24px;
     width: calc(100% + 2 * 24px);
@@ -122,9 +122,9 @@ html:not(.dark) .vp-code-dark {
     background-size: 20px;
     background-repeat: no-repeat;
     transition:
-      border-color 0.25s,
-      background-color 0.25s,
-      opacity 0.25s;
+      border-color var(--va-transition-duration),
+      background-color var(--va-transition-duration),
+      opacity var(--va-transition-duration);
   }
 
   [class*='language-']:hover>button.copy,
@@ -184,8 +184,8 @@ html:not(.dark) .vp-code-dark {
     font-weight: 500;
     color: var(--va-code-lang-color);
     transition:
-      color 0.4s,
-      opacity 0.4s;
+      color var(--va-transition-duration-moderate),
+      opacity var(--va-transition-duration-moderate);
   }
 
   [class*='language-']:hover>button.copy+span.lang,
@@ -195,7 +195,7 @@ html:not(.dark) .vp-code-dark {
 
   // diff
   [class*='language-'] code .diff {
-    transition: background-color 0.5s;
+    transition: background-color var(--va-transition-duration-moderate);
     margin: 0 -24px;
     padding: 0 24px;
     width: calc(100% + 2 * 24px);

package/client/styles/common/hamburger.scss

@@ -22,7 +22,7 @@ $hamburger-size: 22px;
 .vt-hamburger.is-active:hover .vt-hamburger-middle,
 .vt-hamburger.is-active:hover .vt-hamburger-bottom {
   background-color: var(--va-c-primary);
-  transition: top .25s, background-color .25s, transform .25s;
+  transition: top var(--va-transition-duration), background-color var(--va-transition-duration), transform var(--va-transition-duration);
 }
 
 .vt-hamburger-container {
@@ -40,7 +40,7 @@ $hamburger-size: 22px;
   width: $hamburger-size;
   height: 2px;
   background-color: var(--va-c-primary);
-  transition: top .25s, background-color .5s, transform .25s;
+  transition: top var(--va-transition-duration), background-color var(--va-transition-duration-moderate), transform var(--va-transition-duration);
 }
 
 .vt-hamburger-top    { 

package/client/styles/common/markdown.scss

@@ -69,8 +69,8 @@
     opacity: 0;
     text-decoration: none;
     transition:
-      color 0.25s,
-      opacity 0.25s;
+      color var(--va-transition-duration),
+      opacity var(--va-transition-duration);
   }
 
   .header-anchor::before {

package/client/styles/common/transition.scss

@@ -1,7 +1,7 @@
 .v {
   &-enter-active,
   &-leave-active {
-    transition: opacity var(--va-transition-duration, 0.4s) ease;
+    transition: opacity var(--va-transition-duration-moderate, 0.4s) ease;
   }
 
   &-enter-from,
@@ -13,7 +13,7 @@
 .fade {
   &-enter-active,
   &-leave-active {
-    transition: opacity var(--va-transition-duration, 0.4s) ease;
+    transition: opacity var(--va-transition-duration-moderate, 0.4s) ease;
   }
 
   &-enter-from,

package/client/styles/components/code-group.scss

@@ -38,7 +38,7 @@
   color: var(--va-code-tab-text-color);
   white-space: nowrap;
   cursor: pointer;
-  transition: color 0.25s;
+  transition: color var(--va-transition-duration);
 }
 
 .vp-code-group .tabs label::after {
@@ -51,7 +51,7 @@
   border-radius: 2px;
   content: '';
   background-color: transparent;
-  transition: background-color 0.25s;
+  transition: background-color var(--va-transition-duration);
 }
 
 .vp-code-group label:hover {

package/client/styles/components/custom-block.scss

@@ -172,7 +172,7 @@
   color: inherit;
   font-weight: 600;
   text-underline-offset: 2px;
-  transition: opacity 0.25s;
+  transition: opacity var(--va-transition-duration);
 }
 
 .custom-block a:hover {

package/client/styles/css-vars.scss

@@ -5,11 +5,8 @@
 
 $c-primary: #0078e7 !default;
 
-@use "./palette" with (
-  $colors: (
-    "primary": $c-primary,
-  )
-);
+@use "./palette" with ($colors: ("primary": $c-primary,
+  ));
 @use './css-vars/borders.css' as *;
 @use './css-vars/palette.css' as *;
 @use './css-vars/function.css' as *;
@@ -75,6 +72,8 @@ html.dark {
   --va-c-bg-soft: #f9f9f9;
   --va-c-bg-alt: #f9f9f9;
   --va-c-bg-mute: #f1f1f1;
+
+  --va-c-bg-elevated: #f9f9f9;
 }
 
 html.dark {
@@ -85,6 +84,8 @@ html.dark {
   --va-c-bg-alt: #161618;
   --va-c-bg-soft: #202127;
   --va-c-bg-mute: #2f2f2f;
+
+  --va-c-bg-elevated: #202127;
 }
 
 /* code */
@@ -144,4 +145,4 @@ html.dark {
 
 :root {
   --va-header-anchor-symbol: '#';
-}
+}

package/client/styles/vars.scss

@@ -28,10 +28,11 @@ $font: map.merge(
 $transition: () !default;
 $transition: map.merge(
   (
-    "duration-fast": 0.2s,
-    "duration": 0.4s,
+    "duration-fast": 0.15s,
+    "duration": 0.25s,
+    "duration-moderate": 0.4s,
     "duration-slow": 0.6s,
-    "": all var(--va-transition-duration-fast) ease-in-out,
+    "": all var(--va-transition-duration) ease-in-out,
   ),
   $transition
 );

package/client/tsconfig.json

@@ -7,7 +7,7 @@
     },
     "types": [
       "vite/client",
-      "vite-plugin-vue-layouts/client",
+      "vite-plugin-vue-layouts-next/client",
       "@intlify/unplugin-vue-i18n/messages"
     ]
   },

package/client/types/collection.ts

@@ -20,6 +20,19 @@ export interface CollectionConfig {
   categories?: string[]
   tags?: string[]
 
+  /**
+   * @en Whether to show collection as a single collapsed entry in homepage/archive lists.
+   * When true (default), a synthetic collection card is added to the post list,
+   * representing all articles in the collection as one entry.
+   * When false, no synthetic entry is added.
+   * @zh 是否在首页/归档列表中以单个条目展示合集。
+   * 为 true（默认）时，合集以一张卡片出现在文章列表中，
+   * 代表合集内的所有文章。
+   * 为 false 时，不添加合集条目。
+   * @default true
+   */
+  collapse?: boolean
+
   /**
    * items
    */
@@ -31,5 +44,19 @@ export interface CollectionConfig {
      * 对应路径为 `/collections/${key}/${item.key}`
      */
     key?: string
+    /**
+     * @en
+     * Link to an existing page or external URL.
+     * Internal links (starting with `/`) use `<RouterLink>`.
+     * External links (e.g. `https://...`) open in a new tab.
+     * Mutually exclusive with `key` — if both are set, `link` takes precedence.
+     *
+     * @zh
+     * 链接到已有页面或外部 URL。
+     * 内部链接（以 `/` 开头）使用 `<RouterLink>`。
+     * 外部链接（如 `https://...`）在新标签页中打开。
+     * 与 `key` 互斥——若同时设置，`link` 优先。
+     */
+    link?: string
   }[]
 }

package/client/types/index.ts

@@ -1,7 +1,7 @@
 import type mermaid from 'mermaid'
-import type { ViteSSGContext } from 'vite-ssg'
+import type { ValaxySSGContext } from '../setups'
 
-export type UserModule = (ctx: ViteSSGContext) => void
+export type UserModule = (ctx: ValaxySSGContext) => void
 
 /**
  * @see https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-schema

package/client/utils/time.ts

@@ -47,7 +47,7 @@ export function sortByUpdated(posts: Post[], desc = true) {
 export function orderByMeta(posts: Post[], orderBy: 'date' | 'updated' = 'date', desc = true) {
   return posts.sort((a, b) => {
     const aDate = +new Date(a[orderBy] || a.date || '')
-    const bDate = +new Date(b[orderBy] || a.date || '')
+    const bDate = +new Date(b[orderBy] || b.date || '')
     if (desc)
       return bDate - aDate
     else

package/dist/node/cli/index.mjs

@@ -1,7 +1,7 @@
 import 'node:process';
 import 'yargs';
 import 'yargs/helpers';
-export { c as cli, D as registerDevCommand, S as run, U as startValaxyDev } from '../../shared/valaxy.DpV6HHc6.mjs';
+export { c as cli, I as registerDevCommand, W as run, Z as startValaxyDev } from '../../shared/valaxy.DXqMwOZX.mjs';
 import 'node:os';
 import 'node:path';
 import 'consola';
@@ -29,13 +29,9 @@ import 'feed';
 import 'markdown-it';
 import 'table';
 import 'hookable';
+import 'node:child_process';
+import 'node:v8';
 import 'vite-ssg-sitemap';
-import 'vite-ssg/node';
-import '@intlify/unplugin-vue-i18n/vite';
-import '@unhead/addons/vite';
-import 'unplugin-vue-components/vite';
-import 'vite-plugin-vue-layouts';
-import 'vitepress-plugin-group-icons';
 import 'markdown-it-async';
 import '@shikijs/transformers';
 import 'shiki';
@@ -46,21 +42,30 @@ import 'markdown-it-emoji';
 import 'markdown-it-footnote';
 import 'markdown-it-image-figures';
 import 'markdown-it-task-lists';
+import 'vitepress-plugin-group-icons';
 import 'node:url';
 import 'markdown-it-container';
 import 'katex';
+import 'katex/contrib/mhchem';
 import 'unplugin-vue-markdown/vite';
 import 'js-base64';
+import '@intlify/unplugin-vue-i18n/vite';
+import '@unhead/addons/vite';
+import 'unplugin-vue-components/vite';
+import 'vite-plugin-vue-layouts-next';
+import 'p-map';
+import 'node:buffer';
+import 'minisearch';
+import 'lru-cache';
 import 'node:fs';
 import 'jiti';
 import 'unocss';
 import 'pascalcase';
-import 'lru-cache';
 import 'html-to-text';
 import 'vue-router/vite';
+import '@unhead/vue/server';
 import '@clack/prompts';
 import 'node:net';
-import 'node:child_process';
 import 'node:readline';
 import 'qrcode';
 import 'ejs';