valaxy 0.26.13 → 0.28.0-beta.1

package/client/app/data.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { Router } from 'vue-router'
-import type { PageData } from '../../types'
+import type { PageData, Post } from '../../types'
 import { computed } from 'vue'
 
 export interface ValaxyData<FM = PageData['frontmatter']> {
@@ -16,6 +16,6 @@ export function initData(router: Router): ValaxyData {
     page: computed(() => (router.currentRoute.value as unknown as {
       data: PageData
     }).data),
-    frontmatter: computed(() => router.currentRoute.value.meta.frontmatter),
+    frontmatter: computed(() => router.currentRoute.value.meta.frontmatter!) as Ref<Post>,
   }
 }

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/dark.ts

@@ -1,6 +1,6 @@
 import type { UseDarkOptions } from '@vueuse/core'
 import { useDark, useToggle } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 
 export function useValaxyDark(options: {
   /**
@@ -31,8 +31,12 @@ export function useValaxyDark(options: {
   if (options.circleTransition)
     import('valaxy/client/styles/common/view-transition.css')
 
+  const enableTransitions = () =>
+    'startViewTransition' in document
+    && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
   function toggleDarkWithTransition(event: MouseEvent, options: { duration?: number, easing?: EffectTiming['easing'] } = {}) {
-    if (!document.startViewTransition) {
+    if (!enableTransitions()) {
       toggleDark()
       return
     }
@@ -44,23 +48,26 @@ export function useValaxyDark(options: {
       Math.max(y, innerHeight - y),
     )
 
-    const transition = document.startViewTransition(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+
+    const transition = document.startViewTransition(async () => {
       toggleDark()
+      await nextTick()
     })
 
     transition.ready.then(() => {
-      const clipPath = [
-        `circle(0px at ${x}px ${y}px)`,
-        `circle(${endRadius}px at ${x}px ${y}px)`,
-      ]
       document.documentElement.animate(
         {
-          clipPath: isDark.value ? clipPath.reverse() : clipPath,
+          clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
         },
         {
-          duration: options.duration || 300,
-          easing: options.easing || 'ease-in',
-          pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)',
+          duration: options.duration ?? 200,
+          easing: options.easing ?? 'ease-in',
+          fill: 'forwards',
+          pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
         },
       )
     })

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/composables/post/index.ts

@@ -1,4 +1,4 @@
-import type { Post } from 'valaxy'
+import type { Post, SiteConfig } from 'valaxy'
 import type { ComputedRef } from 'vue'
 import { orderByMeta, useSiteConfig } from 'valaxy'
 import { computed } from 'vue'
@@ -37,6 +37,39 @@ export function usePageList() {
   })
 }
 
+/**
+ * Pure function to filter and sort posts from page list
+ * Can be used in both composables and stores without inject() issues
+ */
+export function filterAndSortPosts(
+  pages: Post[],
+  siteConfig: SiteConfig,
+  params: { type?: string } = {},
+): Post[] {
+  // Filter posts
+  const routes = pages
+    .filter(i =>
+      i.path?.startsWith('/posts')
+      && !i.path?.endsWith('.html')
+      && i.date
+      && (!params.type || i.type === params.type)
+      && (!i.hide || i.hide === 'index'), // hide `hide: all` posts
+    )
+
+  function sortBySiteConfigOrderBy(posts: Post[]) {
+    const orderBy = siteConfig.orderBy
+    return orderByMeta(posts, orderBy)
+  }
+
+  /**
+   * 置顶
+   */
+  const topPosts = sortBySiteConfigOrderBy(routes.filter(i => i.top)).sort((a, b) => b.top! - a.top!)
+  const otherPosts = sortBySiteConfigOrderBy(routes.filter(i => !i.top))
+
+  return topPosts.concat(otherPosts)
+}
+
 /**
  * get post list in 'pages/posts' folder
  * todo: use vue provide/inject to global
@@ -47,26 +80,6 @@ export function usePostList(params: {
   const siteConfig = useSiteConfig()
   const pageList = usePageList()
   return computed(() => {
-    const routes = pageList.value
-      .filter(i =>
-        i.path?.startsWith('/posts')
-        && !i.path?.endsWith('.html')
-        && i.date
-        && (!params.type || i.type === params.type)
-        && (!i.hide || i.hide === 'index'), // hide `hide: all` posts
-      )
-
-    function sortBySiteConfigOrderBy(posts: Post[]) {
-      const orderBy = siteConfig.value.orderBy
-      return orderByMeta(posts, orderBy)
-    }
-
-    /**
-     * 置顶
-     */
-    const topPosts = sortBySiteConfigOrderBy(routes.filter(i => i.top)).sort((a, b) => b.top! - a.top!)
-    const otherPosts = sortBySiteConfigOrderBy(routes.filter(i => !i.top))
-
-    return topPosts.concat(otherPosts)
+    return filterAndSortPosts(pageList.value, siteConfig.value, params)
   })
 }

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/index.d.ts

@@ -1,8 +1,9 @@
-import type { Header } from '@valaxyjs/utils'
 import type { Ref } from 'vue'
 import type { Post } from '../types'
 
 import './shims.d'
+// Import vue-router RouteMeta augmentation
+import '../types/vue-router.d'
 
 export * from '../dist/types/index.mjs'
 export * from './index'
@@ -12,13 +13,6 @@ declare module '@docsearch/js' {
   export default docsearch
 }
 
-declare module 'vue-router' {
-  interface RouteMeta {
-    headers: Header[]
-    frontmatter: Post
-  }
-}
-
 declare interface Window {
   // for devtools
   __VUE_DEVTOOLS_ROUTER__: import('vue-router').Router

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,13 +1,15 @@
-import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
+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'
@@ -44,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),
 )
@@ -52,29 +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
 
-    // Register the plugin before the router
-    app.use(DataLoaderPlugin, { router })
+  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