新增Logo；新增bio配置项

blog.config.js

@@ -1,6 +1,7 @@
 const BLOG = {
   title: '小唐笔记',
   author: 'tangly1024',
+  bio: '一个普通的干饭人🍚', // Introduce Yourself
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',
@@ -15,7 +16,7 @@ const BLOG = {
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   appearance: 'auto', // ['light', 'dark', 'auto'],
   font: 'font-sans tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
-  lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
+  lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
   since: 2020, // if leave this empty, current year will be used.

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-10 md:mt-0' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-10' ref={targetRef}>
 
       {/* 文章列表 */}
       <div className='flex flex-wrap space-y-8 mx-5 md:mx-0'>

components/InfoCard.js

@@ -9,7 +9,7 @@ const InfoCard = ({ postCount }) => {
     <div className='flex flex-col items-center justify-center '>
         <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/about') }}>
           <Image
-          alt={BLOG.title}
+          alt={BLOG.author}
           width={120}
           height={120}
           loading='lazy'
@@ -17,8 +17,8 @@ const InfoCard = ({ postCount }) => {
           className='rounded-full'
         />
         </div>
-        <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
+        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.author}</div>
-        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.description}</div>
+        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.bio}</div>
         <SocialButton/>
     </div>
   </>

components/Logo.js

@@ -4,10 +4,10 @@ import React from 'react'
 
 const Logo = () => {
   return <Link href='/' passHref>
-      <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'>
+        <div className='flex flex-col justify-center items-center cursor-pointer bg-gray-800 space-y-3 h-32 font-bold mb-4'>
-        <span className='text-red-600'>Tangly</span>
+          <div className='font-serif text-xl text-white'> {BLOG.title}</div>
-        <span className='text-blue-400'>1024</span>
+          <div className='text-sm text-gray-300 font-light'> {BLOG.description}</div>
-      </div>
+        </div>
   </Link>
 }
 export default Logo

components/MenuButtonGroup.js

@@ -22,7 +22,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
           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-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
-              (selected ? 'bg-gray-700 text-white ' : ' ')} >
+              (selected ? 'bg-gray-200 text-black' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
               </div>

components/SideAreaLeft.js

@@ -7,6 +7,7 @@ import React from 'react'
 import Analytics from './Analytics'
 import Tabs from '@/components/Tabs'
 import BLOG from '@/blog.config'
+import Logo from './Logo'
 
 /**
  * 侧边平铺
@@ -26,16 +27,19 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
 
-    <section className='sticky top-8 w-60'>
+    <section className='w-60'>
-
       {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+        <Logo/>
         <MenuButtonGroup allowCollapse={true} />
         {BLOG.menu.showSearch && <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>}
       </section>
 
+    </section>
+
+    <section 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'>
@@ -48,7 +52,6 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
             <Analytics postCount={postCount}/>
           </div>
       </Tabs>
-
     </section>
 
  </aside>

components/SideBar.js

@@ -7,6 +7,7 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Logo from './Logo'
 
 /**
  * 侧边栏
@@ -22,22 +23,15 @@ import React from 'react'
  */
 const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
-  return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
 
     <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
 
-      <InfoCard />
+      <section className='py-5'>
-
+        <InfoCard />
-      {/* 最新文章 */}
+      </section>
-      {posts && (
-        <section className='mt-4'>
-          <div className='text-sm pb-4 px-5  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>
-          <LatestPostsGroup posts={posts} />
-        </section>
-      )}
 
+      <Logo/>
       {/* 分类  */}
       {categories && (
         <section className='mt-8'>
@@ -55,7 +49,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
 
       {/* 标签云  */}
       {tags && (
-        <section className='mt-8'>
+        <section className='mt-4'>
           <div className='text-sm py-2 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'/>{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
@@ -69,6 +63,16 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
           </div>
         </section>
       )}
+
+      {/* 最新文章 */}
+      {posts && (
+        <section className='mt-8'>
+          <div className='text-sm pb-4 px-5  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>
+          <LatestPostsGroup posts={posts} />
+        </section>
+      )}
     </div>
 
     <section className='bg-white dark:bg-gray-900'>

layouts/BaseLayout.js

@@ -53,7 +53,9 @@ const BaseLayout = ({
 
       <>{headerSlot}</>
 
-      <main id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-14 pb-12'>
+      <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600'></div>
+
+      <main id='wrapper' className='flex justify-center flex-1 mx-auto pb-12'>
           <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
           <section id='center' className='flex-grow mt-14 md:mt-0 max-w-5xl min-h-screen' ref={targetRef}>
             {onLoading

pages/_document.js

@@ -18,7 +18,7 @@ class MyDocument extends Document {
           <ThirdPartyScript />
         </Head>
 
-        <body className='bg-gray-100 dark:bg-gray-900 duration-200'>
+        <body className='bg-day dark:bg-night duration-200'>
           <Main />
           <NextScript />
         </body>