d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-19 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove gitalk valine mermaid

Browse Source
This commit is contained in:
tangly1024
2023-06-04 15:41:04 +08:00
parent cd1b38a8ac
commit 9246c8d7f8
9 changed files with 110 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/Gitalk.js
View File

@@ -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

2
components/NotionPage.js
View File

@@ -13,7 +13,7 @@ const Equation = dynamic(() =>
// 化学方程式
await import('@/lib/mhchem')
return m.Equation
})
}), { ssr: false }
)
const Pdf = dynamic(
() => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),

7
components/PrismMac.js
View File

@@ -64,8 +64,11 @@ const renderMermaid = async() => {
}
}
if (needLoad) {
const asyncMermaid = await import('mermaid')
asyncMermaid.default.contentLoaded()
// const asyncMermaid = await import('mermaid')
const url = await loadExternalResource(BLOG.MERMAID_CDN, 'js')
const mermaid = window.mermaid
console.log('mermaid加载成功', url, mermaid)
mermaid.contentLoaded()
}
}
}

3
components/Valine.js
View File

@@ -1,3 +0,0 @@
import { Valine } from 'react-valine'
export default Valine

92
components/ValineComponent.js
View File

@@ -1,49 +1,61 @@
import BLOG from '@/blog.config'
import { useRouter } from 'next/router'
import React from 'react'
import Valine from 'valine'
import { loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
const ValineComponent = (props) => {
const router = useRouter()
const initValine = (url) => {
const valine = new Valine({
el: '#v-comments',
appId: BLOG.COMMENT_VALINE_APP_ID,
appKey: BLOG.COMMENT_VALINE_APP_KEY,
avatar: '',
path: url || router.asPath,
recordIP: true,
placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
visitor: true
})
if (!valine) {
console.error('valine错误')
const ValineComponent = ({ path }) => {
const loadValine = async () => {
try {
const url = await loadExternalResource(BLOG.COMMENT_VALINE_CDN, 'js')
console.log('valine 加载成功', url)
const Valine = window.Valine
// eslint-disable-next-line no-unused-vars
const valine = new Valine({
el: '#valine', // 容器元素
lang: BLOG.LANG, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
appId: BLOG.COMMENT_VALINE_APP_ID,
appKey: BLOG.COMMENT_VALINE_APP_KEY,
avatar: '',
path,
recordIP: true,
placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
visitor: true
})
console.log('初始化valine成功')
} catch (error) {
console.error('twikoo 加载失败', error)
}
}
const updateValine = url => {
// 移除旧的评论区，否则会重复渲染。
const wrapper = document.getElementById('v-wrapper')
const comments = document.getElementById('v-comments')
wrapper.removeChild(comments)
const newComments = document.createElement('div')
newComments.id = 'v-comments'
newComments.name = new Date()
wrapper.appendChild(newComments)
initValine(url)
}
React.useEffect(() => {
initValine()
router.events.on('routeChangeComplete', updateValine)
return () => {
router.events.off('routeChangeComplete', updateValine)
}
useEffect(() => {
loadValine()
}, [])
return <div id='v-wrapper'>
<div id='v-comments'></div>
</div>
return <div id="valine"></div>
// const updateValine = url => {
// // 移除旧的评论区，否则会重复渲染。
// const wrapper = document.getElementById('v-wrapper')
// const comments = document.getElementById('v-comments')
// wrapper.removeChild(comments)
// const newComments = document.createElement('div')
// newComments.id = 'v-comments'
// newComments.name = new Date()
// wrapper.appendChild(newComments)
// initValine(url)
// }
// useEffect(() => {
// initValine()
// router.events.on('routeChangeComplete', updateValine)
// return () => {
// router.events.off('routeChangeComplete', updateValine)
// }
// }, [])
// return <div id='v-wrapper'>
// <div id='v-comments'></div>
// </div>
}
export default ValineComponent