feat(docs): new community header / footer (#114)

algolia · Jun 23, 2016 · af76d31 · af76d31
1 parent 2f2508c
commit af76d31
Show file tree

Hide file tree

Showing 20 changed files with 1,385 additions and 338 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Algolia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -1,10 +1,33 @@
-<footer class="site-footer">
-  <p>
-    Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com/?utm_medium=social-owned&utm_source=documentation+search&utm_campaign=homepage"><img src="{{site.baseurl}}/img/logo-algolia-dark.png" alt="Algolia" height="20"></a>
-  </p>
-  <div class="spacer50"></div>
-  <div class="m400 m-l-r-auto">
-    {% include newsletter-mc.html %}
+<section class='ac-footer'>
+  <div class='ac-footer-container'>
+    <p class='ac-footer-links'>
+      Code licensed under
+      <a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/blob/master/LICENSE'>MIT</a>
+      <br>
+      <a class='ac-footer-link-item' href='https://github.com/algolia/docsearch'>Github</a>
+      <a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/issues'>Issues</a>
+      <a class='ac-footer-link-item' href='https://www.algolia.com/policies/privacy'>Privacy policy</a>
+    </p>
   </div>
-  <div class="spacer80"></div>
-</footer>
+  <div class='ac-footer-container ac-footer-brand'>
+    <p>This project is part of</p>
+    <img class='ac-footer-brand-icon' src='http://res.cloudinary.com/hilnmyskv/image/upload/logo-community.svg'>
+    <figure>
+      <img class='ac-footer-brand-logo' src='http://res.cloudinary.com/hilnmyskv/image/upload/v1463417234/algolia-community_n6tixd.svg'>
+      <figcaption>Algolia Community</figcaption>
+    </figure>
+    <a class='ac-footer-btn ac-footer-btn-cta' href='https://community.algolia.com/'>See More</a>
+    <span class='ac-icon ac-icon-love-dark'></span>
+  </div>
+  <p class='ac-footer-version'>&nbsp;</p>
+  <div class='ac-footer-actions'>
+    <div class='footer-container'>
+      <p>Build unique search experiences with Algolia</p>
+      <a class='ac-footer-btn ac-footer-btn-ghost-grey' href='https://www.algolia.com/why?utm_medium=social-owned&amp;utm_source=places%20website&amp;utm_campaign=homepage&amp;utm_term=why'>
+        See Why
+        <span class='ac-icon-triangle'></span>
+      </a>
+      <a class='ac-footer-btn ac-footer-btn-ghost-pink' href='https://www.algolia.com/users/sign_up?utm_medium=social-owned&amp;utm_source=places%20website&amp;utm_campaign=homepage&amp;utm_term=get_started'>Get Started For Free</a>
+    </div>
+  </div>
+</section>
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -1,34 +1,82 @@
-<header class="site-header">
-  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
-    <div class="container-fluid">
-      <div class="navbar-header">
-        <a class="logo-community" href="https://community.algolia.com/">
-          <img src="https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg" width="150" alt="Algolia Community" />
-        </a>
-        <a class="project-title" href="{{ site.baseurl }}/">
-          DocSearch
-        </a>
-      </div>
-      <div class="navbar-collapse collapse">
-        <ul class="nav navbar-nav navbar-right">
-          <li class="searchbar-wrapper">
-            <div class="navbar-form">
-              <div class="form-group">
-                {% include searchbar.html %}
-              </div>
-            </div>
-          </li>
-          {% 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 class='ac-nav'>
+  <div class='ac-nav-container'>
+    <div class='ac-nav-brand'>
+      <a class='ac-logo' href='https://community.algolia.com/' title='Algolia Community'>
+        <img alt='Algolia Community' class='ac-logo__lg' src='https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg' width='150'>
+        <img alt='Algolia Community' class='ac-logo__sm' src='https://res.cloudinary.com/hilnmyskv/image/upload/v1461180081/logo-community-sm.svg'>
+      </a>
+      <span class='ac-nav-brand-breadcrumb'></span>
+      <a class='ac-nav-brand-title' href='./' title='Home'>DocSearch</a>
+    </div>
+    <div class='ac-nav-menu'>
+      <div class='ac-nav-searchbox'>
+        <form class='searchbox' id='docsearch-form' novalidate='novalidate' onsubmit='return false;' style='visibility:hidden;height:0'>
+          <div class='searchbox__wrapper' role='search'>
+            <input autocomplete='off' class='searchbox__input' id='docsearch' name='search' placeholder='Search in the doc' required='required' type='search'>
+            <button class='searchbox__submit' title='Submit your search query.' type='submit'>
+              <svg aria-label='Search' role='img'>
+                <use xlink:href='#sbx-icon-search-13' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
+              </svg>
+            </button>
+            <button class='searchbox__reset hide' title='Clear the search query.' type='reset'>
+              <svg aria-label='Reset' role='img'>
+                <use xlink:href='#sbx-icon-clear-3' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
+              </svg>
+            </button>
+          </input>
+        </div>
+      </form>
+      <div class='svg-icons' style='height: 0; width: 0; position: absolute; visibility: hidden'>
+        <svg xmlns='http://www.w3.org/2000/svg'>
+          <symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"/></symbol>
+          <symbol id="sbx-icon-search-13" viewBox="0 0 12 12"><path d="M12 11.077c0-.245-.1-.483-.267-.65L9.26 7.955c.584-.843.894-1.853.894-2.877C10.154 2.272 7.882 0 5.077 0S0 2.272 0 5.077s2.272 5.077 5.077 5.077c1.024 0 2.034-.31 2.877-.894l2.474 2.466c.166.173.404.274.65.274.504 0 .922-.418.922-.923zm-3.692-6c0 1.78-1.45 3.23-3.23 3.23-1.782 0-3.232-1.45-3.232-3.23s1.45-3.23 3.23-3.23c1.782 0 3.232 1.45 3.232 3.23z" fill="#FFF" fill-rule="evenodd" opacity="0.85"/></symbol>
+        </svg>
       </div>
     </div>
-  </nav>
-</header>
+    <ul class='ac-nav-menu-list'>
+      {% assign url = page.url %}
+      {% for link in site.navigation %}
+      <li class='ac-nav-menu-list-item {% if url == link.url %}active{% endif %} '>
+        <a data-path="{{ site.baseurl }}{{ link.url }}"  href="{{ site.baseurl }}{{ link.url }}" data-current="{% if url == link.url %}true{% endif %}" title="{{ link.text }}">{{ link.text }}</a>
+      </li>
+      {% endfor %}
+      <li class='ac-nav-menu-list-icon'>
+        <a class='ac-icon' href='https://github.com/algolia/docsearch' title='GitHub repository'>
+          <span class='ac-icon ac-icon-github'></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+</div>
+
+<script type="text/javascript">
+
+    $(function(){
+      $('.searchbox .aa-input').on('change', function() {
+          $('.aa-input').addClass('filled');
+      });
+
+      $('.searchbox .aa-input').on('blur', function() {
+        if ($(this).val().length === 0){
+          $(this).removeClass('filled');
+        }
+      });
+
+      $('.searchbox [type="reset"]').on('click', function() {
+          myDocSearch.autocomplete.autocomplete.setVal('');
+          $('.aa-input').focus();
+          $(this).addClass("hide");
+      });
+    });
+    function updateReset() {
+      var searchbox = $('.aa-input');
+      var reset = $('.searchbox [type="reset"]');
+      reset.removeClass("hide");
+      if (searchbox.val().length === 0){
+        reset.addClass("hide");
+      }
+    }
+
+</script>
diff --git a/docs/_includes/searchbar.html b/docs/_includes/searchbar.html
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -54,6 +54,7 @@
 {% endif %}
 
     <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
+    <script src="{{ "/js/responsiveNavigation.js" | prepend: site.baseurl }}"></script>
 
 {% if site.env == 'development' %}
     <script>
@@ -66,13 +67,14 @@
       var myDocSearch = docsearch({
         apiKey: '25626fae796133dc1e734c6bcaaeac3c',
         indexName: 'docsearch',
-        inputSelector: '.sbx-custom__input',
+        inputSelector: '.searchbox__input',
         autocompleteOptions: {
           debug: false
         }
       });
     </script>
 
+
   {% include marketing.html %}
 
   {% contentblock site-footer %}

diff --git a/docs/css/_base.scss b/docs/css/_base.scss
@@ -1,23 +1,46 @@
+// Algolia's UI-Component :
+// ------------------------
+//
+// VARIABLES
+// ---------
+
+// Breakpoints
+$bp-huge: 2000px;
+$bp-big: 1440px;
+$bp-medium: 960px;
+$bp-small: 768px;
+
+// Dimensions
+$max-container-width: 940px;
+$navigation-height: 50px;
+$margin: 16px;
+$anchor-offset: 100px;
+
+
+// Fonts
+$font-name: "Raleway";
+$font-fallback: Helvetica Neue, helvetica;
+$font-settings:  $font-name, $font-fallback;
+
 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size-base: 16px;
 
 $headings-font-family: "Raleway";
 $headings-font-weight: 300;
 
+// Colors
+$red-pink: #fb366e;
+$steel: #788795;
+$black: #0a1724;
+$white-75: rgba(white, 0.75);
 $brand-primary: #1d96c7;
-//$code-color: #a3b6cb;
-
 $text-color: rgba(black, 0.75);
-
-$anchor-offset: 100px;
 $community-color: #674492;
 $success-color: #58d158;
 $gray-light: #f3f3f3;
 $dark-blue: #0d1d30;
 $light-blue: lighten($dark-blue, 70%);
-
 $secondary-color: green;
 
-$navbar-height: 50px;