From 3796b0f64ae959a77496f21d9e35249a625c400e Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 14 Dec 2021 17:48:00 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                   |  2 +-
 components/BlogPostListScroll.js |  2 +-
 components/DarkModeButton.js     |  2 +-
 components/JumpToTopButton.js    | 10 ++++++----
 components/Progress.js           |  7 +++----
 components/StickyBar.js          |  2 +-
 components/TocDrawer.js          |  2 +-
 components/TocDrawerButton.js    | 26 +++++++++++++++++++++-----
 components/TopNav.js             |  4 ++--
 layouts/BaseLayout.js            | 21 +++------------------
 package.json                     | 13 ++++++-------
 pages/_app.js                    |  4 ++--
 pages/article/[slug].js          |  6 +++---
 styles/globals.css               | 20 +++++++++++++++++++-
 styles/notion.css                |  2 +-
 15 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index dd007a5b..45f9a626 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -9,7 +9,7 @@ const BLOG = {
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
   appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
+  font: 'font-sans tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index 7b027d42..e5f7920b 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
         <div onClick={() => {
           handleGetMore()
         }}
-             className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
+             className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
         > {hasMore ? '继续加载' : '加载完了😰'} </div>
       </div>
     </div>
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index c5297176..1bb7d086 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -11,7 +11,7 @@ const DarkModeButton = () => {
     saveTheme(newTheme)
     changeTheme(newTheme)
   }
-  return <div className='z-10 duration-200 text-xl cursor-pointer'>
+  return <div className='z-10 duration-200 text-lg cursor-pointer'>
     <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
        onClick={handleChangeDarkMode} />
   </div>
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 96f6c548..5bec69fc 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+let windowTop = 0
 
 /**
  * 跳转到网页顶部
@@ -22,7 +23,8 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
     if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+    const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
+    windowTop = scrollY
 
     if (shouldShow !== show) {
       switchShow(shouldShow)
@@ -34,11 +36,11 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 duration-500 z-20'>
+  return (<div id='jump-to-top' className='right-5 fixed flex bottom-36 duration-500 z-20'>
       <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-        className={(show ? 'animate__fadeInRight' : 'animate__fadeOutRight') + ' shadow-card bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
+        className={(show ? '' : 'hidden') + ' animate__fadeInRight rounded-full glassmorphism p-2 cursor-pointer animate__animated animate__faster shadow-card'}>
         <div className='text-center'>
-          <div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
+          <div className='w-10 dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
             <FontAwesomeIcon icon={faArrowUp} />
           </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
diff --git a/components/Progress.js b/components/Progress.js
index 0914ef5c..1ce7083a 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import throttle from 'lodash.throttle'
+import React, { useEffect, useState } from 'react'
 
 /**
  * 顶部页面阅读进度条
@@ -24,8 +23,8 @@ const Progress = ({ targetRef }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-1.5 fixed left-0 top-0 w-full shadow-2xl z-40'>
-        <div className='h-1 bg-blue-500 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
+  return (<div className='h-1  fixed left-0 top-0 w-full shadow-2xl z-40 bg-blue-200'>
+        <div className='h-1 bg-blue-600 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
       </div>)
 }
 
diff --git a/components/StickyBar.js b/components/StickyBar.js
index dce840ff..dfc23181 100644
--- a/components/StickyBar.js
+++ b/components/StickyBar.js
@@ -8,7 +8,7 @@
 const StickyBar = ({ children }) => {
   if (!children) return <></>
   return (
-    <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-xl'>
+    <div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-inner'>
       <div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
       <div className='z-30 sticky left-0 flex'>
         <div className='pr-2 bg-white dark:bg-gray-800'/>
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 9f161edb..4de3e24e 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -10,7 +10,7 @@ import { useGlobal } from '@/lib/global'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-// 暴露给父组件 通过cRef.current.handleMenuClick 调用
+  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
   useImperativeHandle(cRef, () => {
     return {
       handleSwitchVisible: () => switchVisible()
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index 98bcfa29..be795905 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
 
+let windowTop = 0
 /**
  * 点击召唤目录抽屉
  * 当屏幕下滑500像素后会出现该控件
@@ -12,13 +13,28 @@ import { faListOl } from '@fortawesome/free-solid-svg-icons'
  */
 const TocDrawerButton = (props) => {
   const { locale } = useGlobal()
+  const [show, switchShow] = useState(false)
+  const scrollListener = () => {
+    const scrollY = window.pageYOffset
+    const shouldShow = scrollY > 100 && scrollY < windowTop
+    console.log('目录', shouldShow, scrollY, windowTop)
+    windowTop = scrollY
+
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  })
 
   return (
-    <div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
-      <div className='transform hover:scale-105 duration-200 '>
-        <div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
+    <div id='toc-drawer-button' className='right-5 fixed bottom-56 duration-500 z-40' onClick={props.onClick}>
+      <div className='transform hover:scale-105 duration-200'>
+        <div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
           <div className='text-center dark:text-gray-100'>
-            <div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
+            <div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
           </div>
         </div>
       </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index 37e352e2..943b060d 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -14,7 +14,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-700 opacity-90'>
+    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
       <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-xl '>
         {/* 左侧LOGO */}
         <div className='flex ml-12'>
@@ -31,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
         </div>
 
         {/* 右侧功能 */}
-        <div className='flex flex-nowrap space-x-1 ml-2 dark:text-gray-200'>
+        <div className='flex flex-nowrap space-x-1 ml-2 pt-1 dark:text-gray-200'>
           <DarkModeButton />
         </div>
       </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 4555f435..c2d1d733 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useRef } from 'react'
 import CommonHead from '@/components/CommonHead'
 import throttle from 'lodash.throttle'
-import BLOG from '@/blog.config'
 import TopNav from '@/components/TopNav'
 import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
@@ -74,13 +73,13 @@ const BaseLayout = ({
 
       {/* Middle Wrapper */}
       <div className='flex dark:bg-black'>
-        <div className='hidden lg:block z-10'>
+        <div className='hidden shadow lg:block z-10'>
           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
         </div>
         <div className='flex flex-grow min-h-screen' ref={targetRef}>
           {onLoading
             ? <LoadingCover/>
-            : <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner'>
+            : <div className='flex-grow bg-gray-100 dark:bg-black shadow-inner'>
               {children}
             </div>
           }
@@ -90,7 +89,7 @@ const BaseLayout = ({
       <Footer />
 
       <JumpToTopButton targetRef={targetRef} showPercent={true} />
-      <div className='hidden lg:block fixed right-1 bottom-52 py-1 px-1.5
+      <div className='hidden lg:block fixed right-5 bottom-52 py-2 px-2.5 rounded-full
          bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
         <DarkModeButton />
       </div>
@@ -112,11 +111,6 @@ const handleScrollDown = () => {
 
     const tocDrawerButton = document.querySelector('#toc-drawer-button')
     tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
-
-    // const sidebar = document.querySelector('#sidebar')
-    // sidebar && sidebar.classList.replace('top-20', 'top-2')
-    // const rightToc = document.querySelector('#right-toc')
-    // rightToc && rightToc.classList.replace('top-16', 'top-0')
   }
 }
 
@@ -131,15 +125,6 @@ const handleScrollUp = () => {
 
     const stickyBar = document.querySelector('#sticky-bar')
     stickyBar && stickyBar.classList.replace('top-0', 'top-14')
-
-    // const tocDrawerButton = document.querySelector('#toc-drawer-button')
-    // tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')
-
-    // const sidebar = document.querySelector('#sidebar')
-    // sidebar && sidebar.classList.replace('top-2', 'top-20')
-
-    // const rightToc = document.querySelector('#right-toc')
-    // rightToc && rightToc.classList.replace('top-0', 'top-16')
   }
 }
 
diff --git a/package.json b/package.json
index 57a027b1..a56f0336 100644
--- a/package.json
+++ b/package.json
@@ -33,17 +33,16 @@
     "localStorage": "^1.0.4",
     "lodash.throttle": "^4.1.1",
     "memory-cache": "^0.2.0",
-    "next": "10.2.0",
-    "notion-client": "4.10.0",
-    "notion-utils": "4.10.0",
-    "preact": "^10.5.13",
-    "qrcode.react": "^1.0.1",
+    "next": "^12.0.5",
+    "notion-client": "^4.10.0",
+    "notion-utils": "^4.10.0",
+    "react-notion-x": "^4.11.0",
+    "preact": "^10.5.15",
     "react": "17.0.2",
     "react-cookies": "^0.1.1",
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
-    "react-notion-x": "4.6.5",
-    "styled-components": "^5.3.3",
+    "qrcode.react": "^1.0.1",
     "use-ackee": "^3.0.0"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index f07873aa..dec496ff 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,8 +1,8 @@
-import '@/styles/notion.css'
 import 'rc-dropdown/assets/index.css'
 import 'katex/dist/katex.min.css'
-import '@/styles/globals.css'
 import 'animate.css'
+import '@/styles/notion.css'
+import '@/styles/globals.css'
 import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index c9fcbc29..f0d982e1 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -56,14 +56,14 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
 
       <div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full'>
 
-        <article itemScope itemType="https://schema.org/Movie" className='duration-300 hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
+        <article itemScope itemType="https://schema.org/Movie" className='duration-300 hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-52 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           {post.type && !post.type.includes('Page') && (<>
             <header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden'>
               <Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
             </header>
           </>)}
           {/* 文章Title */}
-          <h2 className='font-bold text-3xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
+          <h2 className='font-bold text-2xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
           <hr className='mt-4' />
           <section className='flex-nowrap flex  mt-1 dark:text-white font-light'>
             <Link href={`/category/${post.category}`} passHref>
@@ -85,7 +85,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
-          <section className='px-1 py-2 my-1 text-sm font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
+          <section className='px-1 py-2 my-1 text-sm font-light bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
             {post.summary}
           </section>
 
diff --git a/styles/globals.css b/styles/globals.css
index 36955c16..55234db6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -98,7 +98,7 @@ nav {
 }
 
 .shadow-card{
-  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
 }
 
 .gt-meta{
@@ -148,3 +148,21 @@ nav {
   background: -moz-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Firefox 3.6 - 15 */
   background: linear-gradient(to left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* 标准的语法（必须放在最后） */
 }
+
+.glassmorphism{
+  background: rgba(255, 255, 255, .7);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.dark .glassmorphism{
+  background: rgba(0, 0, 0, .7);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.glassmorphism{
+  background: rgba(255, 255, 255, .7);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
diff --git a/styles/notion.css b/styles/notion.css
index a63d222d..5af283b3 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1580,7 +1580,7 @@ svg.notion-page-icon {
 /* NOTION CSS OVERRIDE */
 
 .notion {
-  @apply text-gray-900 dark:text-gray-300;
+  @apply text-gray-600 dark:text-gray-300;
   overflow-wrap: break-word;
 }
 .notion,