valaxy 0.27.0 → 0.28.0-beta.1

package/client/components/AppLink.vue

@@ -4,6 +4,10 @@ import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import { EXTERNAL_URL_RE } from '../../shared'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   showExternalIcon?: boolean
   to?: string

package/client/components/ClientOnly.ts

@@ -0,0 +1,12 @@
+import { defineComponent, onMounted, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ClientOnly',
+  setup(_, { slots }) {
+    const show = ref(false)
+    onMounted(() => {
+      show.value = true
+    })
+    return () => show.value ? slots.default?.() : null
+  },
+})

package/client/components/ValaxyDynamicComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { compile, defineAsyncComponent, shallowRef, watch } from 'vue'
+import { compile, computed, defineComponent } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -12,22 +12,30 @@ const props = withDefaults(
   },
 )
 
-const dynamicComponent = shallowRef<Component | null>(null)
+// Separate compile from component creation — compile() is expensive and
+// should only re-run when the template string itself changes.
+const compiledRender = computed(() => {
+  if (!props.templateStr)
+    return null
+  return compile(props.templateStr)
+})
 
-async function createComponent() {
-  const render = compile(props.templateStr)
-  const componentDefinition = {
+// defineComponent creates a proper component instance so that compile()'s
+// render function can access data properties through the instance context.
+// Avoids defineAsyncComponent which causes "missing template" warnings in SSG.
+const dynamicComponent = computed<Component | null>(() => {
+  const render = compiledRender.value
+  if (!render)
+    return null
+  return defineComponent({
+    data: () => ({ ...props.data }),
     render,
-    data: () => props.data,
-  }
-  dynamicComponent.value = defineAsyncComponent(() => Promise.resolve(componentDefinition))
-}
-
-watch(() => [props.templateStr, props.data], () => {
-  createComponent()
-}, { immediate: true })
+  })
+})
 </script>
 
 <template>
-  <component :is="dynamicComponent" />
+  <div v-if="dynamicComponent">
+    <component :is="dynamicComponent" />
+  </div>
 </template>

package/client/composables/common.ts

@@ -2,7 +2,7 @@ import type { PostFrontMatter } from '../../types'
 import type { ValaxyData } from '../app/data'
 
 import { isClient } from '@vueuse/core'
-import { computed, inject } from 'vue'
+import { computed, hasInjectionContext, inject } from 'vue'
 import { useRoute } from 'vue-router'
 import { dataSymbol, useSiteConfig } from '../config'
 
@@ -73,10 +73,11 @@ export function useEncryptedPhotos() {
  * inject pageData
  */
 export function useData<FM = Record<string, any>>(): ValaxyData<FM> {
-  const data = inject(dataSymbol, {} as any)
-  if (!data) {
-    throw new Error('Valaxy data not properly injected in app')
-  }
+  if (!hasInjectionContext())
+    throw new Error('[Valaxy] useData() must be called inside setup() or a component lifecycle')
+  const data = inject<ValaxyData<FM>>(dataSymbol)
+  if (!data)
+    throw new Error('[Valaxy] data not properly injected in app')
   return data
 }
 

package/client/composables/features/copy-markdown.ts

@@ -0,0 +1,85 @@
+import { isClient, useClipboard } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+
+/**
+ * Composable for copying raw Markdown content of the current post.
+ * Requires `siteConfig.llms.files: true` to have .md files available at build output.
+ *
+ * The `available` ref is initially `false` and becomes `true` after a HEAD request
+ * confirms the `.md` file exists. This allows themes to conditionally render
+ * the copy button only when the llms feature is enabled.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useCopyMarkdown } from 'valaxy'
+ * const { copy, copied, loading, available, error } = useCopyMarkdown()
+ * </script>
+ * <template>
+ *   <button v-if="available" @click="copy" :disabled="loading">
+ *     {{ copied ? 'Copied!' : 'Copy Markdown' }}
+ *   </button>
+ *   <span v-if="error" class="text-red">{{ error }}</span>
+ * </template>
+ * ```
+ */
+export function useCopyMarkdown() {
+  const route = useRoute()
+  const copied = ref(false)
+  const loading = ref(false)
+  const available = ref(false)
+  const error = ref<string | null>(null)
+  const { copy: copyToClipboard } = useClipboard({ legacy: true })
+
+  const mdUrl = computed(() => {
+    const p = route.path !== '/' && route.path.endsWith('/')
+      ? route.path.slice(0, -1)
+      : route.path
+    return `${p}.md`
+  })
+
+  // Probe the .md file to detect availability (siteConfig.llms.files enabled at build time)
+  if (isClient) {
+    watchEffect(() => {
+      available.value = false
+      error.value = null
+      fetch(mdUrl.value, { method: 'HEAD' })
+        .then((res) => { available.value = res.ok })
+        .catch(() => { available.value = false })
+    })
+  }
+
+  async function copy() {
+    if (loading.value)
+      return
+
+    error.value = null
+    loading.value = true
+    try {
+      const res = await fetch(mdUrl.value)
+      if (!res.ok)
+        throw new Error(`Failed to fetch ${mdUrl.value}: ${res.status}`)
+
+      const text = await res.text()
+      await copyToClipboard(text)
+      copied.value = true
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+    }
+    catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error'
+      error.value = msg
+      console.error('[valaxy] Failed to copy markdown:', err)
+      setTimeout(() => {
+        error.value = null
+      }, 3000)
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  return { copy, copied, loading, mdUrl, available, error }
+}

package/client/composables/features/index.ts

@@ -1,3 +1,4 @@
 export * from './collapse-code'
 export * from './copy-code'
+export * from './copy-markdown'
 export * from './medium-zoom'

package/client/config.ts

@@ -6,7 +6,7 @@ import type { ComputedRef, InjectionKey } from 'vue'
 // https://github.com/microsoft/TypeScript/issues/42873
 import type { DefaultTheme, ValaxyConfig } from '../types'
 import type { ValaxyData } from './app/data'
-import { computed, inject, readonly, shallowRef } from 'vue'
+import { computed, hasInjectionContext, inject, readonly, shallowRef } from 'vue'
 
 // @ts-expect-error virtual module @valaxyjs/config
 import valaxyConfig from '/@valaxyjs/config'
@@ -62,10 +62,12 @@ export function initContext() {
  * @public
  */
 export function useValaxyConfig<ThemeConfig = DefaultTheme.Config>() {
+  if (!hasInjectionContext())
+    throw new Error('[Valaxy] useValaxyConfig() must be called inside setup() or a component lifecycle')
   const config = inject<ComputedRef<ValaxyConfig<ThemeConfig>>>(valaxyConfigSymbol)
   if (!config)
     throw new Error('[Valaxy] site config not properly injected in app')
-  return config!
+  return config
 }
 
 /**

package/client/entry-ssr.ts

@@ -0,0 +1,25 @@
+import { createHead } from '@unhead/vue/server'
+import { renderToString } from 'vue/server-renderer'
+import { createValaxyApp, routesWithLayout } from './main'
+
+export async function render(routePath: string) {
+  const ctx = createValaxyApp({ routePath, createHead })
+  const { app, router, head } = ctx
+
+  await router.push(routePath)
+  await router.isReady()
+
+  const ssrCtx: Record<string, any> = {}
+  const html = await renderToString(app, ssrCtx)
+  await ctx.triggerOnSSRAppRendered()
+
+  return {
+    html,
+    head,
+    modules: ssrCtx.modules as Set<string> | undefined,
+    teleports: ssrCtx.teleports as Record<string, string> | undefined,
+    initialState: ctx.initialState,
+  }
+}
+
+export { routesWithLayout as routes }

package/client/locales/en.yml

@@ -50,6 +50,14 @@ post:
   related_posts: Related posts
   view_link: View link
   read_more: READ MORE
+  copy_markdown: Copy Markdown
+  copy_markdown_link: Copy Markdown Link
+  copy_page: Copy page
+  copied_markdown: Copied!
+  view_as_markdown: View as Markdown
+  open_in_github: Open in GitHub
+  open_in_chatgpt: Open in ChatGPT
+  open_in_claude: Open in Claude
   cover: Cover
   time_warning: This article was last updated {ago}. The information described in this article may have changed.
   copyright:

package/client/locales/zh-CN.yml

@@ -50,6 +50,14 @@ post:
   related_posts: 相关文章
   view_link: 查看链接
   read_more: 阅读更多
+  copy_markdown: 复制 Markdown
+  copy_markdown_link: 复制 Markdown 链接
+  copy_page: 复制页面
+  copied_markdown: 已复制！
+  view_as_markdown: 查看 Markdown
+  open_in_github: 在 GitHub 中打开
+  open_in_chatgpt: 在 ChatGPT 中打开
+  open_in_claude: 在 Claude 中打开
   cover: 封面
   time_warning: '本文最后更新于 {ago}，文中所描述的信息可能已发生改变。'
   copyright:

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'
@@ -43,7 +46,7 @@ function filterDraft(routes: any[]) {
 }
 
 // not filter hide for ssg
-const routesWithLayout = setupLayouts(import.meta.env.DEV
+export const routesWithLayout = setupLayouts(import.meta.env.DEV
   ? routes
   : filterDraft(routes),
 )
@@ -51,31 +54,87 @@ const routesWithLayout = setupLayouts(import.meta.env.DEV
 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/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/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/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.CKsfoRMA.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';
+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';