From 2f76a7314c44a3b629ba82bb79ce2a8583fecfe9 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 30 Nov 2022 22:08:15 +0800 Subject: [PATCH 01/17] =?UTF-8?q?=E7=A7=BB=E9=99=A4Preact=E6=A1=86?= =?UTF-8?q?=E6=9E=B6=E3=80=81=E5=BC=95=E5=85=A5react-hook=E6=A3=80?= =?UTF-8?q?=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 02/17] =?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 From 725f15c5fbe654fad6e5b304b15b04c319254efe Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 30 Nov 2022 22:44:25 +0800 Subject: [PATCH 03/17] =?UTF-8?q?=E5=8A=A0=E9=94=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/[...slug].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/[...slug].js b/pages/[...slug].js index 64f3f113..63eb5e51 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -21,7 +21,7 @@ const Slug = props => { const router = Router.useRouter() // 文章锁🔐 - const [lock, setLock] = React.useState(true) + const [lock, setLock] = React.useState(post?.password && post?.password !== '') React.useEffect(() => { if (post?.password && post?.password !== '') { From de6e9b49594026b9e7beb4182b0d60431327ba7e Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 30 Nov 2022 23:09:12 +0800 Subject: [PATCH 04/17] fix mermaid. --- components/PrismMac.js | 34 ++++++++++++++++------------------ styles/prism-mac-style.css | 5 +++++ 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/components/PrismMac.js b/components/PrismMac.js index 2ec44618..1aab0ddc 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -55,33 +55,18 @@ function renderPrismMac() { }) } - setTimeout(() => { - // Add pre-mac element for Mac Style UI - if (codeToolBars) { - Array.from(codeToolBars).forEach(item => { - const existPreMac = item.getElementsByClassName('pre-mac') - if (existPreMac.length < codeToolBars.length) { - const preMac = document.createElement('div') - preMac.classList.add('pre-mac') - preMac.innerHTML = '' - item?.appendChild(preMac, item) - } - }) - } - }, 10) - // 支持 Mermaid const mermaids = document.querySelectorAll('.notion-code .language-mermaid') if (mermaids) { for (const e of mermaids) { - e.parentElement.parentElement.classList.remove('code-toolbar') + e.parentElement.classList.remove('code-toolbar') const chart = e.firstChild.textContent if (e.firstElementChild) { - e.parentElement.parentElement.remove() + e.parentElement.remove() continue } if (chart) { - e.parentElement.parentElement.innerHTML = `
${chart}
` + e.parentElement.innerHTML = `
${chart}
` } } } @@ -102,6 +87,19 @@ function renderPrismMac() { } catch (err) { console.log('代码渲染', err) } + + // Add pre-mac element for Mac Style UI + if (codeToolBars) { + Array.from(codeToolBars).forEach(item => { + const existPreMac = item.getElementsByClassName('pre-mac') + if (existPreMac.length < codeToolBars.length) { + const preMac = document.createElement('div') + preMac.classList.add('pre-mac') + preMac.innerHTML = '' + item?.appendChild(preMac, item) + } + }) + } } export default PrismMac diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 8efcf150..9f2c5098 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -67,4 +67,9 @@ pre[class*='language-'] { .notion-code-copy{ display: none; +} + +pre[class*="language-mermaid"] { + background: transparent !important; + @apply dark:bg-gray-200 !important; } \ No newline at end of file From 6f8cc2f25061f5428393e8252bac68e8b0e045ad Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 1 Dec 2022 09:46:05 +0800 Subject: [PATCH 05/17] V3.6.1 --- .env.local | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.local b/.env.local index 8b04d2c7..48bf046f 100644 --- a/.env.local +++ b/.env.local @@ -1,2 +1,2 @@ # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables -NEXT_PUBLIC_VERSION=3.6.0 \ No newline at end of file +NEXT_PUBLIC_VERSION=3.6.1 \ No newline at end of file diff --git a/package.json b/package.json index bed8a9a4..d111033e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-next", - "version": "3.6.0", + "version": "3.6.1", "homepage": "https://github.com/tangly1024/NotionNext.git", "license": "MIT", "repository": { From ffc263630903a708063d06b488596e27ef297fe6 Mon Sep 17 00:00:00 2001 From: CodeMaker-Zhao Date: Sat, 3 Dec 2022 17:44:41 +0800 Subject: [PATCH 06/17] fix: solve one character search bug --- package.json | 1 + themes/example/LayoutSearch.js | 9 +++++++-- themes/fukasawa/LayoutSearch.js | 9 +++++++-- themes/hexo/LayoutSearch.js | 11 +++++++---- themes/medium/LayoutSearch.js | 9 +++++++-- themes/next/LayoutSearch.js | 9 +++++++-- 6 files changed, 36 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index a5c72494..1858d25f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "gitalk": "^1.7.2", "localStorage": "^1.0.4", "lodash.throttle": "^4.1.1", + "mark.js": "^8.11.1", "memory-cache": "^0.2.0", "mermaid": "9.2.2", "mongodb": "^4.6.0", diff --git a/themes/example/LayoutSearch.js b/themes/example/LayoutSearch.js index 984e47e7..23b10b7a 100644 --- a/themes/example/LayoutSearch.js +++ b/themes/example/LayoutSearch.js @@ -4,6 +4,7 @@ import { BlogListScroll } from './components/BlogListScroll' import { useRouter } from 'next/router' import { useEffect } from 'react' import SearchInput from './components/SearchInput' +import Mark from 'mark.js' import LayoutBase from './LayoutBase' import { isBrowser } from '@/lib/utils' @@ -15,8 +16,12 @@ export const LayoutSearch = props => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) }, [router.events]) diff --git a/themes/fukasawa/LayoutSearch.js b/themes/fukasawa/LayoutSearch.js index 9329846d..fcfa35b2 100644 --- a/themes/fukasawa/LayoutSearch.js +++ b/themes/fukasawa/LayoutSearch.js @@ -4,6 +4,7 @@ import BlogListPage from './components/BlogListPage' import BlogListScroll from './components/BlogListScroll' import { useRouter } from 'next/router' import { useEffect } from 'react' +import Mark from 'mark.js' import { isBrowser } from '@/lib/utils' export const LayoutSearch = (props) => { @@ -14,8 +15,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${currentSearch}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${currentSearch}`) + const re = new RegExp(currentSearch, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) }) diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js index 6454ef3a..679975cb 100644 --- a/themes/hexo/LayoutSearch.js +++ b/themes/hexo/LayoutSearch.js @@ -6,6 +6,7 @@ import BlogPostListPage from './components/BlogPostListPage' import LayoutBase from './LayoutBase' import SearchInput from './components/SearchInput' import { useGlobal } from '@/lib/global' +import Mark from 'mark.js' import TagItemMini from './components/TagItemMini' import Card from './components/Card' import Link from 'next/link' @@ -25,10 +26,12 @@ export const LayoutSearch = props => { const targets = document.getElementsByClassName('replace') for (const container of targets) { if (container && container.innerHTML) { - const re = new RegExp(`${currentSearch}`, 'gim') - container.innerHTML = container.innerHTML.replace( - re, `${currentSearch}` - ) + const re = new RegExp(currentSearch, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } } } diff --git a/themes/medium/LayoutSearch.js b/themes/medium/LayoutSearch.js index 9a34bcec..76a9ddae 100644 --- a/themes/medium/LayoutSearch.js +++ b/themes/medium/LayoutSearch.js @@ -6,6 +6,7 @@ import CategoryGroup from './components/CategoryGroup' import { useEffect } from 'react' import { isBrowser } from '@/lib/utils' import BLOG from '@/blog.config' +import Mark from 'mark.js' import BlogPostListScroll from './components/BlogPostListScroll' import BlogPostListPage from './components/BlogPostListPage' @@ -16,8 +17,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 100) diff --git a/themes/next/LayoutSearch.js b/themes/next/LayoutSearch.js index d4ec1bb8..78664343 100644 --- a/themes/next/LayoutSearch.js +++ b/themes/next/LayoutSearch.js @@ -4,6 +4,7 @@ import { useGlobal } from '@/lib/global' import { isBrowser } from '@/lib/utils' import BlogPostListScroll from './components/BlogPostListScroll' import BlogPostListPage from './components/BlogPostListPage' +import Mark from 'mark.js' import BLOG from '@/blog.config' export const LayoutSearch = (props) => { @@ -12,8 +13,12 @@ export const LayoutSearch = (props) => { setTimeout(() => { const container = isBrowser() && document.getElementById('container') if (container && container.innerHTML) { - const re = new RegExp(`${keyword}`, 'gim') - container.innerHTML = container.innerHTML.replace(re, `${keyword}`) + const re = new RegExp(keyword, 'gim') + const instance = new Mark(container) + instance.markRegExp(re, { + element: 'span', + className: 'text-red-500 border-b border-dashed' + }) } }, 200) return ( From 942f33d5bca98ec8f6868c0a8777c46718ed188f Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 3 Dec 2022 20:46:28 +0800 Subject: [PATCH 07/17] contributor --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 14c81beb..df20f48e 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,9 @@ yarn run start # 本地启动NextJS服务 ifyz
ifyz
🔧 🐛 + SwwweetOrange
SwwweetOrange
🔧 🐛 + + From ebf55f504f5cbb7dbbc5a0b7a20976643a54560b Mon Sep 17 00:00:00 2001 From: CodeMaker-Zhao Date: Sat, 3 Dec 2022 21:30:27 +0800 Subject: [PATCH 08/17] fix: solve linked img crash --- themes/hexo/components/BlogPostCard.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index 45d3e24a..8105e545 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -7,6 +7,11 @@ import NotionPage from '@/components/NotionPage' const BlogPostCard = ({ post, showSummary }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap + const linkedCoverPrefix = 'https://www.notion.so/image/' + if (post?.page_cover && post?.page_cover?.startsWith(linkedCoverPrefix)) { + const linkedCoverPrefixLength = linkedCoverPrefix.length + post.page_cover = decodeURIComponent(post.page_cover.slice(linkedCoverPrefixLength)) + } return (
Date: Sun, 4 Dec 2022 12:09:11 +0800 Subject: [PATCH 09/17] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B0=81=E9=9D=A2?= =?UTF-8?q?=E5=9B=BEbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getPageProperties.js | 33 ++++++++++++++------------ themes/hexo/components/BlogPostCard.js | 5 ---- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 771915e9..1eced850 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -79,8 +79,8 @@ export default async function getPageProperties(id, block, schema, authToken, ta properties.createdTime = formatDate(new Date(value.created_time).toString(), BLOG.LANG) properties.lastEditedTime = formatDate(new Date(value?.last_edited_time).toString(), BLOG.LANG) properties.fullWidth = value.format?.page_full_width ?? false - properties.pageIcon = getPageIcon(id, block) ?? '' - properties.page_cover = getPostCover(id, block) ?? siteInfo?.pageCover + properties.pageIcon = getImageUrl(block[id].value?.format?.page_icon, block[id].value) ?? '' + properties.page_cover = getImageUrl(block[id].value?.format?.page_cover, block[id].value) ?? siteInfo?.pageCover properties.content = value.content ?? [] properties.tagItems = properties?.tags?.map(tag => { return { name: tag, color: tagOptions?.find(t => t.value === tag)?.color || 'gray' } @@ -89,20 +89,23 @@ export default async function getPageProperties(id, block, schema, authToken, ta return properties // 从Block获取封面图;优先取PageCover，否则取内容图片 - function getPostCover(id, block) { - const pageCover = block[id].value?.format?.page_cover - if (pageCover) { - if (pageCover.startsWith('/')) return 'https://www.notion.so' + pageCover - if (pageCover.startsWith('http')) return defaultMapImageUrl(pageCover, block[id].value) + function getImageUrl(imgObj, blockVal) { + if (!imgObj) { + return null + } + if (imgObj.startsWith('/')) { + return 'https://www.notion.so' + imgObj // notion内部图片转相对路径为绝对路径 } - } -} -function getPageIcon(id, block) { - const pageIcon = block[id].value?.format?.page_icon - if (pageIcon) { - if (pageIcon.startsWith('/')) return 'https://www.notion.so' + pageIcon - if (pageIcon.startsWith('http')) return defaultMapImageUrl(pageIcon, block[id].value) - return pageIcon + if (imgObj.startsWith('http')) { + // 判断如果是notion上传的图片要拼接访问token + const u = new URL(imgObj) + if (u.pathname.startsWith('/secure.notion-static.com') && u.hostname.endsWith('.amazonaws.com')) { + return defaultMapImageUrl(imgObj, blockVal) // notion上传的图片需要转换请求地址 + } + } + + // 其他图片链接 或 emoji + return imgObj } } diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js index 8105e545..45d3e24a 100644 --- a/themes/hexo/components/BlogPostCard.js +++ b/themes/hexo/components/BlogPostCard.js @@ -7,11 +7,6 @@ import NotionPage from '@/components/NotionPage' const BlogPostCard = ({ post, showSummary }) => { const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap - const linkedCoverPrefix = 'https://www.notion.so/image/' - if (post?.page_cover && post?.page_cover?.startsWith(linkedCoverPrefix)) { - const linkedCoverPrefixLength = linkedCoverPrefix.length - post.page_cover = decodeURIComponent(post.page_cover.slice(linkedCoverPrefixLength)) - } return (
Date: Tue, 6 Dec 2022 14:13:16 +0800 Subject: [PATCH 10/17] minimize bundle size through dynamic import pdf and equation --- components/NotionPage.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/components/NotionPage.js b/components/NotionPage.js index 5b9080f1..e195e24d 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -7,8 +7,8 @@ import { isBrowser } from '@/lib/utils' import Image from 'next/image' import Link from 'next/link' import { Code } from 'react-notion-x/build/third-party/code' -import { Pdf } from 'react-notion-x/build/third-party/pdf' -import { Equation } from 'react-notion-x/build/third-party/equation' +// import { Pdf } from 'react-notion-x/build/third-party/pdf' +// import { Equation } from 'react-notion-x/build/third-party/equation' import 'prismjs/components/prism-bash.js' import 'prismjs/components/prism-markup-templating.js' @@ -43,8 +43,19 @@ import 'prismjs/components/prism-wasm.js' import 'prismjs/components/prism-yaml.js' import 'prismjs/components/prism-r.js' -// 化学方程式 -import '@/lib/mhchem' +const Equation = dynamic(() => + import('react-notion-x/build/third-party/equation').then(async (m) => { + // 化学方程式 + await import('@/lib/mhchem') + return m.Equation + }) +) +const Pdf = dynamic( + () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf), + { + ssr: false + } +) // https://github.com/txs // import PrismMac from '@/components/PrismMac' From 69124a9275cee309cb1237e80047afb5db1a935a Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 19:08:26 +0800 Subject: [PATCH 11/17] fix pdf no start from first page --- styles/notion.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/notion.css b/styles/notion.css index b717e39a..1e64a28d 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -1941,4 +1941,8 @@ pre[class*='language-'] { .pre-mac > span:nth-child(3) { background: limegreen; +} + +.notion-asset-wrapper-pdf > div { + display: block !important; } \ No newline at end of file From 54e38a16be32f5ff6148db2e00f520d0c9f20aba Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 19:18:17 +0800 Subject: [PATCH 12/17] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8A=98=E5=8F=A0?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=20=E8=A1=8C=E5=8F=B7bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/prism-mac-style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 9f2c5098..da5d7fdf 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -72,4 +72,8 @@ pre[class*='language-'] { pre[class*="language-mermaid"] { background: transparent !important; @apply dark:bg-gray-200 !important; +} + +.line-numbers-rows > span { + height:auto !important; } \ No newline at end of file From 79760c53230c94c81f9ea22cd423e90d459bc8bc Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 19:24:22 +0800 Subject: [PATCH 13/17] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=BF=BD=E7=95=A5?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/search/[keyword]/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/search/[keyword]/index.js b/pages/search/[keyword]/index.js index 91b55de6..f26b77ea 100644 --- a/pages/search/[keyword]/index.js +++ b/pages/search/[keyword]/index.js @@ -120,7 +120,7 @@ async function filterByMemCache(allPosts, keyword) { const tagContent = post.tags && Array.isArray(post.tags) ? post.tags.join(' ') : '' const categoryContent = post.category && Array.isArray(post.category) ? post.category.join(' ') : '' const articleInfo = post.title + post.summary + tagContent + categoryContent - let hit = articleInfo.indexOf(keyword) > -1 + let hit = articleInfo.toLowerCase().indexOf(keyword) > -1 let indexContent = [post.summary] if (page && page.block) { const contentIds = Object.keys(page.block) From 88cecd652b2c9926e62a2e11417252a228224484 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 21:23:38 +0800 Subject: [PATCH 14/17] line-number --- styles/prism-mac-style.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index da5d7fdf..9f2c5098 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -72,8 +72,4 @@ pre[class*='language-'] { pre[class*="language-mermaid"] { background: transparent !important; @apply dark:bg-gray-200 !important; -} - -.line-numbers-rows > span { - height:auto !important; } \ No newline at end of file From a6d3dfe7c0f757f2c1b8086bce98d0a9fce30f4d Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 21:36:12 +0800 Subject: [PATCH 15/17] =?UTF-8?q?=E9=80=89=E4=B8=AD=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/notion.css | 4 ++++ styles/prism-mac-style.css | 10 ---------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/styles/notion.css b/styles/notion.css index 1e64a28d..b8912a51 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -1945,4 +1945,8 @@ pre[class*='language-'] { .notion-asset-wrapper-pdf > div { display: block !important; +} + +::selection { + @apply bg-blue-500 text-gray-50 !important; } \ No newline at end of file diff --git a/styles/prism-mac-style.css b/styles/prism-mac-style.css index 9f2c5098..73fbe296 100644 --- a/styles/prism-mac-style.css +++ b/styles/prism-mac-style.css @@ -26,16 +26,6 @@ margin-top: -0.1rem; } -pre[class*='language-'].line-numbers { - position: relative; - padding: 3px; /*修改*/ - padding-left: 3.8em; - counter-reset: linenumber; - max-height: 400px; /*修改*/ - background: black; - border: none; -} - .notion-code > code[class*='language-'], pre[class*='language-'] { background: black; From 23fe756f34986bf2688a4ece28a470121b6b953c Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 22:35:34 +0800 Subject: [PATCH 16/17] =?UTF-8?q?=E9=87=8D=E5=A4=8D=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Busuanzi.js | 19 ++++++++----------- components/PrismMac.js | 13 +------------ components/WalineComponent.js | 6 +++++- lib/busuanzi.js | 2 +- 4 files changed, 15 insertions(+), 25 deletions(-) diff --git a/components/Busuanzi.js b/components/Busuanzi.js index 12e592d8..fec41e5f 100644 --- a/components/Busuanzi.js +++ b/components/Busuanzi.js @@ -4,26 +4,23 @@ import { useGlobal } from '@/lib/global' // import { useRouter } from 'next/router' import React from 'react' +let path = '' + export default function Busuanzi () { const { theme } = useGlobal() - const router = useRouter() - - // 切换文章时更新 - React.useEffect(() => { - const busuanziRouteChange = url => { + const Router = useRouter() + Router.events.on('routeChangeComplete', (url, option) => { + if (url !== path) { + path = url busuanzi.fetch() } - router.events.on('routeChangeComplete', busuanziRouteChange) - return () => { - router.events.off('routeChangeComplete', busuanziRouteChange) - } - }, [router.events]) + }) // 更换主题时更新 React.useEffect(() => { if (theme) { busuanzi.fetch() } - }) + }, [theme]) return null } diff --git a/components/PrismMac.js b/components/PrismMac.js index 1aab0ddc..9193cfa6 100644 --- a/components/PrismMac.js +++ b/components/PrismMac.js @@ -9,26 +9,15 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css' // mermaid图 import mermaid from 'mermaid' -import { useGlobal } from '@/lib/global' -import { useRouter } from 'next/router' /** * @author https://github.com/txs/ * @returns */ const PrismMac = () => { - const router = useRouter() - const { isDarkMode } = useGlobal() - const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop - React.useEffect(() => { renderPrismMac() - window.scrollTo(0, scrollTop) - router.events.on('routeChangeComplete', renderPrismMac) - return () => { - router.events.off('routeChangeComplete', renderPrismMac) - } - }, [isDarkMode]) + }) return <> } diff --git a/components/WalineComponent.js b/components/WalineComponent.js index 2bff99f1..a8ccb3ac 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -3,6 +3,8 @@ import { init } from '@waline/client' import BLOG from '@/blog.config' import { useRouter } from 'next/router' +const path = '' + /** * @see https://waline.js.org/guide/get-started.html * @param {*} props @@ -14,7 +16,9 @@ const WalineComponent = (props) => { const router = useRouter() const updateWaline = url => { - walineInstanceRef.current?.update(props) + if (url !== path) { + walineInstanceRef.current?.update(props) + } } React.useEffect(() => { diff --git a/lib/busuanzi.js b/lib/busuanzi.js index df0564c4..9255485a 100644 --- a/lib/busuanzi.js +++ b/lib/busuanzi.js @@ -55,7 +55,7 @@ bszCaller = { const fetch = () => { bszTag && bszTag.hides() bszCaller.fetch('//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback', function (t) { - // console.log('不蒜子请求结果',t) + // console.log('不蒜子',t) bszTag.texts(t), bszTag.shows() }) } From 742e783c916d8a6d6da74389a9c9c414fae5e222 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 6 Dec 2022 22:41:59 +0800 Subject: [PATCH 17/17] =?UTF-8?q?=E5=87=8F=E5=B0=91=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E8=AF=B7=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WalineComponent.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/components/WalineComponent.js b/components/WalineComponent.js index a8ccb3ac..a47999c7 100644 --- a/components/WalineComponent.js +++ b/components/WalineComponent.js @@ -4,31 +4,33 @@ import BLOG from '@/blog.config' import { useRouter } from 'next/router' const path = '' - +let waline = null /** * @see https://waline.js.org/guide/get-started.html * @param {*} props * @returns */ const WalineComponent = (props) => { - const walineInstanceRef = React.useRef(null) const containerRef = React.createRef() const router = useRouter() const updateWaline = url => { if (url !== path) { - walineInstanceRef.current?.update(props) + waline.update(props) } } React.useEffect(() => { - walineInstanceRef.current = init({ - ...props, - el: containerRef.current, - serverURL: BLOG.COMMENT_WALINE_SERVER_URL - }) - router.events.on('routeChangeComplete', updateWaline) + if (!waline) { + waline = init({ + ...props, + el: containerRef.current, + serverURL: BLOG.COMMENT_WALINE_SERVER_URL + }) + } + // 跳转评论 + router.events.on('routeChangeComplete', updateWaline) const anchor = window.location.hash if (anchor) { // 选择需要观察变动的节点 @@ -58,7 +60,8 @@ const WalineComponent = (props) => { } return () => { - walineInstanceRef.current?.destroy() + waline.destroy() + waline = null router.events.off('routeChangeComplete', updateWaline) } }, [])