Merge pull request #497 from algolia/website-upgrade-2

chore(website): Update & fix website
algolia · Nov 7, 2015 · 1f3cee4 · 1f3cee4
2 parents d8996cd + 38d84af
commit 1f3cee4
Show file tree

Hide file tree

Showing 65 changed files with 360 additions and 1,119 deletions.
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -2,24 +2,22 @@
   <nav class="navbar navbar-default  navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
-        <button type="button" class="text-white navbar-toggle collapsed" data-toggle="collapse" data-target="#instant-search-nav" aria-expanded="false">
+        <button type="button" class="text-white navbar-toggle collapsed" data-toggle="collapse" data-target="#instant-search-nav">
           Menu <i class="fa fa-bars m-l"></i>
         </button>
         <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
       </div>
       <div id="instant-search-nav" class="navbar-collapse collapse">
-        <ul class="nav navbar-nav">
+        <ul class="nav navbar-nav pull-right">
           {% assign url = page.url | remove: 'index.html' %}
           {% 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
-                href="http://github.com/algolia/instantsearch.js"
-                title="See more, open issues and get answers in our Github repository">
-                  <i class="fa fa-github"></i>
+              <a href="http://github.com/algolia/instantsearch.js" title="See more, open issues and get answers in our Github repository">
+                <i class="fa fa-github"></i>
               </a>
             </li>
         </ul>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -10,7 +10,6 @@
 
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/default-theme.css" | prepend: site.baseurl}}" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css" />
 
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
@@ -20,7 +19,7 @@
 
   </head>
 
-  <body>
+  <body class="{% body_class %}">
     {% include header.html %}
 
     {{ content }}
@@ -29,12 +28,13 @@
     {% include footer.html %}
 {% endif %}
 
+    <script src="https://use.fonticons.com/dff9b562.js"></script> <!-- replace font-awesome -->
     <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gsap/1.11.8/TweenMax.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gsap/1.11.8/TimelineMax.min.js"></script>
     <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/ScrollMagic.min.js"></script>
     <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/animation.gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 {% if site.env == 'development' %}
     <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
     <script src="http://localhost:35730/livereload.js"></script>

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
@@ -22,6 +22,9 @@
   </div>
 </div>
 
+
+{% contentfor site-footer %}
+
 {% if site.env == 'development' %}
   <script src="http://localhost:8080/instantsearch.js"></script>
   <script type="text/javascript">
@@ -37,3 +40,5 @@
 {% endif %}
 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5/clipboard.min.js"></script>
 <script src="{{ "/js/doc.js" | prepend: site.baseurl }}"></script>
+
+{% endcontentfor %}
diff --git a/docs/_plugins/body_class_tag.rb b/docs/_plugins/body_class_tag.rb
@@ -0,0 +1,36 @@
+module Jekyll
+  class BodyClassTag < Liquid::Tag
+
+    def generate_body_class(prefix, id)
+      id = id.gsub(/\.\w*?$/, '').gsub(/[-\/]/, '_').gsub(/^_/, '') # Remove extension from url, replace '-' and '/' with underscore, Remove leading '_'
+
+      case prefix
+      when "class"
+        prefix = ""
+      else
+        prefix = "#{prefix}_"
+      end
+
+      "#{prefix}#{id}"
+    end
+
+    def render(context)
+      page = context.environments.first["page"]
+      classes = []
+
+      %w[class url categories tags layout].each do |prop|
+        next unless page.has_key?(prop)
+        if page[prop].kind_of?(Array)
+          page[prop].each { |proper| classes.push generate_body_class(prop, proper) }
+        else
+          classes.push generate_body_class(prop, page[prop])
+        end
+      end
+
+      classes.join(" ")
+    end
+
+  end
+
+  Liquid::Template.register_tag('body_class', BodyClassTag)
+end
diff --git a/docs/css/_animation.sass b/docs/css/_animation.sass
@@ -0,0 +1,33 @@
+//keyframes
+
+@keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+@keyframes fadeInUp
+  0%
+    opacity: 0
+    transform: translateY(20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes arrow
+  0%
+    opacity: 0
+    transform: translateY(-16px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes dash
+  100%
+    stroke-dashoffset: 700
diff --git a/docs/css/_base.sass b/docs/css/_base.sass
@@ -14,3 +14,7 @@ $community-color: #674492
 $success-color: #58D158
 $gray-light: #F3F3F3
 $dark-blue: #0D1D30
+
+$secondary-color: green
+
+$navbar-height: 60px
diff --git a/docs/css/_bootstrap.scss b/docs/css/_bootstrap.scss
@@ -10,46 +10,46 @@
 
 // Reset and dependencies
 @import "bootstrap/normalize";
-@import "bootstrap/print";
-@import "bootstrap/glyphicons";
+// @import "bootstrap/print";
+// @import "bootstrap/glyphicons";
 
 // Core CSS
 @import "bootstrap/scaffolding";
 @import "bootstrap/type";
 @import "bootstrap/code";
 @import "bootstrap/grid";
-@import "bootstrap/tables";
+// @import "bootstrap/tables";
 @import "bootstrap/forms";
 @import "bootstrap/buttons";
 
 // Components
-@import "bootstrap/component-animations";
+// @import "bootstrap/component-animations";
 @import "bootstrap/dropdowns";
 @import "bootstrap/button-groups";
 @import "bootstrap/input-groups";
 @import "bootstrap/navs";
 @import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/labels";
-@import "bootstrap/badges";
-@import "bootstrap/jumbotron";
-@import "bootstrap/thumbnails";
-@import "bootstrap/alerts";
-@import "bootstrap/progress-bars";
-@import "bootstrap/media";
-@import "bootstrap/list-group";
-@import "bootstrap/panels";
-@import "bootstrap/responsive-embed";
-@import "bootstrap/wells";
-@import "bootstrap/close";
+// @import "bootstrap/breadcrumbs";
+// @import "bootstrap/pagination";
+// @import "bootstrap/pager";
+// @import "bootstrap/labels";
+// @import "bootstrap/badges";
+// @import "bootstrap/jumbotron";
+// @import "bootstrap/thumbnails";
+// @import "bootstrap/alerts";
+// @import "bootstrap/progress-bars";
+// @import "bootstrap/media";
+// @import "bootstrap/list-group";
+// @import "bootstrap/panels";
+// @import "bootstrap/responsive-embed";
+// @import "bootstrap/wells";
+// @import "bootstrap/close";
 
 // Components w/ JavaScript
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/carousel";
+// @import "bootstrap/modals";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popovers";
+// @import "bootstrap/carousel";
 
 // Utility classes
 @import "bootstrap/utilities";

diff --git a/docs/css/_documentation.sass b/docs/css/_documentation.sass
@@ -151,6 +151,7 @@
 
 .widget-icon
   margin: 4px 20px 20px 0
+  height: 60px
 
 .html-container
   border: none

diff --git a/docs/css/_header.sass b/docs/css/_header.sass
@@ -5,10 +5,25 @@ header.site-header
   z-index: 99
   nav.navbar
     margin-bottom: 0
+    background-color: #0B1724
+    border-radius: 0
+    border: none
     .navbar-brand
       font-weight: 600
+      color: white !important
+    .navbar-nav
+      > li > a
+        padding-bottom: 0
+      > .active > a
+        color: #1D96C7 !important
+        background-color: transparent
     .fa-github
-      font-size: 160%
+      font-size: 2em
+      width: 30px
+      display: inline-block
+      text-align: center
+      position: relative
+      top: -4px
 
 .main-content
-  margin-top: $navbar-height
+  margin-top: $navbar-height
diff --git a/docs/css/_helper.sass b/docs/css/_helper.sass
@@ -1,5 +1,3 @@
-$secondary-color: green
-
 //spacer
 @mixin spacer
   width: 100%