From 134b7884ee430fb44aedc59b836f05a92fd3b3ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=BC=80=E6=9C=97?= Date: Thu, 15 Aug 2019 18:39:05 +0800 Subject: [PATCH] feat: Docs support search --- docs/gatsby-config.js | 16 ++++++++++ docs/package.json | 1 + docs/src/components/HeaderSearch.js | 19 ++++++++++++ docs/src/components/Search/index.js | 44 +++++++++++++++++++++++++++ docs/src/components/Search/style.scss | 37 ++++++++++++++++++++++ docs/src/components/TopBar/index.js | 4 +++ docs/yarn.lock | 12 ++++++++ 7 files changed, 133 insertions(+) create mode 100644 docs/src/components/HeaderSearch.js create mode 100644 docs/src/components/Search/index.js create mode 100644 docs/src/components/Search/style.scss diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js index 175c1e22..352774b7 100644 --- a/docs/gatsby-config.js +++ b/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: { diff --git a/docs/package.json b/docs/package.json index c4abe17e..fd28e193 100644 --- a/docs/package.json +++ b/docs/package.json @@ -4,6 +4,7 @@ "version": "0.1.0", "author": "wangkailang", "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", diff --git a/docs/src/components/HeaderSearch.js b/docs/src/components/HeaderSearch.js new file mode 100644 index 00000000..6eecd0f1 --- /dev/null +++ b/docs/src/components/HeaderSearch.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { StaticQuery, graphql } from 'gatsby'; + +import Search from './Search'; + +const HeaderSearch = () => ( + } + /> +); + +export default HeaderSearch; diff --git a/docs/src/components/Search/index.js b/docs/src/components/Search/index.js new file mode 100644 index 00000000..9ed116d3 --- /dev/null +++ b/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 ( +
+ + {results.length > 0 && ( +
    + {results.map(page => ( +
  • + + {page.title} + {Boolean(page.author) && {page.author}} + +
    • + ))} +
+ )} +
+ ) +} + +export default Search; \ No newline at end of file diff --git a/docs/src/components/Search/style.scss b/docs/src/components/Search/style.scss new file mode 100644 index 00000000..a9ab4baf --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/docs/src/components/TopBar/index.js b/docs/src/components/TopBar/index.js index dad73722..43f0b30b 100644 --- a/docs/src/components/TopBar/index.js +++ b/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) => { + diff --git a/docs/yarn.lock b/docs/yarn.lock index a3bd7569..19fa6a6d 100644 --- a/docs/yarn.lock +++ b/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"