From 5fcf9189d04829935cf87ca4f2d9219c0cacd8d9 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 11 Jan 2022 16:27:58 +0800
Subject: [PATCH] toc\blogCard\searchInput.focus

---
 components/BlogPostCard.js | 11 ++++++-----
 components/SearchInput.js  |  4 ++--
 pages/article/[slug].js    |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 6811ff93..785dcd18 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -10,18 +10,19 @@ import { useGlobal } from '@/lib/global'
 
 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'>
 
-      <div className='lg:p-8 p-4 flex flex-col justify-between w-full'>
+      <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <a className='cursor-pointer font-bold text-3xl text-center leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
+          <a className={`cursor-pointer font-bold text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>
 
-        <div className='flex mt-2 items-center justify-center flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
+        <div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}>
           <div>
           <Link href={`/category/${post.category}`} passHref>
             <a className='cursor-pointer font-light text-sm hover:underline transform'>
@@ -38,11 +39,11 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
         </div>
 
-        {showSummary && <p className='mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
+        {(!showPreview || showSummary) && <p className='mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
           {post.summary}
         </p>}
 
-        {BLOG.home?.showPreview && post?.blockMap && <div className='max-h-screen overflow-hidden truncate max-w-full'>
+        {showPreview && post?.blockMap && <div className='max-h-screen overflow-hidden truncate max-w-full'>
           <NotionRenderer
                   recordMap={post.blockMap}
                   mapPageUrl={mapPageUrl}
diff --git a/components/SearchInput.js b/components/SearchInput.js
index 005bded0..5c3cface 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -6,7 +6,7 @@ import { faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
 
 const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   const { locale } = useGlobal()
-  const [searchKey, setSearchKey] = useState(currentSearch)
+  const [searchKey, setSearchKey] = useState(currentSearch || '')
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -52,7 +52,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={currentSearch}
+      defaultValue={searchKey}
     />
     {(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
 
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index ba0949f3..50fbf3f1 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -37,7 +37,7 @@ const Slug = ({
 
   const drawerRight = useRef(null)
   const targetRef = typeof window !== 'undefined' ? document.getElementById('container') : null
-  const floatSlot = <div className="block lg:hidden"><TocDrawerButton onClick={() => { drawerRight?.current?.handleSwitchVisible() }} /></div>
+  const floatSlot = post?.toc.length > 1 ? <div className="block lg:hidden"><TocDrawerButton onClick={() => { drawerRight?.current?.handleSwitchVisible() }} /></div> : null
 
   return (
     <BaseLayout