移除Preact框架、引入react-hook检查

components/Comment.js

@@ -43,9 +43,6 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 })
 
 const Comment = ({ frontMatter }) => {
-  if (!frontMatter) {
-    return <>Loading...</>
-  }
   const { isDarkMode } = useGlobal()
   const router = useRouter()
 
@@ -61,6 +58,10 @@ const Comment = ({ frontMatter }) => {
     }, 200)
   }, [])
 
+  if (!frontMatter) {
+    return <>Loading...</>
+  }
+
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>

components/Live2D.js

@@ -2,26 +2,27 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { loadExternalResource } from '@/lib/utils'
-import { useEffect } from 'react'
+import React from 'react'
 
 export default function Live2D() {
-  if (!BLOG.WIDGET_PET || !JSON.parse(BLOG.WIDGET_PET)) {
-    return <></>
-  }
   const { switchTheme } = useGlobal()
 
+  React.useEffect(() => {
+    window.addEventListener('scroll', initLive2D)
+    return () => {
+      window.removeEventListener('scroll', initLive2D)
+    }
+  }, [])
+
   function handleClick() {
     if (BLOG.WIDGET_PET_SWITCH_THEME) {
       switchTheme()
     }
   }
 
-  useEffect(() => {
-    window.addEventListener('scroll', initLive2D)
-    return () => {
-      window.removeEventListener('scroll', initLive2D)
-    }
-  }, [])
+  if (!BLOG.WIDGET_PET || !JSON.parse(BLOG.WIDGET_PET)) {
+    return <></>
+  }
 
   return <canvas id="live2d" className='cursor-pointer' width="280" height="250" onClick={handleClick} alt='切换主题' title='切换主题' />
 }

components/NotionPage.js

@@ -45,8 +45,6 @@ import 'prismjs/components/prism-r.js'
 
 // 化学方程式
 import '@/lib/mhchem'
-// 页面渲染观察者
-let observer
 
 // https://github.com/txs
 // import PrismMac from '@/components/PrismMac'
@@ -63,10 +61,6 @@ const Modal = dynamic(
 )
 
 const NotionPage = ({ post }) => {
-  if (!post || !post.blockMap) {
-    return <>{post?.summary || ''}</>
-  }
-
   const zoom = isBrowser() && mediumZoom({
     container: '.notion-viewport',
     background: 'rgba(0, 0, 0, 0.2)',
@@ -76,10 +70,6 @@ const NotionPage = ({ post }) => {
 
   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
-  if (isBrowser() && !observer) {
-    addWatch4Dom()
-  }
-
   React.useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
@@ -109,8 +99,11 @@ const NotionPage = ({ post }) => {
     }, 800)
   }, [])
 
+  if (!post || !post.blockMap) {
+    return <>{post?.summary || ''}</>
+  }
+
   return <div id='container' className='max-w-5xl overflow-x-visible mx-auto'>
-    <PrismMac />
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
@@ -123,6 +116,9 @@ const NotionPage = ({ post }) => {
         nextImage: Image,
         nextLink: Link
       }} />
+
+      <PrismMac />
+
   </div>
 }
 
@@ -154,61 +150,4 @@ function getMediumZoomMargin() {
   }
 }
 
-/**
- * 监听DOM变化
- * @param {*} element
- */
-// eslint-disable-next-line no-unused-vars
-function addWatch4Dom(element) {
-  // 选择需要观察变动的节点
-  const targetNode = element || document?.getElementById('container')
-  // 观察器的配置（需要观察什么变动）
-  const config = {
-    attributes: true,
-    childList: true,
-    subtree: true
-  }
-
-  // 创建一个观察器实例并传入回调函数
-  observer = new MutationObserver(mutationCallback)
-  //   console.log('观察节点变化', observer)
-  // 以上述配置开始观察目标节点
-  if (targetNode) {
-    observer.observe(targetNode, config)
-  }
-
-  //   observer.disconnect()
-}
-
-// 当页面发生时会调用此函数
-const mutationCallback = (mutations) => {
-  for (const mutation of mutations) {
-    const type = mutation.type
-    switch (type) {
-      case 'childList':
-        //   console.log('A child node has been added or removed.', mutation)
-        if (mutation.addedNodes.length > 0) {
-          if (mutation?.target?.parentElement?.nodeName === 'PRE' || mutation?.target?.parentElement?.nodeName === 'CODE') {
-            if (mutation.addedNodes[0].nodeName === '#text' && mutation.target.childElementCount > 0) {
-              mutation.addedNodes[0].remove() // 移除新增的内容
-            }
-          }
-          if (mutation?.target?.className === 'language-mermaid') {
-            // mermaid重刷新bug TODO
-          }
-        }
-        break
-      case 'attributes':
-        //   console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target)
-        //   console.log(mutation.attributeName)
-        break
-      case 'subtree':
-        //   console.log('The subtree was modified.', mutation.target)
-        break
-      default:
-        break
-    }
-  }
-}
-
 export default NotionPage

components/PrismMac.js

@@ -11,9 +11,6 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 import mermaid from 'mermaid'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import { isBrowser } from '@/lib/utils'
-// 页面渲染观察者
-let observer
 
 /**
  * @author https://github.com/txs/
@@ -24,10 +21,6 @@ const PrismMac = () => {
   const { isDarkMode } = useGlobal()
   const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
 
-  if (isBrowser() && !observer) {
-    addWatch4Dom()
-  }
-
   React.useEffect(() => {
     renderPrismMac()
     window.scrollTo(0, scrollTop)
@@ -111,58 +104,4 @@ function renderPrismMac() {
   }
 }
 
-/**
- * 监听DOM变化
- * @param {*} element
- */
-// eslint-disable-next-line no-unused-vars
-function addWatch4Dom(element) {
-  // 选择需要观察变动的节点
-  const targetNode = element || document?.getElementById('container')
-  // 观察器的配置（需要观察什么变动）
-  const config = {
-    attributes: true,
-    childList: true,
-    subtree: true
-  }
-
-  // 创建一个观察器实例并传入回调函数
-  observer = new MutationObserver(mutationCallback)
-  //   console.log('观察节点变化', observer)
-  // 以上述配置开始观察目标节点
-  if (targetNode) {
-    observer.observe(targetNode, config)
-  }
-
-  //   observer.disconnect()
-}
-
-// 当页面发生时会调用此函数
-const mutationCallback = (mutations) => {
-  for (const mutation of mutations) {
-    const type = mutation.type
-    switch (type) {
-      case 'childList':
-        //   console.log('A child node has been added or removed.', mutation)
-        if (mutation.addedNodes.length > 0) {
-          if (mutation?.target?.parentElement?.nodeName === 'PRE' || mutation?.target?.parentElement?.nodeName === 'CODE') {
-            if (mutation.addedNodes[0].nodeName === '#text') {
-              mutation.addedNodes[0].remove() // 移除新增的内容
-            }
-          }
-        }
-        break
-      case 'attributes':
-        //   console.log(`The ${mutation.attributeName} attribute was modified.`, mutation.target)
-        //   console.log(mutation.attributeName)
-        break
-      case 'subtree':
-        //   console.log('The subtree was modified.', mutation.target)
-        break
-      default:
-        break
-    }
-  }
-}
-
 export default PrismMac

components/Tabs.js

@@ -6,6 +6,8 @@ import React, { useState } from 'react'
  * @returns
  */
 const Tabs = ({ className, children }) => {
+  const [currentTab, setCurrentTab] = useState(0)
+
   if (!children) {
     return <></>
   }
@@ -29,8 +31,6 @@ const Tabs = ({ className, children }) => {
     </section>
   }
 
-  const [currentTab, setCurrentTab] = useState(0)
-
   function tabClickHandle (i) {
     setCurrentTab(i)
   }