Skip to content

Commit bc56ec6

Browse files
vincentlauvlwjvincentlauvlwj
committed
upgrade docsearch v3
1 parent 9d725c7 commit bc56ec6

File tree

20 files changed

+487
-10842
lines changed

20 files changed

+487
-10842
lines changed

‎themes/doc/layout/layout.ejs

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
2323
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,600,700" rel="stylesheet">
2424
<link href="<%- url_for('vendors/font-awesome@4.7.0/css/font-awesome.min.css') %>" rel="stylesheet">
25-
<link href="<%- url_for('vendors/docsearch@2.6.3/docsearch.min.css') %>" rel="stylesheet"/>
25+
<link href="<%- url_for('vendors/docsearch-css@3.6.2/style.css') %>" rel="stylesheet"/>
2626
<link href="<%- url_for('style/doc.css') %>" rel="stylesheet">
2727

2828
<!-- favicon -->
@@ -76,22 +76,8 @@
7676
<script src="<%- url_for('vendors/jquery@3.2.1/jquery.min.js') %>"></script>
7777
<script src="<%- url_for('script/doc.js') %>"></script>
7878

79-
<!-- algolia docsearch -->
80-
<script type="text/javascript" src="<%- url_for('vendors/docsearch@2.6.3/docsearch.min.js') %>"></script>
81-
<script type="text/javascript">
82-
docsearch({
83-
appId: "0DGANM0MZ3",
84-
apiKey: "071ea85fb6b0933d3f3d3925aa434e23",
85-
indexName: "ktorm",
86-
inputSelector: "#doc-search-input",
87-
algoliaOptions: { facetFilters: ["lang:<%- lang %>", "tags:doc"] },
88-
autocompleteOptions: { hint: false, appendTo: "body" },
89-
debug: false
90-
});
91-
</script>
92-
79+
<!-- fix code highlight -->
9380
<script>
94-
// fix code highlight
9581
(function() {
9682
$(".kotlin .code .keyword").each(function() {
9783
var node = $(this);

‎themes/doc/lib/browser/navigation/components.jsx

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const React = require('react');
2+
const { DocSearch } = require('@docsearch/react');
23

34
function Navbar(props) {
45
return (
@@ -79,16 +80,14 @@ class Sidebar extends React.Component {
7980

8081
<div className="doc-sidebar-content">
8182
<div className="doc-sidebar__search-form">
82-
<div className="dc-search-form doc-search-form">
83-
<input type="search"
84-
id="doc-search-input"
85-
className="dc-input dc-search-form__input doc-search-form__input"
86-
placeholder={page.lang === 'zh-cn' ? '搜索文档' : 'Search documents'}
87-
autoFocus={true} />
88-
<button className="dc-btn dc-search-form__btn doc-search-form__btn" aria-label="Search">
89-
<i className="dc-icon dc-icon--search"/>
90-
</button>
91-
</div>
83+
<DocSearch
84+
appId="0DGANM0MZ3"
85+
apiKey="071ea85fb6b0933d3f3d3925aa434e23"
86+
indexName="ktorm"
87+
searchParameters={{ facetFilters: ["lang:" + page.lang, "tags:doc"] }}
88+
placeholder={page.lang === 'zh-cn' ? '搜索文档' : 'Search documents'}
89+
translations={{ button: { buttonText: page.lang === 'zh-cn' ? '搜索文档' : 'Search documents' } }}
90+
/>
9291
</div>
9392
<ul className="doc-sidebar-list">
9493
{ renderItems() }
@@ -109,7 +108,7 @@ class SidebarItem extends React.Component {
109108
};
110109
}
111110

112-
componentDidMount () {
111+
componentDidMount() {
113112
const {item, page} = this.props;
114113
const hasChildren = Array.isArray(item.children) && item.children.length > 0;
115114
const childrenListIsVisible = (item.children || []).find((child) => {
@@ -122,14 +121,14 @@ class SidebarItem extends React.Component {
122121
});
123122
}
124123

125-
toggleChildrenVisibility () {
124+
toggleChildrenVisibility() {
126125
if (!this.state.hasChildren) { return; }
127126
this.setState({
128127
childrenListIsVisible: !this.state.childrenListIsVisible
129128
});
130129
}
131130

132-
render () {
131+
render() {
133132
const {item, page, url_for, tocItems, config, visibleHeaderId, className} = this.props;
134133
const isLabel = item.type === 'label';
135134
const isCurrentAncestor = item.isCurrentAncestor;
@@ -205,8 +204,7 @@ class SidebarItem extends React.Component {
205204
}
206205
}
207206

208-
function SidebarChildrenList ({item, page, config, tocItems, visibleHeaderId, url_for, hidden}) {
209-
207+
function SidebarChildrenList({item, page, config, tocItems, visibleHeaderId, url_for, hidden}) {
210208
return (<ul className={classNames({
211209
'doc-sidebar-list__children-list': true,
212210
'doc-sidebar-list__children-list--hidden': hidden
@@ -229,34 +227,28 @@ function SidebarChildrenList ({item, page, config, tocItems, visibleHeaderId, ur
229227
</ul>);
230228
}
231229

232-
function SidebarTocItem ({item, visibleHeaderId}) {
233-
const handleOnClick = () => {
234-
$('#doc-search-results').hide();
235-
$('#page-content').show();
236-
};
237-
230+
function SidebarTocItem({item, visibleHeaderId}) {
238231
return (
239232
<li className={`doc-sidebar-list__toc-item ${item.id === visibleHeaderId ? 'doc-sidebar-list__toc-item--current' : '' }`}>
240-
<a href={ '#' + item.id } data-scroll onClick={handleOnClick}>
233+
<a href={ '#' + item.id } data-scroll>
241234
<span>{ item.text }</span>
242235
</a>
243236
</li>);
244237
}
245238

246-
247-
function SidebarToggle ({className, onClick}) {
239+
function SidebarToggle({className, onClick}) {
248240
return (
249241
<i className={'dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle ' + (className || '')} onClick={onClick}/>
250242
);
251243
}
252244

253-
function SidebarClose ({className, onClick}) {
245+
function SidebarClose({className, onClick}) {
254246
return (
255247
<i className={'dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close ' + (className || '')} onClick={onClick}/>
256248
);
257249
}
258250

259-
function classNames (map = {}) {
251+
function classNames(map = {}) {
260252
return Object.keys(map).reduce((acc, key) => {
261253
if (typeof key !== 'string' || key === 'undefined') { return acc; }
262254
if (map[key]) {

‎themes/doc/lib/browser/navigation/containers.jsx

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const SIDEBAR_IS_VISIBLE_CLASS = 'doc-sidebar--is-visible';
88
const NAVIGATION_IS_COLLAPSED_CLASS = 'doc-navigation--is-collapsed';
99

1010
class Navigation extends React.Component {
11-
constructor (props) {
11+
constructor(props) {
1212
super(props);
1313

1414
this.url_for = this.props.url_for;
@@ -20,7 +20,7 @@ class Navigation extends React.Component {
2020
};
2121
}
2222

23-
componentDidMount () {
23+
componentDidMount() {
2424
const SmoothScroll = require('smooth-scroll');
2525
const $headers = $('h2');
2626
const tocItems = this.getTocItems($headers);
@@ -29,11 +29,6 @@ class Navigation extends React.Component {
2929
this.$content = $('.doc-content');
3030
this.items = this.getItems();
3131

32-
// this selector is wrapped in a function
33-
// since the selected element can be removed and recreated depending on the state
34-
// we have to access the DOM everytime, we can't keep a reference
35-
this.$searchFormInput = () => $('.dc-search-form__input');
36-
3732
this.addAnchorToHeaders($headers);
3833
this.listenContentClick();
3934
this.listenVisibleHeaderChanges($headers);
@@ -59,12 +54,12 @@ class Navigation extends React.Component {
5954
}
6055
}
6156

62-
getItems () {
57+
getItems() {
6358
const {page} = this.props;
6459
const navigation = this.getNavigationConfig();
6560
const items = navigation.main || [];
6661

67-
(function recurse (items, parent) {
62+
(function recurse(items, parent) {
6863
items.forEach((item) => {
6964
// add parent methods
7065
item.parent = () => { return parent; };
@@ -99,7 +94,7 @@ class Navigation extends React.Component {
9994
return items;
10095
}
10196

102-
getTocItems ($headers) {
97+
getTocItems($headers) {
10398
return $headers.map(function (i, h) {
10499
return {
105100
id: h.id,
@@ -109,7 +104,7 @@ class Navigation extends React.Component {
109104
});
110105
}
111106

112-
addAnchorToHeaders ($headers) {
107+
addAnchorToHeaders($headers) {
113108
$headers.each(function makeHeaderLinkable (i, h) {
114109
const span = document.createElement('span');
115110
h.insertBefore(span, h.firstChild);
@@ -128,7 +123,7 @@ class Navigation extends React.Component {
128123

129124
// Listen to "DOMContentLoaded|scroll|resize" events and determines
130125
// which header is currently "visible"
131-
listenVisibleHeaderChanges ($headers) {
126+
listenVisibleHeaderChanges($headers) {
132127
const offsetThreshold = 120;
133128
let prev, next;
134129

@@ -172,46 +167,41 @@ class Navigation extends React.Component {
172167
return listener;
173168
}
174169

175-
listenContentClick () {
170+
listenContentClick() {
176171
this.$content.on('click', this.onContentClick.bind(this));
177172
}
178173

179-
onContentClick () {
174+
onContentClick() {
180175
if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
181176
this.toggleSidebar();
182177
}
183178
}
184179

185-
collapseSidebar () {
180+
collapseSidebar() {
186181
this.$body.addClass(NAVIGATION_IS_COLLAPSED_CLASS);
187182

188183
if (window.localStorage) {
189184
window.localStorage.setItem('navigation_collapsed', 'true');
190185
}
191186
}
192187

193-
uncollapseSidebar () {
188+
uncollapseSidebar() {
194189
this.$body.removeClass(NAVIGATION_IS_COLLAPSED_CLASS);
195-
this.$searchFormInput()[0].focus();
196190

197191
if (window.localStorage) {
198192
window.localStorage.setItem('navigation_collapsed', 'false');
199193
}
200194
}
201195

202-
toggleSidebar () {
196+
toggleSidebar() {
203197
this.$body.toggleClass(SIDEBAR_IS_VISIBLE_CLASS);
204-
205-
if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
206-
this.$searchFormInput()[0].focus();
207-
}
208198
}
209199

210-
hideSidebar () {
200+
hideSidebar() {
211201
this.$body.removeClass(SIDEBAR_IS_VISIBLE_CLASS);
212202
}
213203

214-
render () {
204+
render() {
215205
return (
216206
<div className="doc-navigation">
217207
<Navbar>

0 commit comments

Comments
 (0)