valaxy 0.27.0 → 0.28.0-beta.2

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/components/ValaxyLogo.vue

@@ -30,6 +30,6 @@ import valaxyLogoPng from '../assets/images/valaxy-logo.png'
   height: 150%;
   background-image: linear-gradient(-45deg, rgb(108, 34, 236) 50%, rgba(59,130,246,var(--un-to-opacity, 1)) 50%);
   opacity: 0.3;
-  transition: opacity 0.2s;
+  transition: opacity var(--va-transition-duration-fast);
 }
 </style>

package/client/components/ValaxyOverlay.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<{
   position: fixed;
   inset: 0;
   z-index: calc(var(--va-z-overlay) - 1);
-  transition: opacity 0.4s;
+  transition: opacity var(--va-transition-duration-moderate);
 
   &.fade-enter-from,
   &.fade-leave-to {

package/client/composables/codeGroups.ts

@@ -5,7 +5,7 @@ export function useCodeGroups() {
   if (import.meta.env.DEV) {
     onContentUpdated(() => {
       document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
-        Array.from(el.children).forEach((child) => {
+        [...el.children].forEach((child) => {
           child.classList.remove('active')
         })
         el.children[0].classList.add('active')
@@ -21,7 +21,7 @@ export function useCodeGroups() {
       if (!group)
         return
 
-      const i = Array.from(group.querySelectorAll('input')).indexOf(el)
+      const i = [...group.querySelectorAll('input')].indexOf(el)
       if (i < 0)
         return
 
@@ -29,7 +29,7 @@ export function useCodeGroups() {
       if (!blocks)
         return
 
-      const current = Array.from(blocks.children).find(child =>
+      const current = [...blocks.children].find(child =>
         child.classList.contains('active'),
       )
       if (!current)

package/client/composables/collections.ts

@@ -1,8 +1,29 @@
+import type { ComputedRef, MaybeRef } from 'vue'
 import type { CollectionConfig } from '../types'
 import collections from '#valaxy/blog/collections'
 
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { useRoute } from 'vue-router'
+import { usePageList } from './post'
+
+export interface PostCollectionInfo {
+  collection: CollectionConfig
+  itemIndex: number
+}
+
+/**
+ * Resolve the href and external status for a collection item.
+ * `link` takes precedence over `key`. Internal links start with `/`.
+ */
+export function resolveCollectionItemHref(collectionKey: string, item: { key?: string, link?: string }): { href: string, isExternal: boolean } {
+  if (item.link) {
+    const isExternal = /^https?:\/\//.test(item.link)
+    return { href: item.link, isExternal }
+  }
+  if (item.key)
+    return { href: `/collections/${collectionKey}/${item.key}`, isExternal: false }
+  return { href: '', isExternal: false }
+}
 
 /**
  * Composable for Collections
@@ -11,7 +32,7 @@ import { useRoute } from 'vue-router'
  */
 export function useCollections() {
   return {
-    collections: computed(() => collections),
+    collections: computed<CollectionConfig[]>(() => collections),
   }
 }
 
@@ -35,3 +56,81 @@ export function useCollection() {
     collection,
   }
 }
+
+/**
+ * Get posts belonging to a specific collection
+ * Sorted by the order defined in collection.items
+ */
+export function useCollectionPosts(collectionKey: MaybeRef<string>) {
+  const pageList = usePageList()
+  const { collections } = useCollections()
+
+  return computed(() => {
+    const key = unref(collectionKey)
+    if (!key)
+      return []
+
+    const prefix = `/collections/${key}/`
+    const pages = pageList.value.filter(
+      p => p.path?.startsWith(prefix) && p.path !== prefix && !p.path.endsWith('/'),
+    )
+
+    // Sort by collection items order if available
+    const col = collections.value.find(c => c.key === key)
+    if (col?.items) {
+      const orderMap = new Map(
+        col.items
+          .filter(item => item.key && !item.link)
+          .map((item, idx) => [item.key, idx]),
+      )
+      return pages.toSorted((a, b) => {
+        const aSlug = a.path?.split('/').pop() || ''
+        const bSlug = b.path?.split('/').pop() || ''
+        const aIdx = orderMap.get(aSlug) ?? Infinity
+        const bIdx = orderMap.get(bSlug) ?? Infinity
+        if (aIdx === bIdx)
+          return 0
+        return aIdx - bIdx
+      })
+    }
+
+    return pages
+  })
+}
+
+/**
+ * Find which collection(s) a given post path belongs to.
+ * Checks both key-based items (`/collections/{collKey}/{item.key}`)
+ * and internal link items (`item.link`).
+ */
+export function usePostCollections(postPath: MaybeRef<string>): ComputedRef<PostCollectionInfo[]> {
+  return computed(() => {
+    const path = stripTrailingSlash(unref(postPath))
+    if (!path)
+      return []
+
+    const result: PostCollectionInfo[] = []
+    for (const col of collections) {
+      if (!col.items || !col.key)
+        continue
+      for (let i = 0; i < col.items.length; i++) {
+        const item = col.items[i]
+        // Match key-based items: /collections/{collKey}/{item.key}
+        if (item.key && stripTrailingSlash(`/collections/${col.key}/${item.key}`) === path) {
+          result.push({ collection: col, itemIndex: i })
+          break
+        }
+        // Match internal link items (non-http)
+        if (item.link && !/^https?:\/\//.test(item.link) && stripTrailingSlash(item.link) === path) {
+          result.push({ collection: col, itemIndex: i })
+          break
+        }
+      }
+    }
+    return result
+  })
+}
+
+function stripTrailingSlash(path: string): string {
+  return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path
+}

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

@@ -61,7 +61,7 @@ export function useValaxyDark(options: {
     transition.ready.then(() => {
       document.documentElement.animate(
         {
-          clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
+          clipPath: isDark.value ? clipPath.toReversed() : clipPath,
         },
         {
           duration: options.duration ?? 200,

package/client/composables/features/collapse-code.ts

@@ -46,7 +46,7 @@ export function useCollapseCode() {
   // determine whether to add folded class name
   onMounted(() => {
     const els = document.querySelectorAll('div[class*="language-"]')
-    for (const el of Array.from(els)) {
+    for (const el of [...els]) {
       const elHeight = getHeightViaClone(el as HTMLElement)
       if (elHeight > codeHeightLimit)
         el.classList.add('folded')

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/outline/anchor.ts

@@ -99,7 +99,7 @@ export function useActiveAnchor(
 
     // page bottom - highlight last link
     if (isBottom) {
-      activateLink(headers[headers.length - 1].link)
+      activateLink(headers.at(-1)?.link || null)
       return
     }
 

package/client/composables/post/index.ts

@@ -1,5 +1,7 @@
 import type { Post, SiteConfig } from 'valaxy'
 import type { ComputedRef } from 'vue'
+import type { CollectionConfig } from '../../types'
+import collections from '#valaxy/blog/collections'
 import { orderByMeta, useSiteConfig } from 'valaxy'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -31,8 +33,13 @@ export function usePageList() {
       .filter(i => i.meta!.frontmatter)
       .filter(i => i.path && !excludePages.includes(i.path))
       .map((i) => {
-        return Object.assign({ path: i.path, excerpt: i.meta!.excerpt }, i.meta!.frontmatter || {}) as Post
+        return { path: i.path, excerpt: i.meta!.excerpt, ...i.meta!.frontmatter || {} } as Post
       })
+
+    // Sort by `top` so pages with higher `top` values appear first.
+    // This ensures frontmatter `top` affects ordering in sidebars and categories.
+    routes.sort((a, b) => (b.top || 0) - (a.top || 0))
+
     return routes
   })
 }
@@ -67,7 +74,83 @@ export function filterAndSortPosts(
   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 [...topPosts, ...otherPosts]
+}
+
+/**
+ * Merge collapsed collections into the post list.
+ * For collapsed collections, add a single synthetic entry representing the
+ * collection, using the latest article's date for sorting.
+ */
+export function mergeCollapsedCollections(
+  posts: Post[],
+  allPages: Post[],
+  collectionConfigs: CollectionConfig[],
+  siteConfig: SiteConfig,
+): Post[] {
+  const collapsedCollections = collectionConfigs.filter(c => c.collapse !== false)
+
+  if (collapsedCollections.length === 0)
+    return posts
+
+  // Pre-index collection pages by key in a single pass
+  const collectionPagesMap = new Map<string, Post[]>()
+  for (const p of allPages) {
+    if (!p.path?.startsWith('/collections/') || !p.date)
+      continue
+    const parts = p.path.split('/')
+    // path format: /collections/{key}/{slug}
+    if (parts.length < 4 || !parts[3] || p.path.endsWith('/'))
+      continue
+    const colKey = parts[2]
+    if (!collectionPagesMap.has(colKey))
+      collectionPagesMap.set(colKey, [])
+    collectionPagesMap.get(colKey)!.push(p)
+  }
+
+  const collectionEntries: Post[] = []
+  for (const col of collapsedCollections) {
+    if (!col.key)
+      continue
+
+    const colPages = collectionPagesMap.get(col.key) || []
+
+    if (colPages.length === 0)
+      continue
+
+    // Find latest updated article for sort position
+    const latest = colPages.reduce((a, b) => {
+      const aTime = new Date(a.updated || a.date || '').getTime()
+      const bTime = new Date(b.updated || b.date || '').getTime()
+      return bTime > aTime ? b : a
+    })
+
+    // Create synthetic post entry representing the collapsed collection
+    collectionEntries.push({
+      title: col.title || latest.title,
+      path: `/collections/${col.key}/`,
+      cover: col.cover || latest.cover,
+      date: latest.date,
+      updated: latest.updated,
+      categories: col.categories || latest.categories,
+      tags: col.tags || latest.tags,
+      _collection: col,
+    })
+  }
+
+  if (collectionEntries.length === 0)
+    return posts
+
+  function sortBySiteConfigOrderBy(entries: Post[]) {
+    return orderByMeta(entries, siteConfig.orderBy)
+  }
+
+  // Re-sort only when collection entries were actually added
+  // to preserve the topPosts-first ordering from filterAndSortPosts
+  const topPosts = posts.filter(i => i.top)
+  const otherPosts = posts.filter(i => !i.top)
+  const mergedOther = sortBySiteConfigOrderBy([...otherPosts, ...collectionEntries])
+  return [...topPosts, ...mergedOther]
 }
 
 /**
@@ -83,3 +166,22 @@ export function usePostList(params: {
     return filterAndSortPosts(pageList.value, siteConfig.value, params)
   })
 }
+
+/**
+ * Get post list merged with collapsed collection entries.
+ * Collapsed collections are represented by a single synthetic entry
+ * (card) that is appended and re-sorted with the existing posts.
+ *
+ * @experimental
+ */
+export function usePostListWithCollections(params: {
+  type?: string
+} = {}) {
+  const siteConfig = useSiteConfig()
+  const pageList = usePageList()
+
+  return computed(() => {
+    const posts = filterAndSortPosts(pageList.value, siteConfig.value, params)
+    return mergeCollapsedCollections(posts, pageList.value, collections as CollectionConfig[], siteConfig.value)
+  })
+}

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/layouts/README.md

@@ -4,7 +4,7 @@ Vue components in this dir are used as layouts.
 
 By default, `default.vue` will be used unless an alternative is specified in the route meta.
 
-With [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+With [vue-router](https://router.vuejs.org/) file-based routing and [`vite-plugin-vue-layouts-next`](https://github.com/loicduong/vite-plugin-vue-layouts-next), you can specify the layout in the page's SFCs like this:
 
 ```html
 <route lang="yaml">

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:
@@ -68,6 +76,10 @@ footer:
   total_views: Total Views
   total_visitors: Total Visitors
 
+collection:
+  badge: Collection
+  empty: No items yet
+
 counter:
   archives: No posts | 1 post | {count} posts
   categories: No categories | 1 category | {count} categories

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:
@@ -67,6 +75,10 @@ footer:
   total_views: 总访问量
   total_visitors: 总访客量
 
+collection:
+  badge: 合集
+  empty: 暂无内容
+
 counter:
   archives: 暂无文章 | 共计 1 篇文章 | 共计 {count} 篇文章
   categories: 暂无分类 | 共计 1 个分类 | 共计 {count} 个分类