From efd1b0b2c5edff45546683e93c59f92f6f54eab3 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 22 Dec 2021 21:44:05 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=8A=A0=E5=85=A5Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Analytics.js          | 24 +++++++++++++++++
 components/BlogPostListScroll.js |  2 +-
 components/Header.js             | 34 +++++++++++++++++++++++
 components/SideAreaLeft.js       | 15 +++--------
 components/SideAreaRight.js      | 46 ++++++++++++++++++++++++++++----
 components/TopNav.js             |  8 +++---
 layouts/BaseLayout.js            | 15 ++++++-----
 lib/notion/getAllTags.js         |  2 +-
 package.json                     |  1 +
 styles/globals.css               | 10 +++----
 10 files changed, 123 insertions(+), 34 deletions(-)
 create mode 100644 components/Analytics.js
 create mode 100644 components/Header.js

diff --git a/components/Analytics.js b/components/Analytics.js
new file mode 100644
index 00000000..9677c436
--- /dev/null
+++ b/components/Analytics.js
@@ -0,0 +1,24 @@
+import { useGlobal } from '@/lib/global'
+import { faChartBar } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+/**
+ * 统计网站信息
+ * @param {*} param0
+ * @returns
+ */
+export default function Analytics ({ postCount }) {
+  const { locale } = useGlobal()
+
+  return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
+    <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
+    <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
+        <span className='px-1 '>
+            <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
+        <span className='px-1 busuanzi_container_site_uv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
+        <span className='px-1 busuanzi_container_site_pv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
+      </div>
+</section>
+}
diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js
index b10b70a4..f9cc534a 100644
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -53,7 +53,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
   if (!postsToShow || postsToShow.length === 0) {
     return <BlogPostListEmpty currentSearch={currentSearch} />
   } else {
-    return <div id='post-list-wrapper' className='mt-20 md:mt-0' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-10 md:mt-0' ref={targetRef}>
 
       {/* 文章列表 */}
       <div className='flex flex-wrap'>
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 00000000..bba55268
--- /dev/null
+++ b/components/Header.js
@@ -0,0 +1,34 @@
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useEffect, useState } from 'react'
+import Typed from 'typed.js'
+
+/**
+ *
+ * @returns 头图
+ */
+export default function Header () {
+  const [typed, changeType] = useState()
+  useEffect(() => {
+    if (!typed) {
+      changeType(new Typed('#typed', {
+        stringsElement: '#typed-strings', typeSpeed: 200, showCursor: false
+      }))
+    }
+  })
+  const scrollToCenter = () => {
+    document.getElementById('wrapper').scrollIntoView({ behavior: 'smooth' })
+  }
+  return <div className='h-screen w-full'>
+      <div className='absolute z-10 flex h-screen items-center justify-center w-full'>
+          <div id="typed-strings">
+        <h2 className='text-xs text-white font-serif'>唐风集里，收卷波澜。</h2>
+        </div>
+        <div id="typed" className='text-4xl md:text-7xl text-center text-white font-serif'></div>
+      <div onClick={scrollToCenter} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
+    </div>
+    <div className='bg-black bg-cover bg-center h-screen md:-mt-14'
+        style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("https://pic2.zhimg.com/v2-9dfb9bd28656a13d7d57793c853dfb52_r.jpg")' }}>
+    </div>
+</div>
+}
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index e1e0fe70..b707897d 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -4,10 +4,11 @@ import MenuButtonGroup from '@/components/MenuButtonGroup'
 import SearchInput from '@/components/SearchInput'
 import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faChartBar, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Analytics from './Analytics'
 
 /**
  * 侧边平铺
@@ -41,17 +42,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
       </section>
 
       {/* 统计 */}
-      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
-          <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
-          <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
-              <span className='px-1 '>
-                  <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
-              <span className='px-1 busuanzi_container_site_uv hidden'>
-              | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
-              <span className='px-1 busuanzi_container_site_pv hidden'>
-              | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
-            </div>
-      </section>
+      <Analytics postCount={postCount}/>
 
       {/* 分类  */}
       {!post && categories && (
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index f8579f1b..5d827e8f 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -10,7 +10,12 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Analytics from './Analytics'
 import CategoryGroup from './CategoryGroup'
+import InfoCard from './InfoCard'
+import MenuButtonGroup from './MenuButtonGroup'
+import SearchInput from './SearchInput'
+import Toc from './Toc'
 
 /**
  * 侧边平铺
@@ -32,13 +37,29 @@ const SideAreaRight = ({
   posts,
   categories,
   currentCategory,
-  currentSearch
+  currentSearch,
+  targetRef
 }) => {
   const { locale } = useGlobal()
+  const postCount = posts?.length || 0
+  const showToc = post && post.toc && post.toc.length > 1
 
   return (
     <>
-      <section className="rounded-xl shadow-md py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+
+<section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
+        <InfoCard postCount={postCount} />
+      </section>
+
+      {/* 菜单 */}
+      <section className='hidden lg:block mb-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
+        <MenuButtonGroup allowCollapse={true} />
+        <div className='px-5 pt-2'>
+           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
+        </div>
+      </section>
+
+      <section className="rounded-xl shadow-md mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
         {/* 展示广告  */}
         <ins
           className="adsbygoogle"
@@ -51,10 +72,21 @@ const SideAreaRight = ({
         ></ins>
       </section>
 
+      <Analytics postCount={postCount}/>
+
       <div className="sticky top-8">
+          {showToc && (
+          <section className='pb-10 mb-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+            <div className='border-b text-center text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+              {locale.COMMON.TABLE_OF_CONTENTS}
+            </div>
+            <Toc toc={post.toc} targetRef={targetRef} />
+          </section>
+          )}
+
         {/* 最新文章 */}
         {posts && (
-          <section className="rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
             <div className="text-sm pb-2 px-5  flex flex-nowrap justify-between">
               <div className="font-light text-gray-600  dark:text-gray-200">
                 <FontAwesomeIcon icon={faArchive} className="mr-2" />
@@ -66,9 +98,13 @@ const SideAreaRight = ({
           </section>
         )}
 
+        {/* <section className="rounded-xl shadow-md py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
+        </section> */}
+
         {/* 标签云  */}
         {tags && (
-          <section className="rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
             <div className="text-sm pb-1 px-5 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" />
@@ -89,7 +125,7 @@ const SideAreaRight = ({
 
         {/* 分类  */}
         {post && categories && (
-          <section className='rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+          <section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
             <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
               <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
               <Link href='/category' passHref>
diff --git a/components/TopNav.js b/components/TopNav.js
index 1f9c4e42..2db41297 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -9,13 +9,13 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
   const drawer = useRef()
   const { locale } = useGlobal()
 
-  return (<div id='top-nav' className='block lg:hidden'>
+  return (<div id='top-nav'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='flex fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
-      <div className='w-full flex justify-between items-center p-4 shadow'>
+    <div id='sticky-nav' className='dark flex fixed md:relative w-full top-0 z-20 transform duration-500'>
+      <div className='w-full flex justify-between items-center p-4 glassmorphism'>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
           <div className='relative w-10' ><Image
@@ -44,7 +44,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
             <a>{locale.NAV.ABOUT}</a>
           </Link>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='cursor-pointer dark:text-gray-300'>
+               className='cursor-pointer dark:text-gray-300 block md:hidden'>
             {locale.NAV.SEARCH}
           </div>
         </div>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index fc293560..19fa62b9 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -1,14 +1,15 @@
 import CommonHead from '@/components/CommonHead'
 import FloatDarkModeButton from '@/components/FloatDarkModeButton'
 import Footer from '@/components/Footer'
+import Header from '@/components/Header'
 import JumpToBottomButton from '@/components/JumpToBottomButton'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import LoadingCover from '@/components/LoadingCover'
-import SideAreaLeft from '@/components/SideAreaLeft'
 import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useRef } from 'react'
 /**
@@ -65,18 +66,20 @@ const BaseLayout = ({
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
 
-  return (<div id='wrapper'>
+  return (<div>
 
       <CommonHead meta={meta} />
 
       {/* 顶部导航栏 */}
       <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
 
-      <div className='flex justify-center flex-1 mx-auto md:pt-8 pb-12'>
+      {useRouter().asPath === '/' && <Header/>}
 
-          <div id='left' className='hidden lg:block flex-col w-72'>
+      <div id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-12 pb-12'>
+
+          {/* <div id='left' className='hidden lg:block flex-col w-72'>
             <SideAreaLeft targetRef={targetRef} title={meta.title} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
-          </div>
+          </div> */}
 
           <div id='center' className='flex-grow max-w-4xl min-h-screen md:mx-10' ref={targetRef}>
             {onLoading
@@ -87,7 +90,7 @@ const BaseLayout = ({
             }
           </div>
 
-          <div id='right' className='hidden 2xl:block flex-col w-72'>
+          <div id='right' className='hidden lg:block flex-col w-72 mr-5'>
             <SideAreaRight post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
           </div>
 
diff --git a/lib/notion/getAllTags.js b/lib/notion/getAllTags.js
index f1a9681b..f1108cb9 100644
--- a/lib/notion/getAllTags.js
+++ b/lib/notion/getAllTags.js
@@ -6,7 +6,7 @@
  * @param tagOptions tags的下拉选项
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllTags ({ allPosts, sliceCount = 16, tagOptions }) {
+export async function getAllTags ({ allPosts, sliceCount = 12, tagOptions }) {
   if (!allPosts) {
     return []
   }
diff --git a/package.json b/package.json
index b77924f9..d69cd73b 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "react-dom": "17.0.2",
     "react-notion-x": "^4.11.0",
     "smoothscroll-polyfill": "^0.4.4",
+    "typed.js": "^2.0.12",
     "use-ackee": "^3.0.0"
   },
   "devDependencies": {
diff --git a/styles/globals.css b/styles/globals.css
index ced64d08..f82ddd54 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -150,13 +150,13 @@ nav {
 }
 
 .glassmorphism{
-  background: rgba(255, 255, 255, 0.5);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
 .dark .glassmorphism{
   background: rgba(31, 41, 55, .5);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
\ No newline at end of file