Skip to content
This repository was archived by the owner on Jan 30, 2024. It is now read-only.

Commit 6c6a32b

Browse files
committed
search prototype
1 parent 8462542 commit 6c6a32b

10 files changed

Lines changed: 335 additions & 7 deletions

File tree

Gemfile

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
source 'https://rubygems.org'
22
gem 'github-pages', group: :jekyll_plugins
3+
group :jekyll_plugins do
4+
gem 'algoliasearch-jekyll', '~> 0.7.0'
5+
end

Gemfile.lock

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@ GEM
77
minitest (~> 5.1)
88
tzinfo (~> 1.1)
99
addressable (2.4.0)
10+
algoliasearch (1.10.0)
11+
httpclient (~> 2.7.1)
12+
json (>= 1.5.1)
13+
algoliasearch-jekyll (0.7.0)
14+
algoliasearch (~> 1.4)
15+
appraisal (~> 2.1.0)
16+
awesome_print (~> 1.6)
17+
json (~> 1.8)
18+
nokogiri (~> 1.6)
19+
verbal_expressions (~> 0.1.5)
20+
appraisal (2.1.0)
21+
bundler
22+
rake
23+
thor (>= 0.14.0)
24+
awesome_print (1.7.0)
1025
coffee-script (2.4.1)
1126
coffee-script-source
1227
execjs
@@ -49,6 +64,7 @@ GEM
4964
html-pipeline (2.4.2)
5065
activesupport (>= 2)
5166
nokogiri (>= 1.4)
67+
httpclient (2.7.2)
5268
i18n (0.7.0)
5369
jekyll (3.1.6)
5470
colorator (~> 0.1)
@@ -84,6 +100,7 @@ GEM
84100
gemoji (~> 2.0)
85101
html-pipeline (~> 2.2)
86102
jekyll (>= 3.0)
103+
json (1.8.3)
87104
kramdown (1.11.1)
88105
liquid (3.0.6)
89106
listen (3.0.6)
@@ -101,6 +118,7 @@ GEM
101118
sawyer (~> 0.7.0, >= 0.5.3)
102119
pkg-config (1.1.7)
103120
public_suffix (1.5.3)
121+
rake (11.2.2)
104122
rb-fsevent (0.9.7)
105123
rb-inotify (0.9.7)
106124
ffi (>= 0.5.0)
@@ -111,16 +129,19 @@ GEM
111129
addressable (>= 2.3.5, < 2.5)
112130
faraday (~> 0.8, < 0.10)
113131
terminal-table (1.6.0)
132+
thor (0.19.1)
114133
thread_safe (0.3.5)
115134
typhoeus (0.8.0)
116135
ethon (>= 0.8.0)
117136
tzinfo (1.2.2)
118137
thread_safe (~> 0.1)
138+
verbal_expressions (0.1.5)
119139

120140
PLATFORMS
121141
ruby
122142

123143
DEPENDENCIES
144+
algoliasearch-jekyll (~> 0.7.0)
124145
github-pages
125146

126147
BUNDLED WITH

_config.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ description: dkdeploy documentation
1212
baseurl: "" # the subpath of your site, e.g. /blog
1313
url: "http://localhost:4000/" # the base hostname & protocol for your site
1414
twitter_username: dkd_de
15-
github_username: dkdeploy
15+
github_username: KieranHayes
1616
exclude: [foundation, vendor]
1717
# Build settings
1818
markdown: kramdown
19+
algolia:
20+
application_id: 'QOFNLOOCWH'
21+
index_name: 'dkdeploy_dev'
22+
record_css_selector: 'p,ul,td,th,h3,code'

_includes/footer.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,33 @@
77
</div>
88
</div>
99
</footer>
10+
<script>
11+
window.ALGOLIA_CONFIG = {
12+
'applicationId': 'QOFNLOOCWH',
13+
'indexName': 'dkdeploy_dev',
14+
'apiKey': 'e51022a00302b50ec0f0fe226c460d5e',
15+
'baseurl': ''
16+
}
17+
</script>
18+
<script id="algolia__template" type="text/template">
19+
{% raw %}
20+
<div class="algolia__result">
21+
<a class="algolia__result-link" href="{{ full_url }}#algolia:{{ css_selector }}">{{{ _highlightResult.title.value }}}</a>
22+
{{#posted_at}}
23+
<div class="algolia__result-date">{{ posted_at_readable }}</div>
24+
{{/posted_at}}
25+
<div class="algolia__result-text">{{{ _highlightResult.text.value }}}</div>
26+
</div>
27+
{% endraw %}
28+
</script>
1029
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
1130
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js" defer></script>
31+
<script src="//cdn.jsdelivr.net/algoliasearch/3.6.0/algoliasearch.min.js"></script>
32+
<script src="//cdn.jsdelivr.net/algoliasearch.helper/2.1.0/algoliasearch.helper.min.js"></script>
33+
<script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script>
34+
<script src="//cdn.jsdelivr.net/momentjs/2.10.3/moment.min.js"></script>
35+
<script src="{{ site.baseurl }}/assets/javascript/algolia.js"></script>
36+
1237
<script type="text/javascript" src="{{ '/assets/javascript/toc2select.js' | prepend: site.url }}" defer></script>
1338
<script type="text/javascript">
1439
$(document).ready(function(){

_layouts/default.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<div id="content" class="row">
66
{% include header.html %}
77
<div class="large-3 sidebar columns">
8-
8+
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
9+
910
<ul class="vertical menu docs-menu nav1">
1011
{% assign current_path = page.url %}
1112

@@ -31,7 +32,11 @@
3132
</ul>
3233
</div>
3334
<div id="main-content" class="large-9 main-content columns">
34-
{{ content }}
35+
<div class="algolia__initial-content js-algolia__initial-content">{{ content }}</div>
36+
<div class="algolia__search-content js-algolia__search-content">
37+
<h2 class="page-title">Search</h2>
38+
<div class="posts algolia__results"></div>
39+
</div>
3540
</div>
3641
</div>
3742
{% include footer.html %}

_layouts/startpage.html

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
{% include head.html %}
4-
<body style="" class="startpage">
4+
<body class="startpage">
55
<div id="content" class="row">
66
{% include header.html %}
77
<div id="startpage-container" class="row hero-cards" data-equalize-on="large" data-equalizer>
@@ -39,10 +39,17 @@ <h3>PHP Ready!</h3>
3939
</div>
4040
</div>
4141
</div>
42+
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
43+
44+
<div class="algolia__initial-content js-algolia__initial-content"></div>
45+
<div class="algolia__search-content js-algolia__search-content" style="background: #fff">
46+
<h2 class="page-title">Search</h2>
47+
<div class="posts algolia__results"></div>
48+
</div>
49+
</div>
50+
4251
</div>
43-
<div style="display: none">
44-
{{ content }}
45-
</div>
52+
4653
{% include footer.html %}
4754
</div>
4855

assets/css/app.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6684,3 +6684,77 @@ td code.highlighter-rouge {
66846684

66856685
.highlighter-rouge .highlight {
66866686
padding: 0.5rem; }
6687+
6688+
/* Search form */
6689+
.algolia__input {
6690+
margin-bottom: 1rem;
6691+
font-size: 20px;
6692+
padding: .25rem .5rem; }
6693+
6694+
/* Search results container */
6695+
.algolia__initial-content {
6696+
display: block; }
6697+
6698+
.algolia__initial-content--hidden {
6699+
display: none; }
6700+
6701+
.algolia__search-content {
6702+
display: none; }
6703+
6704+
.algolia__search-content--active {
6705+
display: block; }
6706+
6707+
/* Search results */
6708+
.algolia__result {
6709+
margin-bottom: 1rem; }
6710+
6711+
.algolia__result-link {
6712+
font-size: 1.25rem;
6713+
font-weight: bold; }
6714+
6715+
.algolia__result-date {
6716+
font-size: 0.8rem; }
6717+
6718+
.algolia__result-text {
6719+
font-size: 0.9rem; }
6720+
6721+
.algolia__result-link .algolia__result-highlight {
6722+
background-color: #D3E8F6;
6723+
background-color: rgba(38, 139, 210, 0.2); }
6724+
6725+
.algolia__result-text .algolia__result-highlight {
6726+
font-weight: bold;
6727+
background: #ffff99; }
6728+
6729+
/* Theming */
6730+
.theme-base-08 .algolia__result-link .algolia__result-highlight {
6731+
background-color: #EED9D9;
6732+
background-color: rgba(172, 65, 66, 0.2); }
6733+
6734+
.theme-base-09 .algolia__result-link .algolia__result-highlight {
6735+
background-color: #F6E6DA;
6736+
background-color: rgba(210, 132, 69, 0.2); }
6737+
6738+
.theme-base-0a .algolia__result-link .algolia__result-highlight {
6739+
background-color: #FDF2E3;
6740+
background-color: rgba(244, 191, 117, 0.2); }
6741+
6742+
.theme-base-0b .algolia__result-link .algolia__result-highlight {
6743+
background-color: #E9EEDE;
6744+
background-color: rgba(144, 169, 89, 0.2); }
6745+
6746+
.theme-base-0c .algolia__result-link .algolia__result-highlight {
6747+
background-color: #E3F0EE;
6748+
background-color: rgba(117, 181, 170, 0.2); }
6749+
6750+
.theme-base-0d .algolia__result-link .algolia__result-highlight {
6751+
background-color: #E1ECF0;
6752+
background-color: rgba(106, 159, 181, 0.2); }
6753+
6754+
.theme-base-0e .algolia__result-link .algolia__result-highlight {
6755+
background-color: #EEE3EC;
6756+
background-color: rgba(170, 117, 159, 0.2); }
6757+
6758+
.theme-base-0f .algolia__result-link .algolia__result-highlight {
6759+
background-color: #E9DDD6;
6760+
background-color: rgba(143, 85, 54, 0.2); }

assets/javascript/algolia.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
// Init the search box
2+
$(function(config) {
3+
'use strict';
4+
5+
var applicationId = config.applicationId;
6+
var apiKey = config.apiKey;
7+
var indexName = config.indexName;
8+
9+
var algolia = algoliasearch(applicationId, apiKey);
10+
var helper = algoliasearchHelper(algolia, indexName);
11+
helper.setQueryParameter('distinct', true);
12+
helper.on('result', onResult);
13+
14+
// Input listening for queries
15+
var $searchInput = $('.js-algolia__input');
16+
$searchInput.on('keyup', onQueryChange);
17+
18+
// Content to hide/show when searching
19+
var $initialContent = $('.js-algolia__initial-content');
20+
var $searchContent = $('.js-algolia__search-content');
21+
var $searchContentResults = $searchContent.find('.algolia__results');
22+
$searchContentResults.on('click', 'a', onLinkClick);
23+
// Rendering templates
24+
var templateResult = Hogan.compile($('#algolia__template').html());
25+
var templateNoResults = $('#algolia__template--no-results').html();
26+
27+
var lastQuery;
28+
29+
// Toggle result page
30+
function showResults() {
31+
window.scroll(0, 0);
32+
$initialContent.addClass('algolia__initial-content--hidden');
33+
$searchContent.addClass('algolia__search-content--active');
34+
35+
}
36+
function hideResults() {
37+
$initialContent.removeClass('algolia__initial-content--hidden');
38+
$searchContent.removeClass('algolia__search-content--active');
39+
}
40+
41+
// Handle typing query
42+
function onQueryChange() {
43+
lastQuery = $(this).val();
44+
if (lastQuery.length === 0) {
45+
hideResults();
46+
return false;
47+
}
48+
helper.setQuery(lastQuery).search();
49+
showResults();
50+
}
51+
52+
function onResult(data) {
53+
// Avoid race conditions, discard results that do not match the latest query
54+
if (data.query !== lastQuery) {
55+
return false;
56+
}
57+
var content = data.nbHits ? renderResults(data) : templateNoResults;
58+
$searchContentResults.html(content);
59+
}
60+
61+
function renderResults(data) {
62+
return $.map(data.hits, function(hit) {
63+
if (hit.posted_at) {
64+
hit.posted_at_readable = moment.unix(hit.posted_at).fromNow();
65+
}
66+
hit.css_selector = encodeURI(hit.css_selector);
67+
hit.full_url = config.baseurl + hit.url;
68+
69+
return templateResult.render(hit);
70+
}).join('');
71+
}
72+
73+
// Scroll page to correct element
74+
function getAnchorSelector(hash) {
75+
var anchor = hash.substring(1);
76+
if (!anchor.match(/^algolia:/)) {
77+
return false;
78+
}
79+
return decodeURI(anchor.replace(/^algolia:/, ''));
80+
}
81+
82+
function scrollPageToSelector(selector) {
83+
var target = $('.page,.post').find(selector);
84+
var targetOffset = target[0].getBoundingClientRect().top + window.pageYOffset - 20;
85+
window.setTimeout(function() {
86+
window.scroll(0, targetOffset);
87+
}, 100);
88+
}
89+
90+
function onLinkClick(event) {
91+
var selector = getAnchorSelector(event.target.hash);
92+
// Normal link, going to another page
93+
if (event.target.pathname !== window.location.pathname || !selector) {
94+
return true;
95+
}
96+
// Scrolling to a result on the same page
97+
hideResults();
98+
scrollPageToSelector(selector);
99+
event.preventDefault();
100+
return false;
101+
}
102+
103+
window.setTimeout(function() {
104+
var selector = getAnchorSelector(window.location.hash);
105+
if (selector) {
106+
scrollPageToSelector(selector);
107+
}
108+
}, 100);
109+
110+
111+
}(window.ALGOLIA_CONFIG));

0 commit comments

Comments
 (0)