From f7dbd26b70495584177ed77234b651282aae31bd Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 2 Dec 2021 10:38:59 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=9B=B4=E5=A4=9A=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=EF=BC=8C=E9=A1=B5=E9=9D=A2=E9=A2=9C=E8=89=B2=E8=89=B2=E9=98=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostCard.js                    |  2 +-
 components/CategoryGroup.js                   |  3 +-
 .../{LatestPosts.js => LatestPostsGroup.js}   | 30 +++++-----
 components/MenuButtonGroup.js                 | 30 +++++-----
 components/SearchInput.js                     |  4 +-
 components/SideBar.js                         | 29 +++++-----
 pages/blogs/index.js                          | 57 +++++++++++++++++++
 pages/category/[category].js                  |  2 +-
 pages/category/index.js                       | 48 ++++++++++++++++
 pages/tag/index.js                            | 10 ++--
 10 files changed, 162 insertions(+), 53 deletions(-)
 rename components/{LatestPosts.js => LatestPostsGroup.js} (52%)
 create mode 100644 pages/blogs/index.js
 create mode 100644 pages/category/index.js

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index ae49f8d0..4be89176 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -26,7 +26,7 @@ const BlogPostCard = ({ post, tags }) => {
           <div className='flex whitespace-nowrap'>
             <Link href={`/category/${post.category}`}>
               <div
-                className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 underline hover:scale-105 transform duration-200'>
+                className='cursor-pointer dark:text-gray-200 text-gray-500 text-sm py-1.5 mr-1 hover:underline hover:scale-105 transform duration-200'>
                 <i
                   className='fa fa-folder-open-o mr-1' />{post.category}</div>
             </Link>
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 0b20eddc..8ce7f074 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -5,8 +5,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
   return <div>
       <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
         {Object.keys(categories).map(category => {
+          const selected = currentCategory === category
           return <Link key={category} href={`/category/${category}`}>
-            <div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>
+            <div className={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : 'dark:text-gray-400 text-gray-500 ') + ' hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>
           </Link>
         })}
       </div>
diff --git a/components/LatestPosts.js b/components/LatestPostsGroup.js
similarity index 52%
rename from components/LatestPosts.js
rename to components/LatestPostsGroup.js
index ac8e94b9..c52b2fdd 100644
--- a/components/LatestPosts.js
+++ b/components/LatestPostsGroup.js
@@ -6,10 +6,11 @@ import { useGlobal } from '@/lib/global'
 
 /**
  * 最新文章列表
- * @param posts
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
  * @constructor
  */
-const LatestPosts = ({ posts }) => {
+const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
   // 深拷贝
   let postsSortByDate = Object.create(posts)
 
@@ -21,28 +22,26 @@ const LatestPosts = ({ posts }) => {
   })
 
   // 只取前五
-  postsSortByDate = postsSortByDate.slice(0, 5)
+  postsSortByDate = postsSortByDate.slice(0, sliceCount)
 
   // 获取当前路径
   const currentPath = useRouter().asPath
-  const { locale } = useGlobal()
 
-  return <>
-    <section
-      className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-      <div className='w-32'>{locale.COMMON.LATEST_POSTS}</div>
-    </section>
-    <div>
+  return <div>
       {postsSortByDate.map(post => {
+        const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`}>
             <div
-              className={(currentPath === `${BLOG.path}/article/${post.slug}` ? 'bg-gray-200 dark:bg-black' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
-              <div className='mr-2 text-gray-500'>
-                {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
+              className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' text-xs leading-5 py-1.5 px-5 flex'}>
+              <div className='mr-2 text-gray-400'>
+                {formatDateFmt(post.lastEditedTime, 'MM/dd')}
               </div>
               <div
-                className='text-sm flex w-50 overflow-x-hidden whitespace-nowrap dark:text-gray-300 cursor-pointer hover:underline'>
+                className={
+                  (selected ? 'dark:text-white text-black ' : 'text-gray-500 ') +
+                  ' text-sm flex w-50 overflow-x-hidden whitespace-nowrap  hover:text-black dark:hover:text-white cursor-pointer hover:underline'
+                }>
                 {post.title}
               </div>
             </div>
@@ -50,6 +49,5 @@ const LatestPosts = ({ posts }) => {
         )
       })}
     </div>
-  </>
 }
-export default LatestPosts
+export default LatestPostsGroup
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index d4b34c5d..07345f7e 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -19,20 +19,22 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
     // { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
   ]
   return <nav id='nav'>
-    <div className='leading-8 text-gray-700 dark:text-gray-400'>
-      {links.map(
-        link =>
-          link.show && (
-            <Link key={link.id + link.icon} title={link.to} href={link.to} >
-              <a className={(router.asPath === link.to ? 'bg-gray-200 dark:bg-black' : '') + ' py-2 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
-                <div className='my-auto w-5 text-2xl justify-center flex'>
-                  <i className={'fa ' + link.icon} />
-                </div>
-                <div className={'ml-4 w-32'}>{link.name}</div>
-              </a>
-            </Link>
-          )
-      )}
+    <div className='leading-8 text-gray-500 dark:text-gray-400'>
+      {links.map(link => {
+        if (link.show) {
+          const selected = router.asPath === link.to
+          return <Link key={link.id + link.icon} title={link.to} href={link.to} >
+            <a className={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '') + ' py-2 px-5 hover:text-black hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle'} >
+              <div className='my-auto w-5 text-2xl justify-center flex'>
+                <i className={'fa ' + link.icon} />
+              </div>
+              <div className={'ml-4 w-32'}>{link.name}</div>
+            </a>
+          </Link>
+        } else {
+          return <></>
+        }
+      })}
     </div>
   </nav>
 }
diff --git a/components/SearchInput.js b/components/SearchInput.js
index c9462b59..22a27e69 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -47,9 +47,9 @@ const SearchInput = ({ currentTag, currentSearch }) => {
     />
     { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-4 cursor-pointer' onClick={ cleanSearch } />)}
 
-    <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
+    <div className='p-3 text-xl bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
-      <i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}  dark:text-gray-100 text-black cursor-pointer`}/>
+      <i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}  hover:scale-125 hover:text-black transform duration-200 dark:text-gray-300 dark:hover:text-white text-gray-600 cursor-pointer`}/>
     </div>
   </div>
 }
diff --git a/components/SideBar.js b/components/SideBar.js
index 78885bcb..6da41cd2 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -2,7 +2,7 @@ import React from 'react'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import InfoCard from '@/components/InfoCard'
 import TagGroups from '@/components/TagGroups'
-import LatestPosts from '@/components/LatestPosts'
+import LatestPostsGroup from '@/components/LatestPostsGroup'
 import CategoryGroup from '@/components/CategoryGroup'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
@@ -44,29 +44,32 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 分类  */}
       {categories && (
         <section className='mt-2'>
-          <section
-            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-            <div className='w-32'>{locale.COMMON.CATEGORY}</div>
-          </section>
+          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
+            <div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.CATEGORY}</div>
+            <div><Link href='/category'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》 </div></Link></div>
+          </div>
           <CategoryGroup currentCategory={currentCategory} categories={categories} />
         </section>
       )}
 
       {/* 最新文章 */}
       {posts && (
-        <section className='mt-2'>
-          <LatestPosts posts={posts} />
+        <section className='mt-3'>
+          <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
+            <div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.LATEST_POSTS}</div>
+            <div><Link href='/blogs'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》 </div></Link></div>
+          </div>
+          <LatestPostsGroup posts={posts} />
         </section>
       )}
 
       {/* 标签云  */}
       {tags && (
-        <section className='mt-2'>
-          <section
-            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap justify-between'>
-            <div>{locale.COMMON.TAGS}</div>
-            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>{locale.COMMON.MORE}</div></Link></div>
-          </section>
+        <section className='mt-3'>
+          <div className='text-sm font-bold py-2 px-5 flex flex-nowrap justify-between'>
+            <div className='text-black font-bold dark:text-gray-200'>{locale.COMMON.TAGS}</div>
+            <div><Link href='/tag'><div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>{locale.COMMON.MORE} 》</div></Link></div>
+          </div>
           <div className='px-5'>
             <TagGroups tags={tags} currentTag={currentTag} />
           </div>
diff --git a/pages/blogs/index.js b/pages/blogs/index.js
new file mode 100644
index 00000000..0fbbc5f5
--- /dev/null
+++ b/pages/blogs/index.js
@@ -0,0 +1,57 @@
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'
+import BaseLayout from '@/layouts/BaseLayout'
+import BlogPostListScroll from '@/components/BlogPostListScroll'
+import { getNotionPageData } from '@/lib/notion/getNotionData'
+import StickyBar from '@/components/StickyBar'
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+
+export async function getStaticProps () {
+  const from = 'index'
+  const notionPageData = await getNotionPageData({ from })
+  const allPosts = await getAllPosts({ notionPageData, from })
+  const categories = await getAllCategories(allPosts)
+  const tagOptions = notionPageData.tagOptions
+  const tags = await getAllTags({ allPosts, tagOptions })
+  return {
+    props: {
+      allPosts,
+      tags,
+      categories
+    },
+    revalidate: 1
+  }
+}
+
+const Index = ({ allPosts, tags, categories }) => {
+  const { locale } = useGlobal()
+  // 深拷贝
+  const postsSortByDate = Object.create(allPosts)
+
+  // 时间排序
+  postsSortByDate.sort((a, b) => {
+    const dateA = new Date(a?.lastEditedTime || a.createdTime)
+    const dateB = new Date(b?.lastEditedTime || b.createdTime)
+    return dateB - dateA
+  })
+
+  const meta = {
+    title: `${BLOG.title} | ${locale.COMMON.LATEST_POSTS} `,
+    description: BLOG.description,
+    type: 'website'
+  }
+
+  return (
+    <BaseLayout meta={meta} tags={tags} categories={categories}>
+      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
+        <StickyBar>
+          <div className='py-4 text-lg lg:mx-14'>{locale.COMMON.LATEST_POSTS}</div>
+        </StickyBar>
+        <BlogPostListScroll posts={postsSortByDate} tags={tags} />
+      </div>
+    </BaseLayout>
+  )
+}
+
+export default Index
diff --git a/pages/category/[category].js b/pages/category/[category].js
index ce29dfc2..2354ca21 100644
--- a/pages/category/[category].js
+++ b/pages/category/[category].js
@@ -15,7 +15,7 @@ export default function Category ({ tags, allPosts, filteredPosts, category, cat
   }
   return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={allPosts} categories={categories}>
     <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
-      <StickyBar >
+      <StickyBar>
         <CategoryList currentCategory={category} categories={categories} />
       </StickyBar>
       <BlogPostListScroll posts={filteredPosts} tags={tags} currentCategory={category}/>
diff --git a/pages/category/index.js b/pages/category/index.js
new file mode 100644
index 00000000..3dc6c443
--- /dev/null
+++ b/pages/category/index.js
@@ -0,0 +1,48 @@
+import { getAllCategories, getAllPosts, getAllTags } from '@/lib/notion'
+import BLOG from '@/blog.config'
+import BaseLayout from '@/layouts/BaseLayout'
+import TagItem from '@/components/TagItem'
+import { getNotionPageData } from '@/lib/notion/getNotionData'
+import { useGlobal } from '@/lib/global'
+import CategoryGroup from '@/components/CategoryGroup'
+import React from 'react'
+import Link from 'next/link'
+
+export default function Category ({ tags, allPosts, categories }) {
+  const { locale } = useGlobal()
+  const meta = {
+    title: `${BLOG.title} | ${locale.COMMON.CATEGORY}`,
+    description: BLOG.description,
+    type: 'website'
+  }
+  return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
+    <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+      <div className='dark:text-gray-200 mb-5'>{locale.COMMON.TAGS}:</div>
+      <div id='category-list' className='duration-200 flex flex-wrap'>
+        {Object.keys(categories).map(category => {
+          return <Link key={category} href={`/category/${category}`}>
+            <div className={'hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>
+          </Link>
+        })}      </div>
+    </div>
+    </div>
+  </BaseLayout>
+}
+
+export async function getStaticProps () {
+  const from = 'tag-index-props'
+  const notionPageData = await getNotionPageData({ from })
+  const allPosts = await getAllPosts({ notionPageData, from })
+  const categories = await getAllCategories(allPosts)
+  const tagOptions = notionPageData.tagOptions
+  const tags = await getAllTags({ allPosts, sliceCount: 12, tagOptions })
+  return {
+    props: {
+      tags,
+      allPosts,
+      categories
+    },
+    revalidate: 1
+  }
+}
diff --git a/pages/tag/index.js b/pages/tag/index.js
index 4b19f810..d400adde 100644
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -6,16 +6,16 @@ import { getNotionPageData } from '@/lib/notion/getNotionData'
 import { useGlobal } from '@/lib/global'
 
 export default function Tag ({ tags, allPosts, categories }) {
+  const { locale } = useGlobal()
   const meta = {
-    title: `${BLOG.title} | 标签`,
+    title: `${BLOG.title} | ${locale.COMMON.TAGS}`,
     description: BLOG.description,
     type: 'website'
   }
-  const { locale } = useGlobal()
   return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-10'>
-    <div className='bg-white dark:bg-gray-700 px-10 py-5 mt-20'>
-      <div className='dark:text-gray-200 my-5'>{locale.COMMON.TAGS}:</div>
+    <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-14'>
+    <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+      <div className='dark:text-gray-200 mb-5'>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         {
           tags.map(tag => {