@sugarat/theme 0.5.7 → 0.5.9

package/node.d.ts

@@ -186,6 +186,27 @@ declare namespace Theme {
          * @default false
          */
         blogInfoCollapsible?: boolean;
+        /**
+         * 旋转的配置
+         */
+        hoverSpin?: boolean | HoverSpinConfig;
+    }
+    interface HoverSpinConfig {
+        /**
+         * 旋转的加速度
+         * @default 180
+         */
+        accel?: number;
+        /**
+         * 旋转的最大角速度
+         * @default 2160
+         */
+        maxVel?: number;
+        /**
+         * 缓停时长
+         * @default 1500
+         */
+        decelDuration?: number;
     }
     interface ArticleConfig {
         /**

package/node.js

@@ -41,7 +41,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@https+++pkg.pr.new+vitepress@3d61619_@types+node@_fc84fc5ced1bdf672a18932976f96d0a/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_06f14e686e1fb3002156f3936c305549/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -235,7 +235,7 @@ function getFirstImagURLFromMD(content, route) {
   const paths = (0, import_theme_shared.joinPath)("/", route).split("/");
   paths.splice(paths.length - 1, 1);
   const relativePath = url.startsWith("/") ? url : import_node_path.default.join(paths.join("/") || "", url);
-  return (0, import_theme_shared.joinPath)("/", relativePath);
+  return (0, import_theme_shared.joinPath)("/", (0, import_theme_shared.normalizePath)(relativePath));
 }
 function debounce(func, delay = 1e3) {
   let timeoutId;
@@ -549,12 +549,12 @@ function themeReloadPlugin() {
 function getVitePlugins(cfg = {}) {
   const plugins = [];
   plugins.push(cacheAllGitTimestampsPlugin());
-  plugins.push(coverImgTransform());
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor));
   }
   plugins.push(themeReloadPlugin());
   plugins.push(providePageData(cfg));
+  plugins.push(coverImgTransform());
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {};
     plugins.push(
@@ -638,13 +638,16 @@ function coverImgTransform() {
           const value = v.meta[k];
           if (value && typeof value === "string" && value.startsWith("/")) {
             const absolutePath = `${vitepressConfig.srcDir}${value}`;
-            if (relativeMetaMap[absolutePath]) {
-              Object.assign(v.meta, { [k]: relativeMetaMap[absolutePath][k] });
-              return;
+            if (relativePathMap[absolutePath]) {
+              Object.assign(v.meta, {
+                [k]: relativeMetaMap[absolutePath][k]
+              });
             }
             relativePathMap[value] = absolutePath;
             relativePathMap[absolutePath] = value;
-            relativeMeta.push(v.meta);
+            if (!relativeMeta.includes(v.meta)) {
+              relativeMeta.push(v.meta);
+            }
             relativeMetaMap[absolutePath] = v.meta;
           }
         });

package/node.mjs

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/utils/node/mdPlugins.ts
 import { createRequire } from "module";
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@https+++pkg.pr.new+vitepress@3d61619_@types+node@_fc84fc5ced1bdf672a18932976f96d0a/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_06f14e686e1fb3002156f3936c305549/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -179,7 +179,7 @@ import { groupIconMdPlugin } from "vitepress-plugin-group-icons";
 
 // src/utils/node/index.ts
 import path from "node:path";
-import { joinPath } from "@sugarat/theme-shared";
+import { joinPath, normalizePath } from "@sugarat/theme-shared";
 function aliasObjectToArray(obj) {
   return Object.entries(obj).map(([find, replacement]) => ({
     find,
@@ -203,7 +203,7 @@ function getFirstImagURLFromMD(content, route) {
   const paths = joinPath("/", route).split("/");
   paths.splice(paths.length - 1, 1);
   const relativePath = url.startsWith("/") ? url : path.join(paths.join("/") || "", url);
-  return joinPath("/", relativePath);
+  return joinPath("/", normalizePath(relativePath));
 }
 function debounce(func, delay = 1e3) {
   let timeoutId;
@@ -301,7 +301,7 @@ function patchOptimizeDeps(config) {
 
 // src/utils/node/theme.ts
 import fs from "node:fs";
-import { getDefaultTitle, getFileLastModifyTime, getTextSummary, getVitePressPages, grayMatter, normalizePath, renderDynamicMarkdown } from "@sugarat/theme-shared";
+import { getDefaultTitle, getFileLastModifyTime, getTextSummary, getVitePressPages, grayMatter, normalizePath as normalizePath2, renderDynamicMarkdown } from "@sugarat/theme-shared";
 
 // src/utils/client/index.ts
 function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
@@ -517,12 +517,12 @@ function themeReloadPlugin() {
 function getVitePlugins(cfg = {}) {
   const plugins = [];
   plugins.push(cacheAllGitTimestampsPlugin());
-  plugins.push(coverImgTransform());
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor));
   }
   plugins.push(themeReloadPlugin());
   plugins.push(providePageData(cfg));
+  plugins.push(coverImgTransform());
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {};
     plugins.push(
@@ -606,13 +606,16 @@ function coverImgTransform() {
           const value = v.meta[k];
           if (value && typeof value === "string" && value.startsWith("/")) {
             const absolutePath = `${vitepressConfig.srcDir}${value}`;
-            if (relativeMetaMap[absolutePath]) {
-              Object.assign(v.meta, { [k]: relativeMetaMap[absolutePath][k] });
-              return;
+            if (relativePathMap[absolutePath]) {
+              Object.assign(v.meta, {
+                [k]: relativeMetaMap[absolutePath][k]
+              });
             }
             relativePathMap[value] = absolutePath;
             relativePathMap[absolutePath] = value;
-            relativeMeta.push(v.meta);
+            if (!relativeMeta.includes(v.meta)) {
+              relativeMeta.push(v.meta);
+            }
             relativeMetaMap[absolutePath] = v.meta;
           }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -53,10 +53,10 @@
     "vitepress-plugin-group-icons": "1.2.4",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
-    "vitepress-plugin-pagefind": "0.4.15",
+    "@sugarat/theme-shared": "0.0.6",
+    "vitepress-plugin-rss": "0.3.4",
     "vitepress-plugin-announcement": "0.1.5",
-    "vitepress-plugin-rss": "0.3.2",
-    "@sugarat/theme-shared": "0.0.6"
+    "vitepress-plugin-pagefind": "0.4.16"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
@@ -66,7 +66,7 @@
     "sass": "^1.80.6",
     "typescript": "^5.4.5",
     "vite": "^5.4.9",
-    "vitepress": "https://pkg.pr.new/vitepress@3d61619",
+    "vitepress": "2.0.0-alpha.15",
     "vue": "^3.5.12",
     "vitepress-plugin-51la": "0.1.0"
   },

package/src/components/BlogAuthor.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { useData, withBase } from 'vitepress'
-import { computed } from 'vue'
-import { useBlogConfig, useGlobalAuthor, useHomeConfig } from '../composables/config/blog'
+import { computed, ref } from 'vue'
+import { useGlobalAuthor, useHomeConfig } from '../composables/config/blog'
+import { useHoverSpin } from '../hooks/useHoverSpin'
 
 const home = useHomeConfig()
 const { frontmatter, site } = useData()
@@ -20,11 +21,15 @@ const logo = computed(() =>
   ?? '/logo.png'
 )
 const show = computed(() => author.value || logo.value)
+
+const imgRef = ref(null)
+
+useHoverSpin(imgRef, home?.value?.hoverSpin)
 </script>
 
 <template>
   <div v-if="show" class="blog-author">
-    <img v-if="logo" :src="withBase(logo)" alt="avatar">
+    <img v-if="logo" ref="imgRef" :src="withBase(logo)" alt="avatar">
     <p v-if="author">
       {{ author }}
     </p>
@@ -42,12 +47,7 @@ const show = computed(() => author.value || logo.value)
     height: 100px;
     border-radius: 50%;
     background-color: rgba(var(--bg-gradient-home));
-  }
-
-  img:hover {
-    transform: rotate(666turn);
-    transition-duration: 59s;
-    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+    cursor: pointer;
   }
 
   p {

package/src/components/BlogHomeHeaderAvatar.vue

@@ -1,7 +1,8 @@
 <script  setup lang="ts">
 import { useData, withBase } from 'vitepress'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useHomeConfig } from '../composables/config/blog'
+import { useHoverSpin } from '../hooks/useHoverSpin'
 
 const home = useHomeConfig()
 const { frontmatter, site } = useData()
@@ -13,11 +14,14 @@ const logo = computed(() =>
     ?? '/logo.png'
 )
 const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === false)
+
+const imgRef = ref(null)
+useHoverSpin(imgRef, home?.value?.hoverSpin)
 </script>
 
 <template>
   <div v-show="!alwaysHide" class="blog-home-header-avatar">
-    <img :src="withBase(logo)" alt="avatar">
+    <img ref="imgRef" :src="withBase(logo)" alt="avatar">
   </div>
 </template>
 
@@ -36,13 +40,14 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
         background-color: transparent;
         border: 5px solid rgba(var(--bg-gradient-home));
         box-sizing: border-box;
+        cursor: pointer;
     }
 
-    img:hover {
-        transform: rotate(666turn);
-        transition-duration: 59s;
-        transition-timing-function: cubic-bezier(.34, 0, .84, 1)
-    }
+    // img:hover {
+    //     transform: rotate(666turn);
+    //     transition-duration: 59s;
+    //     transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+    // }
 }
 
 @media screen and (min-width: 768px) {

package/src/components/BlogList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import { ElPagination } from 'element-plus'
 import { useData, useRoute, useRouter } from 'vitepress'
 import {
@@ -70,7 +70,6 @@ function handleUpdatePageNum(current: number) {
 }
 
 const route = useRoute()
-
 function refreshCurrentPage() {
   if (typeof window === 'undefined')
     return
@@ -78,7 +77,9 @@ function refreshCurrentPage() {
   const searchParams = new URLSearchParams(search)
   const pageNum = Number(searchParams.get(queryPageNumKey)) || 1
   if (pageNum !== currentPage.value) {
-    currentPage.value = pageNum
+    nextTick(() => {
+      currentPage.value = pageNum
+    })
   }
 }
 watch(route, () => {
@@ -86,7 +87,7 @@ watch(route, () => {
 }, { immediate: true })
 
 // 未覆盖的场景处理 左上回到首页
-router.onAfterRouteChanged = () => {
+router.onAfterRouteChange = () => {
   refreshCurrentPage()
 }
 </script>

package/src/composables/config/index.ts

@@ -191,6 +191,28 @@ export namespace Theme {
      * @default false
      */
     blogInfoCollapsible?: boolean
+    /**
+     * 旋转的配置
+     */
+    hoverSpin?: boolean | HoverSpinConfig
+  }
+
+  export interface HoverSpinConfig {
+    /**
+     * 旋转的加速度
+     * @default 180
+     */
+    accel?: number
+    /**
+     * 旋转的最大角速度
+     * @default 2160
+     */
+    maxVel?: number
+    /**
+     * 缓停时长
+     * @default 1500
+     */
+    decelDuration?: number
   }
 
   export interface ArticleConfig {

package/src/hooks/useHoverSpin.ts

@@ -0,0 +1,114 @@
+import { type Ref, onMounted, onUnmounted } from 'vue'
+import type { Theme } from '../composables/config/index'
+
+/**
+ * 元素悬停旋转
+ * @param elRef 元素引用
+ * @param accel 加速度
+ * @param maxVel 最大角速度
+ * @param decelDuration 缓停时长
+ */
+export function useHoverSpin(elRef: Ref<HTMLElement | null>, hoverSpinConfig?: Theme.HoverSpinConfig | boolean) {
+  const { accel = 180, maxVel = 2160, decelDuration = 1500 } = hoverSpinConfig === true ? {} : hoverSpinConfig || {}
+  let rafId = 0
+  let lastTs = 0
+  let rotation = 0
+  let velocity = 0
+  let decelStart = 0
+  let decelStartRotation = 0
+  let decelTargetRotation = 0
+  let decelBias = 0
+  let isDecel = false
+  let hovering = false
+
+  function animate(ts: number) {
+    if (!lastTs)
+      lastTs = ts
+    const dt = (ts - lastTs) / 1000
+    lastTs = ts
+
+    if (hovering) {
+      isDecel = false
+      decelStart = 0
+      velocity = Math.min(velocity + accel * dt, maxVel)
+      rotation += velocity * dt
+    }
+    else if (isDecel) {
+      const t = Math.min((ts - decelStart) / decelDuration, 1)
+      const durSec = decelDuration / 1000
+      const base = velocity * durSec * (t - t * t / 2)
+      const smooth = 3 * t * t - 2 * t * t * t
+      rotation = decelStartRotation + base + decelBias * smooth
+      if (t >= 1) {
+        decelTargetRotation = 0
+        decelStartRotation = 0
+        decelBias = 0
+        rotation = decelTargetRotation
+        velocity = 0
+        isDecel = false
+        if (rafId) {
+          cancelAnimationFrame(rafId)
+          rafId = 0
+        }
+        const el2 = elRef.value as HTMLElement | null
+        if (el2)
+          el2.style.transform = `rotate(${rotation}deg)`
+        return
+      }
+    }
+
+    const el = elRef.value as HTMLElement | null
+    if (el)
+      el.style.transform = `rotate(${rotation}deg)`
+    if (hovering || isDecel) {
+      rafId = requestAnimationFrame(animate)
+    }
+    else if (rafId) {
+      cancelAnimationFrame(rafId)
+      rafId = 0
+    }
+  }
+
+  function onEnter() {
+    hovering = true
+    if (!rafId) {
+      lastTs = 0
+      rafId = requestAnimationFrame(animate)
+    }
+  }
+
+  function onLeave() {
+    hovering = false
+    isDecel = true
+    decelStart = performance.now()
+    decelStartRotation = rotation
+    const durSec = decelDuration / 1000
+    const S = velocity * durSec / 2
+    const minTarget = decelStartRotation + S
+    decelTargetRotation = Math.ceil(minTarget / 360) * 360
+    decelBias = (decelTargetRotation - decelStartRotation) - S
+    lastTs = 0
+  }
+
+  onMounted(() => {
+    if (hoverSpinConfig === false)
+      return
+    const el = elRef.value
+    if (!el)
+      return
+    el.addEventListener('mouseenter', onEnter)
+    el.addEventListener('mouseleave', onLeave)
+  })
+
+  onUnmounted(() => {
+    if (hoverSpinConfig === false)
+      return
+    const el = elRef.value
+    if (el) {
+      el.removeEventListener('mouseenter', onEnter)
+      el.removeEventListener('mouseleave', onLeave)
+    }
+    if (rafId)
+      cancelAnimationFrame(rafId)
+  })
+}

package/src/utils/node/index.ts

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { joinPath } from '@sugarat/theme-shared'
+import { joinPath, normalizePath } from '@sugarat/theme-shared'
 
 export function aliasObjectToArray(obj: Record<string, string>) {
   return Object.entries(obj).map(([find, replacement]) => ({
@@ -34,8 +34,7 @@ export function getFirstImagURLFromMD(content: string, route: string) {
   const paths = joinPath('/', route).split('/')
   paths.splice(paths.length - 1, 1)
   const relativePath = url.startsWith('/') ? url : path.join(paths.join('/') || '', url)
-
-  return joinPath('/', relativePath)
+  return joinPath('/', normalizePath(relativePath))
 }
 
 export function debounce(func: any, delay = 1000) {

package/src/utils/node/theme.ts

@@ -65,7 +65,7 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
     ])
 
   // 获取摘要信息
-  // TODO：摘要生成优化
+  // TODO：摘要生成优化，支持AI？
   meta.description
     = meta.description || getTextSummary(content, 100) || excerpt
 

package/src/utils/node/vitePlugins.ts

@@ -18,9 +18,6 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   // 缓存所有文章的 git 提交时间
   plugins.push(cacheAllGitTimestampsPlugin())
 
-  // 处理 cover image 的路径（暂只支持自动识别的文章首图）
-  plugins.push(coverImgTransform())
-
   // 处理自定义主题色
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor))
@@ -31,6 +28,8 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   // 主题 pageData生成
   plugins.push(providePageData(cfg))
 
+  // 处理 cover image 的路径（暂只支持自动识别的文章首图）
+  plugins.push(coverImgTransform())
   // 内置 pagefind
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {}
@@ -165,15 +164,18 @@ export function coverImgTransform() {
           if (value && typeof value === 'string' && value.startsWith('/')) {
             const absolutePath = `${vitepressConfig.srcDir}${value}`
 
-            // 复用已经映射后的值
-            if (relativeMetaMap[absolutePath]) {
-              Object.assign(v.meta, { [k]: relativeMetaMap[absolutePath][k] })
-              return
+            // 已经映射后的值
+            if (relativePathMap[absolutePath]) {
+              Object.assign(v.meta, {
+                [k]: relativeMetaMap[absolutePath][k]
+              })
             }
 
             relativePathMap[value] = absolutePath
             relativePathMap[absolutePath] = value
-            relativeMeta.push(v.meta)
+            if (!relativeMeta.includes(v.meta)) {
+              relativeMeta.push(v.meta)
+            }
             relativeMetaMap[absolutePath] = v.meta
           }
         })