From 46f8cfdf3c52554e6099cbc14275412699dd2eeb Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 10 Apr 2024 11:53:11 +0800 Subject: [PATCH] remove package nprogress --- components/AOSAnimation.js | 2 +- components/LoadingProgress.js | 26 ++++++++--- package.json | 1 - pages/_app.js | 17 ++++--- styles/nprogress.css | 84 ----------------------------------- yarn.lock | 5 --- 6 files changed, 32 insertions(+), 103 deletions(-) delete mode 100644 styles/nprogress.css diff --git a/components/AOSAnimation.js b/components/AOSAnimation.js index c5dd4d92..48e5829c 100644 --- a/components/AOSAnimation.js +++ b/components/AOSAnimation.js @@ -1,5 +1,5 @@ +import { isBrowser } from '@/lib/utils' import AOS from 'aos' -import { isBrowser } from 'react-notion-x' /** * 加载滚动动画 diff --git a/components/LoadingProgress.js b/components/LoadingProgress.js index d7f7b5f7..61ea172e 100644 --- a/components/LoadingProgress.js +++ b/components/LoadingProgress.js @@ -1,20 +1,36 @@ +import { loadExternalResource } from '@/lib/utils' import { useRouter } from 'next/router' -import NProgress from 'nprogress' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' /** * 出现页面加载进度条 */ export default function LoadingProgress() { const router = useRouter() + const [NProgress, setNProgress] = useState(null) // 加载进度条 useEffect(() => { - const handleStart = (url) => { - NProgress.start() + loadExternalResource( + 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js', + 'js' + ).then(() => { + if (window.NProgress) { + setNProgress(window.NProgress) + // 调速 + window.NProgress.settings.minimun = 0.1 + loadExternalResource( + 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css', + 'css' + ) + } + }) + + const handleStart = url => { + NProgress?.start() } const handleStop = () => { - NProgress.done() + NProgress?.done() } router.events.on('routeChangeStart', handleStart) diff --git a/package.json b/package.json index b7aa769d..38c2e9cb 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "next": "13.3.1", "notion-client": "6.15.6", "notion-utils": "6.15.6", - "nprogress": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-facebook": "^8.1.4", diff --git a/pages/_app.js b/pages/_app.js index cf71fe18..4b7d9a38 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,24 +1,23 @@ // import '@/styles/animate.css' // @see https://animate.style/ import '@/styles/globals.css' -import '@/styles/nprogress.css' import '@/styles/utility-patterns.css' // core styles shared by all of react-notion-x (required) -import 'react-notion-x/src/styles.css' import '@/styles/notion.css' // 重写部分样式 import 'aos/dist/aos.css' // You can also use for styles +import 'react-notion-x/src/styles.css' +import useAdjustStyle from '@/hooks/useAdjustStyle' import { GlobalContextProvider } from '@/lib/global' import { getGlobalLayoutByTheme } from '@/themes/theme' import { useRouter } from 'next/router' import { useCallback, useMemo } from 'react' import { getQueryParam } from '../lib/utils' -import useAdjustStyle from '@/hooks/useAdjustStyle' // 各种扩展插件 这个要阻塞引入 +import BLOG from '@/blog.config' import ExternalPlugins from '@/components/ExternalPlugins' import GlobalHead from '@/components/GlobalHead' -import BLOG from '@/blog.config' /** * App挂载DOM 入口文件 @@ -27,11 +26,15 @@ import BLOG from '@/blog.config' */ const MyApp = ({ Component, pageProps }) => { // 一些可能出现 bug 的样式，可以统一放入该钩子进行调整 - useAdjustStyle(); + useAdjustStyle() const route = useRouter() const queryParam = useMemo(() => { - return getQueryParam(route.asPath, 'theme') || pageProps?.NOTION_CONFIG?.THEME || BLOG.THEME + return ( + getQueryParam(route.asPath, 'theme') || + pageProps?.NOTION_CONFIG?.THEME || + BLOG.THEME + ) }, [route]) // 整体布局 @@ -47,7 +50,7 @@ const MyApp = ({ Component, pageProps }) => { return ( - + diff --git a/styles/nprogress.css b/styles/nprogress.css deleted file mode 100644 index 2b405742..00000000 --- a/styles/nprogress.css +++ /dev/null @@ -1,84 +0,0 @@ -/* Make clicks pass-through */ -#nprogress { - pointer-events: none; -} - -#nprogress .bar { - background: #29d; - - position: fixed; - z-index: 1031; - top: 0; - left: 0; - - width: 100%; - height: 2px; -} - -/* Fancy blur effect */ -#nprogress .peg { - display: block; - position: absolute; - right: 0px; - width: 100px; - height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; - opacity: 1; - - -webkit-transform: rotate(3deg) translate(0px, -4px); - -ms-transform: rotate(3deg) translate(0px, -4px); - transform: rotate(3deg) translate(0px, -4px); -} - -/* Remove these to get rid of the spinner */ -#nprogress .spinner { - display: block; - position: fixed; - z-index: 1031; - top: 15px; - right: 15px; -} - -#nprogress .spinner-icon { - width: 18px; - height: 18px; - box-sizing: border-box; - - border: solid 2px transparent; - border-top-color: #29d; - border-left-color: #29d; - border-radius: 50%; - - -webkit-animation: nprogress-spinner 400ms linear infinite; - animation: nprogress-spinner 400ms linear infinite; -} - -.nprogress-custom-parent { - overflow: hidden; - position: relative; -} - -.nprogress-custom-parent #nprogress .spinner, -.nprogress-custom-parent #nprogress .bar { - position: absolute; -} - -@-webkit-keyframes nprogress-spinner { - 0% { - -webkit-transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - } -} - -@keyframes nprogress-spinner { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} diff --git a/yarn.lock b/yarn.lock index 87c1b1f9..1a6cc2a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2918,11 +2918,6 @@ notion-utils@^6.15.6, notion-utils@^6.16.0: notion-types "^6.16.0" p-queue "^7.2.0" -nprogress@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1" - integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA== - object-assign@^4.0.1, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"