feat: Docs support search (#56)

docs/gatsby-config.js

@@ -32,6 +32,22 @@ module.exports = {
     `gatsby-transformer-react-docgen`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
+    {
+      resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
+      options: {
+        // Fields to index
+        fields: ['title', 'author', 'path'],
+        // How to resolve each field`s value for a supported node type
+        resolvers: {
+          // For any node of type Mdx, list how to resolve the fields` values
+          Mdx: {
+            title: node => node.frontmatter.title,
+            author: node => node.frontmatter.author,
+            path: node => node.fields.slug,
+          },
+        },
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

docs/package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "author": "xsky-fe",
   "dependencies": {
+    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.3.0",
     "@mdx-js/mdx": "^1.0.19",
     "@mdx-js/react": "^1.0.16",
     "@mdx-js/tag": "^0.20.3",

docs/src/components/HeaderSearch.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StaticQuery, graphql } from 'gatsby';
+
+import Search from './Search';
+
+const HeaderSearch = () => (
+  <StaticQuery
+    query={graphql`
+      query SearchIndexQuery {
+        siteSearchIndex {
+          index
+        }
+      }
+    `}
+    render={data => <Search searchIndex={data.siteSearchIndex.index} />}
+  />
+);
+
+export default HeaderSearch;

docs/src/components/Search/index.js

@@ -0,0 +1,44 @@
+import React from "react"
+import { Index } from "elasticlunr"
+import { Link } from "gatsby"
+import './style.scss';
+
+const Search = props => {
+  const [query, setQuery] = React.useState('');
+  const [results, setResults] = React.useState([]);
+  const handleChange = React.useCallback(evt => {
+    const value = evt.target.value
+    const index = Index.load(props.searchIndex)
+    const rl = index
+      .search(value, { expand: true })
+      // Map over each ID and return the full document
+      .map(({ ref }) => index.documentStore.getDoc(ref));
+    setQuery(value);
+    setResults(rl.filter(r => r.title));
+  }, [setQuery, setResults]);
+  return (
+    <div className="HeaderSearch">
+      <input
+        className="form-control"
+        type="text"
+        value={query}
+        onChange={handleChange}
+        placeholder="在 wizard ui 中搜索"
+      />
+      {results.length > 0 && (
+        <ul>
+          {results.map(page => (
+            <li key={page.id}>
+              <Link to={page.path}>
+                {page.title}
+                {Boolean(page.author) && <span>{page.author}</span>}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Search;

docs/src/components/Search/style.scss

@@ -0,0 +1,37 @@
+.HeaderSearch {
+  position: relative;
+  margin-right: 20px;
+  input {
+    margin-top: 8px;
+    width: 180px;
+  }
+  ul {
+    position: absolute;
+    right: 0;
+    width: 360px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    padding-left: 0px;
+    border-radius: 4px;
+    max-height: 170px;
+    overflow: scroll;
+    li {
+      list-style: none;
+      a {
+        display: block;
+        height: 34px;
+        line-height: 34px;
+        padding-left: 10px;
+        padding-right: 10px;
+        &:hover {
+          text-decoration: none;
+          background-color: #dad6f7;
+        }
+      }
+      span {
+        float: right;
+      }
+    }
+  }
+}

docs/src/components/TopBar/index.js

@@ -5,6 +5,7 @@ import { Navbar, Nav, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { SideNavItems } from '../SideNav';
 import GitHubIcon from '../GitHubIcon';
 import IssueIcon from '../IssueIcon';
+import HeaderSearch from '../HeaderSearch';
 import logo from '../../images/logo.png';
 import useWindowWidth from '../../utils/hooks/get-window-width';
 import './style.scss';
@@ -87,6 +88,9 @@ const TopBar = (props) => {
               </OverlayTrigger>
             </li>
           </Nav>
+          <Nav pullRight>
+            <HeaderSearch />
+          </Nav>
         </Navbar.Collapse>
       </Navbar>
     </div>

docs/yarn.lock

@@ -1085,6 +1085,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
   integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
+"@gatsby-contrib/gatsby-plugin-elasticlunr-search@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@gatsby-contrib/gatsby-plugin-elasticlunr-search/-/gatsby-plugin-elasticlunr-search-2.3.0.tgz#af79021e6e3e6ca5d7a0b47b49dbfd196fa4ad1a"
+  integrity sha512-ZClnKcMFzCRJMQhA1pq8OmRJtkUXNqYlzVIxhJpmk3MwskEU2C7Tl0nzdv++5GNbdG3ud9RdL7vLbDeg3sfP0Q==
+  dependencies:
+    elasticlunr "^0.9.5"
+
 "@gatsbyjs/relay-compiler@2.0.0-printer-fix.2":
   version "2.0.0-printer-fix.2"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz#214db0e6072d40ea78ad5fabdb49d56bc95f4e99"
@@ -4296,6 +4303,11 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+elasticlunr@^0.9.5:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/elasticlunr/-/elasticlunr-0.9.5.tgz#65541bb309dddd0cf94f2d1c8861b2be651bb0d5"
+  integrity sha1-ZVQbswnd3Qz5Ty0ciGGyvmUbsNU=
+
 electron-to-chromium@^1.3.137, electron-to-chromium@^1.3.47:
   version "1.3.143"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.143.tgz#8b2a631ab75157aa53d0c2933275643b99ef580b"