From 3fcbb8a420a88cd8acac6fdfe2f89281854fe73b Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 3 Nov 2021 15:48:37 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E5=8A=A0=E5=85=A5=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MenuButtonGroup.js | 16 +++++-----
 components/SideBar.js         | 56 +++++++++++++++++++++++++++--------
 components/TagList.js         |  2 +-
 layouts/BaseLayout.js         |  4 +--
 pages/article/[slug].js       |  6 ++--
 pages/index.js                |  2 +-
 6 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 5a17e9b5..d74ad82f 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
   const locale = useLocale()
+  const router = useRouter()
   const links = [
     { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true },
-    { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
-    { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
-    { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true },
-    { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true },
-    { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }
+    { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true }
+    // { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
+    // { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
+    // { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
+    // { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true },
+    // { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }
     // { id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true },
     // { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
     // { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
@@ -22,7 +24,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         link =>
           link.show && (
             <Link key={link.id + link.icon} title={link.to} href={link.to} >
-              <a className='py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle' >
+              <a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-gray-900' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'} >
                 <div className='my-auto w-5 text-2xl justify-center flex'>
                   <i className={'fa ' + link.icon} />
                 </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index b82ed45e..562525a4 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -2,28 +2,60 @@ import React from 'react'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import InfoCard from '@/components/InfoCard'
 import TagList from '@/components/TagList'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+const SideBar = ({ tags, currentTag, post, posts }) => {
+  // 按时间排序
+  if (posts) {
+    posts = posts.sort((a, b) => {
+      const dateA = new Date(a?.date?.start_date || a.createdTime)
+      const dateB = new Date(b?.date?.start_date || b.createdTime)
+      return dateB - dateA
+    }).slice(0, 5)
+  }
 
-const SideBar = ({ tags, currentTag, post }) => {
   return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden xl:block'>
     <div
-      className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
+      className='w-72 dark:bg-gray-800 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
       <div id='sidebar' className='hidden md:block sticky top-20 duration-500'>
-        <div >
+        <>
           <InfoCard />
           <hr className='dark:border-gray-700' />
           <MenuButtonGroup allowCollapse={true} />
-        </div>
+        </>
 
-        {tags && (
-          <div>
-            {/* 标签云  */}
+        {/* 最新文章 */}
+        {posts && (
+          <div className='mt-2'>
             <hr className='dark:border-gray-700' />
             <section
-              className='py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
-              <div className='my-auto w-5 text-xl justify-center flex'>
-                <i className='fa fa-tags' />
-              </div>
-              <div className='ml-4 w-32'>标签</div>
+              className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
+              <div className='w-32'>最新文章</div>
+            </section>
+            <div>
+                 {posts.map(post => {
+                   return (
+                      <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
+                       <div className='text-sm py-1.5 px-5 cursor-pointer hover:underline hover:bg-gray-100 flex'>
+                       <div className='w-12 overflow-hidden'>
+                         <img className='w-12 w-12 object-cover cursor-pointer transform hover:scale-110 duration-500' src={post.page_cover} alt={post.title} />
+                       </div>
+                       <div className='w-60 ml-2 overflow-hidden whitespace-nowrap'>{post.title}</div>
+                       </div>
+                      </Link>
+                   )
+                 })}
+            </div>
+          </div>
+        )}
+
+        {/* 标签云  */}
+        {tags && (
+          <div className='mt-2'>
+            <section
+              className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 dark:hover:bg-black duration-100 flex flex-nowrap align-middle'>
+              <div className='w-32'>标签</div>
             </section>
             <div className='px-5'>
               <TagList tags={tags} currentTag={currentTag} />
diff --git a/components/TagList.js b/components/TagList.js
index 2f8ff7c6..558a80d7 100644
--- a/components/TagList.js
+++ b/components/TagList.js
@@ -10,7 +10,7 @@ import TagItemMini from '@/components/TagItemMini'
 const TagList = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52 pt-2'>
+    <div id='tags-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-52'>
         {Object.keys(tags).map(tag => {
           const selected = tag === currentTag
           return (
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index d2251e32..b71c35aa 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -9,7 +9,7 @@ import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTop from '@/components/JumpToTop'
 
-const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMeta }) => {
+const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, posts, ...customMeta }) => {
   let windowTop = 0
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -40,7 +40,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
       <TopNav tags={tags} post={post} />
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
-        <SideBar tags={tags} post={post} />
+        <SideBar tags={tags} post={post} posts={posts} />
         <div className='flex flex-grow' ref={targetRef}>
             {children}
         </div>
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index 4dcaf9dc..c0f471df 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -19,7 +19,7 @@ import Custom404 from '@/pages/404'
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
-const BlogPost = ({ post, blockMap, tags, prev, next }) => {
+const BlogPost = ({ post, blockMap, tags, prev, next, posts }) => {
   if (!post) {
     return <Custom404/>
   }
@@ -31,7 +31,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
   const targetRef = useRef(null)
   const url = BLOG.link + useRouter().asPath
 
-  return <BaseLayout meta={meta} tags={tags} post={post}>
+  return <BaseLayout meta={meta} tags={tags} post={post} posts={posts}>
     {/* 阅读进度条 */}
     <Progress targetRef={targetRef} />
 
@@ -192,7 +192,7 @@ export async function getStaticProps ({ params: { slug } }) {
   const next = posts.slice(index + 1, index + 2)[0] ?? posts[0]
 
   return {
-    props: { post, blockMap, tags, prev, next },
+    props: { post, blockMap, tags, prev, next, posts },
     revalidate: 1
   }
 }
diff --git a/pages/index.js b/pages/index.js
index 153b379c..b277216b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -27,7 +27,7 @@ export async function getStaticProps () {
 
 const Index = ({ posts, tags, meta }) => {
   return (
-    <BaseLayout meta={meta} tags={tags}>
+    <BaseLayout meta={meta} tags={tags} posts={posts}>
       <div className='flex-grow'>
         <TagsBar tags={tags} />
         <BlogPostListScroll posts={posts} tags={tags} />