Merge pull request #24 from algolia/feature/home-page-design

Feature/home page design

README.md

@@ -19,6 +19,8 @@ We've created the fastest, easiest way to search within documentation. Check out
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+<!-- START documentation.md -->
+
 ## Introduction
 
 We're scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
@@ -54,6 +56,7 @@ To customize the look & feel of the dropdown menu, you can either:
  * edit the color [variables](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) and rebuild this project CSS,
  * or override the colors like we did in [dev/docsearch-styling.css](https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css).
 
+<!-- END documentation.md -->
 ## Development workflow
 
 ### Local example

docs/Gemfile

@@ -4,7 +4,7 @@
 source 'https://rubygems.org'
 
 group :development, :test do
-  gem 'jekyll'
+  gem 'jekyll', '< 3'
   gem 'haml'
   gem 'rouge'
   gem 'sass'

docs/Gemfile.lock

@@ -1,20 +1,23 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    addressable (2.3.8)
     blankslate (2.1.2.4)
-    classifier-reborn (2.0.3)
+    classifier-reborn (2.0.4)
       fast-stemmer (~> 1.0)
     coderay (1.1.0)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.9.1.1)
+    coffee-script-source (1.10.0)
     colorator (0.1)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.0.8)
     execjs (2.6.0)
+    faraday (0.9.2)
+      multipart-post (>= 1.2, < 3)
     fast-stemmer (1.0.2)
     ffi (1.9.10)
     formatador (0.2.5)
@@ -62,28 +65,32 @@ GEM
       coffee-script (~> 2.2)
     jekyll-contentblocks (1.0.1)
       jekyll
-    jekyll-gist (1.3.4)
+    jekyll-gist (1.4.0)
+      octokit (~> 4.2)
     jekyll-paginate (1.1.0)
     jekyll-sass-converter (1.3.0)
       sass (~> 3.2)
     jekyll-watch (1.3.0)
       listen (~> 3.0)
     kramdown (1.9.0)
     liquid (2.6.3)
-    listen (3.0.3)
+    listen (3.0.5)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
     lumberjack (1.0.9)
     mercenary (0.3.5)
     method_source (0.8.2)
     mini_portile (0.6.2)
     multi_json (1.11.2)
+    multipart-post (2.0.0)
     nenv (0.2.0)
     nokogiri (1.6.6.2)
       mini_portile (~> 0.6.0)
     notiffany (0.0.8)
       nenv (~> 0.1)
       shellany (~> 0.0)
+    octokit (4.2.0)
+      sawyer (~> 0.6.0, >= 0.5.3)
     parslet (1.5.0)
       blankslate (~> 2.0)
     posix-spawn (0.3.11)
@@ -100,7 +107,10 @@ GEM
     redcarpet (3.3.3)
     rouge (1.7.7)
     safe_yaml (1.0.4)
-    sass (3.4.19)
+    sass (3.4.20)
+    sawyer (0.6.0)
+      addressable (~> 2.3.5)
+      faraday (~> 0.8, < 0.10)
     shellany (0.0.1)
     slop (3.6.0)
     thor (0.19.1)
@@ -118,7 +128,7 @@ DEPENDENCIES
   guard-jekyll-plus
   guard-livereload
   haml
-  jekyll
+  jekyll (< 3)
   jekyll-contentblocks
   nokogiri
   rouge

docs/_config.yml

@@ -8,11 +8,28 @@ host: 0.0.0.0
 
 # Navigation
 navigation:
- - text: About
-   url: /about/
+  -
+    text: Documentation
+    url: /documentation/
+  -
+    text: About
+    url: /about/
 
 # Build settings
 markdown: kramdown
+kramdown:
+  input: GFM
+  hard_wrap: false
+
+  auto_ids:       true
+  footnote_nr:    1
+  entity_output:  as_char
+  smart_quotes:   lsquo,rsquo,ldquo,rdquo
+  enable_coderay: true
+
+  coderay_wrap: div
+  coderay_line_numbers: nil
+  coderay_css: style
 
 # Assets
 sass:

docs/_includes/header.html

@@ -1,20 +1,24 @@
+
 <header class="site-header">
   <nav class="navbar navbar-default  navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
-        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#instant-search-nav">
-          Menu&nbsp;&nbsp;<i class="fa fa-bars"></i>
-        </button>
-        <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
+        <a id="logo" href="{{ site.baseurl }}/">
+          <img src="{{site.baseurl}}/img/algolia-logo.svg" alt="Algolia" />
+        </a>
+        presents
       </div>
-      <div id="instant-search-nav" class="navbar-collapse collapse">
+      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
           {% assign url = page.url %}
           {% for link in site.navigation %}
             <li {% if url == link.url %}class="active"{% endif %}>
               <a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
             </li>
           {% endfor %}
+          <li>
+            <a class="navbar-github-link" href="//github.com/algolia/docsearch"><i class="fa fa-github"></i></a>
+          </li>
         </ul>
       </div>
     </div>

docs/_includes/newsletter-mc.html

@@ -2,21 +2,21 @@
 <div id="mc_embed_signup">
   <form action="//algolia.us3.list-manage.com/subscribe/post?u=f7b8acc6ec97794a08484ca9b&amp;id=285b80e148" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
     <div id="mc_embed_signup_scroll">
-    <h3>Signup for our newsletter</h3>
-    <div class="spacer20"></div>
-    <div class="input-group">
-      <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
-      <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
-      <span class="input-group-btn">
-        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
-      </span>
-    </div>
-    <div id="mce-responses" class="clear">
-      <div class="response" id="mce-error-response" style="display:none"></div>
-      <div class="response" id="mce-success-response" style="display:none"></div>
-    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-      <div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
+      <h3>Sign up for our newsletter</h3>
+      <div class="spacer20"></div>
+      <div class="input-group">
+        <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
+        <input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
+        <span class="input-group-btn">
+          <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
+        </span>
       </div>
+      <div id="mce-responses" class="clear">
+        <div class="response" id="mce-error-response" style="display:none"></div>
+        <div class="response" id="mce-success-response" style="display:none"></div>
+      </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+      <div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
+    </div>
   </form>
 </div>
 <!--End mc_embed_signup-->

docs/_layouts/default.html

@@ -22,6 +22,8 @@
 {%if page.noFooter == null %}
     {% include footer.html %}
 {% endif %}
+
+    <script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
     <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
     <script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
     <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

docs/css/_base.scss

@@ -1,5 +1,5 @@
 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-size-base: 14px;
+$font-size-base: 16px;
 
 $headings-font-family: "Raleway";
 $headings-font-weight: 300;