From 5b69aaa3a52d8245b7ae845cdb20e3153b673e85 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 12 Jan 2022 12:37:12 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feature:=20=E6=82=AC=E6=B5=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=B0=83=E6=95=B4=EF=BC=9B=20=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FloatDarkModeButton.js |  2 +-
 components/JumpToBottomButton.js  |  4 ++--
 components/JumpToTopButton.js     |  2 +-
 components/Progress.js            | 22 +++++++++++++++-------
 components/SideAreaLeft.js        |  2 +-
 components/Toc.js                 |  4 ++--
 components/TocDrawer.js           |  4 ++--
 components/TocDrawerButton.js     |  2 +-
 layouts/BaseLayout.js             | 15 ++++++++-------
 9 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index bf01f26b..6a286fcd 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -24,7 +24,7 @@ export default function FloatDarkModeButton () {
   return (
     <div
       onClick={handleChangeDarkMode}
-      className={ ' text-black dark:border-gray-500 flex justify-center items-center w-8 h-8 dark:text-gray-200'
+      className={ ' text-black dark:border-gray-500 flex justify-center items-center dark:text-gray-200 py-2 px-3'
       }
     >
       <FontAwesomeIcon
diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
index 2d7d3417..4ab38bc2 100644
--- a/components/JumpToBottomButton.js
+++ b/components/JumpToBottomButton.js
@@ -45,11 +45,11 @@ const JumpToBottomButton = ({ showPercent = false }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={scrollToBottom} >
+  return (<div className='flex space-x-1 transform hover:scale-105 duration-200 py-2 px-3' onClick={scrollToBottom} >
     <div className='dark:text-gray-200' >
       <FontAwesomeIcon icon={faArrowDown} />
     </div>
-    {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+    {showPercent && (<div className='dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
   </div>)
 }
 
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index f72ee0fa..9fb58f9e 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -17,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+  return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div className='dark:text-gray-200' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
diff --git a/components/Progress.js b/components/Progress.js
index a46ae098..4c4adb9f 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -9,11 +9,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const currentRef = targetRef?.current || targetRef
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    if (currentRef) {
-      const clientHeight = currentRef ? (currentRef.clientHeight) : 0
+    const target = currentRef || document.getElementById('container')
+    if (target) {
+      const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset
       const fullHeight = clientHeight - window.outerHeight
-      let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
       if (per > 100) per = 100
       if (per < 0) per = 0
       changePercent(per)
@@ -25,11 +26,18 @@ const Progress = ({ targetRef, showPercent = true }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-4 w-full shadow-2xl bg-gray-400 font-sans'>
-      <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
-        {showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
+  return (
+    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+      <div
+        className="h-4 bg-gray-600 duration-200"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
       </div>
-  </div>)
+    </div>
+  )
 }
 
 export default Progress
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 77d6c66f..51c1bb81 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -44,7 +44,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
       <Tabs>
           {showToc && (
             <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
-              <Toc toc={post.toc} targetRef={targetRef} />
+              <Toc toc={post.toc}/>
             </div>
           )}
 
diff --git a/components/Toc.js b/components/Toc.js
index 4bd1aa21..676dbbd2 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -10,7 +10,7 @@ import Progress from './Progress'
  * @returns {JSX.Element}
  * @constructor
  */
-const Toc = ({ toc, targetRef }) => {
+const Toc = ({ toc }) => {
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
@@ -54,7 +54,7 @@ const Toc = ({ toc, targetRef }) => {
 
   return <>
     <div className='w-full'>
-      <Progress targetRef={targetRef}/>
+      <Progress/>
     </div>
     <nav className='font-sans overflow-y-auto scroll-hidden'>
       {toc.map((tocItem) => {
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 5eadbc5e..5d272728 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -9,7 +9,7 @@ import { useGlobal } from '@/lib/global'
  * @returns {JSX.Element}
  * @constructor
  */
-const TocDrawer = ({ post, cRef, targetRef }) => {
+const TocDrawer = ({ post, cRef }) => {
   // 暴露给父组件 通过cRef.current.handleMenuClick 调用
   useImperativeHandle(cRef, () => {
     return {
@@ -33,7 +33,7 @@ const TocDrawer = ({ post, cRef, targetRef }) => {
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
            <div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
-             <Toc toc={post.toc} targetRef={targetRef}/>
+             <Toc toc={post.toc}/>
            </div>
           </>
           }
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index e828290e..06dc454b 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -16,7 +16,7 @@ const TocDrawerButton = (props) => {
     return <></>
   }
   const { locale } = useGlobal()
-  return (<div onClick={props.onClick} className='px-3 py-2 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center' title={locale.POST.TOP} >
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
     <FontAwesomeIcon icon={faListOl}/>
   </div>)
 }
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 7418b0c4..a516fced 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -96,15 +96,16 @@ const BaseLayout = ({
           <SideAreaRight targetRef={targetRef} post={post} slot={rightAreaSlot} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
       </main>
 
-      <div className='right-4 lg:right-2 bottom-2 fixed justify-end z-20  rounded font-sans'>
-      <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
-        <JumpToTopButton percent={percent}/>
-        <JumpToBottomButton />
-        <FloatDarkModeButton/>
-        {floatSlot}
+      {/* 右下角悬浮 */}
+      <div className='right-8 bottom-10 lg:right-2 lg:bottom-2 fixed justify-end z-20 font-sans'>
+        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
+          <JumpToTopButton percent={percent}/>
+          <JumpToBottomButton />
+          <FloatDarkModeButton/>
+          {floatSlot}
+        </div>
       </div>
 
-      </div>
       <Footer title={meta.title}/>
       </>
   )

From 90d3d65ee0c2d3cf816ba7c3f39be0b3382e9131 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 12 Jan 2022 14:20:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?archive=E5=8F=AA=E5=B1=95=E7=A4=BApost?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/archive/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/archive/index.js b/pages/archive/index.js
index 2523c6a0..429d06d4 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -9,7 +9,7 @@ import React, { useEffect } from 'react'
 export async function getStaticProps () {
   const from = 'index'
   const { allPosts, categories, tags, postCount } =
-    await getGlobalNotionData({ from, includePage: true })
+    await getGlobalNotionData({ from })
 
   return {
     props: {

From 111b71a13f82c35579b7c30bfd927a66ee8fb116 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 12 Jan 2022 17:45:28 +0800
Subject: [PATCH 3/3] =?UTF-8?q?bugfix:=20=E6=B5=8B=E8=AF=95gittalk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js              | 6 +++---
 components/ArticleDetail.js | 2 +-
 components/Comment.js       | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 2103e7c4..d35bb178 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -56,13 +56,13 @@ const BLOG = {
     telegram: 'https://t.me/tangly_1024'
   },
   comment: { // 评论插件，支持 gitalk, utterances, cusdis
-    provider: '', // 不需要则留空白
+    provider: 'gitalk', // 不需要则留空白
     gitalkConfig: {
       repo: 'NotionNext', // The repository of store comments
       owner: 'tangly1024',
       admin: ['tangly1024'],
-      clientID: 'be7864a16b693e256f8f',
-      clientSecret: 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
+      clientID: process.env.GITALK_ID || 'be7864a16b693e256f8f',
+      clientSecret: process.env.GITALK_SECRET || 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
       distractionFreeMode: false
     },
     cusdisConfig: {
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 458e9445..e099dc48 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -172,7 +172,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
     </article>
 
     {/* 评论互动 */}
-    <div className="lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
+    <div className="duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
       <Comment frontMatter={post} />
     </div>
   </div>)
diff --git a/components/Comment.js b/components/Comment.js
index ea747509..5e49f4d3 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
+import 'gitalk/dist/gitalk.css'
 
 const GitalkComponent = dynamic(
   () => {