refactor: dynamic import mermaid

demo/yun/package.json

@@ -26,7 +26,6 @@
     "valaxy-theme-yun": "workspace:*"
   },
   "devDependencies": {
-    "nodemon": "^3.0.3",
-    "vite-plugin-pwa": "^0.17.5"
+    "nodemon": "^3.0.3"
   }
 }

demo/yun/pages/examples/sites.md

@@ -1,6 +1,6 @@
 ---
 title: Demo Sites
-title_zh-CN: 站点示例
+title_zh: 站点示例
 layout: docs
 categories:
   - Docs

docs/pages/addons/gallery.md

@@ -1,6 +1,6 @@
 ---
 title: Valaxy Addons Gallery
-title_zh-CN: Valaxy 插件橱窗
+title_zh: Valaxy 插件橱窗
 categories:
   - addon
 end: false

docs/pages/addons/use.md

@@ -1,6 +1,6 @@
 ---
 title: Use Addon
-title_zh-CN: 使用插件
+title_zh: 使用插件
 categories:
   - addon
 ---

docs/pages/addons/why.md

@@ -1,6 +1,6 @@
 ---
 title: Why Addon?
-title_zh-CN: 为什么需要插件？
+title_zh: 为什么需要插件？
 categories:
   - addon
 ---

docs/pages/addons/write.md

@@ -1,6 +1,6 @@
 ---
 title: Write a Addon
-title_zh-CN: 编写一个插件
+title_zh: 编写一个插件
 categories:
   - addon
 end: false

docs/pages/dev/docs.md

@@ -1,6 +1,6 @@
 ---
 title: Participate in Docs
-title_zh-CN: 参与文档
+title_zh: 参与文档
 categories:
   - dev
 end: false

docs/pages/dev/faq.md

@@ -1,6 +1,6 @@
 ---
 title: FAQ
-title_zh-CN: 常见问题
+title_zh: 常见问题
 categories:
   - dev
 end: false

docs/pages/dev/index.md

@@ -1,6 +1,6 @@
 ---
 title: Participate in Development
-title_zh-CN: 参与开发
+title_zh: 参与开发
 categories:
   - dev
 end: false

docs/pages/examples/code-height-limit.md

@@ -1,6 +1,6 @@
 ---
 title: Code height limit
-title_zh-CN: 代码块高度限制
+title_zh: 代码块高度限制
 toc: true
 categories:
   - examples

docs/pages/examples/partial-content-encryption.md

@@ -1,6 +1,6 @@
 ---
 title: Partial Content Encryption
-title_zh-CN: 部分内容加密
+title_zh: 部分内容加密
 toc: true
 categories:
   - examples

docs/pages/faq/index.md

@@ -1,6 +1,6 @@
 ---
 title: FAQ
-title_zh-CN: 常见问题
+title_zh: 常见问题
 categories:
   - guide
 end: false

docs/pages/guide/best-pratice.md

@@ -1,6 +1,6 @@
 ---
 title: Best Practice
-title_zh-CN: 最佳实践
+title_zh: 最佳实践
 categories:
   - guide
 top: 1

docs/pages/guide/built-ins/index.md

@@ -1,6 +1,6 @@
 ---
 title: Components
-title_zh-CN: 组件
+title_zh: 组件
 categories:
   - guide
 end: false

docs/pages/guide/commands/index.md

@@ -1,6 +1,6 @@
 ---
 title: Commands
-title_zh-CN: 命令行
+title_zh: 命令行
 categories:
   - guide
 top: 99

docs/pages/guide/config/extend.md

@@ -1,6 +1,6 @@
 ---
 title: Extend Config
-title_zh-CN: 扩展配置
+title_zh: 扩展配置
 categories:
   - config
 ---

docs/pages/guide/config/index.md

@@ -1,6 +1,6 @@
 ---
 title: Config
-title_zh-CN: 基础配置
+title_zh: 基础配置
 categories:
   - config
 end: false

docs/pages/guide/custom/components.md

@@ -1,6 +1,6 @@
 ---
 title: Components
-title_zh-CN: 自定义组件
+title_zh: 自定义组件
 categories:
   - custom
 end: false

docs/pages/guide/custom/extend.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Extensions
-title_zh-CN: 自定义扩展
+title_zh: 自定义扩展
 categories:
   - custom
 end: false

docs/pages/guide/custom/hooks.md

@@ -1,6 +1,6 @@
 ---
 title: Hooks
-title_zh-CN: 钩子
+title_zh: 钩子
 categories:
   - custom
 end: false

docs/pages/guide/custom/styles.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Styles
-title_zh-CN: 自定义样式
+title_zh: 自定义样式
 categories:
   - custom
 end: false

docs/pages/guide/custom/templates.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Post Templates
-title_zh-CN: 自定义文章模板
+title_zh: 自定义文章模板
 categories:
   - custom
 end: false

docs/pages/guide/deploy.md

@@ -1,6 +1,6 @@
 ---
 title: Deployment
-title_zh-CN: 部署
+title_zh: 部署
 categories:
   - getting-started
 end: false

docs/pages/guide/features.md

@@ -1,6 +1,6 @@
 ---
 title: Features
-title_zh-CN: 亮点
+title_zh: 亮点
 categories:
   - getting-started
 end: false

docs/pages/guide/getting-started.md

@@ -1,6 +1,6 @@
 ---
 title: Getting Started
-title_zh-CN: 开始
+title_zh: 开始
 categories:
   - getting-started
 end: true

docs/pages/guide/i18n.md

@@ -1,6 +1,6 @@
 ---
 title: i18n in One Page
-title_zh-CN: 单页 i18n
+title_zh: 单页 i18n
 categories:
   - guide
 ---

docs/pages/guide/markdown.md

@@ -1,5 +1,5 @@
 ---
-title_zh-CN: Markdown 扩展
+title_zh: Markdown 扩展
 title: Markdown Extensions
 categories:
   - guide

docs/pages/guide/page.md

@@ -1,6 +1,6 @@
 ---
 title: Page
-title_zh-CN: 页面
+title_zh: 页面
 categories:
   - guide
 ---

docs/pages/guide/post.md

@@ -1,6 +1,6 @@
 ---
 title: Post
-title_zh-CN: 文章
+title_zh: 文章
 categories:
   - guide
 end: false

docs/pages/guide/third-party/comment-system.md

@@ -1,6 +1,6 @@
 ---
 title: Third Comment System
-title_zh-CN: 第三方评论系统
+title_zh: 第三方评论系统
 categories:
   - third
 ---

docs/pages/guide/third-party/index.md

@@ -1,6 +1,6 @@
 ---
 title: Third Party
-title_zh-CN: 第三方集成
+title_zh: 第三方集成
 categories:
   - third
 end: false

docs/pages/guide/third-party/schema-org.md

@@ -1,6 +1,6 @@
 ---
 title: Schema.org And OPG for SEO
-title_zh-CN: Schema.org And OPG for SEO
+title_zh: Schema.org And OPG for SEO
 categories:
   - third
 top: 0

docs/pages/guide/third-party/vite-vue.md

@@ -1,6 +1,6 @@
 ---
 title: Use Vite/Vue Plugin
-title_zh-CN: 使用 Vite/Vue 插件
+title_zh: 使用 Vite/Vue 插件
 categories:
   - third
 ---

docs/pages/guide/why.md

@@ -1,7 +1,7 @@
 ---
 cover: https://fastly.jsdelivr.net/gh/YunYouJun/cdn/img/bg/girl-in-water-tank.webp
 title: Why Valaxy
-title_zh-CN: 为什么选 Valaxy
+title_zh: 为什么选 Valaxy
 date: 2022-03-22
 categories:
   - getting-started

docs/pages/migration/hexo.md

@@ -1,5 +1,5 @@
 ---
-title_zh-CN: 从 Hexo 迁移至 Valaxy
+title_zh: 从 Hexo 迁移至 Valaxy
 title: Migrate from Hexo to Valaxy
 categories:
   - migration

docs/pages/migration/index.md

@@ -1,6 +1,6 @@
 ---
 title: Migration from Other
-title_zh-CN: 从其他博客框架迁移
+title_zh: 从其他博客框架迁移
 categories:
   - migration
 top: 10

docs/pages/posts/i18n.md

@@ -1,6 +1,6 @@
 ---
 title: How to realize CSS i18n?
-title_zh-CN: 如何实现 CSS i18n？
+title_zh: 如何实现 CSS i18n？
 date: 2022-04-09
 categories: Valaxy 开发笔记
 tags:

docs/pages/themes/gallery.md

@@ -1,6 +1,6 @@
 ---
 title: Valaxy Themes Gallery
-title_zh-CN: Valaxy 主题橱窗
+title_zh: Valaxy 主题橱窗
 categories:
   - theme
 end: false

docs/pages/themes/use.md

@@ -1,6 +1,6 @@
 ---
 title: Use Theme
-title_zh-CN: 使用主题
+title_zh: 使用主题
 categories:
   - theme
 top: 100

docs/pages/themes/write.md

@@ -1,6 +1,6 @@
 ---
 title: How to write a theme?
-title_zh-CN: 如何编写一个 Valaxy 主题
+title_zh: 如何编写一个 Valaxy 主题
 categories:
   - theme
 end: false

packages/valaxy/client/components/builtin/ValaxyMermaid.vue

@@ -15,6 +15,7 @@ pie
 <script setup lang="ts">
 import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
 
+import { isClient } from '@vueuse/core'
 import { renderMermaid } from '../../modules/mermaid'
 import ShadowRoot from '../internals/ShadowRoot.vue'
 
@@ -30,44 +31,54 @@ const vm = getCurrentInstance()
 const el = ref<ShadowRoot>()
 const html = ref('')
 
-watchEffect(async (onCleanup) => {
-  let disposed = false
-  onCleanup(() => {
-    disposed = true
-  })
-  const svg = await renderMermaid(
-    props.code || '',
-    {
-      theme: props.theme || (isDark.value ? 'dark' : undefined),
-      ...vm!.attrs,
-    },
-  )
-  if (!disposed)
-    html.value = svg
-})
+if (isClient) {
+  // dynamic import to reduce initial bundle size
+  import('mermaid').then(m => m.default)
+    .then((mermaid) => {
+      mermaid.startOnLoad = false
+      mermaid.initialize({ startOnLoad: false })
 
-const actualHeight = ref<number>()
+      watchEffect(async (onCleanup) => {
+        let disposed = false
+        onCleanup(() => {
+          disposed = true
+        })
+        const svg = await renderMermaid(
+          mermaid,
+          props.code || '',
+          {
+            theme: props.theme || (isDark.value ? 'dark' : undefined),
+            ...vm!.attrs,
+          },
+        )
+        if (!disposed)
+          html.value = svg
+      })
 
-watch(html, () => {
-  actualHeight.value = undefined
-})
+      const actualHeight = ref<number>()
 
-watchEffect(() => {
-  const svgEl = el.value?.children?.[0] as SVGElement | undefined
-  if (svgEl && svgEl.hasAttribute('viewBox') && actualHeight.value == null) {
-    const v = Number.parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3] || '')
-    actualHeight.value = Number.isNaN(v) ? undefined : v
-  }
-}, { flush: 'post' })
+      watch(html, () => {
+        actualHeight.value = undefined
+      })
 
-watchEffect(() => {
-  const svgEl = el.value?.children?.[0] as SVGElement | undefined
-  if (svgEl != null && props.scale != null && actualHeight.value != null) {
-    svgEl.setAttribute('height', `${actualHeight.value * props.scale}`)
-    svgEl.removeAttribute('width')
-    svgEl.removeAttribute('style')
-  }
-}, { flush: 'post' })
+      watchEffect(() => {
+        const svgEl = el.value?.children?.[0] as SVGElement | undefined
+        if (svgEl && svgEl.hasAttribute('viewBox') && actualHeight.value == null) {
+          const v = Number.parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3] || '')
+          actualHeight.value = Number.isNaN(v) ? undefined : v
+        }
+      }, { flush: 'post' })
+
+      watchEffect(() => {
+        const svgEl = el.value?.children?.[0] as SVGElement | undefined
+        if (svgEl != null && props.scale != null && actualHeight.value != null) {
+          svgEl.setAttribute('height', `${actualHeight.value * props.scale}`)
+          svgEl.removeAttribute('width')
+          svgEl.removeAttribute('style')
+        }
+      }, { flush: 'post' })
+    })
+}
 </script>
 
 <template>

packages/valaxy/client/modules/mermaid.ts

@@ -1,19 +1,13 @@
-import mermaid from 'mermaid'
 import { customAlphabet } from 'nanoid'
 import { decode } from 'js-base64'
 import { clearUndefined } from '@antfu/utils'
-import { isClient } from '@vueuse/core'
+import type { Mermaid } from 'mermaid'
 import setupMermaid from '../setup/mermaid'
 
-if (isClient) {
-  mermaid.startOnLoad = false
-  mermaid.initialize({ startOnLoad: false })
-}
-
 const nanoid = customAlphabet('abcedfghicklmn', 10)
 const cache = new Map<string, string>()
 
-export async function renderMermaid(encoded: string, options: any) {
+export async function renderMermaid(mermaid: Mermaid, encoded: string, options: any) {
   const key = encoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)

packages/valaxy/client/setups.ts

@@ -2,8 +2,6 @@ import type { ViteSSGContext } from 'vite-ssg'
 import type { Awaitable } from '@antfu/utils'
 import type { MermaidOptions } from './types'
 
-// todo dynamic mermaid import
-
 export type AppContext = ViteSSGContext
 
 export type AppSetup = (ctx: AppContext) => Awaitable<void>

packages/valaxy/node/plugins/markdown/transform.ts

@@ -69,8 +69,9 @@ export async function createMarkdownPlugin(
         return code
       },
 
-      // frontmatterOptions componentOptions in mdOptions
-      ...mdOptions,
     },
+
+    // frontmatterOptions componentOptions in mdOptions
+    ...mdOptions,
   }) as Plugin
 }