Permalink
Browse files

Search bar showing relevant and highlighted results after the first k…

…eystroke.
  • Loading branch information...
redox committed Nov 26, 2013
1 parent 4f45da2 commit 070de82864fb17fb1f36f623e3136e398503370c
Showing with 249 additions and 2 deletions.
  1. +0 −1 CNAME
  2. +6 −0 Gemfile
  3. +65 −0 Gemfile.lock
  4. +42 −0 Rakefile
  5. +4 −0 _config.yml
  6. +113 −1 _layouts/default.html
  7. +7 −0 js/algoliasearch.min.js
  8. +5 −0 js/hogan.js
  9. +7 −0 js/typeahead.min.js
View
1 CNAME
@@ -1 +0,0 @@
-tom.preston-werner.com
View
@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'jekyll'
+gem 'rake'
+gem 'github-pages'
+gem 'algoliasearch'
View
@@ -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
View
@@ -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
View
@@ -1,2 +1,6 @@
markdown: rdiscount
pygments: true
+algolia:
+ application_id: 7OS9QEQF4C
+ search_only_api_key: 00bff8179dba272179292106118fad8a
+ index_name: blog_posts
View
@@ -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>
@@ -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>
@@ -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>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 070de82

Please sign in to comment.