search widget

public/_includes/_docs-nav.jade

@@ -1,6 +1,7 @@
 nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
-  .side-nav-search
-    input(type="search" placeholder="SEARCH DOCS...")
+  header.side-nav-search
+    form
+      input(type="search" id="search-io" placeholder="SEARCH DOCS...")
 
   ul.side-nav-primary
     if current.path[2]

public/_includes/_scripts-include.jade

@@ -21,3 +21,12 @@ script.
 
   ga('create', 'UA-8594346-15', 'auto');
   ga('send', 'pageview')
+
+<!-- SWIFTYPE -->
+script.
+  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
+  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
+  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
+
+  _st('install','VsuU7kH5Hnnj9tfyNvfK');

public/_includes/_search-box.jade

@@ -1,12 +0,0 @@
-gcse:search(type="search" placeholder="SEARCH DOCS...")
-script
-  (function() {
-    var cx = '008420607850170258613:8o7h40u0v68';
-    var gcse = document.createElement('script');
-    gcse.type = 'text/javascript';
-    gcse.async = true;
-    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
-        '//www.google.com/cse/cse.js?cx=' + cx;
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(gcse, s);
-  })();

public/resources/css/module/_side-nav.scss

@@ -1,3 +1,9 @@
+.swiftype-widget {
+  .autocomplete {
+    left: $unit !important;
+  }
+}
+
 .side-nav {
   background: $mist;
   box-shadow: 3px 0px 6px rgba($coal, .3);
@@ -10,9 +16,10 @@
 
   .side-nav-search {
     background: $tin;
-    padding: 0px ($unit * 1);
+    padding: $unit;
     height: $unit * 6;
     border-bottom: 1px solid $fog;
+    position: relative;
 
     input {
       border: none;
@@ -21,7 +28,7 @@
       box-sizing: border-box;
       height: 30px;
       padding: 0px $unit;
-      margin: $unit 0px;
+      margin: 0px;
     }
   }