remove gitalk valine mermaid

components/Gitalk.js

@@ -1,18 +1,44 @@
-import 'gitalk/dist/gitalk.css'
+// import 'gitalk/dist/gitalk.css'
 import BLOG from '@/blog.config'
-import GitalkComponent from 'gitalk/dist/gitalk-component'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import GitalkComponent from 'gitalk/dist/gitalk-component'
 
 const Gitalk = ({ frontMatter }) => {
-  return <GitalkComponent options={{
-    id: frontMatter.id,
-    title: frontMatter.title,
-    clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
-    clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
-    repo: BLOG.COMMENT_GITALK_REPO,
-    owner: BLOG.COMMENT_GITALK_OWNER,
-    admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-    distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
-  }} />
+  //   return <GitalkComponent options={{
+  //     id: frontMatter.id,
+  //     title: frontMatter.title,
+  //     clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+  //     clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+  //     repo: BLOG.COMMENT_GITALK_REPO,
+  //     owner: BLOG.COMMENT_GITALK_OWNER,
+  //     admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+  //     distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  //   }} />
+  const loadGitalk = async() => {
+    const css = await loadExternalResource(BLOG.COMMENT_GITALK_CSS_CDN_URL, 'css')
+    const js = await loadExternalResource(BLOG.COMMENT_GITALK_JS_CDN_URL, 'js')
+
+    console.log('gitalk 加载成功', css, js)
+    const Gitalk = window.Gitalk
+
+    const gitalk = new Gitalk({
+      clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+      clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+      repo: BLOG.COMMENT_GITALK_REPO,
+      owner: BLOG.COMMENT_GITALK_OWNER,
+      admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+      id: frontMatter.id, // Ensure uniqueness and length less than 50
+      distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE) // Facebook-like distraction free mode
+    })
+
+    gitalk.render('gitalk-container')
+  }
+  useEffect(() => {
+    loadGitalk()
+  }, [])
+
+  return <div id="gitalk-container"></div>
 }
 
 export default Gitalk