Skip to content

Commit

Permalink
Search bar showing relevant and highlighted results after the first k…
Browse files Browse the repository at this point in the history
…eystroke.
  • Loading branch information
redox committed Nov 26, 2013
1 parent 4f45da2 commit 070de82
Show file tree
Hide file tree
Showing 9 changed files with 249 additions and 2 deletions.
1 change: 0 additions & 1 deletion CNAME

This file was deleted.

6 changes: 6 additions & 0 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
source 'https://rubygems.org'

gem 'jekyll'
gem 'rake'
gem 'github-pages'
gem 'algoliasearch'
65 changes: 65 additions & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
GEM
remote: https://rubygems.org/
specs:
RedCloth (4.2.9)
algoliasearch (1.1.8)
curb
classifier (1.3.3)
fast-stemmer (>= 1.0.0)
colorator (0.1)
commander (4.1.5)
highline (~> 1.6.11)
curb (0.8.5)
fast-stemmer (1.0.2)
ffi (1.9.3)
github-pages (10)
RedCloth (= 4.2.9)
jekyll (= 1.3.0)
kramdown (= 1.2.0)
liquid (= 2.5.4)
maruku (= 0.6.1)
rdiscount (= 2.1.7)
redcarpet (= 2.3.0)
highline (1.6.20)
jekyll (1.3.0)
classifier (~> 1.3)
colorator (~> 0.1)
commander (~> 4.1.3)
liquid (~> 2.5.2)
listen (~> 1.3)
maruku (~> 0.6.0)
pygments.rb (~> 0.5.0)
redcarpet (~> 2.3.0)
safe_yaml (~> 0.9.7)
kramdown (1.2.0)
liquid (2.5.4)
listen (1.3.1)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
rb-kqueue (>= 0.2)
maruku (0.6.1)
syntax (>= 1.0.0)
posix-spawn (0.3.6)
pygments.rb (0.5.4)
posix-spawn (~> 0.3.6)
yajl-ruby (~> 1.1.0)
rake (10.1.0)
rb-fsevent (0.9.3)
rb-inotify (0.9.2)
ffi (>= 0.5.0)
rb-kqueue (0.2.0)
ffi (>= 0.5.0)
rdiscount (2.1.7)
redcarpet (2.3.0)
safe_yaml (0.9.7)
syntax (1.0.0)
yajl-ruby (1.1.0)

PLATFORMS
ruby

DEPENDENCIES
algoliasearch
github-pages
jekyll
rake
42 changes: 42 additions & 0 deletions Rakefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
require "rubygems"
require "tmpdir"

require "bundler/setup"
require "jekyll"
require "algoliasearch"

GITHUB_REPONAME = "redox/mojombo.github.io"

namespace :site do
jekyll_config = Jekyll.configuration(source: '.', destination: '_site')
jekyll_site = Jekyll::Site.new(jekyll_config)

desc "Generate blog files"
task :generate do
jekyll_site.process
end

desc "Generate, index and publish blog to gh-pages"
task :publish, [:algolia_api_key] => :generate do |t, args|
if jekyll_config['algolia'] and jekyll_config['algolia']['application_id']
raise "missing algolia_api_key argument" if args[:algolia_api_key].nil?

Algolia.init application_id: jekyll_config['algolia']['application_id'], api_key: args[:algolia_api_key]
idx = Algolia::Index.new(jekyll_config['algolia']['index_name'])
idx.set_settings attributesToIndex: ['title', 'unordered(url)'], queryType: 'prefixAll'
idx.clear! rescue "not fatal"
idx.add_objects jekyll_site.posts.map { |post| { title: post.title, url: post.url } }
end

Dir.mktmpdir do |tmp|
cp_r "_site/.", tmp
Dir.chdir tmp
system "git init"
system "git add ."
message = "Site updated at #{Time.now.utc}"
system "git commit -m #{message.inspect}"
system "git remote add origin git@github.com:#{GITHUB_REPONAME}.git"
system "git push origin master:refs/heads/gh-pages --force"
end
end
end
4 changes: 4 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
markdown: rdiscount
pygments: true
algolia:
application_id: 7OS9QEQF4C
search_only_api_key: 00bff8179dba272179292106118fad8a
index_name: blog_posts
114 changes: 113 additions & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,80 @@
<!-- Typekit -->
<script type="text/javascript" src="http://use.typekit.com/jpd0pfm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- REDOX: add JS dependencies -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/typeahead.min.js"></script>
<script type="text/javascript" src="/js/hogan.js"></script>
<script type="text/javascript" src="/js/algoliasearch.min.js"></script>
<!-- END REDOX: add JS dependencies -->

<!-- REDOX: typeahead styling -->
<style type="text/css">
.search-form-wrapper {
width: 600px;
margin: 30px auto;
border: 3px solid #FF6600;
}

.search-form-wrapper h5 {
color: #FF6600;
font-size: 16px;
margin-top: 10px;
}

.search-form {
height: 40px;
margin: 20px;
}

.twitter-typeahead, input.search-input, .tt-hint, .tt-query {
width: 100%;
height: 100%;
font-size: 24px;
}

.tt-dropdown-menu {
right: 0px !important;
}

.tt-suggestions {
font-size: 18px;
background: white;
margin-top: 2px;
padding: 5px 0;
border: 1px solid rgba(0,0,0,.2);
}

.tt-suggestion .hit {
margin: 10px;
padding: 10px;
}

.tt-suggestion .hit .url {
font-size: 12px;
text-align: right;
}

.tt-suggestion .hit .title {
margin: 0px;
font-size: 18px;
text-align: left;
color: #080808;
font-weight: normal;
}

.tt-suggestion .hit em {
font-weight: bold;
font-style: normal;
}

.tt-is-under-cursor {
background: #FF6600;
color: white;
}
</style>
<!-- END REDOX: typeahead styling -->
</head>
<body>

Expand All @@ -25,6 +99,44 @@
</script>
<!-- ClickTale end of Top part -->

<!-- REDOX: search bar -->
<div class="search-form-wrapper">
<h5>Show HN: Search bar showing relevant and highlighted results after the first keystroke.</h5>
<center>See <a href="">my commit to add this search-form</a></center>
<div class="search-form">
<input type="text" name="q" class="search-input" placeholder="Search" id="blog-search-input" />
</div>
</div>
<hr />
<script>
var apiClient = new AlgoliaSearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
var idx = apiClient.initIndex('{{ site.algolia.index_name }}');
function go() {
idx.search($('#blog-search-input').val(), function(success, content) {
if (success && content.hits.length > 0) {
// for now, go to the first match
window.location.href = content.hits[0].url;
}
});
}
$('#blog-search-input').typeahead({
name: 'blogposts',
remote: idx.getTypeaheadTransport(),
engine: Hogan,
template: '<div class="hit">' +
'<div class="title">{{ "{{{" }} _highlightResult.title.value }}}</div>' +
'<div class="url">{{ "{{{" }} _highlightResult.url.value }}}</div>' +
'</div>'
}).on('keydown', function(e) {
if (e.which == 13) {
go();
}
}).on('typeahead:selected', function(e) {
go();
}).focus();
</script>
<!-- END REDOX: search bar -->

<div class="site">
<div class="title">
<a href="/">Tom Preston-Werner</a>
Expand Down Expand Up @@ -56,7 +168,7 @@
</div>
</div>

<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>
<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>

<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
Expand Down
7 changes: 7 additions & 0 deletions js/algoliasearch.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 070de82

Please sign in to comment.