@sugarat/theme 0.1.35 → 0.1.36-beta.1

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,
@@ -114,10 +115,10 @@ var ruleBlockTabs = (state, startLine, endLine, silent) => {
 var tabBreakRE = /^\s*::(.+)$/;
 var forbiddenCharsInSlotNames = /[ '"]/;
 var parseTabBreakLine = (line) => {
-  const m = line.match(tabBreakRE);
-  if (!m)
+  const m2 = line.match(tabBreakRE);
+  if (!m2)
     return null;
-  const trimmed = m[1].trim();
+  const trimmed = m2[1].trim();
   if (forbiddenCharsInSlotNames.test(trimmed)) {
     throw new Error(
       `contains forbidden chars in slot names (space and quotes) (${JSON.stringify(
@@ -205,27 +206,86 @@ var tabsPlugin = (md) => {
   };
 };
 
-// src/node.ts
-var import_vitepress_plugin_mermaid = require("vitepress-plugin-mermaid");
+// ../../node_modules/.pnpm/vitepress-plugin-mermaid@2.0.13_mermaid@10.2.4_vitepress@1.0.0-beta.2/node_modules/vitepress-plugin-mermaid/dist/vitepress-plugin-mermaid.es.mjs
+var m = (e) => {
+  const r = e.renderer.rules.fence.bind(e.renderer.rules);
+  e.renderer.rules.fence = (a, i, t, s, o) => {
+    const n = a[i];
+    if (n.info.trim() === "mermaid")
+      try {
+        return `
+      <Suspense> 
+      <template #default>
+      <Mermaid id="mermaid-${i}"  graph="${encodeURIComponent(
+          n.content
+        )}"></Mermaid>
+      </template>
+        <!-- loading state via #fallback slot -->
+        <template #fallback>
+          Loading...
+        </template>
+      </Suspense>`;
+      } catch (l) {
+        return `<pre>${l}</pre>`;
+      }
+    return n.info.trim() === "mmd" && (a[i].info = "mermaid"), r(a, i, t, s, o);
+  };
+};
+var d = {
+  securityLevel: "loose",
+  startOnLoad: false
+};
+function p(e) {
+  const r = {
+    ...d,
+    ...e
+  }, a = "virtual:mermaid-config", i = "\0" + a;
+  return {
+    name: "vite-plugin-mermaid",
+    enforce: "post",
+    transform(t, s) {
+      if (s.includes("vitepress/dist/client/app/index.js"))
+        return t = `
+import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
+` + t, t = t.replace(
+          "// install global components",
+          `// install global components
+		app.component('Mermaid', Mermaid);
+`
+        ), {
+          code: t,
+          map: null
+        };
+    },
+    async resolveId(t) {
+      if (t === a)
+        return i;
+    },
+    async load(t) {
+      if (t === i)
+        return `export default ${JSON.stringify(r)};`;
+    }
+  };
+}
 
 // src/utils/index.ts
-function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
-  if (!(d instanceof Date)) {
-    d = new Date(d);
+function formatDate(d2, fmt = "yyyy-MM-dd hh:mm:ss") {
+  if (!(d2 instanceof Date)) {
+    d2 = new Date(d2);
   }
   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()
+    "M+": d2.getMonth() + 1,
+    "d+": d2.getDate(),
+    "h+": d2.getHours(),
+    "m+": d2.getMinutes(),
+    "s+": d2.getSeconds(),
+    "q+": Math.floor((d2.getMonth() + 3) / 3),
+    S: d2.getMilliseconds()
   };
   if (/(y+)/.test(fmt)) {
     fmt = fmt.replace(
       RegExp.$1,
-      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
+      `${d2.getFullYear()}`.substr(4 - RegExp.$1.length)
     );
   }
   for (const k in o) {
@@ -346,23 +406,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(m);
+  }
+  if (markdownPlugin.length) {
+    extraConfig.markdown = {
+      config(...rest) {
+        markdownPlugin.forEach((plugin) => {
+          plugin?.(...rest);
+        });
       }
     };
   }
@@ -425,8 +484,8 @@ function getGitTimestamp(file) {
   return new Promise((resolve, reject) => {
     const child = (0, import_child_process.spawn)("git", ["log", "-1", '--pretty="%ci"', file]);
     let output = "";
-    child.stdout.on("data", (d) => {
-      output += String(d);
+    child.stdout.on("data", (d2) => {
+      output += String(d2);
     });
     child.on("close", () => {
       resolve(+new Date(output));
@@ -437,6 +496,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(p(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 +542,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 +561,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.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -34,17 +34,17 @@
   },
   "dependencies": {
     "@mdit-vue/shared": "^0.12.0",
-    "@mermaid-js/mermaid-mindmap": "^9.3.0",
     "@vue/shared": "^3.2.45",
     "@vueuse/core": "^9.6.0",
     "fast-glob": "^3.2.12",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.7.0",
-    "mermaid": "^10.2.4",
-    "vitepress-plugin-mermaid": "^2.0.13",
     "vue-command-palette": "^0.1.4"
   },
   "devDependencies": {
+    "@mermaid-js/mermaid-mindmap": "^9.3.0",
+    "mermaid": "^10.2.4",
+    "vitepress-plugin-mermaid": "^2.0.13",
     "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.4",
     "sass": "^1.56.1",

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 = {}