From 2f76a7314c44a3b629ba82bb79ce2a8583fecfe9 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 30 Nov 2022 22:08:15 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=A7=BB=E9=99=A4Preact=E6=A1=86=E6=9E=B6?= =?UTF-8?q?=E3=80=81=E5=BC=95=E5=85=A5react-hook=E6=A3=80=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 8 ++- components/Comment.js | 7 ++- components/Live2D.js | 21 +++---- components/NotionPage.js | 75 +++---------------------- components/PrismMac.js | 61 -------------------- components/Tabs.js | 4 +- next.config.js | 15 ++--- package.json | 1 + pages/[...slug].js | 21 +++---- pages/search/index.js | 6 +- styles/prism-mac-style.css | 2 +- themes/medium/components/SearchInput.js | 4 -- 12 files changed, 54 insertions(+), 171 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6cf90e91..4b95adcd 100644 --- 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 diff --git a/components/Comment.js b/components/Comment.js index d362e047..c1ae3d2b 100644 --- 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 (
diff --git a/components/Live2D.js b/components/Live2D.js index c763349a..cb53df89 100644 --- 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 } diff --git a/components/NotionPage.js b/components/NotionPage.js index e9a4025e..5b9080f1 100644 --- 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
- { nextImage: Image, nextLink: Link }} /> + + +
} @@ -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 diff --git a/components/PrismMac.js b/components/PrismMac.js index 0a2bf4ec..2a80f116 100644 --- 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) @@ -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 diff --git a/components/Tabs.js b/components/Tabs.js index f3b0477a..9057f20e 100644 --- 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 }) => { } - const [currentTab, setCurrentTab] = useState(0) - function tabClickHandle (i) { setCurrentTab(i) } diff --git a/next.config.js b/next.config.js index 7c8627f1..50e4c1c8 100644 --- 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 } }) diff --git a/package.json b/package.json index a5c72494..bed8a9a4 100644 --- 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", diff --git a/pages/[...slug].js b/pages/[...slug].js index 7707ca31..64f3f113 100644 --- 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 diff --git a/pages/search/index.js b/pages/search/index.js index 4dd96ad5..d562d627 100644 --- 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 } diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 15e2e4f7..8efcf150 100644 --- 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 { diff --git a/themes/medium/components/SearchInput.js b/themes/medium/components/SearchInput.js index a04e3345..5b037540 100644 --- 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 => { From 77bbdceb03e7bf05b81673c0d9eef8d15cca2c83 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 30 Nov 2022 22:22:37 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=A5=BC=E5=9B=BE?= =?UTF-8?q?=E3=80=81=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PrismMac.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/PrismMac.js b/components/PrismMac.js index 2a80f116..2ec44618 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -70,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) { @@ -102,6 +94,14 @@ function renderPrismMac() { } } } + + // 重新渲染之前检查所有的多余text + + try { + Prism.highlightAll() + } catch (err) { + console.log('代码渲染', err) + } } export default PrismMac