From 7480cef80536ea00d34a4692431a33de53333fa8 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 18 Oct 2021 14:50:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E3=80=81=E5=9B=9E?=
 =?UTF-8?q?=E9=A1=B6=E9=94=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/JumpToTop.js | 23 +++++++----------------
 components/Progress.js  |  4 ++--
 layouts/BaseLayout.js   |  2 +-
 pages/article/[slug].js | 34 +++++++++++++++++-----------------
 4 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/components/JumpToTop.js b/components/JumpToTop.js
index 98c5142b..d14ff486 100644
--- a/components/JumpToTop.js
+++ b/components/JumpToTop.js
@@ -34,23 +34,14 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
 
   return (
     <div className='right-0 space-x-2 fixed flex bottom-24 px-5 py-1 duration-500'>
-      <div className='flex-wrap'>
+      <div className='flex-wrap transform hover:scale-125 duration-200 '>
         <div
-          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + '  rounded-full animate__animated animate__faster shadow-xl'}>
-          <div
-            style={{ backgroundColor: 'rgb(56, 144, 255)' }}
-            className='rounded-full dark:bg-gray-600 bg-white cursor-pointer '
-            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-            {showPercent && (
-              <div style={{ backgroundColor: 'rgb(56, 144, 255)' }}
-                   className='text-gray-100 absolute rounded-full dark:text-gray-200 dark:bg-gray-600 z-20 hover:opacity-0 w-11 py-3 text-center'>
-                <span>{percent}%</span>
-              </div>
-            )}
-            <div className='text-2xl'>
-              <a className='text-gray-100 fa fa-arrow-up p-3 transform hover:scale-125 duration-200 '
-                 title={locale.POST.TOP} />
-            </div>
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+          style={{ backgroundColor: 'rgb(56, 144, 255)' }}
+          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' p-1 cursor-pointer rounded-full animate__animated animate__faster shadow-xl'}>
+          <div className='text-center'>
+            <div className='w-10 text-xl text-gray-100' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
+            {showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200 text-center'>{percent}%</div>)}
           </div>
         </div>
       </div>
diff --git a/components/Progress.js b/components/Progress.js
index 6a9c3055..30ac21d4 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -24,8 +24,8 @@ const Progress = ({ targetRef }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-1.5 fixed top-0 w-full shadow-2xl z-40'>
-        <div className='h-1 bg-blue-500 fixed top-0 w-1 duration-200' style={{ width: `${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' style={{ width: `${percent}%` }}/>
       </div>)
 }
 
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index d5de2544..a8bf9e63 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -52,7 +52,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
         <SideBar tags={tags} post={post} />
         <div className='flex flex-grow' ref={targetRef}>
           {children}
-          <JumpToTop targetRef={targetRef} showPercent={false} />
+          <JumpToTop targetRef={targetRef} showPercent={true} />
         </div>
       </main>
 
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 191c9429..86a76189 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -19,7 +19,7 @@ import { useRef } from 'react'
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
-const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
+const BlogPost = ({ post, blockMap, tags, prev, next }) => {
   if (!post) {
     return <BaseLayout meta={{ title: `${BLOG.title} | 加载中` }}>
       <div className='w-full h-full flex justify-center mx-auto dark:bg-gray-800'>
@@ -40,7 +40,8 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
   return <BaseLayout meta={meta} tags={tags} post={post}>
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
-    <div id='article-wrapper' className='flex-grow bg-gray-100 dark:bg-gray-800'>
+
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-100 dark:bg-gray-800'>
       {/* 中央区域 wrapper */}
       <header
         className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
@@ -52,7 +53,7 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
       </header>
 
       <article
-        className='w-screen overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
+        className='w-screen md:w-full overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
         {/* 文章标题 */}
         <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
           {post.title}
@@ -163,19 +164,19 @@ const BlogPost = ({ post, blockMap, emailHash, tags, prev, next }) => {
 }
 
 export async function getStaticPaths () {
-  if (BLOG.isProd) {
-    let posts = await getAllPosts()
-    posts = posts.filter(post => post.status[0] === 'Published')
-    return {
-      paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
-      fallback: true
-    }
-  } else {
-    return {
-      paths: [],
-      fallback: true
-    }
+  // if (BLOG.isProd) {
+  let posts = await getAllPosts()
+  posts = posts.filter(post => post.status[0] === 'Published')
+  return {
+    paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
+    fallback: true
   }
+  // } else {
+  //   return {
+  //     paths: [],
+  //     fallback: true
+  //   }
+  // }
 }
 
 export async function getStaticProps ({ params: { slug } }) {
@@ -190,7 +191,6 @@ export async function getStaticProps ({ params: { slug } }) {
   }
 
   const blockMap = await getPostBlocks(post.id)
-  const emailHash = createHash('md5').update(BLOG.email).digest('hex')
   post.toc = getPageTableOfContents(post, blockMap)
   posts = posts.filter(post => post.type[0] === 'Post')
   const tags = await getAllTags(posts)
@@ -200,7 +200,7 @@ export async function getStaticProps ({ params: { slug } }) {
   const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
 
   return {
-    props: { post, blockMap, emailHash, tags, prev, next },
+    props: { post, blockMap, tags, prev, next },
     revalidate: 1
   }
 }