Skip to content

Commit 070de82

Browse files
redoxredox
committed
Search bar showing relevant and highlighted results after the first keystroke.
1 parent 4f45da2 commit 070de82

9 files changed

Lines changed: 249 additions & 2 deletions

File tree

‎CNAME‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Gemfile‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
source 'https://rubygems.org'
2+
3+
gem 'jekyll'
4+
gem 'rake'
5+
gem 'github-pages'
6+
gem 'algoliasearch'

‎Gemfile.lock‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
RedCloth (4.2.9)
5+
algoliasearch (1.1.8)
6+
curb
7+
classifier (1.3.3)
8+
fast-stemmer (>= 1.0.0)
9+
colorator (0.1)
10+
commander (4.1.5)
11+
highline (~> 1.6.11)
12+
curb (0.8.5)
13+
fast-stemmer (1.0.2)
14+
ffi (1.9.3)
15+
github-pages (10)
16+
RedCloth (= 4.2.9)
17+
jekyll (= 1.3.0)
18+
kramdown (= 1.2.0)
19+
liquid (= 2.5.4)
20+
maruku (= 0.6.1)
21+
rdiscount (= 2.1.7)
22+
redcarpet (= 2.3.0)
23+
highline (1.6.20)
24+
jekyll (1.3.0)
25+
classifier (~> 1.3)
26+
colorator (~> 0.1)
27+
commander (~> 4.1.3)
28+
liquid (~> 2.5.2)
29+
listen (~> 1.3)
30+
maruku (~> 0.6.0)
31+
pygments.rb (~> 0.5.0)
32+
redcarpet (~> 2.3.0)
33+
safe_yaml (~> 0.9.7)
34+
kramdown (1.2.0)
35+
liquid (2.5.4)
36+
listen (1.3.1)
37+
rb-fsevent (>= 0.9.3)
38+
rb-inotify (>= 0.9)
39+
rb-kqueue (>= 0.2)
40+
maruku (0.6.1)
41+
syntax (>= 1.0.0)
42+
posix-spawn (0.3.6)
43+
pygments.rb (0.5.4)
44+
posix-spawn (~> 0.3.6)
45+
yajl-ruby (~> 1.1.0)
46+
rake (10.1.0)
47+
rb-fsevent (0.9.3)
48+
rb-inotify (0.9.2)
49+
ffi (>= 0.5.0)
50+
rb-kqueue (0.2.0)
51+
ffi (>= 0.5.0)
52+
rdiscount (2.1.7)
53+
redcarpet (2.3.0)
54+
safe_yaml (0.9.7)
55+
syntax (1.0.0)
56+
yajl-ruby (1.1.0)
57+
58+
PLATFORMS
59+
ruby
60+
61+
DEPENDENCIES
62+
algoliasearch
63+
github-pages
64+
jekyll
65+
rake

‎Rakefile‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
require "rubygems"
2+
require "tmpdir"
3+
4+
require "bundler/setup"
5+
require "jekyll"
6+
require "algoliasearch"
7+
8+
GITHUB_REPONAME = "redox/mojombo.github.io"
9+
10+
namespace :site do
11+
jekyll_config = Jekyll.configuration(source: '.', destination: '_site')
12+
jekyll_site = Jekyll::Site.new(jekyll_config)
13+
14+
desc "Generate blog files"
15+
task :generate do
16+
jekyll_site.process
17+
end
18+
19+
desc "Generate, index and publish blog to gh-pages"
20+
task :publish, [:algolia_api_key] => :generate do |t, args|
21+
if jekyll_config['algolia'] and jekyll_config['algolia']['application_id']
22+
raise "missing algolia_api_key argument" if args[:algolia_api_key].nil?
23+
24+
Algolia.init application_id: jekyll_config['algolia']['application_id'], api_key: args[:algolia_api_key]
25+
idx = Algolia::Index.new(jekyll_config['algolia']['index_name'])
26+
idx.set_settings attributesToIndex: ['title', 'unordered(url)'], queryType: 'prefixAll'
27+
idx.clear! rescue "not fatal"
28+
idx.add_objects jekyll_site.posts.map { |post| { title: post.title, url: post.url } }
29+
end
30+
31+
Dir.mktmpdir do |tmp|
32+
cp_r "_site/.", tmp
33+
Dir.chdir tmp
34+
system "git init"
35+
system "git add ."
36+
message = "Site updated at #{Time.now.utc}"
37+
system "git commit -m #{message.inspect}"
38+
system "git remote add origin git@github.com:#{GITHUB_REPONAME}.git"
39+
system "git push origin master:refs/heads/gh-pages --force"
40+
end
41+
end
42+
end

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
markdown: rdiscount
22
pygments: true
3+
algolia:
4+
application_id: 7OS9QEQF4C
5+
search_only_api_key: 00bff8179dba272179292106118fad8a
6+
index_name: blog_posts

‎_layouts/default.html‎

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,80 @@
1616
<!-- Typekit -->
1717
<script type="text/javascript" src="http://use.typekit.com/jpd0pfm.js"></script>
1818
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
19+
20+
<!-- REDOX: add JS dependencies -->
21+
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
22+
<script type="text/javascript" src="/js/typeahead.min.js"></script>
23+
<script type="text/javascript" src="/js/hogan.js"></script>
24+
<script type="text/javascript" src="/js/algoliasearch.min.js"></script>
25+
<!-- END REDOX: add JS dependencies -->
26+
27+
<!-- REDOX: typeahead styling -->
28+
<style type="text/css">
29+
.search-form-wrapper {
30+
width: 600px;
31+
margin: 30px auto;
32+
border: 3px solid #FF6600;
33+
}
34+
35+
.search-form-wrapper h5 {
36+
color: #FF6600;
37+
font-size: 16px;
38+
margin-top: 10px;
39+
}
40+
41+
.search-form {
42+
height: 40px;
43+
margin: 20px;
44+
}
45+
46+
.twitter-typeahead, input.search-input, .tt-hint, .tt-query {
47+
width: 100%;
48+
height: 100%;
49+
font-size: 24px;
50+
}
51+
52+
.tt-dropdown-menu {
53+
right: 0px !important;
54+
}
55+
56+
.tt-suggestions {
57+
font-size: 18px;
58+
background: white;
59+
margin-top: 2px;
60+
padding: 5px 0;
61+
border: 1px solid rgba(0,0,0,.2);
62+
}
63+
64+
.tt-suggestion .hit {
65+
margin: 10px;
66+
padding: 10px;
67+
}
68+
69+
.tt-suggestion .hit .url {
70+
font-size: 12px;
71+
text-align: right;
72+
}
73+
74+
.tt-suggestion .hit .title {
75+
margin: 0px;
76+
font-size: 18px;
77+
text-align: left;
78+
color: #080808;
79+
font-weight: normal;
80+
}
81+
82+
.tt-suggestion .hit em {
83+
font-weight: bold;
84+
font-style: normal;
85+
}
86+
87+
.tt-is-under-cursor {
88+
background: #FF6600;
89+
color: white;
90+
}
91+
</style>
92+
<!-- END REDOX: typeahead styling -->
1993
</head>
2094
<body>
2195

@@ -25,6 +99,44 @@
2599
</script>
26100
<!-- ClickTale end of Top part -->
27101

102+
<!-- REDOX: search bar -->
103+
<div class="search-form-wrapper">
104+
<h5>Show HN: Search bar showing relevant and highlighted results after the first keystroke.</h5>
105+
<center>See <a href="">my commit to add this search-form</a></center>
106+
<div class="search-form">
107+
<input type="text" name="q" class="search-input" placeholder="Search" id="blog-search-input" />
108+
</div>
109+
</div>
110+
<hr />
111+
<script>
112+
var apiClient = new AlgoliaSearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
113+
var idx = apiClient.initIndex('{{ site.algolia.index_name }}');
114+
function go() {
115+
idx.search($('#blog-search-input').val(), function(success, content) {
116+
if (success && content.hits.length > 0) {
117+
// for now, go to the first match
118+
window.location.href = content.hits[0].url;
119+
}
120+
});
121+
}
122+
$('#blog-search-input').typeahead({
123+
name: 'blogposts',
124+
remote: idx.getTypeaheadTransport(),
125+
engine: Hogan,
126+
template: '<div class="hit">' +
127+
'<div class="title">{{ "{{{" }} _highlightResult.title.value }}}</div>' +
128+
'<div class="url">{{ "{{{" }} _highlightResult.url.value }}}</div>' +
129+
'</div>'
130+
}).on('keydown', function(e) {
131+
if (e.which == 13) {
132+
go();
133+
}
134+
}).on('typeahead:selected', function(e) {
135+
go();
136+
}).focus();
137+
</script>
138+
<!-- END REDOX: search bar -->
139+
28140
<div class="site">
29141
<div class="title">
30142
<a href="/">Tom Preston-Werner</a>
@@ -56,7 +168,7 @@
56168
</div>
57169
</div>
58170

59-
<a href="http://github.com/mojombo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
171+
<a href="http://github.com/redox/mojombo.github.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
60172

61173
<!-- ClickTale Bottom part -->
62174
<div id="ClickTaleDiv" style="display: none;"></div>

‎js/algoliasearch.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)