From 6562b6a341f1b4af4fa03a0f9b09423748ae6a18 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 1 Nov 2021 14:48:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=EF=BC=8C=E7=A7=BB=E9=99=A4react-canvas-nest,CPU?=
 =?UTF-8?q?=E6=B6=88=E8=80=97=E6=9C=89=E7=82=B9=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPost.js           | 10 ++++------
 components/BlogPostListScroll.js |  2 +-
 components/Logo.js               |  2 +-
 layouts/BaseLayout.js            |  5 +----
 package.json                     |  1 -
 pages/article/[slug].js          | 30 ++++++++++++++++--------------
 6 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/components/BlogPost.js b/components/BlogPost.js
index 9b5f9e69..c94e3376 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -4,8 +4,7 @@ import Link from 'next/link'
 
 const BlogPost = ({ post }) => {
   return (
-    <article key={post.id}
-             className='animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+    <div key={post.id} className='z-10 animate__animated animate__slideInUp animate__faster inline-block border dark:border-gray-600 my-2 w-full md:max-w-md bg-white bg-opacity-80 dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <Link href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
@@ -14,9 +13,8 @@ const BlogPost = ({ post }) => {
         )}
 
         <div className='px-8 py-6'>
-          <Link href={`${BLOG.path}/article/${post.slug}`}
-             className='block my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>
-            {post.title}
+          <Link href={`${BLOG.path}/article/${post.slug}`}>
+            <div className='cursor-pointer my-3 text-2xl leading-tight font-bold text-black dark:text-gray-100 hover:underline'>{post.title}</div>
           </Link>
           <div className='flex flex-nowrap'>
             {post.tags.map(tag => (<TagItemMini key={tag} tag={tag} />))}
@@ -24,7 +22,7 @@ const BlogPost = ({ post }) => {
           </div>
           <p className='mt-2 text-gray-500 dark:text-gray-300 text-sm'>{post.summary}</p>
         </div>
-    </article>
+    </div>
   )
 }
 
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index d6484df0..76a88e9e 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -66,7 +66,7 @@ const BlogPostListScroll = ({ posts = [], tags }) => {
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty />
   } else {
-    return <div id='post-list-wrapper' className='pt-28 md:pt-32 px-2 md:px-20 dark:bg-gray-900' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-28 md:mt-32 mx-2 md:mx-20' ref={targetRef}>
       <div>
         {/* 文章列表 */}
         <div className='grid 2xl:grid-cols-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
diff --git a/components/Logo.js b/components/Logo.js
index 929cdc91..43e8e130 100644
--- a/components/Logo.js
+++ b/components/Logo.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 const Logo = () => {
   return <Link href='/'>
-      <div title={BLOG.title} className='mx-auto border text-center cursor-pointer text-xl  dark:text-gray-300 font-semibold dark:hover:bg-gray-600 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>
+      <div title={BLOG.title} className='mx-auto border dark:border-gray-600 text-center cursor-pointer text-xl  dark:text-gray-300 font-semibold dark:hover:bg-gray-600 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>
         <span className='text-red-600'>Tangly</span>
         <span className='text-blue-400'>1024</span>
       </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index e1e8f1ad..a9de65ff 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -8,7 +8,6 @@ import TopNav from '@/components/TopNav'
 import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTop from '@/components/JumpToTop'
-import ReactCanvasNest from 'react-canvas-nest'
 
 const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMeta }) => {
   let windowTop = 0
@@ -37,11 +36,10 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
   return (
     <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
-       <ReactCanvasNest style = {{ zIndex: 0, position: 'fixed' }} />
 
       <TopNav tags={tags} post={post} />
       {/* Middle Wrapper */}
-      <main className='flex bg-gray-100'>
+      <main className='flex dark:bg-gray-900'>
         <SideBar tags={tags} post={post} />
         <div className='flex flex-grow' ref={targetRef}>
             {children}
@@ -50,7 +48,6 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
       </main>
 
       <Footer />
-
     </div>
   )
 }
diff --git a/package.json b/package.json
index dde5b7e4..0789c1f3 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "preact": "^10.5.13",
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
-    "react-canvas-nest": "^1.1.1",
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
     "react-notion-x": "^4.6.5",
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index f007514b..5d17cb18 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -35,7 +35,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
 
-    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-100 dark:bg-gray-800'>
+    <div id='article-wrapper' ref={targetRef} className='flex-grow bg-white bg-opacity-90'>
       {/* 中央区域 wrapper */}
       <header
         className='hover:shadow-2xl duration-200 mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
@@ -47,7 +47,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
       </header>
 
       <article
-        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'>
+        className='w-screen md:w-full overflow-x-auto md:px-10 px-5 py-10 max-w-5xl mx-auto 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}
@@ -92,17 +92,19 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
           </div>
         </div>
 
-        {/* Notion文章主体 */}
-        {blockMap && (
-          <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
-                          components={{
-                            equation: Equation,
-                            code: Code,
-                            collectionRow: CollectionRow,
-                            collection: Collection
-                          }}
-          />
-        )}
+        <div>
+          {/* Notion文章主体 */}
+          {blockMap && (
+            <NotionRenderer recordMap={blockMap} mapPageUrl={mapPageUrl}
+                            components={{
+                              equation: Equation,
+                              code: Code,
+                              collectionRow: CollectionRow,
+                              collection: Collection
+                            }}
+            />
+          )}
+        </div>
 
         <div className='flex justify-center pt-5'>
           <RewardButton />
@@ -142,7 +144,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
     {/* 右侧目录 */}
     <aside className='dark:bg-gray-800 bg-white z-10'>
       <section
-        className='h-full xl:static xl:block hidden top-0 right-0 fixed h-full w-52 dark:bg-gray-800 duration-500'>
+        className='h-full xl:static xl:block hidden top-0 right-0 fixed h-full w-52  duration-500'>
         <div id='right-toc' className='sticky top-16 duration-500'>
           <div
             className='border-t dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>