@sugarat/theme 0.1.34 → 0.1.36-beta.0

package/README.md

@@ -5,11 +5,21 @@
 ![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzE3MDUxOTMwMw==673170519303)
 
 ## Quick Start
-① 初始化项目模板
-```sh
-npx degit ATQQ/sugar-blog/packages/template my-blog-demo
+① 创建项目
+
+```bash
+# With PNPM:
+pnpm create @sugarat/theme
+
+# With NPM:
+npm create @sugarat/theme@latest
+
+# With Yarn:
+yarn create @sugarat/theme
 ```
 
+![](https://img.cdn.sugarat.top/mdImg/MTY4OTQyMDE1NTcxMA==689420155710)
+
 ② 安装依赖
 ```sh
 pnpm install
@@ -24,13 +34,14 @@ pnpm dev
 ```sh
 pnpm build
 ```
+
+⑤ 预览构建产物
+```sh
+pnpm serve
+```
 ## Advanced Ssage
 详细配置见文档 https://theme.sugarat.top
 
-## Known bugs and workarounds
-* `zlib: unexpected end of file:` clearing the cache folder (rm -rf ~/.degit)
-
-
 ## Thanks
 从以下项目中获得了灵感&经验
 * [vuepress-reco/vuepress-theme-reco-1.x](https://github.com/vuepress-reco/vuepress-theme-reco-1.x)

package/node.d.ts

@@ -41,6 +41,7 @@ declare namespace Theme {
         date: string;
         tag?: string[];
         description?: string;
+        descriptionHTML?: string;
         cover?: string;
         hiddenCover?: boolean;
         readingTime?: boolean;
@@ -109,7 +110,8 @@ declare namespace Theme {
     interface HomeBlog {
         name?: string;
         motto?: string;
-        inspiring?: string;
+        inspiring?: string | string[];
+        inspiringTimeout?: number;
         pageSize?: number;
     }
     interface ArticleConfig {
@@ -247,6 +249,10 @@ declare namespace Theme {
         blog?: BlogConfig;
     }
     interface HomeConfig {
+        /**
+         * @deprecated
+         * 此方法已经废弃，这个定义将在未来某一刻被移除，请为 inspiring 配置数租来实现相同的效果
+         */
         handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
     }
 }
@@ -256,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,
@@ -281,7 +282,7 @@ function getThemeConfig(cfg) {
     ]);
     const wordCount = 100;
     meta.description = meta.description || getTextSummary(fileContent, wordCount);
-    meta.cover = meta.cover || fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || "";
+    meta.cover = meta.cover ?? (fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || "");
     if (meta.publish === false) {
       meta.hidden = true;
       meta.recommend = false;
@@ -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.34",
+  "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/components/BlogItem.vue

@@ -9,7 +9,12 @@
         <!-- 标题 -->
         <p class="title" v-if="!inMobile">{{ title }}</p>
         <!-- 简短描述 -->
-        <p class="description" v-if="!!description">{{ description }}</p>
+        <p class="description" v-if="!descriptionHTML && !!description">
+          {{ description }}
+        </p>
+        <template v-if="descriptionHTML">
+          <div class="description-html" v-html="descriptionHTML"></div>
+        </template>
         <!-- 底部补充描述 -->
         <div class="badge-list" v-if="!inMobile">
           <span class="split" v-if="author">{{ author }}</span>
@@ -47,15 +52,29 @@ const props = defineProps<{
   date: string | Date
   sticky?: number
   description?: string
+  descriptionHTML?: string
   tag?: string[]
   author?: string
-  cover?: string
+  cover?: string | boolean
   pin?: number
 }>()
 
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
+
+// function isWrappedWithPreventDefault(element: HTMLElement) {
+//   let parent = element.parentElement
+
+//   while (parent) {
+//     if (parent.hasAttribute('preventDefault')) {
+//       return true
+//     }
+//     parent = parent.parentElement
+//   }
+
+//   return false
+// }
 </script>
 
 <style lang="scss" scoped>
@@ -131,6 +150,9 @@ const showTime = computed(() => {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.description-html {
+  font-size: 14px;
+}
 .badge-list {
   font-size: 13px;
   color: var(--badge-font-color);

package/src/components/BlogList.vue

@@ -5,6 +5,7 @@
         :route="v.route"
         :title="v.meta.title"
         :description="v.meta.description"
+        :description-h-t-m-l="v.meta.descriptionHTML"
         :date="v.meta.date"
         :tag="v.meta.tag"
         :cover="v.meta.cover"

package/src/composables/config/index.ts

@@ -42,6 +42,7 @@ export namespace Theme {
     date: string
     tag?: string[]
     description?: string
+    descriptionHTML?: string
     cover?: string
     hiddenCover?: boolean
     readingTime?: boolean
@@ -115,7 +116,8 @@ export namespace Theme {
   export interface HomeBlog {
     name?: string
     motto?: string
-    inspiring?: string
+    inspiring?: string | string[]
+    inspiringTimeout?: number
     pageSize?: number
   }
 
@@ -268,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'
 
@@ -84,9 +84,8 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
 
       // 获取封面图
       meta.cover =
-        meta.cover ||
-        fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] ||
-        ''
+        meta.cover ??
+        (fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || '')
 
       // 是否发布 默认发布
       if (meta.publish === false) {
@@ -171,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)
+        })
       }
     }
   }
@@ -307,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) {
@@ -333,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 = {}