Merge pull request #1903 from tangly1024/feat/gitbook-algolia

gitbook 适配algolia

themes/gitbook/components/NavPostList.js

@@ -20,7 +20,7 @@ const NavPostList = (props) => {
 
     let existingGroup = null
     // 开启自动分组排序
-    if (JSON.parse(siteConfig('GITBOOK_AUTO_SORT', true, CONFIG))) {
+    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组

themes/gitbook/components/SearchInput.js

@@ -1,11 +1,15 @@
 import { useImperativeHandle, useRef, useState } from 'react'
 import { deepClone } from '@/lib/utils'
 import { useGitBookGlobal } from '@/themes/gitbook'
+import { siteConfig } from '@/lib/config'
 let lock = false
 
+/**
+ * 搜索栏
+ */
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
-  const { setFilteredNavPages, allNavPages } = useGitBookGlobal()
+  const { searchModal, setFilteredNavPages, allNavPages } = useGitBookGlobal()
 
   useImperativeHandle(cRef, () => {
     return {
@@ -16,6 +20,10 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   })
 
   const handleSearch = () => {
+    // 使用Algolia
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal?.current?.openSearch()
+    }
     let keyword = searchInputRef.current.value
     if (keyword) {
       keyword = keyword.trim()
@@ -23,20 +31,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       setFilteredNavPages(allNavPages)
     }
     const filterAllNavPages = deepClone(allNavPages)
-    // for (const filterGroup of filterAllNavPages) {
-    //   for (let i = filterGroup.items.length - 1; i >= 0; i--) {
-    //     const post = filterGroup.items[i]
-    //     const articleInfo = post.title + ''
-    //     const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
-    //     if (!hit) {
-    //       // 删除
-    //       filterGroup.items.splice(i, 1)
-    //     }
-    //   }
-    //   if (filterGroup.items && filterGroup.items.length > 0) {
-    //     filterPosts.push(filterGroup)
-    //   }
-    // }
+
     for (let i = filterAllNavPages.length - 1; i >= 0; i--) {
       const post = filterAllNavPages[i]
       const articleInfo = post.title + ''
@@ -56,6 +51,12 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
    * @param {*} e
    */
   const handleKeyUp = (e) => {
+    // 使用Algolia
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal?.current?.openSearch()
+      return
+    }
+
     if (e.keyCode === 13) { // 回车
       handleSearch(searchInputRef.current.value)
     } else if (e.keyCode === 27) { // ESC
@@ -63,6 +64,13 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     }
   }
 
+  const handleFocus = () => {
+    // 使用Algolia
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal?.current?.openSearch()
+    }
+  }
+
   /**
    * 清理搜索
    */
@@ -77,7 +85,6 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       return
     }
     searchInputRef.current.value = val
-
     if (val) {
       setShowClean(true)
     } else {
@@ -97,6 +104,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       ref={searchInputRef}
       type='text'
       className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white`}
+      onFocus={handleFocus}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
@@ -111,7 +119,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     </div>
 
     {(showClean &&
-      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+      <div className='-ml-12 cursor-pointer flex 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>
       )}

themes/gitbook/components/TopNavBar.js

@@ -39,7 +39,7 @@ export default function TopNavBar(props) {
   }
 
   return (
-        <div id='top-nav' className={'fixed top-0 w-full z-40 ' + className}>
+        <div id='top-nav' className={'fixed top-0 w-full ' + className}>
 
             {/* 移动端折叠菜单 */}
             <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>

themes/gitbook/index.js

@@ -2,7 +2,7 @@
 
 import CONFIG from './config'
 import { useRouter } from 'next/router'
-import { useEffect, useState, createContext, useContext } from 'react'
+import { useEffect, useState, createContext, useContext, useRef } from 'react'
 import { isBrowser } from '@/lib/utils'
 import Footer from './components/Footer'
 import InfoCard from './components/InfoCard'
@@ -34,6 +34,7 @@ import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { siteConfig } from '@/lib/config'
 import NotionIcon from '@/components/NotionIcon'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
@@ -55,16 +56,19 @@ const LayoutBase = (props) => {
   const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
   const showTocButton = post?.toc?.length > 1
+  const searchModal = useRef(null)
 
   useEffect(() => {
     setFilteredNavPages(allNavPages)
   }, [post])
 
   return (
-        <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible }}>
+        <ThemeGlobalGitbook.Provider value={{ searchModal, tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible }}>
             <Style/>
 
             <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+                <AlgoliaSearchModal cRef={searchModal} {...props}/>
+
                 {/* 顶部导航栏 */}
                 <TopNavBar {...props} />