feat: support Formulate

nuxt.config.ts

@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/"
+const appBase = "/plugins/siyuan-blog/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -28,7 +28,14 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
+  modules: [
+    "@vueuse/nuxt",
+    "@nuxtjs/i18n-edge",
+    "@element-plus/nuxt",
+    "@nuxtjs/color-mode",
+    "@pinia/nuxt",
+    "@nuxt/image",
+  ],
 
   // vueuse
   vueuse: {
@@ -51,7 +58,7 @@ export default defineNuxtConfig({
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,
       "process.env.APP_BASE": `"${appBase}"`,
-      "process.env.SSR": `"true"`,
+      "process.env.SSR": `"false"`,
     },
     plugins: [],
   },
@@ -62,6 +69,14 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
+  // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
+  ssr: false,
+  router: {
+    options: {
+      hashMode: true,
+    },
+  },
+
   css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
@@ -81,6 +96,11 @@ export default defineNuxtConfig({
           rel: "stylesheet",
           href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
+        {
+          rel: "stylesheet",
+          href: appBase + "libs/katex/0.16.10/katex.min.css?v=" + staticV,
+          crossorigin: "anonymous",
+        },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head
       script: isDev
@@ -91,19 +111,33 @@ export default defineNuxtConfig({
             {
               children: "eruda.init();console.log('eruda inited');",
             },
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
           ]
-        : [],
+        : [
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
+          ],
     },
   },
 
   // 环境变量
   runtimeConfig: {
-    siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
-    siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanAuthToken: "",
+    // siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    siyuanCookie: "",
     public: {
-      defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE ?? "siyuan",
-      siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL ?? "http://127.0.0.1:6806",
-      waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
+      // defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
+      defaultType: "siyuan",
+      // siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,
+      siyuanApiUrl: "",
+      // waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
+      waitTime: "0",
     },
   },
 })

nuxt.node.config.ts

@@ -81,6 +81,11 @@ export default defineNuxtConfig({
           rel: "stylesheet",
           href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
+        {
+          rel: "stylesheet",
+          href: appBase + "libs/katex/0.16.10/katex.min.css?v=" + staticV,
+          crossorigin: "anonymous",
+        },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head
       script: isDev
@@ -91,8 +96,17 @@ export default defineNuxtConfig({
             {
               children: "eruda.init();console.log('eruda inited');",
             },
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
           ]
-        : [],
+        : [
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
+          ],
     },
   },
 

nuxt.siyuan.config.ts

@@ -96,6 +96,11 @@ export default defineNuxtConfig({
           rel: "stylesheet",
           href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
+        {
+          rel: "stylesheet",
+          href: appBase + "libs/katex/0.16.10/katex.min.css?v=" + staticV,
+          crossorigin: "anonymous",
+        },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head
       script: isDev
@@ -106,8 +111,17 @@ export default defineNuxtConfig({
             {
               children: "eruda.init();console.log('eruda inited');",
             },
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
           ]
-        : [],
+        : [
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
+          ],
     },
   },
 

nuxt.vercel.config.ts

@@ -82,6 +82,11 @@ export default defineNuxtConfig({
           rel: "stylesheet",
           href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
         },
+        {
+          rel: "stylesheet",
+          href: appBase + "libs/katex/0.16.10/katex.min.css?v=" + staticV,
+          crossorigin: "anonymous",
+        },
       ],
       // https://nuxt.com/docs/api/configuration/nuxt-config#head
       script: isDev
@@ -92,8 +97,17 @@ export default defineNuxtConfig({
             {
               children: "eruda.init();console.log('eruda inited');",
             },
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
           ]
-        : [],
+        : [
+            {
+              defer: true,
+              src: appBase + "libs/katex/0.16.10/katex.min.js",
+            },
+          ],
     },
   },
 

plugins/03.renderer.client.ts

@@ -25,6 +25,7 @@
 
 import { createAppLogger } from "~/common/appLogger"
 import { useClientAssets } from "~/plugins/renderer/useClientAssets"
+import { useClientFormulate } from "~/plugins/renderer/useClientFormulate"
 
 /**
  * 页面渲染插件(图片、链接、公式等) - 客户端
@@ -38,6 +39,7 @@ import { useClientAssets } from "~/plugins/renderer/useClientAssets"
 export default defineNuxtPlugin(({ vueApp }) => {
   const logger = createAppLogger("renderer-client-plugin")
   const { addClientAssetsPrefix } = useClientAssets()
+  const { renderFormulate } = useClientFormulate()
 
   vueApp.directive("beauty", (el: HTMLElement) => {
     // if (process.env.SSR === "true") {
@@ -48,5 +50,9 @@ export default defineNuxtPlugin(({ vueApp }) => {
     // assets
     logger.info("Start handling images on client")
     addClientAssetsPrefix(el)
+
+    // 公式（Formulate）
+    logger.info("Start handling formula on client")
+    renderFormulate(el)
   })
 })

plugins/05.renderer.static.client.ts

@@ -26,6 +26,7 @@
 import { createAppLogger } from "~/common/appLogger"
 import { useClientAssets } from "~/plugins/renderer/useClientAssets"
 import { useStaticClientAssets } from "~/plugins/renderer/useStaticClientAssets"
+import { useClientFormulate } from "~/plugins/renderer/useClientFormulate"
 
 /**
  * 页面渲染插件(图片、链接、公式等) - 客户端
@@ -39,6 +40,7 @@ import { useStaticClientAssets } from "~/plugins/renderer/useStaticClientAssets"
 export default defineNuxtPlugin(({ vueApp }) => {
   const logger = createAppLogger("renderer-static-client-plugin")
   const { addClientAssetsPrefix } = useStaticClientAssets()
+  const { renderFormulate } = useClientFormulate()
 
   vueApp.directive("sbeauty", (el: HTMLElement) => {
     // if (process.env.SSR === "true") {
@@ -47,7 +49,11 @@ export default defineNuxtPlugin(({ vueApp }) => {
     // }
 
     // assets
-    logger.info("Start handling images on client")
+    logger.info("Start handling images on static client")
     addClientAssetsPrefix(el)
+
+    // 公式（Formulate）
+    logger.info("Start handling formula on static client")
+    renderFormulate(el)
   })
 })

plugins/renderer/useClientFormulate.ts

@@ -0,0 +1,37 @@
+import { createAppLogger } from "~/common/appLogger"
+
+/**
+ * 处理客户端公式
+ */
+const useClientFormulate = () => {
+  const logger = createAppLogger("use-client-formulate-plugin")
+  const win = window as any
+
+  const renderFormulate = (el: HTMLElement) => {
+    // 内联公式
+    const inlineMathElement = document.querySelector('span[data-type="inline-math"][data-subtype="math"]')
+    if (inlineMathElement) {
+      const inlineContentValue = inlineMathElement.getAttribute("data-content")
+      win.katex.render(inlineContentValue, inlineMathElement, {
+        throwOnError: false,
+      })
+    }
+    // 替换
+    // 替换成 $inlineContentValue$
+
+    // 多行公式
+    const mathBlockElements = document.querySelectorAll('div[data-type="NodeMathBlock"]')
+    mathBlockElements.forEach((mathBlockElement) => {
+      const blockContentValue = mathBlockElement.getAttribute("data-content")
+      // mathBlockElement.innerHTML = `$$${blockContentValue}$$`
+      // win.renderMathInElement(mathBlockElement)
+      win.katex.render(blockContentValue, mathBlockElement, {
+        throwOnError: false,
+      })
+    })
+  }
+
+  return { renderFormulate }
+}
+
+export { useClientFormulate }