feat(antdsite): add searchMaxSuggestions for searchbox

Author: wangyi7099

packages/antdsite/__default__/default-config.js

@@ -16,6 +16,7 @@ module.exports = {
     showAvatarList: true,
     showBackToTop: true,
     maxTocDeep: 3,
-    showSearchBox: true,
+    search: true,
+    searchMaxSuggestions: 10,
   },
 };

packages/antdsite/src/assets/index.less

@@ -21,3 +21,4 @@
 @import './theme';
 @import './docsearch';
 @import './page-scrollbar';
+@import './search-box';

…/components/search-box/index.module.less …ages/antdsite/src/assets/search-box.lesspackages/antdsite/src/components/search-box/index.module.less renamed to packages/antdsite/src/assets/search-box.less packages/antdsite/src/components/search-box/index.module.less renamed to packages/antdsite/src/assets/search-box.less

@@ -3,6 +3,10 @@
   margin: 16px auto 0;
   position: relative;
 
+  .hight-light {
+    color: #1890ff;
+  }
+
   input {
     border-radius: 32px;
     width: 200px;

packages/antdsite/src/assets/toc.less

@@ -11,7 +11,7 @@
   position: absolute;
   top: 8px;
   right: 20px;
-  max-width: 174px;
+  max-width: 170px;
   .ant-affix {
     background: #fff;
     max-height: 80vh;

packages/antdsite/src/components/search-box/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { List, Input, Icon, Breadcrumb } from 'antd';
-import styles from './index.module.less';
 import { PageInfo } from '../utils';
 import { OneToc } from '../../templates/docs';
 import { Link } from 'gatsby';
@@ -19,6 +18,7 @@ interface SearchState {
 
 interface SearchProps {
   datas: Array<PageInfo>;
+  max: number;
 }
 
 function match(a: string, b: string) {
@@ -77,22 +77,27 @@ export default class Search extends React.Component<SearchProps, SearchState> {
   };
 
   search = () => {
-    const { datas } = this.props;
+    const { datas, max } = this.props;
     const query = this.state.query.trim();
     const results: filterDatas = [];
 
+    function hightlightRes(res: string) {
+      return res.replace(new RegExp(query, 'g'), `<span class='hight-light'>${query}</span>`);
+    }
+
     function resolveOnePageItem(currentItem: PageInfo) {
       if (match(currentItem.title, query)) {
         results.push([
           {
             url: currentItem.slug,
-            title: currentItem.title,
+            title: hightlightRes(currentItem.title),
             important: currentItem.important,
           },
         ]);
       } else if (currentItem.toc && currentItem.toc.items.length) {
         let tocs = flattenToc(currentItem.toc.items);
-        tocs.forEach(t => {
+        for (let i = 0; i < tocs.length && results.length < max; i++) {
+          let t = tocs[i];
           if (match(t.title, query)) {
             results.push([
               {
@@ -101,15 +106,15 @@ export default class Search extends React.Component<SearchProps, SearchState> {
               },
               {
                 url: currentItem.slug + t.url,
-                title: t.title,
+                title: hightlightRes(t.title),
               },
             ]);
           }
-        });
+        }
       }
     }
 
-    for (let i = 0; i < datas.length; i++) {
+    for (let i = 0; i < datas.length && results.length < max; i++) {
       const currentItem = datas[i];
       if (currentItem.slug) {
         resolveOnePageItem(currentItem);
@@ -129,8 +134,8 @@ export default class Search extends React.Component<SearchProps, SearchState> {
     const { filterDatas } = this.state;
 
     return (
-      <div id="search-box" className={styles.searchBox}>
-        <div className={styles.searchInputComponent}>
+      <div id="search-box" className="search-box">
+        <div className="searchInput-component">
           <Icon type="search" />
           <Input
             ref={ref => {
@@ -143,7 +148,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
           />
         </div>
 
-        <div className={styles.searchResultList}>
+        <div className="search-result-list">
           {this.state.isSearchListShow && this.state.filterDatas.length ? (
             <List
               key="search-list"
@@ -153,7 +158,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
                   <List.Item>
                     <Link
                       to={dataItem[dataItem.length - 1].url as string}
-                      className={styles.searchItem}
+                      className="search-item "
                       onMouseDown={() => {
                         this.isClickLink = true;
                       }}
@@ -164,10 +169,16 @@ export default class Search extends React.Component<SearchProps, SearchState> {
                     >
                       <List.Item.Meta
                         description={
-                          <Breadcrumb separator=">" className={styles.ellipsis}>
+                          <Breadcrumb separator=">" className="ellipsis">
                             {dataItem.map((item, index) => (
                               // <Badge dot={i.important}>
-                              <Breadcrumb.Item key={index}>{item.title}</Breadcrumb.Item>
+                              <Breadcrumb.Item key={index}>
+                                <span
+                                  dangerouslySetInnerHTML={{
+                                    __html: item.title,
+                                  }}
+                                ></span>
+                              </Breadcrumb.Item>
                               // </Badge>
                             ))}
                           </Breadcrumb>

packages/antdsite/src/layout/Header.tsx

@@ -98,7 +98,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     } = utils.getcurrentLocaleConfigBySlug(webConfig, slug);
     const { locales } = webConfig.themeConfig;
 
-    const { nav = [], showSearchBox } = themeConfig;
+    const { nav = [], search, searchMaxSuggestions } = themeConfig;
     const activeMenuItem = nav
       .filter((item: any) => {
         return item.link && slug.startsWith(item.link);
@@ -158,8 +158,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                   }}
                 />
               </div> */}
-              {showSearchBox && allPagesSidebarItems.length ? (
-                <SearchBox datas={allPagesSidebarItems} />
+              {search && allPagesSidebarItems.length ? (
+                <SearchBox datas={allPagesSidebarItems} max={searchMaxSuggestions} />
               ) : null}
               <div className="header-meta">
                 <div className="right-header">

packages/docs/docs/zh/guide/getting-started.md

@@ -4,4 +4,109 @@ title: 开始使用
 
 # 开始上手
 
-1212
+## 通过 cli 安装
+
+#### 使用 [yarn](https://yarnpkg.com) 进行安装`antdsite-cli`
+
+```bash
+yarn global add antdsite-cli
+```
+
+#### 或者使用[npm](https://docs.npmjs.com/cli/install.html)进行安装
+
+```bash
+npm install antdsite-cli -g
+```
+
+#### 使用 `cli` 来初始化一个网站
+
+```bash
+antdsite my-docs
+```
+
+#### 切换到初始化的网站目录，运行网站
+
+```bash
+cd my-docs
+
+yarn start
+# OR
+npm start
+```
+
+#### 访问默认的地址 `localhost:8000` 即可看到效果页面。
+
+<p aligin="center">
+<img src="https://github.com/wangyi7099/pictureCdn/blob/master/allPic/antdsite/screenshot.png?raw=true" width="700" />
+</p>
+
+## 在现有项目安装
+
+### 修改 package.json
+
+#### 在`package.json`里添加依赖和启动脚本
+
+#### 添加依赖
+
+```diff
+   "dependencies": {
++    "antdsite": "^0.0.7",
++    "gatsby": "^2.13.39",
++    "react": "^16.8.0",
++    "react-dom": "^16.8.0"
+  },
+```
+
+#### 如果你使用 yarn 的话，添加的脚本如下
+
+```diff
+  "scripts": {
++    "build": "yarn clean && gatsby build",
++    "start": "yarn clean && gatsby develop",
++    "clean": "gatsby clean"
+   }
+```
+
+#### npm 脚本如下
+
+```diff
+  "scripts": {
++    "build": "npm run clean && gatsby build",
++    "start": "npm run clean && gatsby develop",
++    "clean": "gatsby clean"
+   }
+```
+
+### 安装依赖
+
+##### 执行`yarn`或者`npm`命令安装依赖
+
+```bash
+yarn
+# OR
+npm
+```
+
+### 新建一个 docs 文件夹
+
+```bash
+mkdir docs
+```
+
+### 新建`.antsite.js`
+
+在项目的根目录建立`.antsite.js`
+
+```js
+module.exports = {
+  title: 'hello'
+};
+```
+
+### 运行项目
+
+```bash
+yarn start
+# OR
+npm start
+```

packages/docs/docs/zh/guide/introduction.md

@@ -35,43 +35,7 @@ AntdSite 是一个基于[Ant Design](https://ant.design)，由[GatsbyJs](https:/
 - 现代浏览器和 IE11。
 - 支持服务端渲染。
 
-### 333333333333333333333333333333333333333333333
-
 ## 版本
 
 - antdsite 版本：[![npm package](https://img.shields.io/npm/v/antdsite.svg?style=flat-square)](https://www.npmjs.org/package/antdsite)
 - antdsite-cli 版本：[![npm package](https://img.shields.io/npm/v/antdsite-cli.svg?style=flat-square)](https://www.npmjs.org/package/antdsite-cli)
-
-## 安装
-
-#### 使用 [yarn](https://yarnpkg.com) 进行安装`cli`
-
-```bash
-yarn global add antdsite-cli
-```
-
-#### 或者使用[npm](https://docs.npmjs.com/cli/install.html)进行安装
-
-```bash
-npm install antdsite-cli -g
-```
-
-#### 使用 `cli` 来初始化一个网站
-
-```bash
-antdsite my-docs
-```
-
-#### 切换到初始化的网站目录，运行网站
-
-```bash
-cd my-docs
-
-yarn start
-# OR
-npm start
-```
-
-#### 访问默认的地址 `localhost:8000` 即可看到效果页面。
-
-<img src="https://github.com/wangyi7099/pictureCdn/blob/master/allPic/antdsite/screenshot.png?raw=true" width="700" />