Skip to content

Commit f73998d

Browse files
author
Eugene Bannykh
committed
Algolia search integration
1 parent bd8dfe9 commit f73998d

File tree

14 files changed

+3194
-354
lines changed

14 files changed

+3194
-354
lines changed

Diff for: ‎Gemfile

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,9 @@ source 'https://rubygems.org'
22

33
gem 'github-pages', '83'
44
gem 'pygments.rb'
5-
gem 'wdm' if Gem.win_platform?
5+
gem 'wdm' if Gem.win_platform?
6+
7+
8+
group :jekyll_plugins do
9+
gem 'algoliasearch-jekyll', '1.0.0.beta.pre.1'
10+
end

Diff for: ‎_config.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,9 @@ incremental: false
8484
gems:
8585
- jekyll-redirect-from
8686

87-
87+
algolia:
88+
application_id: '0TXGQJVHZF'
89+
index_name: 'devdocs'
90+
lazy_update: true
8891

8992
exclude: ['scss', 'bin', 'node_modules', 'vendor', '.git', '.idea', 'guides/v2.2']
90-
91-
92-

Diff for: ‎_includes/footer-scripts.html

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
22
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3+
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
34
<script src="{{ site.baseurl }}common/js/app.min.js"></script>
45

56
<!-- Glossary integration -->

Diff for: ‎_includes/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
</div>
5353

5454
<form class="quick-search" action="{{site.baseurl}}search.html" method="get">
55-
<input type="search" name="q" placeholder="Search" />
55+
<input type="search" name="q" placeholder="Search" autocomplete="off" />
5656
<a href="#" class="quick-search-close">&times;</a>
5757
</form>
5858

Diff for: ‎_includes/home/intro.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ <h1>Magento {{ page.guide_version }} Developer Documentation</h2>
55

66
<div class="search-form">
77
<form class="input-group" action="{{site.baseurl}}search.html" method="get">
8-
<input type="search" name="q" placeholder="Looking for something specific?" class="form-control search-field" />
8+
<input type="search" autocomplete="off" name="q" placeholder="Looking for something specific?" class="form-control search-field" />
99
<i class="search-icon"></i>
1010
<div class="input-group-btn">
1111
<button type="submit" class="btn btn-primary btn-large search-submit">Search</button>

Diff for: ‎_layouts/search.md

+75-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,78 @@
11
{% include header.html %}
2-
<div class="search container">
3-
<h1 class="page-heading">{{ page.title }}</h1>
4-
{{ content }}
2+
3+
<div class="search-results-header">
4+
<div id="search-input"></div>
5+
</div>
6+
7+
<div class="search-results container">
8+
9+
<div id="stats"></div>
10+
<div id="hits"></div>
11+
<div id="pagination"></div>
12+
513
</div><!-- container -->
14+
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
16+
<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
17+
18+
<script>
19+
20+
app({
21+
appId: '0TXGQJVHZF',
22+
apiKey: '60a4902ca2720b6ba576d1c4a1ba97fe',
23+
indexName: 'mcom',
24+
urlSync: true
25+
});
26+
27+
function app(opts) {
28+
const search = instantsearch({
29+
appId: opts.appId,
30+
apiKey: opts.apiKey,
31+
indexName: opts.indexName,
32+
urlSync: true,
33+
});
34+
35+
search.addWidget(
36+
instantsearch.widgets.searchBox({
37+
container: '#search-input',
38+
placeholder: 'Search',
39+
})
40+
);
41+
42+
search.addWidget(
43+
instantsearch.widgets.hits({
44+
container: '#hits',
45+
hitsPerPage: 10,
46+
templates: {
47+
item: function ( item ) {
48+
return '<div class="hit"><h2 class="hit-name"><a href="' + item.url + '">' + item._highlightResult.title.value + '</a></h2><div class="hit-content">'+ item._highlightResult.text.value + '</div></div>';
49+
},
50+
empty: function ( query ) {
51+
return '<div id="no-results-message"><p>No results for the search <em>"' + query.query +'"</em>.</p></div>';
52+
},
53+
},
54+
})
55+
);
56+
57+
search.addWidget(
58+
instantsearch.widgets.stats({
59+
container: '#stats',
60+
})
61+
);
62+
63+
64+
search.addWidget(
65+
instantsearch.widgets.pagination({
66+
container: '#pagination',
67+
scrollTo: '#search-input',
68+
})
69+
);
70+
71+
search.start();
72+
}
73+
74+
</script>
75+
76+
77+
678
{% include footer.html %}

Diff for: ‎common/js/app.min.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎css/app.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎gulpfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ gulp.task('styles', function () {
143143
// Compile html files. Use _config.yml
144144
gulp.task('jekyll', function (gulpCallBack) {
145145

146-
var jekyll = spawn('bundle', ['exec','jekyll','build'], {stdio: 'inherit'});
146+
var jekyll = spawn('bundle', ['exec','jekyll','build', '--config', '_config.yml,_config.local.yml'], {stdio: 'inherit'});
147147

148148
jekyll.on('error', function (error) {
149149
console.log(error.toString());

Diff for: ‎js/_includes/search.js

+56-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,65 @@
11
// Clicking on search icon triggers the search form in header
2-
var $quickSearchInput = $('.quick-search input');
2+
$(function() {
33

4-
// Pressign ESC key closes the quick-search
5-
$(document).keyup(function(e) {
4+
var $quickSearchInput = $('.quick-search input');
65

7-
if( e.which == 27 ){
6+
// Pressign ESC key closes the quick-search
7+
$(document).keyup(function(e) {
8+
9+
if( e.which == 27 ){
10+
$('body').removeClass('search-active');
11+
$quickSearchInput.blur();
12+
}
13+
14+
});
15+
16+
$('.search-trigger').on('click', function (e) {
17+
e.preventDefault();
18+
$('body').toggleClass('search-active');
19+
$quickSearchInput.trigger('focus');
20+
});
21+
22+
$('.quick-search-close').on('click', function (e) {
23+
e.preventDefault();
824
$('body').removeClass('search-active');
925
$quickSearchInput.blur();
10-
}
26+
});
27+
28+
29+
30+
31+
// Algola autocomplete:
32+
var client = algoliasearch("0TXGQJVHZF", "60a4902ca2720b6ba576d1c4a1ba97fe");
33+
var index = client.initIndex('devdocs');
34+
//initialize autocomplete on search input (ID selector must match)
35+
36+
$('.quick-search input, .search-form .search-field').autocomplete(
37+
{
38+
hint: true,
39+
debug: false,
40+
}, [
41+
{
42+
source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
43+
//value to be displayed in input control after user's suggestion selection
44+
displayKey: 'title',
45+
//hash of templates used when rendering dataset
46+
templates: {
47+
//'suggestion' templating function used to render a single suggestion
48+
suggestion: function(suggestion) {
49+
return '<a href="' + suggestion.url + '">' + suggestion._highlightResult.title.value + '</a>';
50+
}
51+
}
52+
}
53+
]).on('autocomplete:selected', function ( event, suggestion, dataset ) {
54+
if ( typeof suggestion.url != 'undefined' ) {
55+
window.location.href = suggestion.url;
56+
}
57+
//console.log(suggestion);
58+
});
59+
60+
61+
1162

12-
});
1363

14-
$('.search-trigger').on('click', function (e) {
15-
e.preventDefault();
16-
$('body').toggleClass('search-active');
17-
$quickSearchInput.trigger('focus');
18-
});
1964

20-
$('.quick-search-close').on('click', function (e) {
21-
e.preventDefault();
22-
$('body').removeClass('search-active');
23-
$quickSearchInput.blur();
2465
});

0 commit comments

Comments
 (0)