valaxy 0.28.5 → 0.28.6

package/client/composables/collections.ts

@@ -1,9 +1,9 @@
 import type { ComputedRef, MaybeRef } from 'vue'
 import type { CollectionConfig } from '../types'
-import collections from '#valaxy/blog/collections'
-
 import { computed, unref } from 'vue'
+
 import { useRoute } from 'vue-router'
+import collections from '#valaxy/blog/collections'
 import { usePageList } from './post'
 
 export interface PostCollectionInfo {

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

@@ -2,6 +2,98 @@ import mediumZoom from 'medium-zoom'
 import { useSiteConfig } from 'valaxy'
 import { onMounted } from 'vue'
 
+interface ZoomRectLike {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+interface ZoomImageStyle {
+  transform: string
+  width: string
+  height: string
+}
+
+interface SavedZoomImageStyle extends ZoomImageStyle {
+  element: HTMLElement
+}
+
+/**
+ * Convert the opened transform into real dimensions while keeping the same viewport rect.
+ * This avoids Chrome rendering the zoomed image blurry because of transform scaling.
+ *
+ * @see https://github.com/francoischalifour/medium-zoom/issues/151
+ * @see https://github.com/YunYouJun/valaxy/issues/317
+ * @see https://github.com/YunYouJun/valaxy/issues/692
+ */
+export function computeZoomRectStyle(
+  visualRect: ZoomRectLike,
+  layoutOffset: Pick<ZoomRectLike, 'left' | 'top'>,
+  scrollOffset = { x: 0, y: 0 },
+): ZoomImageStyle {
+  return {
+    transform: `translate3d(${visualRect.left + scrollOffset.x - layoutOffset.left}px, ${visualRect.top + scrollOffset.y - layoutOffset.top}px, 0)`,
+    width: `${visualRect.width}px`,
+    height: `${visualRect.height}px`,
+  }
+}
+
+function getDocumentScroll() {
+  return {
+    x: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
+    y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
+  }
+}
+
+function getStylePixelValue(value: string, fallback: number) {
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : fallback
+}
+
+function applyWithoutTransformTransition(element: HTMLElement, apply: () => void) {
+  const transition = element.style.transition
+  const transitionPriority = element.style.getPropertyPriority('transition')
+
+  element.style.setProperty('transition', 'none', 'important')
+  apply()
+  void element.offsetWidth
+
+  if (transition)
+    element.style.setProperty('transition', transition, transitionPriority)
+  else
+    element.style.removeProperty('transition')
+}
+
+function freezeOpenedImage(element: HTMLElement): SavedZoomImageStyle | null {
+  const scaleMatch = element.style.transform.match(/scale\(([^)]+)\)/)
+  const scale = scaleMatch ? Number.parseFloat(scaleMatch[1]) : 1
+  if (!scale || scale === 1)
+    return null
+
+  const rect = element.getBoundingClientRect()
+  const scrollOffset = getDocumentScroll()
+  const layoutOffset = {
+    left: getStylePixelValue(element.style.left, rect.left + scrollOffset.x),
+    top: getStylePixelValue(element.style.top, rect.top + scrollOffset.y),
+  }
+  const nextStyle = computeZoomRectStyle(rect, layoutOffset, scrollOffset)
+  const savedStyle: SavedZoomImageStyle = {
+    element,
+    transform: element.style.transform,
+    width: element.style.width,
+    height: element.style.height,
+  }
+
+  applyWithoutTransformTransition(element, () => {
+    element.style.transform = nextStyle.transform
+    element.style.width = nextStyle.width
+    element.style.height = nextStyle.height
+  })
+
+  return savedStyle
+}
+
 /**
  * @description image preview by medium-zoom
  */
@@ -19,54 +111,40 @@ export function useMediumZoom() {
         },
       )
 
-      // 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
+      let savedStyles: SavedZoomImageStyle[] = []
 
       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`
+        savedStyles = Array
+          .from(document.querySelectorAll<HTMLElement>('.medium-zoom-image--opened'))
+          .map(freezeOpenedImage)
+          .filter((style): style is SavedZoomImageStyle => style !== null)
       })
 
       zoom.on('close', () => {
-        if (!savedStyles)
+        if (!savedStyles.length)
           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
+        for (const style of savedStyles) {
+          const { element } = style
+          if (!document.body.contains(element))
+            continue
+
+          // Restore original medium-zoom styles (without transition) so the element
+          // is back to the state medium-zoom expects for its close animation.
+          applyWithoutTransformTransition(element, () => {
+            element.style.transform = style.transform
+            element.style.width = style.width
+            element.style.height = style.height
+          })
+
+          // medium-zoom sets `transform = ''` BEFORE dispatching the close event,
+          // but we just overwrote it above. Re-apply `''` to actually trigger the
+          // close transition; otherwise transitionend never fires and the cloned
+          // image element is never removed from the DOM.
+          element.style.transform = ''
         }
-        savedStyles = null
+
+        savedStyles = []
       })
     })
   }

package/client/composables/post/index.ts

@@ -1,10 +1,10 @@
 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'
+import collections from '#valaxy/blog/collections'
 import { useRouterStore } from '../../stores'
 import { isLocaleKey, stripLocalePrefix, tObject } from '../../utils'
 

package/client/config.ts

@@ -4,7 +4,7 @@ import type { ComputedRef, InjectionKey } from 'vue'
 // fix build caused by pnpm
 // This is likely not portable. A type annotation is necessary.
 // https://github.com/microsoft/TypeScript/issues/42873
-import type { DefaultTheme, ValaxyConfig } from '../types'
+import type { DefaultTheme, ValaxyAddon, ValaxyConfig } from '../types'
 import type { ValaxyData } from './app/data'
 import { computed, hasInjectionContext, inject, readonly, shallowRef } from 'vue'
 
@@ -102,3 +102,36 @@ export function useRuntimeConfig() {
   const config = useValaxyConfig()
   return computed(() => config!.value.runtimeConfig)
 }
+
+/**
+ * Get addon config from runtime config.
+ *
+ * A generic, type-safe shortcut that every addon and theme can use instead of
+ * manually calling `useRuntimeConfig()` + `computed(...)` + type assertion.
+ *
+ * Must be called inside `<script setup>` or a Vue lifecycle hook (same
+ * constraint as `useRuntimeConfig()`).
+ *
+ * @example
+ * ```ts
+ * // Inside an addon — replaces the boilerplate `useAddonXxxConfig()` pattern
+ * import type { MyOptions } from '../types'
+ * const config = useAddonConfig<MyOptions>('valaxy-addon-xxx')
+ * config.value?.options // MyOptions | undefined
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Inside a theme component — no dynamic import needed
+ * const algolia = useAddonConfig<AlgoliaSearchOptions>('valaxy-addon-algolia')
+ * if (algolia.value) { /* addon is installed and configured *\/ }
+ * ```
+ *
+ * @public
+ */
+export function useAddonConfig<AddonOptions = Record<string, any>>(addonName: string) {
+  const runtimeConfig = useRuntimeConfig()
+  return computed(() =>
+    runtimeConfig.value.addons[addonName] as ValaxyAddon<AddonOptions> | undefined,
+  )
+}

package/dist/node/cli/index.mjs

@@ -1,7 +1,7 @@
 import 'node:process';
 import 'yargs';
 import 'yargs/helpers';
-export { c as cli, J as registerDevCommand, X as run, _ as startValaxyDev } from '../../shared/valaxy.CC8moxgJ.mjs';
+export { c as cli, J as registerDevCommand, X as run, _ as startValaxyDev } from '../../shared/valaxy.BteINvcX.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 fixViteSsgHtml, r as generateClientRedirects, s as getGitTimestamp, t as getIndexHtml, u as getServerInfoText, v as isExternal, w as isInstalledGlobally, x as isKatexEnabled, y as isKatexPluginNeeded, z as isMathJaxEnabled, B as isPath, C as loadConfigFromFile, D as mergeValaxyConfig, F as mergeViteConfigs, H as postProcessForSSG, I as processValaxyOptions, J as registerDevCommand, K as resolveAddonsConfig, L as resolveImportPath, M as resolveImportUrl, N as resolveOptions, O as resolveSiteConfig, Q as resolveSiteConfigFromRoot, R as resolveThemeConfigFromRoot, S as resolveThemeValaxyConfig, T as resolveUserThemeConfig, U as resolveValaxyConfig, W as resolveValaxyConfigFromRoot, X as run, Y as ssgBuild, Z as ssgBuildLegacy, _ as startValaxyDev, $ as toAtFS, a0 as transformObject, a1 as version } from '../shared/valaxy.CC8moxgJ.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 fixViteSsgHtml, r as generateClientRedirects, s as getGitTimestamp, t as getIndexHtml, u as getServerInfoText, v as isExternal, w as isInstalledGlobally, x as isKatexEnabled, y as isKatexPluginNeeded, z as isMathJaxEnabled, B as isPath, C as loadConfigFromFile, D as mergeValaxyConfig, F as mergeViteConfigs, H as postProcessForSSG, I as processValaxyOptions, J as registerDevCommand, K as resolveAddonsConfig, L as resolveImportPath, M as resolveImportUrl, N as resolveOptions, O as resolveSiteConfig, Q as resolveSiteConfigFromRoot, R as resolveThemeConfigFromRoot, S as resolveThemeValaxyConfig, T as resolveUserThemeConfig, U as resolveValaxyConfig, W as resolveValaxyConfigFromRoot, X as run, Y as ssgBuild, Z as ssgBuildLegacy, _ as startValaxyDev, $ as toAtFS, a0 as transformObject, a1 as version } from '../shared/valaxy.BteINvcX.mjs';
 import 'node:path';
 import 'consola';
 import 'fs-extra';

package/dist/shared/{valaxy.CC8moxgJ.mjs → valaxy.BteINvcX.mjs}

@@ -213,8 +213,23 @@ function random(bytes) {
   return pool.subarray(poolOffset - bytes, poolOffset)
 }
 function customRandom(alphabet, defaultSize, getRandom) {
-  let mask = (2 << (31 - Math.clz32((alphabet.length - 1) | 1))) - 1;
-  let step = Math.ceil((1.6 * mask * defaultSize) / alphabet.length);
+  let safeByteCutoff = 256 - (256 % alphabet.length);
+  if (safeByteCutoff === 256) {
+    let mask = alphabet.length - 1;
+    return (size = defaultSize) => {
+      if (!size) return ''
+      let id = '';
+      while (true) {
+        let bytes = getRandom(size);
+        let i = size;
+        while (i--) {
+          id += alphabet[bytes[i] & mask];
+          if (id.length >= size) return id
+        }
+      }
+    }
+  }
+  let step = Math.ceil((1.6 * 256 * defaultSize) / safeByteCutoff);
   return (size = defaultSize) => {
     if (!size) return ''
     let id = '';
@@ -222,8 +237,10 @@ function customRandom(alphabet, defaultSize, getRandom) {
       let bytes = getRandom(step);
       let i = step;
       while (i--) {
-        id += alphabet[bytes[i] & mask] || '';
-        if (id.length >= size) return id
+        if (bytes[i] < safeByteCutoff) {
+          id += alphabet[bytes[i] % alphabet.length];
+          if (id.length >= size) return id
+        }
       }
     }
   }
@@ -1733,7 +1750,7 @@ async function setupMarkdownPlugins(md, options, base = "/") {
   return md;
 }
 
-const version = "0.28.5";
+const version = "0.28.6";
 
 const GLOBAL_STATE = {
   valaxyApp: void 0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy",
   "type": "module",
-  "version": "0.28.5",
+  "version": "0.28.6",
   "description": "📄 Vite & Vue powered static blog generator.",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -64,7 +64,7 @@
     "@antfu/utils": "^9.3.0",
     "@clack/prompts": "^1.2.0",
     "@iconify-json/ri": "^1.2.10",
-    "@intlify/unplugin-vue-i18n": "^11.0.7",
+    "@intlify/unplugin-vue-i18n": "^11.1.2",
     "@shikijs/transformers": "^3.23.0",
     "@types/katex": "^0.16.8",
     "@unhead/addons": "^2.1.13",
@@ -85,7 +85,7 @@
     "ejs": "^5.0.2",
     "escape-html": "^1.0.3",
     "fast-glob": "^3.3.3",
-    "feed": "^5.2.0",
+    "feed": "^5.2.1",
     "floating-vue": "^5.2.2",
     "fs-extra": "^11.3.4",
     "fuse.js": "^7.3.0",
@@ -113,7 +113,7 @@
     "mlly": "^1.8.2",
     "nprogress": "^0.2.0",
     "open": "10.1.0",
-    "ora": "^9.3.0",
+    "ora": "^9.4.0",
     "p-map": "^7.0.4",
     "pascalcase": "^2.0.0",
     "pathe": "^2.0.3",
@@ -129,18 +129,18 @@
     "unplugin-vue-components": "28.0.0",
     "unplugin-vue-markdown": "^30.0.0",
     "vanilla-lazyload": "^19.1.3",
-    "vite": "^8.0.8",
+    "vite": "^8.0.10",
     "vite-plugin-vue-devtools": "^8.1.1",
     "vite-plugin-vue-layouts-next": "^2.1.0",
     "vite-ssg": "^28.3.0",
     "vite-ssg-sitemap": "^0.10.0",
     "vitepress-plugin-group-icons": "^1.7.5",
     "vue": "3.5.22",
-    "vue-i18n": "^11.3.2",
-    "vue-router": "^5.0.4",
+    "vue-i18n": "^11.4.0",
+    "vue-router": "^5.0.6",
     "yargs": "^18.0.0",
-    "@valaxyjs/utils": "0.28.5",
-    "@valaxyjs/devtools": "0.28.5"
+    "@valaxyjs/devtools": "0.28.6",
+    "@valaxyjs/utils": "0.28.6"
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^3.0.2",
@@ -163,7 +163,7 @@
     "@types/yargs": "^17.0.35",
     "gh-pages": "^6.3.0",
     "https-localhost": "^4.7.1",
-    "nanoid": "^5.1.7",
+    "nanoid": "^5.1.9",
     "rollup-plugin-visualizer": "^7.0.1",
     "unbuild": "^3.6.1"
   },