Merge remote-tracking branch 'origin/main' into theme-medium

# Conflicts:
#	themes/index.js

themes/Medium/LayoutBase.js

@@ -9,6 +9,7 @@ import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
 import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -19,9 +20,10 @@ import { useGlobal } from '@/lib/global'
 const LayoutBase = props => {
   const { children, meta, showInfoCard = true, slotRight, slotTop } = props
   const { locale } = useGlobal()
+  const router = useRouter()
 
   return (
-    <div id='container' className='bg-white w-full h-full min-h-screen justify-center'>
+    <div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
@@ -37,11 +39,11 @@ const LayoutBase = props => {
         </div>
 
         {/* 桌面端右侧 */}
-        <div className='hidden xl:block border-l w-96'>
+        <div className='hidden xl:block border-l dark:border-gray-500 w-96'>
           <Tabs className='py-14 px-6 sticky top-0'>
             {slotRight}
             <div key={locale.NAV.ABOUT}>
-              <SearchInput className='mt-6  mb-12' />
+              {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
               {showInfoCard && <InfoCard />}
               {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
             </div>

themes/Medium/LayoutSearch.js

@@ -4,21 +4,30 @@ import { useGlobal } from '@/lib/global'
 import TagGroups from './components/TagGroups'
 import CategoryGroup from './components/CategoryGroup'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import { useEffect } from 'react'
 
 export const LayoutSearch = (props) => {
   const { locale } = useGlobal()
+  const { keyword } = props
+  useEffect(() => {
+    setTimeout(() => {
+      const container = document.getElementById('container')
+      if (container && container.innerHTML) {
+        const re = new RegExp(`${keyword}`, 'gim')
+        container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
+      }
+    },
+    100)
+  })
   return <LayoutBase {...props}>
-
     <div className='py-12'>
-      <div className='pb-4 w-full'>
-      {locale.NAV.SEARCH}
-      </div>
-      <SearchInput/>
-
+      <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
+      <SearchInput currentSearch={keyword} {...props}/>
       <TagGroups {...props}/>
       <CategoryGroup {...props}/>
     </div>
-
-    <BlogPostListScroll {...props}/>
+    <div id='container'>
+      <BlogPostListScroll {...props}/>
+    </div>
   </LayoutBase>
 }

themes/Medium/LayoutSlug.js

@@ -83,7 +83,7 @@ export const LayoutSlug = props => {
       showInfoCard={true}
       slotRight={slotRight}
     >
-      <h1 className="text-4xl pt-12 font-sans">{post?.title}</h1>
+      <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
       <section className="flex py-4 items-center font-sans px-1">
         <Link href="/about" passHref>
           <>

themes/Medium/components/Catalog.js

@@ -62,7 +62,7 @@ const Catalog = ({ toc }) => {
           <a
             key={id}
             href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light
+            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
           >
                       <span

themes/Medium/components/InfoCard.js

@@ -17,8 +17,8 @@ const InfoCard = () => {
           className='rounded-full'
         />
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.AUTHOR}</div>
-        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.BIO}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
         <SocialButton/>
     </div>
   </div>

themes/Medium/components/LogoBar.js

@@ -5,7 +5,7 @@ export default function LogoBar () {
   return <div id='top-wrapper' className='w-full max-w-5xl justify-center mx-auto font-sans'>
       <div className='w-full'>
         <Link href='/'>
-          <a className='text-2xl'>{BLOG.TITLE}</a>
+          <a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
         </Link>
       </div>
   </div>

themes/Medium/components/SearchInput.js

@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
 
 const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
-  const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
+  // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -14,12 +15,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
     }
   })
 
-  const handleSearch = (key) => {
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+
     if (key && key !== '') {
       setLoadingState(true)
-      router.push({ pathname: '/search', query: { s: key } }).then(r => {
-        setLoadingState(false)
-      })
+      // router.push({ pathname: '/search/' + key }).then(r => {
+      //   setLoadingState(false)
+      // })
+      location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {
       })
@@ -34,13 +38,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
-    setSearchKey('')
   }
 
-  let lock = false
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
-    if (!lock) {
-      setSearchKey(val)
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
     }
   }
   function lockSearchInput () {
@@ -61,28 +71,20 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
       onCompositionUpdate={lockSearchInput}
       onCompositionEnd={unLockSearchInput}
       onChange={e => updateSearchKey(e.target.value)}
-      defaultValue={searchKey}
+      defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
-      onClick={() => { handleSearch(searchKey) }}>
-        <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
+    <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+      onClick={handleSearch}>
+        <i className={`hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
     </div>
 
-    {(searchKey && searchKey.length &&
-      <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
+    {(showClean &&
+      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
       </div>
       )}
   </div>
 }
 
-function getSearchKey () {
-  const router = useRouter()
-  if (router.query && router.query.s) {
-    return router.query.s
-  }
-  return null
-}
-
 export default SearchInput

themes/Medium/components/TopNavBar.js

@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
   const router = useRouter()
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white px-5 items-between'>
+    <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
       <LogoBar />
 
       {/* 顶部菜单 */}
@@ -21,8 +21,8 @@ export default function TopNavBar (props) {
           if (link.show) {
             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={'px-5 duration-300 text-base justify-between  hover:underline cursor-pointer flex flex-nowrap items-center ' +
-                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600 ')} >
+            <a className={'px-5 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                 <div className='items-center justify-center flex '>
                   <i className={link.icon} />
                   <div className='ml-4 whitespace-nowrap'>{link.name}</div>