@sugarat/theme 0.2.17 → 0.2.19

package/node.d.ts

@@ -365,8 +365,19 @@ declare namespace Theme {
         /**
          * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
          * 详见 https://github.com/linsir/markdown-it-task-checkbox
+         * @default true
          */
         taskCheckbox?: TaskCheckbox | boolean;
+        /**
+         * 支持 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线（时间轴）样式。
+         * 详见 https://github.com/HanochMa/vitepress-markdown-timeline
+         * @default true
+         */
+        timeline?: boolean;
+        /**
+         * 回到顶部
+         * @default true
+         */
         backToTop?: boolean | BackToTop;
     }
     interface BackToTop {

package/node.js

@@ -203,6 +203,9 @@ var tabsPlugin = (md) => {
   };
 };
 
+// src/utils/node/mdPlugins.ts
+var import_vitepress_markdown_timeline = __toESM(require("vitepress-markdown-timeline"));
+
 // src/utils/node/index.ts
 var import_node_child_process = require("child_process");
 var import_node_path = __toESM(require("path"));
@@ -324,18 +327,15 @@ function getMarkdownPlugins(cfg) {
   if (cfg?.tabs !== false) {
     markdownPlugin.push(tabsPlugin);
   }
-  if (cfg) {
-    cfg.mermaid = cfg?.mermaid ?? true;
-    if (cfg?.mermaid !== false) {
-      const { MermaidMarkdown } = _require("vitepress-plugin-mermaid");
-      markdownPlugin.push(MermaidMarkdown);
-    }
+  if (cfg?.mermaid !== false) {
+    const { MermaidMarkdown } = _require("vitepress-plugin-mermaid");
+    markdownPlugin.push(MermaidMarkdown);
   }
-  if (cfg) {
-    cfg.taskCheckbox = cfg?.taskCheckbox ?? true;
-    if (cfg.taskCheckbox !== false) {
-      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox));
-    }
+  if (cfg.taskCheckbox !== false) {
+    markdownPlugin.push(taskCheckboxPlugin(typeof cfg?.taskCheckbox === "boolean" ? {} : cfg?.taskCheckbox));
+  }
+  if (cfg?.timeline !== false) {
+    markdownPlugin.push(import_vitepress_markdown_timeline.default);
   }
   return markdownPlugin;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -42,6 +42,8 @@
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.2.4",
+    "swiper": "^11.0.5",
+    "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-pagefind": "0.2.10",
     "vitepress-plugin-rss": "0.2.1",

package/src/components/BlogApp.vue

@@ -37,9 +37,9 @@ const { Layout } = Theme
       <!-- 阅读时间分析 -->
       <ClientOnly>
         <BlogArticleAnalyze />
+        <!-- 图片预览 -->
+        <BlogImagePreview />
       </ClientOnly>
-      <!-- 图片预览 -->
-      <BlogImagePreview />
     </template>
 
     <template #nav-bar-content-before>

package/src/components/BlogBackToTop.vue

@@ -28,8 +28,8 @@ const iconSVGStr = computed(() => typeof backToTopConfig === 'boolean' ? '' : ba
 
 <template>
   <div v-if="open" v-show="show" class="back-to-top">
-    <span class="icon-wrapper">
-      <ElIcon @click="handleBackRoTop">
+    <span class="icon-wrapper" @click="handleBackRoTop">
+      <ElIcon :size="20">
         <i v-if="iconSVGStr" v-outer-html="iconSVGStr" />
         <svg v-else width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path

package/src/components/BlogComment.vue

@@ -94,15 +94,15 @@ const labelText = computed(() => {
 
     <div v-show="!commentIsVisible" class="comment-btn-wrapper">
       <span v-if="!mobileMinify && labelText" class="icon-wrapper-text" @click="handleScrollToComment">
-        <ElIcon>
+        <ElIcon :size="20">
           <CommentIcon />
         </ElIcon>
         <span class="text">
           {{ labelText }}
         </span>
       </span>
-      <span v-else class="icon-wrapper">
-        <ElIcon @click="handleScrollToComment">
+      <span v-else class="icon-wrapper" @click="handleScrollToComment">
+        <ElIcon :size="20">
           <CommentIcon />
         </ElIcon>
       </span>

package/src/components/BlogFriendLink.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ElAvatar } from 'element-plus'
-import { useDark } from '@vueuse/core'
-import { computed } from 'vue'
+import { useDark, useIntervalFn } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import Swiper from 'swiper'
 import { useBlogConfig } from '../composables/config/blog'
 import { getImageUrl, shuffleArray } from '../utils/client'
 import type { Theme } from '../'
@@ -18,7 +19,6 @@ const friendConfig = computed<Theme.FriendConfig>(() => ({
   ...(Array.isArray(friend) ? { list: friend } : friend)
 }))
 
-// TODO: 待优化
 const limit = computed(() => {
   const { limit } = friendConfig.value
   return (!limit || limit <= 0) ? 0 : limit || Number.MAX_SAFE_INTEGER
@@ -26,7 +26,7 @@ const limit = computed(() => {
 
 const scrollSpeed = computed(() => {
   const { scrollSpeed } = friendConfig.value
-  return (!scrollSpeed || scrollSpeed <= 0) ? (friendConfig.value.list.length - 1) * (friendConfig.value.list.length / limit.value) * 1000 : scrollSpeed
+  return scrollSpeed ?? 1500
 })
 
 const openScroll = computed(() => {
@@ -58,18 +58,37 @@ const friendList = computed(() => {
       alt
     }
   })
-  return openScroll.value ? [...list, ...list] : list
+  return list
 })
 
-const cardHeight = 83
+const cardHeight = 76
 const scrollWrapperHeight = computed(() => {
   return openScroll.value ? limit.value * cardHeight : 0
 })
 const containerHeight = computed(() => {
   return scrollWrapperHeight.value ? `${scrollWrapperHeight.value}px` : 'auto'
 })
-const scrollTop = computed(() => {
-  return `-${scrollWrapperHeight.value * 2}px`
+
+const swiper = ref<Swiper>()
+const { resume, pause } = useIntervalFn(() => {
+  swiper.value?.slideNext()
+}, scrollSpeed.value)
+
+onMounted(() => {
+  pause()
+  if (openScroll.value) {
+    // eslint-disable-next-line no-new
+    swiper.value = new Swiper('.scroll-wrapper', {
+      direction: 'vertical',
+      slidesPerView: limit.value,
+      loop: true,
+    })
+    resume()
+  }
+})
+
+onUnmounted(() => {
+  pause()
 })
 </script>
 
@@ -102,17 +121,11 @@ const scrollTop = computed(() => {
         height: containerHeight,
       }"
     >
-      <ol
-        class="friend-list" :style="{
-          animationPlayState: openScroll ? 'running' : 'paused',
-          animationDuration: `${scrollSpeed / 1000}s`,
-        }
-        "
-      >
-        <li v-for="(v, idx) in friendList" :key="idx">
+      <ol class="friend-list swiper-wrapper">
+        <li v-for=" (v, idx) in friendList" :key="idx" class="swiper-slide">
           <a :href="v.url" target="_blank">
             <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
-            <div>
+            <div class="info-wrapper">
               <span class="nickname">{{ v.nickname }}</span>
               <p class="des">{{ v.des }}</p>
             </div>
@@ -159,15 +172,6 @@ const scrollTop = computed(() => {
   flex-direction: column;
 }
 
-@keyframes scrollList {
-  0% {
-    top: 0;
-  }
-  100% {
-    top: v-bind(scrollTop);
-  }
-}
-
 .scroll-wrapper {
   overflow: hidden;
   position: relative;
@@ -178,35 +182,35 @@ const scrollTop = computed(() => {
   flex-direction: column;
   list-style: none;
   margin: 0;
-  padding: 0 10px 0 0px;
+  padding: 10px 10px 0 0px;
   width: 100%;
 
   position: relative;
   width: 100%;
-  animation-name: scrollList;
-  animation-timing-function:linear;
-  animation-iteration-count:infinite;
-
-  &:hover {
-    animation-play-state: paused !important;
-  }
 
   li {
-    padding: 6px;
-    margin-top: 10px;
-
+    box-sizing: border-box;
+    padding: 0 5px;
+    height: 76px;
     .el-avatar {
       min-width: 50px;
     }
 
     a {
       display: flex;
+      align-items: center;
     }
 
     div {
       padding-left: 10px;
     }
 
+    .info-wrapper {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
     .nickname {
       font-size: 16px;
       font-weight: 450;
@@ -215,6 +219,9 @@ const scrollTop = computed(() => {
     .des {
       color: var(--vp-c-text-2);
       font-size: 14px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 }

package/src/composables/config/index.ts

@@ -397,9 +397,19 @@ export namespace Theme {
     /**
      * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
      * 详见 https://github.com/linsir/markdown-it-task-checkbox
+     * @default true
      */
     taskCheckbox?: TaskCheckbox | boolean
-
+    /**
+     * 支持 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线（时间轴）样式。
+     * 详见 https://github.com/HanochMa/vitepress-markdown-timeline
+     * @default true
+     */
+    timeline?: boolean
+    /**
+     * 回到顶部
+     * @default true
+     */
     backToTop?: boolean | BackToTop
   }
 

package/src/index.ts

@@ -5,9 +5,13 @@ import './styles/index.scss'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
+// 引入时间线组件样式
+import 'vitepress-markdown-timeline/dist/theme/index.css'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+// 图表渲染组件
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue'
 import BlogApp from './components/BlogApp.vue'
 import { withConfigProvider } from './composables/config/blog'
@@ -27,7 +31,7 @@ export const BlogTheme: Theme = {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('TimelinePage', TimelinePage)
     ctx.app.component('UserWorksPage', UserWorksPage)
-    ctx.app.component('Mermaid', Mermaid)
+    ctx.app.component('Mermaid', Mermaid as any)
   }
 }
 

package/src/utils/node/mdPlugins.ts

@@ -2,6 +2,7 @@
 import { createRequire } from 'module'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import type { UserConfig } from 'vitepress'
+import timeline from 'vitepress-markdown-timeline'
 import type { Theme } from '../../composables/config/index'
 import { aliasObjectToArray } from './index'
 
@@ -17,25 +18,22 @@ export function getMarkdownPlugins(cfg?: Partial<Theme.BlogConfig>) {
   }
 
   // 添加mermaid markdown 插件
-  if (cfg) {
-    cfg.mermaid = cfg?.mermaid ?? true
-    if (cfg?.mermaid !== false) {
-      const { MermaidMarkdown } = _require('vitepress-plugin-mermaid')
-      markdownPlugin.push(MermaidMarkdown)
-    }
+  if (cfg?.mermaid !== false) {
+    const { MermaidMarkdown } = _require('vitepress-plugin-mermaid')
+    markdownPlugin.push(MermaidMarkdown)
   }
 
-  if (cfg) {
-    cfg.taskCheckbox = cfg?.taskCheckbox ?? true
-    if (cfg.taskCheckbox !== false) {
-      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox))
-    }
+  if (cfg.taskCheckbox !== false) {
+    markdownPlugin.push(taskCheckboxPlugin(typeof cfg?.taskCheckbox === 'boolean' ? {} : cfg?.taskCheckbox))
   }
 
+  if (cfg?.timeline !== false) {
+    markdownPlugin.push(timeline)
+  }
   return markdownPlugin
 }
 
-export function taskCheckboxPlugin(ops: Theme.TaskCheckbox | boolean) {
+export function taskCheckboxPlugin(ops?: Theme.TaskCheckbox) {
   return (md: any) => {
     md.use(_require('markdown-it-task-checkbox'), ops)
   }