valaxy 0.28.0-beta.2 → 0.28.0-beta.4

package/client/addons/index.ts

@@ -6,6 +6,25 @@ export function isEmptyAddon(addon: any) {
   return addon && addon.name === emptyAddonName
 }
 
+/**
+ * Cast a module namespace import to a plain type, breaking Rollup's
+ * static binding analysis on `import * as ns` namespace objects.
+ *
+ * The identity return is intentional — the cast alone is enough to
+ * suppress `IMPORT_IS_UNDEFINED` warnings when accessing addon-specific
+ * exports that don't exist in the empty addon fallback module.
+ *
+ * @example
+ * ```ts
+ * import * as addonArtalk from 'valaxy-addon-artalk'
+ * const mod = getAddonModule<typeof import('valaxy-addon-artalk')>(addonArtalk)
+ * mod.useArtalkWithOptions?.()
+ * ```
+ */
+export function getAddonModule<T = Record<string, any>>(addon: any): T {
+  return addon
+}
+
 export default {
   name,
 }

package/client/components/ClientOnly.ts

@@ -7,6 +7,6 @@ export default defineComponent({
     onMounted(() => {
       show.value = true
     })
-    return () => show.value ? slots.default?.() : null
+    return () => show.value ? slots.default?.() : slots.fallback?.() ?? null
   },
 })

package/client/components/ValaxyDecrypt.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { isClient } from '@vueuse/core'
 import { runContentUpdated, useDecrypt, useFrontmatter } from 'valaxy'
 import { computed, defineComponent, h, ref } from 'vue'
 
@@ -61,7 +62,7 @@ const ValaxyDeprecatedContent = defineComponent({
   },
 })
 
-const hasWarning = computed(() => location.protocol !== 'https:')
+const hasWarning = computed(() => isClient && location.protocol !== 'https:')
 </script>
 
 <template>

package/client/components/ValaxyFootnoteTooltip.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
 import { Tooltip } from 'floating-vue'
-// distance offset for sup
+import { onMounted, ref } from 'vue'
+
+// floating-vue Tooltip generates different DOM during SSR vs client hydration.
+// Only mount the Tooltip after the component is mounted on the client to avoid mismatches.
+// During SSR and initial client render, a plain <span> is shown instead.
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
 </script>
 
 <template>
-  <Tooltip class="inline-block" :distance="8">
+  <Tooltip v-if="mounted" class="inline-block" :distance="8">
     <slot />
 
     <template #popper>
       <slot name="popper" />
     </template>
   </Tooltip>
+  <span v-else class="inline-block">
+    <slot />
+  </span>
 </template>

package/client/components/ValaxyGalleryDecrypt.vue

@@ -64,7 +64,7 @@ defineExpose({
       </div>
     </div>
     <div v-else>
-      <YunGallery :photos="photos" />
+      <slot :photos="photos" />
       <div w-full text-center mt-8>
         <button m-auto class="btn" font-bold @click="encryptAgain">
           Encrypt Again

package/client/composables/features/medium-zoom.ts

@@ -11,13 +11,63 @@ export function useMediumZoom() {
 
   if (mediumZoomConfig.enable) {
     onMounted(() => {
-      mediumZoom(
+      const zoom = mediumZoom(
         mediumZoomConfig.selector || '.markdown-body img',
         {
           background: 'var(--medium-zoom-c-bg, rgba(0, 0, 0, 0.8))',
           ...mediumZoomConfig.options,
         },
       )
+
+      // Fix blurry images after zoom animation completes.
+      // medium-zoom uses CSS transform: scale() which causes browsers (especially
+      // Chrome) to render scaled images at lower quality.
+      // After the open animation, we replace the transform with actual dimensions
+      // to force full-resolution rendering. Before closing, we restore the original
+      // transform so the close animation works correctly.
+      // @see https://github.com/francoischalifour/medium-zoom/issues/151
+      let savedStyles: { transform: string, width: string, height: string } | null = null
+
+      zoom.on('opened', () => {
+        const zoomed = document.querySelector('.medium-zoom-image--opened') as HTMLElement | null
+        if (!zoomed)
+          return
+
+        const { transform } = zoomed.style
+        const scaleMatch = transform.match(/scale\(([^)]+)\)/)
+        if (!scaleMatch)
+          return
+
+        const scale = Number.parseFloat(scaleMatch[1])
+        if (!scale || scale === 1)
+          return
+
+        savedStyles = {
+          transform,
+          width: zoomed.style.width,
+          height: zoomed.style.height,
+        }
+        const rect = zoomed.getBoundingClientRect()
+
+        // Replace scale transform with actual width/height
+        zoomed.style.transform = transform.replace(/scale\([^)]+\)/, 'scale(1)')
+        zoomed.style.width = `${rect.width}px`
+        zoomed.style.height = `${rect.height}px`
+      })
+
+      zoom.on('close', () => {
+        if (!savedStyles)
+          return
+
+        const zoomed = document.querySelector('.medium-zoom-image--opened') as HTMLElement | null
+        if (zoomed) {
+          // Restore original styles for close animation
+          zoomed.style.transform = savedStyles.transform
+          zoomed.style.width = savedStyles.width
+          zoomed.style.height = savedStyles.height
+        }
+        savedStyles = null
+      })
     })
   }
 }

package/client/define/client-component.ts

@@ -0,0 +1,45 @@
+import type { Component } from 'vue'
+import { defineAsyncComponent, defineComponent, h, onMounted, ref } from 'vue'
+
+/**
+ * Define a component that only renders on the client side.
+ *
+ * Useful for wrapping browser-only third-party libraries that access
+ * `window`, `document`, or other browser APIs not available during SSR/SSG.
+ *
+ * @param loader - Dynamic import function, e.g. `() => import('some-lib')`
+ * @param args - Optional tuple of `[props, children]` to pass to the component
+ * @param cb - Optional callback invoked with the resolved component module
+ */
+export function defineClientComponent(
+  loader: () => Promise<Component | { default: Component }>,
+  args?: [Record<string, any>?, (Record<string, any> | (() => any))?],
+  cb?: (component: any) => void,
+) {
+  const [props, children] = args ?? []
+
+  const AsyncComp = defineAsyncComponent(async () => {
+    const comp = await loader()
+    if (cb)
+      cb(comp)
+    return comp
+  })
+
+  return defineComponent({
+    name: 'ValaxyClientComponent',
+    setup(_, { slots }) {
+      const show = ref(false)
+      onMounted(() => {
+        show.value = true
+      })
+
+      return () => {
+        if (!show.value)
+          return slots.fallback?.() ?? null
+
+        const childContent = typeof children === 'function' ? children() : children
+        return h(AsyncComp, props, childContent)
+      }
+    },
+  })
+}

package/client/define/index.ts

@@ -1 +1,2 @@
+export * from './client-component'
 export * from './collection'

package/client/utils/time.ts

@@ -48,9 +48,11 @@ export function orderByMeta(posts: Post[], orderBy: 'date' | 'updated' = 'date',
   return posts.sort((a, b) => {
     const aDate = +new Date(a[orderBy] || a.date || '')
     const bDate = +new Date(b[orderBy] || b.date || '')
-    if (desc)
-      return bDate - aDate
-    else
-      return aDate - bDate
+    const diff = desc ? bDate - aDate : aDate - bDate
+    // Stable sort: when dates are equal, use path as tie-breaker
+    // to ensure consistent order between SSR and client hydration
+    if (diff !== 0)
+      return diff
+    return (a.path || '') < (b.path || '') ? -1 : (a.path || '') > (b.path || '') ? 1 : 0
   })
 }

package/dist/node/cli/index.mjs

@@ -1,7 +1,7 @@
 import 'node:process';
 import 'yargs';
 import 'yargs/helpers';
-export { c as cli, I as registerDevCommand, W as run, Z as startValaxyDev } from '../../shared/valaxy.DXqMwOZX.mjs';
+export { c as cli, I as registerDevCommand, W as run, Z as startValaxyDev } from '../../shared/valaxy.CAIbzGO-.mjs';
 import 'node:os';
 import 'node:path';
 import 'consola';

package/dist/node/index.mjs

@@ -1,4 +1,4 @@
-export { A as ALL_ROUTE, E as EXCERPT_SEPARATOR, G as GLOBAL_STATE, P as PATHNAME_PROTOCOL_RE, V as ViteValaxyPlugins, b as build, c as cli, a as createServer, d as createValaxyPlugin, e as customElements, f as defaultSiteConfig, g as defaultValaxyConfig, h as defaultViteConfig, i as defineAddon, j as defineConfig, k as defineSiteConfig, l as defineTheme, m as defineValaxyAddon, n as defineValaxyConfig, o as defineValaxyTheme, p as encryptContent, q as generateClientRedirects, r as getGitTimestamp, s as getIndexHtml, t as getServerInfoText, u as isExternal, v as isInstalledGlobally, w as isKatexEnabled, x as isKatexPluginNeeded, y as isMathJaxEnabled, z as isPath, B as loadConfigFromFile, C as mergeValaxyConfig, D as mergeViteConfigs, F as postProcessForSSG, H as processValaxyOptions, I as registerDevCommand, J as resolveAddonsConfig, K as resolveImportPath, L as resolveImportUrl, M as resolveOptions, N as resolveSiteConfig, O as resolveSiteConfigFromRoot, Q as resolveThemeConfigFromRoot, R as resolveThemeValaxyConfig, S as resolveUserThemeConfig, T as resolveValaxyConfig, U as resolveValaxyConfigFromRoot, W as run, X as ssgBuild, Y as ssgBuildLegacy, Z as startValaxyDev, _ as toAtFS, $ as transformObject, a0 as version } from '../shared/valaxy.DXqMwOZX.mjs';
+export { A as ALL_ROUTE, E as EXCERPT_SEPARATOR, G as GLOBAL_STATE, P as PATHNAME_PROTOCOL_RE, V as ViteValaxyPlugins, b as build, c as cli, a as createServer, d as createValaxyPlugin, e as customElements, f as defaultSiteConfig, g as defaultValaxyConfig, h as defaultViteConfig, i as defineAddon, j as defineConfig, k as defineSiteConfig, l as defineTheme, m as defineValaxyAddon, n as defineValaxyConfig, o as defineValaxyTheme, p as encryptContent, q as generateClientRedirects, r as getGitTimestamp, s as getIndexHtml, t as getServerInfoText, u as isExternal, v as isInstalledGlobally, w as isKatexEnabled, x as isKatexPluginNeeded, y as isMathJaxEnabled, z as isPath, B as loadConfigFromFile, C as mergeValaxyConfig, D as mergeViteConfigs, F as postProcessForSSG, H as processValaxyOptions, I as registerDevCommand, J as resolveAddonsConfig, K as resolveImportPath, L as resolveImportUrl, M as resolveOptions, N as resolveSiteConfig, O as resolveSiteConfigFromRoot, Q as resolveThemeConfigFromRoot, R as resolveThemeValaxyConfig, S as resolveUserThemeConfig, T as resolveValaxyConfig, U as resolveValaxyConfigFromRoot, W as run, X as ssgBuild, Y as ssgBuildLegacy, Z as startValaxyDev, _ as toAtFS, $ as transformObject, a0 as version } from '../shared/valaxy.CAIbzGO-.mjs';
 import 'node:path';
 import 'fs-extra';
 import 'consola/utils';

package/dist/shared/{valaxy.DXqMwOZX.mjs → valaxy.CAIbzGO-.mjs}

@@ -1675,7 +1675,7 @@ async function setupMarkdownPlugins(md, options, base = "/") {
   return md;
 }
 
-const version = "0.28.0-beta.2";
+const version = "0.28.0-beta.4";
 
 const GLOBAL_STATE = {
   valaxyApp: void 0,
@@ -2363,7 +2363,8 @@ function createConfigPlugin(options) {
 function getDefine(_options) {
   return {
     __VUE_PROD_DEVTOOLS__: false,
-    __INTLIFY_PROD_DEVTOOLS__: false
+    __INTLIFY_PROD_DEVTOOLS__: false,
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
   };
 }
 async function getAlias(options) {
@@ -3543,11 +3544,19 @@ async function createUnocssPlugin(options) {
   );
   let config = {};
   const configDeps = [];
-  for (const configFile of configFiles) {
-    if (await fs.exists(configFile)) {
-      const uConfig = await jiti.import(configFile, { default: true });
-      config = defu(config, uConfig);
-      configDeps.push(configFile);
+  const loadResults = await Promise.all(
+    configFiles.map(async (configFile) => {
+      if (await fs.exists(configFile)) {
+        const uConfig = await jiti.import(configFile, { default: true });
+        return { configFile, uConfig };
+      }
+      return null;
+    })
+  );
+  for (const result of loadResults) {
+    if (result) {
+      config = defu(config, result.uConfig);
+      configDeps.push(result.configFile);
     }
   }
   config = await loadSetups(roots, "unocss.ts", {}, config, true);
@@ -3564,15 +3573,22 @@ function defineValaxyAddon(addonFunc) {
 const defineAddon = defineValaxyAddon;
 async function resolveAddonsConfig(addons, options) {
   let valaxyConfig = {};
-  for (const addon of addons) {
-    const addonConfigPath = path$1.resolve(addon.root, "valaxy.config.ts");
-    if (!await fs.exists(addonConfigPath))
-      continue;
-    const { config, configFile } = await resolveValaxyConfigFromRoot(addon.root, options);
-    if (!config)
+  const results = await Promise.all(
+    addons.map(async (addon) => {
+      const addonConfigPath = path$1.resolve(addon.root, "valaxy.config.ts");
+      if (!await fs.exists(addonConfigPath))
+        return null;
+      const { config, configFile } = await resolveValaxyConfigFromRoot(addon.root, options);
+      if (!config)
+        return null;
+      return { addon, config, configFile };
+    })
+  );
+  for (const result of results) {
+    if (!result)
       continue;
-    addon.configFile = configFile;
-    valaxyConfig = mergeValaxyConfig(config, valaxyConfig);
+    result.addon.configFile = result.configFile;
+    valaxyConfig = mergeValaxyConfig(result.config, valaxyConfig);
   }
   return valaxyConfig;
 }
@@ -4280,7 +4296,7 @@ async function createRouterPlugin(valaxyApp) {
       }
       const path = route.components.get("default") || "";
       if (path.endsWith(".md")) {
-        const md = fs.readFileSync(path, "utf-8");
+        const md = await fs.readFile(path, "utf-8");
         const { data, excerpt, content } = matter(md, matterOptions);
         const mdFm = data;
         const lastUpdated = options.config.siteConfig.lastUpdated;
@@ -4432,6 +4448,13 @@ async function ViteValaxyPlugins(valaxyApp, serverOptions = {}) {
     // https://github.com/loicduong/vite-plugin-vue-layouts-next
     Layouts({
       layoutsDirs: roots.map((root) => `${root}/layouts`),
+      // In SSG builds, layout components must be imported synchronously so that
+      // the client-side hydration tree matches the server-rendered HTML. Without
+      // this, non-default layouts (post, home, etc.) are lazy-loaded and haven't
+      // resolved when hydration starts, causing a mismatch. The old vite-ssg
+      // library handled this by setting VITE_SSG=true; the built-in SSG engine
+      // needs an explicit importMode override instead.
+      ...options.mode === "build" ? { importMode: () => "sync" } : {},
       ...valaxyConfig.layouts
     }),
     // https://github.com/antfu/unplugin-vue-components
@@ -5636,19 +5659,6 @@ async function initServer(valaxyApp, viteConfig) {
     process.exit(1);
   }
 }
-if (import.meta.hot) {
-  await import.meta.hot.data.stopping;
-  let reload = async () => {
-    consola.info("HMR: Stop Server");
-    await GLOBAL_STATE.server?.close();
-  };
-  import.meta.hot.on("vite:beforeFullReload", () => {
-    const stopping = reload();
-    reload = () => Promise.resolve();
-    if (import.meta.hot)
-      import.meta.hot.data.stopping = stopping;
-  });
-}
 
 async function execBuild({ ssg, ssgEngine, root, output, log }) {
   setEnvProd();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy",
   "type": "module",
-  "version": "0.28.0-beta.2",
+  "version": "0.28.0-beta.4",
   "description": "📄 Vite & Vue powered static blog generator.",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -90,13 +90,13 @@
     "fs-extra": "^11.3.4",
     "fuse.js": "^7.1.0",
     "gray-matter": "^4.0.3",
-    "hookable": "^6.0.1",
+    "hookable": "^6.1.0",
     "html-to-text": "^9.0.5",
     "jiti": "^2.6.1",
     "js-base64": "^3.7.8",
     "js-yaml": "^4.1.1",
     "katex": "^0.16.38",
-    "lru-cache": "^11.2.6",
+    "lru-cache": "^11.2.7",
     "markdown-it": "^14.1.1",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-async": "^2.2.0",
@@ -140,8 +140,8 @@
     "vue-i18n": "^11.3.0",
     "vue-router": "^5.0.3",
     "yargs": "^18.0.0",
-    "@valaxyjs/devtools": "0.28.0-beta.2",
-    "@valaxyjs/utils": "0.28.0-beta.2"
+    "@valaxyjs/devtools": "0.28.0-beta.4",
+    "@valaxyjs/utils": "0.28.0-beta.4"
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^3.0.2",
@@ -164,7 +164,7 @@
     "@types/yargs": "^17.0.35",
     "gh-pages": "^6.3.0",
     "https-localhost": "^4.7.1",
-    "nanoid": "^5.1.6",
+    "nanoid": "^5.1.7",
     "rollup-plugin-visualizer": "^7.0.1",
     "unbuild": "^3.6.1"
   },