@sugarat/theme 0.3.0 → 0.3.1

package/node.d.ts

@@ -406,6 +406,12 @@ declare namespace Theme {
         oml2d?: Options;
         homeTags?: boolean;
         buttonAfterArticle?: ButtonAfterArticleConfig | false;
+        /**
+         * 是否开启深色模式过渡动画
+         * @reference https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+         * @default true
+         */
+        darkTransition?: boolean;
     }
     interface BackToTop {
         /**

package/node.js

@@ -40,7 +40,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@1.0.2_vue@3.4.21/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.1.4_@algolia+client-search@4.19.1_@types+node@20.6.3__ee2wap4ljxfukruj47sfuqlmqq/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -210,69 +210,9 @@ var import_vitepress_markdown_timeline = __toESM(require("vitepress-markdown-tim
 // src/utils/node/index.ts
 var import_node_child_process = require("child_process");
 var import_node_path = __toESM(require("path"));
-
-// src/utils/client/index.ts
-function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
-  if (!(d instanceof Date)) {
-    d = new Date(d);
-  }
-  const o = {
-    "M+": d.getMonth() + 1,
-    // 月份
-    "d+": d.getDate(),
-    // 日
-    "h+": d.getHours(),
-    // 小时
-    "m+": d.getMinutes(),
-    // 分
-    "s+": d.getSeconds(),
-    // 秒
-    "q+": Math.floor((d.getMonth() + 3) / 3),
-    // 季度
-    "S": d.getMilliseconds()
-    // 毫秒
-  };
-  if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(
-      RegExp.$1,
-      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
-    );
-  }
-  for (const k in o) {
-    if (new RegExp(`(${k})`).test(fmt))
-      fmt = fmt.replace(
-        RegExp.$1,
-        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
-      );
-  }
-  return fmt;
-}
-
-// src/utils/node/index.ts
-function clearMatterContent(content) {
-  let first___;
-  let second___;
-  const lines = content.split("\n").reduce((pre, line) => {
-    if (!line.trim() && pre.length === 0) {
-      return pre;
-    }
-    if (line.trim() === "---") {
-      if (first___ === void 0) {
-        first___ = pre.length;
-      } else if (second___ === void 0) {
-        second___ = pre.length;
-      }
-    }
-    pre.push(line);
-    return pre;
-  }, []);
-  return lines.slice(second___ || 0).join("\n");
-}
 function getDefaultTitle(content) {
-  const title = clearMatterContent(content).split("\n")?.find((str) => {
-    return str.startsWith("# ");
-  })?.slice(2).replace(/^\s+|\s+$/g, "") || "";
-  return title;
+  const match = content.match(/^(#+)\s+(.+)/m);
+  return match?.[2] || "";
 }
 function getFileBirthTime(url) {
   let date = /* @__PURE__ */ new Date();
@@ -282,12 +222,12 @@ function getFileBirthTime(url) {
       date = new Date(infoStr);
     }
   } catch (error) {
-    return formatDate(date);
+    return date;
   }
-  return formatDate(date);
+  return date;
 }
 function getTextSummary(text, count = 100) {
-  return clearMatterContent(text).match(/^# ([\s\S]+)/m)?.[1]?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.slice(1)?.join("\n")?.replace(/>(.*)/, "")?.slice(0, count);
+  return text?.replace(/^#+\s+.*/, "")?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.join("\n")?.replace(/>(.*)/, "")?.trim()?.slice(0, count);
 }
 function aliasObjectToArray(obj) {
   return Object.entries(obj).map(([find, replacement]) => ({
@@ -317,6 +257,37 @@ function getFirstImagURLFromMD(content, route) {
   const relativePath = url.startsWith("/") ? url : import_node_path.default.join(paths.join("/") || "", url);
   return joinPath("/", relativePath);
 }
+function debounce(func, delay = 1e3) {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...rest);
+    }, delay);
+  };
+}
+function isEqual(obj1, obj2, excludeKeys = []) {
+  const keys1 = Object.keys(obj1).filter((key) => !excludeKeys.includes(key));
+  const keys2 = Object.keys(obj2).filter((key) => !excludeKeys.includes(key));
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (!keys2.includes(key)) {
+      return false;
+    }
+    const val1 = obj1[key];
+    const val2 = obj2[key];
+    const areObjects = isObject(val1) && isObject(val2);
+    if (areObjects && !isEqual(val1, val2, excludeKeys) || !areObjects && val1 !== val2) {
+      return false;
+    }
+  }
+  return true;
+}
+function isObject(obj) {
+  return obj != null && typeof obj === "object";
+}
 
 // src/utils/node/mdPlugins.ts
 var import_meta = {};
@@ -384,6 +355,45 @@ var import_node_path2 = __toESM(require("path"));
 var import_node_process = __toESM(require("process"));
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_gray_matter = __toESM(require("gray-matter"));
+
+// src/utils/client/index.ts
+function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  const o = {
+    "M+": d.getMonth() + 1,
+    // 月份
+    "d+": d.getDate(),
+    // 日
+    "h+": d.getHours(),
+    // 小时
+    "m+": d.getMinutes(),
+    // 分
+    "s+": d.getSeconds(),
+    // 秒
+    "q+": Math.floor((d.getMonth() + 3) / 3),
+    // 季度
+    "S": d.getMilliseconds()
+    // 毫秒
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
+    );
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
+      );
+  }
+  return fmt;
+}
+
+// src/utils/node/theme.ts
 function patchDefaultThemeSideBar(cfg) {
   return cfg?.blog !== false && cfg?.recommend !== false ? {
     sidebar: [
@@ -394,64 +404,69 @@ function patchDefaultThemeSideBar(cfg) {
     ]
   } : void 0;
 }
-var pageMap = /* @__PURE__ */ new Map();
+function getPageRoute(filepath, srcDir) {
+  let route = filepath.replace(".md", "");
+  if (route.startsWith("./")) {
+    route = route.replace(
+      new RegExp(
+        `^\\.\\/${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
+      ),
+      ""
+    );
+  } else {
+    route = route.replace(
+      new RegExp(
+        `^${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
+      ),
+      ""
+    );
+  }
+  return `/${route}`;
+}
+var defaultTimeZoneOffset = (/* @__PURE__ */ new Date()).getTimezoneOffset() / -60;
+function getArticleMeta(filepath, route, timeZone = defaultTimeZoneOffset) {
+  const fileContent = import_node_fs.default.readFileSync(filepath, "utf-8");
+  const { data: frontmatter, excerpt, content } = (0, import_gray_matter.default)(fileContent, {
+    excerpt: true
+  });
+  const meta = {
+    ...frontmatter
+  };
+  if (!meta.title) {
+    meta.title = getDefaultTitle(content);
+  }
+  if (!meta.date) {
+    meta.date = formatDate(getFileBirthTime(filepath));
+  } else {
+    meta.date = formatDate(
+      /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
+    );
+  }
+  meta.categories = typeof meta.categories === "string" ? [meta.categories] : meta.categories;
+  meta.tags = typeof meta.tags === "string" ? [meta.tags] : meta.tags;
+  meta.tag = [meta.tag || []].flat().concat([
+    .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
+  ]);
+  meta.description = meta.description || getTextSummary(content, 100) || excerpt;
+  meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, route);
+  if (meta.publish === false) {
+    meta.hidden = true;
+    meta.recommend = false;
+  }
+  return meta;
+}
 function getArticles(cfg) {
   const srcDir = cfg?.srcDir || import_node_process.default.argv.slice(2)?.[1] || ".";
   const files = import_fast_glob.default.sync(`${srcDir}/**/*.md`, { ignore: ["node_modules"] });
-  const data = files.map((v) => {
-    let route = v.replace(".md", "");
-    if (route.startsWith("./")) {
-      route = route.replace(
-        new RegExp(
-          `^\\.\\/${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
-        ),
-        ""
-      );
-    } else {
-      route = route.replace(
-        new RegExp(
-          `^${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
-        ),
-        ""
-      );
-    }
-    pageMap.set(`/${route}`, v);
-    const fileContent = import_node_fs.default.readFileSync(v, "utf-8");
-    const { data: frontmatter, excerpt } = (0, import_gray_matter.default)(fileContent, {
-      excerpt: true
-    });
-    const meta = {
-      ...frontmatter
-    };
-    if (!meta.title) {
-      meta.title = getDefaultTitle(fileContent);
-    }
-    if (!meta.date) {
-      meta.date = getFileBirthTime(v);
-    } else {
-      const timeZone = cfg?.timeZone ?? 8;
-      meta.date = formatDate(
-        /* @__PURE__ */ new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
-      );
-    }
-    meta.categories = typeof meta.categories === "string" ? [meta.categories] : meta.categories;
-    meta.tags = typeof meta.tags === "string" ? [meta.tags] : meta.tags;
-    meta.tag = [meta.tag || []].flat().concat([
-      .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
-    ]);
-    const wordCount = 100;
-    meta.description = meta.description || getTextSummary(fileContent, wordCount);
-    meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, `/${route}`);
-    if (meta.publish === false) {
-      meta.hidden = true;
-      meta.recommend = false;
-    }
+  const pageData = files.map((filepath) => {
+    const route = getPageRoute(filepath, srcDir);
+    const meta = getArticleMeta(filepath, route, cfg?.timeZone);
     return {
-      route: `/${route}`,
+      route,
       meta
     };
   }).filter((v) => v.meta.layout !== "home");
-  return data;
+  return pageData;
 }
 function patchVPConfig(vpConfig, cfg) {
   vpConfig.head = vpConfig.head || [];
@@ -478,11 +493,64 @@ var import_node_fs2 = require("fs");
 var import_node_buffer = require("buffer");
 var import_vitepress_plugin_pagefind = require("vitepress-plugin-pagefind");
 var import_vitepress_plugin_rss = require("vitepress-plugin-rss");
+
+// src/utils/node/hot-reload-plugin.ts
+function themeReloadPlugin() {
+  let blogConfig;
+  let vitepressConfig;
+  let docsDir;
+  const generateRoute = (filepath) => {
+    return filepath.replace(docsDir, "").replace(".md", "");
+  };
+  return {
+    name: "@sugarat/theme-reload",
+    apply: "serve",
+    configureServer(server) {
+      const restart = debounce(() => {
+        server.restart();
+      }, 500);
+      server.watcher.on("add", (path4) => {
+        const route = generateRoute(path4);
+        const meta = getArticleMeta(path4, route, blogConfig?.timeZone);
+        blogConfig.pagesData.push({
+          route,
+          meta
+        });
+        restart();
+      });
+      server.watcher.on("change", (path4) => {
+        const route = generateRoute(path4);
+        const meta = getArticleMeta(path4, route, blogConfig?.timeZone);
+        const matched = blogConfig.pagesData.find((v) => v.route === route);
+        if (matched && !isEqual(matched.meta, meta, ["date", "description"])) {
+          matched.meta = meta;
+          restart();
+        }
+      });
+      server.watcher.on("unlink", (path4) => {
+        const route = generateRoute(path4);
+        const idx = blogConfig.pagesData.findIndex((v) => v.route === route);
+        if (idx >= 0) {
+          blogConfig.pagesData.splice(idx, 1);
+          restart();
+        }
+      });
+    },
+    configResolved(config) {
+      vitepressConfig = config.vitepress;
+      docsDir = vitepressConfig.srcDir;
+      blogConfig = config.vitepress.site.themeConfig.blog;
+    }
+  };
+}
+
+// src/utils/node/vitePlugins.ts
 function getVitePlugins(cfg) {
   const plugins = [];
   const buildEndFn = [];
   plugins.push(inlineBuildEndPlugin(buildEndFn));
   plugins.push(coverImgTransform());
+  plugins.push(themeReloadPlugin());
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {};
     plugins.push(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -58,7 +58,8 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.2",
+    "vite": "^5",
+    "vitepress": "1.1.4",
     "vue": "^3.4.21"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -2,8 +2,9 @@
 import Theme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import { useDarkTransition } from '../hooks/useDarkTransition'
 import { useOml2d } from '../hooks/useOml2d'
-import { useBlogThemeMode } from '../composables/config/blog'
+import { useBlogThemeMode, useDarkTransitionConfig } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
 import BlogList from './BlogList.vue'
@@ -28,14 +29,20 @@ const { Layout } = Theme
 
 // oh-my-live2d 扩展
 useOml2d()
+// 切换深色模式过渡
+// https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+useDarkTransition()
+const openTransition = useDarkTransitionConfig()
 </script>
 
 <template>
-  <Layout>
+  <Layout :class="{ 'blog-theme-layout': openTransition }">
     <template #layout-top>
       <slot name="layout-top" />
-      <BlogAlert />
-      <BlogPopover />
+      <ClientOnly>
+        <BlogAlert />
+        <BlogPopover />
+      </ClientOnly>
     </template>
 
     <template #doc-before>
@@ -224,3 +231,7 @@ useOml2d()
   }
 }
 </style>
+
+<style>
+@import url(./../styles/dark-transition.css);
+</style>

package/src/components/BlogHomeBanner.vue

@@ -126,7 +126,7 @@ h1 {
 
 .inspiring-wrapper {
   margin: 16px 0;
-  height: 24px;
+  height: 32px;
   width: auto;
 
   h2 {

package/src/components/BlogHomeHeaderAvatar.vue

@@ -1,12 +1,8 @@
 <script  setup lang="ts">
 import { useData, withBase } from 'vitepress'
 import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
 import { useBlogConfig } from '../composables/config/blog'
 
-const { width } = useWindowSize()
-const inMiniScreen = computed(() => width.value <= 767)
-
 const { home } = useBlogConfig()
 const { frontmatter, site } = useData()
 const logo = computed(() =>
@@ -19,7 +15,7 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
 </script>
 
 <template>
-  <div v-show="inMiniScreen && !alwaysHide" class="blog-home-header-avatar">
+  <div v-show="!alwaysHide" class="blog-home-header-avatar">
     <img :src="withBase(logo)" alt="avatar">
   </div>
 </template>
@@ -47,4 +43,10 @@ const alwaysHide = computed(() => frontmatter.value.blog?.minScreenAvatar === fa
         transition-timing-function: cubic-bezier(.34, 0, .84, 1)
     }
 }
+
+@media screen and (min-width: 768px) {
+  .blog-home-header-avatar{
+    display: none;
+  }
+}
 </style>

package/src/components/BlogHomeInfo.vue

@@ -34,7 +34,7 @@ import BlogFriendLink from './BlogFriendLink.vue'
 
 @media screen and (min-width: 767px) {
   .blog-info {
-    max-width: 300px;
+    width: 280px;
   }
 }
 </style>

package/src/components/BlogHotArticle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { ElButton, ElLink } from 'element-plus'
-import { withBase } from 'vitepress'
+import { ElButton } from 'element-plus'
+import { useRouter, withBase } from 'vitepress'
 import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
@@ -26,6 +26,11 @@ const recommendList = computed(() => {
 })
 
 const currentPage = ref(1)
+
+const router = useRouter()
+function handleLinkClick(link: string) {
+  router.go(link)
+}
 function changePage() {
   const newIdx
     = currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
@@ -48,7 +53,10 @@ const showChangeBtn = computed(() => {
 </script>
 
 <template>
-  <div v-if="_hotArticle !== false && (recommendList.length || empty) " class="card recommend" data-pagefind-ignore="all">
+  <div
+    v-if="_hotArticle !== false && (recommendList.length || empty)" class="card recommend"
+    data-pagefind-ignore="all"
+  >
     <!-- 头部 -->
     <div class="card-header">
       <span class="title" v-html="title" />
@@ -64,11 +72,19 @@ const showChangeBtn = computed(() => {
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
-          <ElLink type="info" class="title" :href="withBase(v.route)">
-            {{
-              v.meta.title
-            }}
-          </ElLink>
+          <a
+            :href="withBase(v.route)"
+            class="title" @click="(e) => {
+              e.preventDefault()
+              handleLinkClick(withBase(v.route))
+            }"
+          >
+            <span>
+              {{
+                v.meta.title
+              }}
+            </span>
+          </a>
           <!-- 描述信息 -->
           <div class="suffix">
             <!-- 日期 -->
@@ -172,6 +188,19 @@ const showChangeBtn = computed(() => {
     .title {
       font-size: 14px;
       color: var(--vp-c-text-1);
+      font-weight: 500;
+      position: relative;
+      cursor: pointer;
+    }
+
+    .title:hover::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: -3px;
+      border-bottom: 1px solid #b1b3b8;
     }
 
     .suffix {

package/src/components/BlogItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { withBase } from 'vitepress'
+import { useRouter, withBase } from 'vitepress'
 import { computed } from 'vue'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useCleanUrls } from '../composables/config/blog'
@@ -19,24 +19,36 @@ const props = defineProps<{
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
-
 const cleanUrls = useCleanUrls()
 const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route)))
+
+const router = useRouter()
+function handleSkipDoc() {
+  router.go(link.value)
+}
 </script>
 
 <template>
-  <!-- TODO: 响应式优化使用纯 CSS -->
-  <a class="blog-item" :href="link">
-    <i v-if="!!pin" class="pin" />
+  <a
+    class="blog-item" :href="link" @click="(e) => {
+      e.preventDefault()
+      handleSkipDoc()
+    }"
+  >
+    <i v-show="!!pin" class="pin" />
     <!-- 标题 -->
-    <p class="title mobile-visible">{{ title }}</p>
+    <p class="title mobile-visible">
+      {{ title }}
+    </p>
     <div class="info-container">
       <!-- 左侧信息 -->
       <div class="info-part">
         <!-- 标题 -->
-        <p class="title pc-visible">{{ title }}</p>
+        <p class="title pc-visible">
+          {{ title }}
+        </p>
         <!-- 简短描述 -->
-        <p v-if="!descriptionHTML && !!description" class="description">
+        <p v-show="!descriptionHTML && !!description" class="description">
           {{ description }}
         </p>
         <template v-if="descriptionHTML">
@@ -44,19 +56,19 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
         </template>
         <!-- 底部补充描述 -->
         <div class="badge-list pc-visible">
-          <span v-if="author" class="split">{{ author }}</span>
+          <span v-show="author" class="split">{{ author }}</span>
           <span class="split">{{ showTime }}</span>
-          <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+          <span v-show="tag?.length" class="split">{{ tag?.join(' · ') }}</span>
         </div>
       </div>
       <!-- 右侧封面图 -->
-      <div v-if="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
+      <div v-show="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
     </div>
     <!-- 底部补充描述 -->
     <div class="badge-list mobile-visible">
-      <span v-if="author" class="split">{{ author }}</span>
+      <span v-show="author" class="split">{{ author }}</span>
       <span class="split">{{ showTime }}</span>
-      <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+      <span v-show="tag?.length" class="split">{{ tag?.join(' · ') }}</span>
     </div>
   </a>
 </template>

package/src/components/BlogPopover.vue

@@ -239,6 +239,10 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
 
   img {
     width: 100%;
+    // TODO: 未来优化，自动预获取图片高度填充
+    height: 100px;
+    object-fit: contain;
+    margin: 0 auto;
   }
 }
 

package/src/components/BlogRecommendArticle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { useRoute, withBase } from 'vitepress'
-import { ElButton, ElLink } from 'element-plus'
+import { useRoute, useRouter, withBase } from 'vitepress'
+import { ElButton } from 'element-plus'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
@@ -147,6 +147,11 @@ onMounted(() => {
 })
 
 const cleanUrls = useCleanUrls()
+
+const router = useRouter()
+function handleLinkClick(link: string) {
+  router.go(link)
+}
 </script>
 
 <template>
@@ -169,13 +174,18 @@ const cleanUrls = useCleanUrls()
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
-          <ElLink
-            type="info" class="title" :class="{
+          <a
+            class="title" :class="{
               current: isCurrentDoc(v.route),
-            }" :href="wrapperCleanUrls(cleanUrls, v.route)"
+            }"
+            :href="wrapperCleanUrls(cleanUrls, v.route)"
+            @click="(e) => {
+              e.preventDefault()
+              handleLinkClick(wrapperCleanUrls(cleanUrls, v.route))
+            }"
           >
-            {{ v.meta.title }}
-          </ElLink>
+            <span>{{ v.meta.title }}</span>
+          </a>
           <!-- 描述信息 -->
           <div class="suffix">
             <!-- 日期 -->
@@ -248,12 +258,25 @@ const cleanUrls = useCleanUrls()
       color: var(--vp-c-text-1);
       word-break: break-all;
       white-space: break-spaces;
+      font-weight: 500;
+      position: relative;
+      cursor: pointer;
 
       &.current {
         color: var(--vp-c-brand-1);
       }
     }
 
+    .title:hover::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: -3px;
+      border-bottom: 1px solid #b1b3b8;
+    }
+
     .suffix {
       font-size: 12px;
       color: var(--vp-c-text-2);

package/src/composables/config/blog.ts

@@ -104,6 +104,10 @@ export function useOml2dOptions() {
   return inject(configSymbol)!.value.blog?.oml2d
 }
 
+export function useDarkTransitionConfig() {
+  return inject(configSymbol)!.value.blog?.darkTransition ?? true
+}
+
 export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true
 }

package/src/composables/config/index.ts

@@ -440,6 +440,12 @@ export namespace Theme {
     oml2d?: Oml2dOptions
     homeTags?: boolean
     buttonAfterArticle?: ButtonAfterArticleConfig | false
+    /**
+     * 是否开启深色模式过渡动画
+     * @reference https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
+     * @default true
+     */
+    darkTransition?: boolean
   }
 
   export interface BackToTop {

package/src/hooks/useDarkTransition.ts

@@ -0,0 +1,46 @@
+import { useData } from 'vitepress'
+import { nextTick, provide } from 'vue'
+import { useDarkTransitionConfig } from '../composables/config/blog'
+
+export function useDarkTransition() {
+  const { isDark } = useData()
+
+  const isOpenDarkTransition = useDarkTransitionConfig()
+
+  if (!isOpenDarkTransition) {
+    return
+  }
+  const enableTransitions = () =>
+    'startViewTransition' in document
+      && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+  provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+    if (!enableTransitions()) {
+      isDark.value = !isDark.value
+      return
+    }
+
+    const clipPath = [
+        `circle(0px at ${x}px ${y}px)`,
+        `circle(${Math.hypot(
+          Math.max(x, innerWidth - x),
+          Math.max(y, innerHeight - y)
+        )}px at ${x}px ${y}px)`
+    ]
+
+    // @ts-expect-error
+    await document.startViewTransition(async () => {
+      isDark.value = !isDark.value
+      await nextTick()
+    }).ready
+
+    document.documentElement.animate(
+      { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+      {
+        duration: 300,
+        easing: 'ease-in',
+        pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+      }
+    )
+  })
+}

package/src/hooks/useOml2d.ts

@@ -59,15 +59,21 @@ export function useOml2d() {
           ...defaultOptions.tips,
           ...oml2dOptions.tips,
           style: {
+            // @ts-expect-error
             ...defaultOptions?.tips?.style,
+            // @ts-expect-error
             ...oml2dOptions?.tips?.style
           },
           mobileStyle: {
+            // @ts-expect-error
             ...defaultOptions?.tips?.mobileStyle,
+            // @ts-expect-error
             ...oml2dOptions?.tips?.mobileStyle
           },
           copyTips: {
+            // @ts-expect-error
             ...defaultOptions?.tips?.copyTips,
+            // @ts-expect-error
             ...oml2dOptions?.tips?.copyTips
           }
         }

package/src/styles/dark-transition.css

@@ -0,0 +1,23 @@
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.blog-theme-layout .VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.blog-theme-layout .VPSwitchAppearance .check {
+  transform: none !important;
+}

package/src/utils/node/hot-reload-plugin.ts

@@ -0,0 +1,59 @@
+import type { PluginOption } from 'vite'
+import type { SiteConfig } from 'vitepress'
+import type { Theme } from '../../composables/config/index'
+import { getArticleMeta } from './theme'
+import { debounce, isEqual } from './index'
+
+export function themeReloadPlugin() {
+  let blogConfig: Theme.BlogConfig
+  let vitepressConfig: SiteConfig
+  let docsDir: string
+
+  const generateRoute = (filepath: string) => {
+    return filepath.replace(docsDir, '').replace('.md', '')
+  }
+
+  return {
+    name: '@sugarat/theme-reload',
+    apply: 'serve',
+    configureServer(server) {
+      const restart = debounce(() => {
+        server.restart()
+      }, 500)
+      server.watcher.on('add', (path) => {
+        const route = generateRoute(path)
+        const meta = getArticleMeta(path, route, blogConfig?.timeZone)
+        blogConfig.pagesData.push({
+          route,
+          meta
+        })
+        restart()
+      })
+
+      server.watcher.on('change', (path: string) => {
+        const route = generateRoute(path)
+        const meta = getArticleMeta(path, route, blogConfig?.timeZone)
+        const matched = blogConfig.pagesData.find(v => v.route === route)
+
+        if (matched && !isEqual(matched.meta, meta, ['date', 'description'])) {
+          matched.meta = meta
+          restart()
+        }
+      })
+
+      server.watcher.on('unlink', (path) => {
+        const route = generateRoute(path)
+        const idx = blogConfig.pagesData.findIndex(v => v.route === route)
+        if (idx >= 0) {
+          blogConfig.pagesData.splice(idx, 1)
+          restart()
+        }
+      })
+    },
+    configResolved(config: any) {
+      vitepressConfig = config.vitepress
+      docsDir = vitepressConfig.srcDir
+      blogConfig = config.vitepress.site.themeConfig.blog
+    },
+  } as PluginOption
+}

package/src/utils/node/index.ts

@@ -2,7 +2,6 @@
 /* eslint-disable prefer-rest-params */
 import { spawn, spawnSync } from 'node:child_process'
 import path from 'node:path'
-import { formatDate } from '../client'
 
 export function clearMatterContent(content: string) {
   let first___: unknown
@@ -31,16 +30,10 @@ export function clearMatterContent(content: string) {
       .join('\n')
   )
 }
+
 export function getDefaultTitle(content: string) {
-  const title
-    = clearMatterContent(content)
-      .split('\n')
-      ?.find((str) => {
-        return str.startsWith('# ')
-      })
-      ?.slice(2)
-      .replace(/^\s+|\s+$/g, '') || ''
-  return title
+  const match = content.match(/^(#+)\s+(.+)/m)
+  return match?.[2] || ''
 }
 
 export function getFileBirthTime(url: string) {
@@ -57,10 +50,10 @@ export function getFileBirthTime(url: string) {
     }
   }
   catch (error) {
-    return formatDate(date)
+    return date
   }
 
-  return formatDate(date)
+  return date
 }
 
 export function getGitTimestamp(file: string) {
@@ -79,8 +72,9 @@ export function getGitTimestamp(file: string) {
 
 export function getTextSummary(text: string, count = 100) {
   return (
-    clearMatterContent(text)
-      .match(/^# ([\s\S]+)/m)?.[1]
+    text
+      // 首个标题
+      ?.replace(/^#+\s+.*/, '')
       // 除去标题
       ?.replace(/#/g, '')
       // 除去图片
@@ -91,9 +85,9 @@ export function getTextSummary(text: string, count = 100) {
       ?.replace(/\*\*(.*?)\*\*/g, '$1')
       ?.split('\n')
       ?.filter(v => !!v)
-      ?.slice(1)
       ?.join('\n')
       ?.replace(/>(.*)/, '')
+      ?.trim()
       ?.slice(0, count)
   )
 }
@@ -151,3 +145,43 @@ export function getFirstImagURLFromMD(content: string, route: string) {
 
   return joinPath('/', relativePath)
 }
+
+export function debounce(func: any, delay = 1000) {
+  let timeoutId: any
+  return (...rest: any[]) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      func(...rest)
+    }, delay)
+  }
+}
+
+export function isEqual(obj1: any, obj2: any, excludeKeys: string[] = []) {
+  const keys1 = Object.keys(obj1).filter(key => !excludeKeys.includes(key))
+  const keys2 = Object.keys(obj2).filter(key => !excludeKeys.includes(key))
+
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  for (const key of keys1) {
+    if (!keys2.includes(key)) {
+      return false
+    }
+    const val1 = obj1[key]
+    const val2 = obj2[key]
+    const areObjects = isObject(val1) && isObject(val2)
+    if (
+      (areObjects && !isEqual(val1, val2, excludeKeys))
+      || (!areObjects && val1 !== val2)
+    ) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function isObject(obj: any) {
+  return obj != null && typeof obj === 'object'
+}

package/src/utils/node/theme.ts

@@ -21,107 +21,102 @@ export function patchDefaultThemeSideBar(cfg?: Partial<Theme.BlogConfig>) {
     : undefined
 }
 
-// hack：RSS用
-export const pageMap = new Map<string, string>()
-
-export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
-  const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || '.'
-  const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'] })
-
-  // 文章数据
-  const data = files
-    .map((v) => {
-      let route = v
-        // 处理文件后缀名
-        .replace('.md', '')
+export function getPageRoute(filepath: string, srcDir: string) {
+  let route = filepath.replace('.md', '')
+  // 去除 srcDir 处理目录名
+  // TODO：优化 路径处理，同VitePress 内部一致
+  if (route.startsWith('./')) {
+    route = route.replace(
+      new RegExp(
+        `^\\.\\/${path
+          .join(srcDir, '/')
+          .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
+      ),
+      ''
+    )
+  }
+  else {
+    route = route.replace(
+      new RegExp(
+        `^${path
+          .join(srcDir, '/')
+          .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
+      ),
+      ''
+    )
+  }
+  return `/${route}`
+}
 
-      // 去除 srcDir 处理目录名
-      if (route.startsWith('./')) {
-        route = route.replace(
-          new RegExp(
-            `^\\.\\/${path
-              .join(srcDir, '/')
-              .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
-          ),
-          ''
-        )
-      }
-      else {
-        route = route.replace(
-          new RegExp(
-            `^${path
-              .join(srcDir, '/')
-              .replace(new RegExp(`\\${path.sep}`, 'g'), '/')}`
-          ),
-          ''
-        )
-      }
-      // hack：RSS使用
-      pageMap.set(`/${route}`, v)
+const defaultTimeZoneOffset = new Date().getTimezoneOffset() / -60
+export function getArticleMeta(filepath: string, route: string, timeZone = defaultTimeZoneOffset) {
+  const fileContent = fs.readFileSync(filepath, 'utf-8')
 
-      const fileContent = fs.readFileSync(v, 'utf-8')
-      // TODO：摘要生成优化
-      // TODO: 用上内容content
-      const { data: frontmatter, excerpt } = matter(fileContent, {
-        excerpt: true
-      })
+  const { data: frontmatter, excerpt, content } = matter(fileContent, {
+    excerpt: true,
+  })
 
-      const meta: Partial<Theme.PageMeta> = {
-        ...frontmatter
-      }
+  const meta: Partial<Theme.PageMeta> = {
+    ...frontmatter
+  }
 
-      if (!meta.title) {
-        // TODO：优化标题的采集
-        meta.title = getDefaultTitle(fileContent)
-      }
-      if (!meta.date) {
-        // getGitTimestamp(v).then((v) => {
-        //   meta.date = formatDate(v)
-        // })
-        meta.date = getFileBirthTime(v)
-      }
-      else {
-        const timeZone = cfg?.timeZone ?? 8
-        meta.date = formatDate(
-          new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
-        )
-      }
+  if (!meta.title) {
+    meta.title = getDefaultTitle(content)
+  }
+  if (!meta.date) {
+    meta.date = formatDate(getFileBirthTime(filepath))
+  }
+  else {
+    meta.date = formatDate(
+      new Date(`${new Date(meta.date).toUTCString()}+${timeZone}`)
+    )
+  }
 
-      // 处理tags和categories,兼容历史文章
-      meta.categories
+  // 处理tags和categories,兼容历史文章
+  meta.categories
         = typeof meta.categories === 'string'
-          ? [meta.categories]
-          : meta.categories
-      meta.tags = typeof meta.tags === 'string' ? [meta.tags] : meta.tags
-      meta.tag = [meta.tag || []]
-        .flat()
-        .concat([
-          ...new Set([...(meta.categories || []), ...(meta.tags || [])])
-        ])
-
-      // 获取摘要信息
-      const wordCount = 100
-      meta.description
-        = meta.description || getTextSummary(fileContent, wordCount)
-
-      // 获取封面图
-      meta.cover
+      ? [meta.categories]
+      : meta.categories
+  meta.tags = typeof meta.tags === 'string' ? [meta.tags] : meta.tags
+  meta.tag = [meta.tag || []]
+    .flat()
+    .concat([
+      ...new Set([...(meta.categories || []), ...(meta.tags || [])])
+    ])
+
+  // 获取摘要信息
+  // TODO：摘要生成优化
+  meta.description
+        = meta.description || getTextSummary(content, 100) || excerpt
+
+  // 获取封面图
+  meta.cover
         = meta.cover
-        ?? (getFirstImagURLFromMD(fileContent, `/${route}`))
+        ?? (getFirstImagURLFromMD(fileContent, route))
 
-      // 是否发布 默认发布
-      if (meta.publish === false) {
-        meta.hidden = true
-        meta.recommend = false
-      }
+  // 是否发布 默认发布
+  if (meta.publish === false) {
+    meta.hidden = true
+    meta.recommend = false
+  }
+  return meta as Theme.PageMeta
+}
+export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
+  const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || '.'
+  const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'] })
 
+  // 文章数据
+  const pageData = files
+    .map((filepath) => {
+      const route = getPageRoute(filepath, srcDir)
+      const meta = getArticleMeta(filepath, route, cfg?.timeZone)
       return {
-        route: `/${route}`,
+        route,
         meta
       }
     })
     .filter(v => v.meta.layout !== 'home')
-  return data as Theme.PageData[]
+  return pageData as Theme.PageData[]
 }
 
 export function patchVPConfig(vpConfig: any, cfg?: Partial<Theme.BlogConfig>) {

package/src/utils/node/vitePlugins.ts

@@ -12,6 +12,7 @@ import {
 import { RssPlugin } from 'vitepress-plugin-rss'
 import type { Theme } from '../../composables/config/index'
 import { _require } from './mdPlugins'
+import { themeReloadPlugin } from './hot-reload-plugin'
 import { joinPath } from './index'
 
 export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
@@ -19,10 +20,16 @@ export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
 
   // Build完后运行的一系列列方法
   const buildEndFn: any[] = []
+
   // 执行自定义的 buildEnd 钩子
   plugins.push(inlineBuildEndPlugin(buildEndFn))
+
   // 处理cover image的路径（暂只支持自动识别的文章首图）
   plugins.push(coverImgTransform())
+
+  // 自动重载首页
+  plugins.push(themeReloadPlugin())
+
   // 内置简化版的pagefind
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {}
@@ -47,13 +54,6 @@ export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
   if (cfg?.RSS) {
     plugins.push(RssPlugin(cfg.RSS))
   }
-  // 未来移除使用
-  // if (cfg && cfg.search !== undefined) {
-  //   console.log(
-  //     '已从内部移除 pagefind 支持，请单独安装 vitepress-plugin-pagefind 插件使用'
-  //   )
-  // }
-
   return plugins
 }