@sugarat/theme 0.1.35 → 0.1.36-beta.0

package/node.d.ts

@@ -110,7 +110,8 @@ declare namespace Theme {
     interface HomeBlog {
         name?: string;
         motto?: string;
-        inspiring?: string;
+        inspiring?: string | string[];
+        inspiringTimeout?: number;
         pageSize?: number;
     }
     interface ArticleConfig {
@@ -248,6 +249,10 @@ declare namespace Theme {
         blog?: BlogConfig;
     }
     interface HomeConfig {
+        /**
+         * @deprecated
+         * 此方法已经废弃，这个定义将在未来某一刻被移除，请为 inspiring 配置数租来实现相同的效果
+         */
         handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
     }
 }
@@ -257,6 +262,7 @@ declare function getDefaultTitle(content: string): string;
 declare function clearMatterContent(content: string): string;
 declare function getFileBirthTime(url: string): string;
 declare function getGitTimestamp(file: string): Promise<unknown>;
-declare function defineConfig(config: UserConfig<Theme.Config>): UserConfig<any>;
+declare function assignMermaid(config: any): void;
+declare function defineConfig(config: UserConfig<Theme.Config>): any;
 
-export { clearMatterContent, defineConfig, getDefaultTitle, getFileBirthTime, getGitTimestamp, getThemeConfig };
+export { assignMermaid, clearMatterContent, defineConfig, getDefaultTitle, getFileBirthTime, getGitTimestamp, getThemeConfig };

package/node.js

@@ -26,6 +26,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/node.ts
 var node_exports = {};
 __export(node_exports, {
+  assignMermaid: () => assignMermaid,
   clearMatterContent: () => clearMatterContent,
   defineConfig: () => defineConfig,
   getDefaultTitle: () => getDefaultTitle,
@@ -346,23 +347,22 @@ function getThemeConfig(cfg) {
       ]
     };
   }
+  const markdownPlugin = [];
   if (cfg?.tabs) {
-    extraConfig.markdown = {
-      config(md) {
-        tabsPlugin(md);
-      }
-    };
+    markdownPlugin.push(tabsPlugin);
   }
   if (cfg) {
     cfg.mermaid = cfg?.mermaid ?? false;
   }
   if (cfg?.mermaid !== false) {
-    extraConfig.vite = {
-      ...extraConfig.vite,
-      resolve: {
-        alias: {
-          mermaid: "mermaid/dist/mermaid.esm.mjs"
-        }
+    markdownPlugin.push(import_vitepress_plugin_mermaid.MermaidMarkdown);
+  }
+  if (markdownPlugin.length) {
+    extraConfig.markdown = {
+      config(...rest) {
+        markdownPlugin.forEach((plugin) => {
+          plugin?.(...rest);
+        });
       }
     };
   }
@@ -437,6 +437,39 @@ function getGitTimestamp(file) {
 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);
 }
+function assignMermaid(config) {
+  if (!config.mermaid)
+    return;
+  if (!config.vite)
+    config.vite = {};
+  if (!config.vite.plugins)
+    config.vite.plugins = [];
+  config.vite.plugins.push((0, import_vitepress_plugin_mermaid.MermaidPlugin)(config.mermaid));
+  if (!config.vite.optimizeDeps)
+    config.vite.optimizeDeps = {};
+  config.vite.optimizeDeps = {
+    ...config.vite.optimizeDeps,
+    include: [
+      "@braintree/sanitize-url",
+      "dayjs",
+      "debug",
+      "cytoscape-cose-bilkent",
+      "cytoscape"
+    ]
+  };
+  if (!config.vite.resolve)
+    config.vite.resolve = {};
+  if (!config.vite.resolve.alias)
+    config.vite.resolve.alias = {};
+  config.vite.resolve.alias = {
+    ...config.vite.resolve.alias,
+    "dayjs/plugin/advancedFormat.js": "dayjs/esm/plugin/advancedFormat",
+    "dayjs/plugin/customParseFormat.js": "dayjs/esm/plugin/customParseFormat",
+    "dayjs/plugin/isoWeek.js": "dayjs/esm/plugin/isoWeek",
+    "cytoscape/dist/cytoscape.umd.js": "cytoscape/dist/cytoscape.esm.js",
+    mermaid: "mermaid/dist/mermaid.esm.mjs"
+  };
+}
 function defineConfig(config) {
   if (config.themeConfig?.themeConfig) {
     config.extends = checkKeys.reduce((pre, key) => {
@@ -450,10 +483,11 @@ function defineConfig(config) {
     }, 1200);
   }
   const extendThemeConfig = config.extends?.themeConfig?.blog;
-  const resultConfig = extendThemeConfig.mermaid === false ? config : (0, import_vitepress_plugin_mermaid.withMermaid)({
+  const resultConfig = extendThemeConfig.mermaid === false ? config : {
     ...config,
     mermaid: extendThemeConfig.mermaid === true ? {} : extendThemeConfig.mermaid
-  });
+  };
+  assignMermaid(resultConfig);
   if (!resultConfig.markdown)
     resultConfig.markdown = {};
   if (config.extends?.markdown?.config) {
@@ -468,6 +502,7 @@ function defineConfig(config) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  assignMermaid,
   clearMatterContent,
   defineConfig,
   getDefaultTitle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.35",
+  "version": "0.1.36-beta.0",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {

package/src/components/BlogHomeBanner.vue

@@ -10,9 +10,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useData } from 'vitepress'
-import { useHomeConfig, useBlogConfig } from '../composables/config/blog'
+import { useBlogConfig } from '../composables/config/blog'
 
 const { site, frontmatter } = useData()
 const { home } = useBlogConfig()
@@ -21,34 +21,61 @@ const name = computed(
   () => (frontmatter.value.blog?.name ?? site.value.title) || home?.name || ''
 )
 const motto = computed(() => frontmatter.value.blog?.motto || home?.motto || '')
-const initInspiring = ref<string>(
-  frontmatter.value.blog?.inspiring || home?.inspiring || ''
+
+const inspiring = ref('')
+const inspiringList = computed<string[]>(() => {
+  return [
+    ...new Set(
+      [frontmatter.value.blog?.inspiring, home?.inspiring]
+        .flat()
+        .filter((v) => !!v)
+    )
+  ]
+})
+const inspiringIndex = ref<number>(-1)
+const inspiringTimeout = computed<number>(
+  () => frontmatter.value.blog?.inspiringTimeout || home?.inspiringTimeout || 0
 )
-const inspiring = computed({
-  get() {
-    return initInspiring.value
-  },
-  set(newValue) {
-    initInspiring.value = newValue
+
+watch(inspiringTimeout, () => {
+  startTimer()
+})
+const timer = ref<any>(0)
+const startTimer = () => {
+  if (timer.value) {
+    clearTimeout(timer.value)
+  }
+  if (inspiringTimeout.value > 0) {
+    timer.value = setTimeout(() => {
+      changeSlogan()
+    }, inspiringTimeout.value)
   }
+}
+onMounted(() => {
+  changeSlogan()
 })
 
-const homeConfig = useHomeConfig()
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value)
+  }
+})
 
 const changeSlogan = async () => {
-  if (typeof homeConfig?.handleChangeSlogan !== 'function') {
-    return
-  }
-  const newSlogan = await homeConfig.handleChangeSlogan(inspiring.value)
-  if (typeof newSlogan !== 'string' || !newSlogan.trim()) {
-    return
-  }
+  // 顺手启动定时器
+  startTimer()
+
+  if (inspiringList.value.length < 1) return
+
+  inspiringIndex.value = (inspiringIndex.value + 1) % inspiringList.value.length
+  const newValue = inspiringList.value[inspiringIndex.value]
+  if (newValue === inspiring.value) return
 
   // 重新渲染数据，同时触发动画
   inspiring.value = ''
-  setTimeout(async () => {
-    inspiring.value = newSlogan
-  })
+  setTimeout(() => {
+    inspiring.value = newValue
+  }, 100)
 }
 </script>
 <style lang="scss" scoped>

package/src/composables/config/index.ts

@@ -116,7 +116,8 @@ export namespace Theme {
   export interface HomeBlog {
     name?: string
     motto?: string
-    inspiring?: string
+    inspiring?: string | string[]
+    inspiringTimeout?: number
     pageSize?: number
   }
 
@@ -269,6 +270,10 @@ export namespace Theme {
     blog?: BlogConfig
   }
   export interface HomeConfig {
+    /**
+     * @deprecated
+     * 此方法已经废弃，这个定义将在未来某一刻被移除，请为 inspiring 配置数租来实现相同的效果
+     */
     handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>
   }
 }

package/src/node.ts

@@ -6,7 +6,7 @@ import { execSync, spawn, spawnSync } from 'child_process'
 import path from 'path'
 import type { SiteConfig, UserConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
-import { withMermaid } from 'vitepress-plugin-mermaid'
+import { MermaidMarkdown, MermaidPlugin } from 'vitepress-plugin-mermaid'
 import { formatDate } from './utils/index'
 import type { Theme } from './composables/config/index'
 
@@ -170,25 +170,35 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
       ]
     }
   }
+  const markdownPlugin: any[] = []
+  // tabs支持
   if (cfg?.tabs) {
-    extraConfig.markdown = {
-      config(md: any) {
-        tabsMarkdownPlugin(md)
-      }
-    }
+    markdownPlugin.push(tabsMarkdownPlugin)
   }
+
+  // 流程图支持
   if (cfg) {
     cfg.mermaid = cfg?.mermaid ?? false
   }
-
-  // 流程图支持
   if (cfg?.mermaid !== false) {
-    extraConfig.vite = {
-      ...extraConfig.vite,
-      resolve: {
-        alias: {
-          mermaid: 'mermaid/dist/mermaid.esm.mjs'
-        }
+    markdownPlugin.push(MermaidMarkdown)
+    // extraConfig.vite = {
+    //   ...extraConfig.vite,
+    //   resolve: {
+    //     alias: {
+    //       mermaid: 'mermaid/dist/mermaid.esm.mjs'
+    //     }
+    //   }
+    // }
+  }
+
+  // 注册markdown插件
+  if (markdownPlugin.length) {
+    extraConfig.markdown = {
+      config(...rest: any[]) {
+        markdownPlugin.forEach((plugin) => {
+          plugin?.(...rest)
+        })
       }
     }
   }
@@ -306,7 +316,37 @@ function getTextSummary(text: string, count = 100) {
   )
 }
 
-export function defineConfig(config: UserConfig<Theme.Config>) {
+export function assignMermaid(config: any) {
+  if (!config.mermaid) return
+
+  if (!config.vite) config.vite = {}
+  if (!config.vite.plugins) config.vite.plugins = []
+  config.vite.plugins.push(MermaidPlugin(config.mermaid))
+  if (!config.vite.optimizeDeps) config.vite.optimizeDeps = {}
+  config.vite.optimizeDeps = {
+    ...config.vite.optimizeDeps,
+    include: [
+      '@braintree/sanitize-url',
+      'dayjs',
+      'debug',
+      'cytoscape-cose-bilkent',
+      'cytoscape'
+    ]
+  }
+  if (!config.vite.resolve) config.vite.resolve = {}
+  if (!config.vite.resolve.alias) config.vite.resolve.alias = {}
+
+  config.vite.resolve.alias = {
+    ...config.vite.resolve.alias,
+    'dayjs/plugin/advancedFormat.js': 'dayjs/esm/plugin/advancedFormat',
+    'dayjs/plugin/customParseFormat.js': 'dayjs/esm/plugin/customParseFormat',
+    'dayjs/plugin/isoWeek.js': 'dayjs/esm/plugin/isoWeek',
+    'cytoscape/dist/cytoscape.umd.js': 'cytoscape/dist/cytoscape.esm.js',
+    mermaid: 'mermaid/dist/mermaid.esm.mjs'
+  }
+}
+
+export function defineConfig(config: UserConfig<Theme.Config>): any {
   // 兼容低版本主题配置
   // @ts-ignore
   if (config.themeConfig?.themeConfig) {
@@ -332,11 +372,12 @@ export function defineConfig(config: UserConfig<Theme.Config>) {
   const resultConfig =
     extendThemeConfig.mermaid === false
       ? config
-      : withMermaid({
+      : {
           ...config,
           mermaid:
             extendThemeConfig.mermaid === true ? {} : extendThemeConfig.mermaid
-        })
+        }
+  assignMermaid(resultConfig)
 
   // 处理markdown插件
   if (!resultConfig.markdown) resultConfig.markdown = {}