From c98538e56faadea2fab9bf8177955efb037f90b1 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 13 Jan 2022 14:27:48 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=B0=81=E8=A3=85Card=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostCard.js     |  7 ++++--
 components/Card.js             |  9 +++++++
 components/CategoryGroup.js    |  2 +-
 components/Collapse.js         |  2 +-
 components/LatestPostsGroup.js | 10 ++++----
 components/MenuButtonGroup.js  |  2 +-
 components/SideAreaLeft.js     | 10 ++++----
 components/SideAreaRight.js    | 45 +++++++++++++++++-----------------
 components/Tabs.js             |  8 +++---
 components/TopNav.js           |  2 +-
 pages/article/[slug].js        |  5 ++++
 pages/index.js                 |  3 ++-
 12 files changed, 62 insertions(+), 43 deletions(-)
 create mode 100644 components/Card.js

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index cbd81044..9ef97a0b 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -6,14 +6,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import Card from './Card'
 import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
   const showPreview = BLOG.home?.showPreview && post.blockMap
   return (
-    <div key={post.id} className='shadow border animate__animated animate__fadeIn flex flex-col-reverse justify-between md:hover:shadow-xl duration-300
-        w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+    <Card className='w-full'>
+       <div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300'>
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
@@ -74,6 +75,8 @@ const BlogPostCard = ({ post, showSummary }) => {
       </Link>
       )}
     </div >
+    </Card>
+
   )
 }
 
diff --git a/components/Card.js b/components/Card.js
new file mode 100644
index 00000000..bd7683b8
--- /dev/null
+++ b/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow mb-5 px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 7b521616..e768757f 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
           <a className={(selected
             ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
             : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
-            '  text-sm w-full items-center duration-300 px-3 mx-2 cursor-pointer py-1 font-light'}>
+            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
             </a>
         </Link>
diff --git a/components/Collapse.js b/components/Collapse.js
index baca44cc..2b68ad73 100644
--- a/components/Collapse.js
+++ b/components/Collapse.js
@@ -28,7 +28,7 @@ const Collapse = props => {
     }
   }, [props.isOpen])
   return (
-    <div ref={collapseRef} className=' overflow-hidden duration-200'>
+    <div ref={collapseRef} className='overflow-hidden duration-200'>
       {props.children}
     </div>
   )
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 76c20c62..135027ad 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -19,16 +19,16 @@ const LatestPostsGroup = ({ posts }) => {
   const currentPath = useRouter().asPath
   const { locale } = useGlobal()
 
-  return <section className='mt-8'>
-      <div className='text-sm pb-4 px-5  flex flex-nowrap justify-between'>
+  return <>
+      <div className='text-sm pb-1 px-2 flex flex-nowrap justify-between'>
         <div className='font-light text-gray-600  dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
       </div>
       {posts.map(post => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <a className={ 'my-1 px-2 flex font-light'}>
-              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
+            <a className={ 'my-1 flex font-light'}>
+              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
                 'hover:text-white dark:hover:text-white cursor-pointer' }>
                 <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
                 <div className='truncate'>{post.title}</div>
@@ -37,6 +37,6 @@ const LatestPostsGroup = ({ posts }) => {
           </Link>
         )
       })}
-    </section>
+    </>
 }
 export default LatestPostsGroup
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 50d4d817..aef72bc5 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -23,7 +23,7 @@ const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'py-2 px-5 mx-2 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+          <a className={'py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
               (selected ? 'bg-gray-200 text-black' : ' ')} >
               <div className='my-auto items-center justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index 51c1bb81..7e406901 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -8,6 +8,7 @@ import Analytics from './Analytics'
 import Tabs from '@/components/Tabs'
 import BLOG from '@/blog.config'
 import Logo from './Logo'
+import Card from './Card'
 
 /**
  * 侧边平铺
@@ -30,17 +31,16 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
       {/* 菜单 */}
       <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <Logo/>
-        <div className='pt-2 font-sans'>
+        <div className='pt-2 px-2 font-sans'>
         <MenuButtonGroup allowCollapse={true} postCount={postCount} />
         </div>
-        {BLOG.menu.showSearch && <div className='px-5 pt-2 font-sans'>
+        {BLOG.menu.showSearch && <div className='px-2 pt-2 font-sans'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>}
       </section>
-
     </section>
 
-    <section className='sticky top-4'>
+    <Card className='sticky top-4'>
       <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'>
@@ -53,7 +53,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
             <Analytics postCount={postCount}/>
           </div>
       </Tabs>
-    </section>
+    </Card>
 
  </aside>
 }
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 87aa39e8..fb76fb09 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -1,9 +1,10 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faAngleRight, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faAngleRight, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Card from './Card'
 import CategoryGroup from './CategoryGroup'
 import TagGroups from './TagGroups'
 
@@ -38,25 +39,25 @@ const SideAreaRight = ({
 
   return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>
 
-      <section className="shadow mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
-        {/* 展示广告  */}
-        <ins
-          className="adsbygoogle"
-          style={{ display: 'block' }}
-          data-adtest="on"
-          data-ad-client="ca-pub-2708419466378217"
-          data-ad-slot="8807314373"
-          data-ad-format="auto"
-          data-full-width-responsive="true"
-        ></ins>
-      </section>
+      <Card>
+              {/* 展示广告  */}
+              <ins
+                className="adsbygoogle"
+                style={{ display: 'block' }}
+                data-adtest="on"
+                data-ad-client="ca-pub-2708419466378217"
+                data-ad-slot="8807314373"
+                data-ad-format="auto"
+                data-full-width-responsive="true"
+              ></ins>
+      </Card>
 
-      <div className="sticky top-8">
+      <div className="sticky top-4">
 
         {/* 分类  */}
         {widget?.showCategoryList && categories && (
-          <section className='shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
-            <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
+          <Card>
+            <div className='text-sm px-2 flex flex-nowrap justify-between font-light'>
               <div className='pb-1 text-gray-600 dark:text-gray-300'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
               <Link href='/category' passHref>
                 <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
@@ -65,16 +66,16 @@ const SideAreaRight = ({
               </Link>
             </div>
             <CategoryGroup currentCategory={currentCategory} categories={categories} />
-          </section>
+          </Card>
         )}
 
         {slot}
 
          {widget?.showTagList && tags && (
-          <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
-            <div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
+          <Card>
+            <div className="text-sm pb-1 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200">
               <div className="text-gray-600 dark:text-gray-200">
-                <FontAwesomeIcon icon={faTags} className="mr-2" />
+                <FontAwesomeIcon icon={faTag} className="mr-2" />
                 {locale.COMMON.TAGS}
               </div>
               <Link href="/tag" passHref>
@@ -84,10 +85,10 @@ const SideAreaRight = ({
                 </a>
               </Link>
             </div>
-            <div className="px-5 pt-2">
+            <div className="px-2 pt-2">
               <TagGroups tags={tags} currentTag={currentTag} />
             </div>
-          </section>
+          </Card>
          )}
 
       </div>
diff --git a/components/Tabs.js b/components/Tabs.js
index f7239506..ea9bb75a 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -18,7 +18,7 @@ const Tabs = ({ children }) => {
   })
 
   if (count === 1) {
-    return <section className='shadow hover:shadow-xl duration-200'>
+    return <section className='duration-200'>
       {children}
     </section>
   }
@@ -29,8 +29,8 @@ const Tabs = ({ children }) => {
   }
 
   return (
-    <section >
-      {<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+    < >
+      {<div className='hidden lg:block mb-5 bg-white dark:bg-gray-800 duration-200'>
         <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
           {children.map((item, index) => {
             return <li key={index} className={currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
@@ -45,7 +45,7 @@ const Tabs = ({ children }) => {
         })}
       </div>}
 
-    </section>)
+    </>)
 }
 
 export default Tabs
diff --git a/components/TopNav.js b/components/TopNav.js
index cd9abb38..ea85759d 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -111,7 +111,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
       </div>
 
       <Collapse isOpen={isOpen}>
-        <div className='bg-white py-1'>
+        <div className='bg-white py-1 px-5'>
           <MenuButtonGroup postCount={postCount}/>
           </div>
       </Collapse>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 42fc4ae7..b0fa34af 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -1,5 +1,7 @@
 import BLOG from '@/blog.config'
 import ArticleDetail from '@/components/ArticleDetail'
+import Card from '@/components/Card'
+import LatestPostsGroup from '@/components/LatestPostsGroup'
 import Live2D from '@/components/Live2D'
 import TocDrawer from '@/components/TocDrawer'
 import TocDrawerButton from '@/components/TocDrawerButton'
@@ -50,6 +52,9 @@ const Slug = ({
       latestPosts={latestPosts}
       categories={categories}
       floatSlot={floatSlot}
+      rightAreaSlot={
+        BLOG.widget?.showLatestPost && <Card><LatestPostsGroup posts={latestPosts} /></Card>
+      }
     >
       <ArticleDetail
         post={post}
diff --git a/pages/index.js b/pages/index.js
index 3b05aff4..c5d8177a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import BlogPostListPage from '@/components/BlogPostListPage'
 import BlogPostListScroll from '@/components/BlogPostListScroll'
+import Card from '@/components/Card'
 import Header from '@/components/Header'
 import LatestPostsGroup from '@/components/LatestPostsGroup'
 import BaseLayout from '@/layouts/BaseLayout'
@@ -56,7 +57,7 @@ const Index = ({ posts, tags, meta, categories, postCount, latestPosts }) => {
       tags={tags}
       sideBarSlot={<LatestPostsGroup posts={latestPosts} />}
       rightAreaSlot={
-        BLOG.widget?.showLatestPost && <LatestPostsGroup posts={latestPosts} />
+        BLOG.widget?.showLatestPost && <Card><LatestPostsGroup posts={latestPosts} /></Card>
       }
       postCount={postCount}
       categories={categories}