Merge pull request #513 from tangly1024/release/3.6.1

Release/3.6.1
2026-05-14 07:26:52 +00:00 · 2022-11-30 22:31:10 +08:00
parent cabdb1ee9f 77bbdceb03
commit 312387680f
12 changed files with 59 additions and 176 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,7 +16,10 @@ module.exports = {
    ecmaVersion: 12,
    sourceType: 'module'
  },
-  plugins: ['react'],
+  plugins: [
+    'react',
+    'react-hooks'
+  ],
  settings: {
    react: {
      version: 'detect'
@@ -24,7 +27,8 @@ module.exports = {
  },
  rules: {
    'react/prop-types': 'off',
-    'space-before-function-paren': 0
+    'space-before-function-paren': 0,
+    'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
  },
  globals: {
    React: true
--- a/components/Comment.js
+++ b/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>
--- a/components/Live2D.js
+++ b/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='切换主题' />
 }
--- a/components/NotionPage.js
+++ b/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
--- a/components/PrismMac.js
+++ b/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)
@@ -77,14 +70,6 @@ function renderPrismMac() {
    }
  }, 10)

-  // 重新渲染之前检查所有的多余text
-
-  try {
-    Prism.highlightAll()
-  } catch (err) {
-    console.log('代码渲染', err)
-  }
-
  //   支持 Mermaid
  const mermaids = document.querySelectorAll('.notion-code .language-mermaid')
  if (mermaids) {
@@ -109,59 +94,13 @@ 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
-  }
+  // 重新渲染之前检查所有的多余text

-  // 创建一个观察器实例并传入回调函数
-  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
-    }
+  try {
+    Prism.highlightAll()
+  } catch (err) {
+    console.log('代码渲染', err)
  }
 }

--- a/components/Tabs.js
+++ b/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)
  }
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
 })
+
 module.exports = withBundleAnalyzer({
  future: {
    webpack5: true
@@ -38,13 +39,13 @@ module.exports = withBundleAnalyzer({
  },
  webpack: (config, { dev, isServer }) => {
    // Replace React with Preact only in client production build
-    if (!dev && !isServer) {
-      Object.assign(config.resolve.alias, {
-        react: 'preact/compat',
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat'
-      })
-    }
+    // if (!dev && !isServer) {
+    //   Object.assign(config.resolve.alias, {
+    //     react: 'preact/compat',
+    //     'react-dom/test-utils': 'preact/test-utils',
+    //     'react-dom': 'preact/compat'
+    //   })
+    // }
    return config
  }
 })
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "animejs": "^3.2.1",
    "axios": ">=0.21.1",
    "copy-to-clipboard": "^3.3.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
    "feed": "^4.2.2",
    "gitalk": "^1.7.2",
    "localStorage": "^1.0.4",
--- a/pages/[...slug].js
+++ b/pages/[...slug].js
@@ -20,6 +20,17 @@ const Slug = props => {
  const { post, siteInfo } = props
  const router = Router.useRouter()

+  // 文章锁🔐
+  const [lock, setLock] = React.useState(true)
+
+  React.useEffect(() => {
+    if (post?.password && post?.password !== '') {
+      setLock(true)
+    } else {
+      setLock(false)
+    }
+  }, [post])
+
  if (!post) {
    changeLoadingState(true)
    setTimeout(() => {
@@ -38,16 +49,6 @@ const Slug = props => {

  changeLoadingState(false)

-  // 文章锁🔐
-  const [lock, setLock] = React.useState(post?.password && post?.password !== '')
-  React.useEffect(() => {
-    if (post?.password && post?.password !== '') {
-      setLock(true)
-    } else {
-      setLock(false)
-    }
-  }, [post])
-
  /**
   * 验证文章密码
   * @param {*} result
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -5,8 +5,9 @@ import * as ThemeMap from '@/themes'

 const Search = props => {
  const { posts, siteInfo } = props
+  const router = useRouter()
  let filteredPosts
-  const searchKey = getSearchKey()
+  const searchKey = getSearchKey(router)
  // 静态过滤
  if (searchKey) {
    filteredPosts = posts.filter(post => {
@@ -61,8 +62,7 @@ export async function getStaticProps() {
  }
 }

-function getSearchKey() {
-  const router = useRouter()
+function getSearchKey(router) {
  if (router.query && router.query.s) {
    return router.query.s
  }
--- a/styles/prism-mac-style.css
+++ b/styles/prism-mac-style.css
@@ -4,7 +4,7 @@
 .code-toolbar {
  position: relative;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
-  @apply mb-8 pt-6 w-full rounded-lg bg-black
+  @apply mb-8 mt-4 pt-6 w-full rounded-lg bg-black
 }

 .toolbar {
--- a/themes/medium/components/SearchInput.js
+++ b/themes/medium/components/SearchInput.js
@@ -3,7 +3,6 @@ import { useImperativeHandle, useRef, useState } from 'react'
 let lock = false

 const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
-  // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
  const [onLoading, setLoadingState] = useState(false)
  const router = useRouter()
  const searchInputRef = useRef()
@@ -20,9 +19,6 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {

    if (key && key !== '') {
      setLoadingState(true)
-      // router.push({ pathname: '/search/' + key }).then(r => {
-      //   setLoadingState(false)
-      // })
      location.href = '/search/' + key
    } else {
      router.push({ pathname: '/' }).then(r => {