add search

Author: tdreyno

Gemfile

@@ -4,4 +4,5 @@ gem "redcarpet"
 gem "builder"
 gem "susy"
 gem "middleman", "3.1.0.rc.4"
-gem "middleman-fjords"
+gem "middleman-fjords"
+gem "middleman-livereload"

config.rb

@@ -2,6 +2,8 @@
 
 set :layout, :article
 
+activate :livereload
+
 activate :directory_indexes
 
 set :markdown, :tables => true, :autolink => true, :gh_blockcode => true, :fenced_code_blocks => true, :with_toc_data => true

source/advanced/file-size-optimization.html.markdown

@@ -46,23 +46,7 @@ Then configure your server to serve those files. If you use Nginx, check out [th
 
 ## Compressing Images
 
-If you also want to compress images on build, you can use the [Middleman Smusher extension] to dramatically shrink images using [Yahoo's Smush.it tool], though it's probably a better idea to compress your images once using a tool like [PNGGauntlet](http://pnggauntlet.com) or [ImageOptim](http://imageoptim.pornel.net) rather than every time you build your site.
-
-To install:
-
-``` bash
-gem install middleman-smusher
-```
-
-Then activate in your `config.rb`:
-
-``` ruby
-configure :build do
-  activate :smusher
-end
-```
-
-It's slightly harder to set up, but [`middleman-imageoptim`](https://github.com/plasticine/middleman-imageoptim) is faster and compresses better than `middleman-smusher`, and it doesn't require sending your images to a web service.
+If you also want to compress images on build, try [`middleman-imageoptim`](https://github.com/plasticine/middleman-imageoptim).
 
 ## Minify HTML
 
@@ -79,6 +63,3 @@ activate :minify_html
 ```
 
 You should notice whilst view-source:'ing that your HTML is now being minified.
-
-[Middleman Smusher extension]: https://github.com/middleman/middleman-smusher
-[Yahoo's Smush.it tool]: http://www.smushit.com/ysmush.it/

source/index.html.erb

@@ -10,6 +10,30 @@ layout: layout
 <section role="main">
   <div id="install">
     <p><b class="console">$ gem install middleman</b></p>
+
+    <div id="search">
+      <form>
+        <input type="text" id="st-search-input" class="st-search-input" placeholder="Search the documentation" />
+      </form>
+      <div id="st-results-container"></div>
+      <script type="text/javascript">
+        var Swiftype = window.Swiftype || {};
+        (function() {
+          Swiftype.key = 'q3qjGN5LmX2oq6w1V47y';
+          Swiftype.inputElement = '#st-search-input';
+          Swiftype.resultContainingElement = '#st-results-container';
+          Swiftype.attachElement = '#st-search-input';
+          Swiftype.renderStyle = "overlay";
+
+          var script = document.createElement('script');
+          script.type = 'text/javascript';
+          script.async = true;
+          script.src = "//swiftype.com/embed.js";
+          var entry = document.getElementsByTagName('script')[0];
+          entry.parentNode.insertBefore(script, entry);
+        }());
+      </script>
+    </div>
   </div>
 
   <div class="container">

source/layouts/article.erb

@@ -3,6 +3,30 @@
     <div class="container">
       <h1><%= link_to image_tag("mm-blue-w-text.svg", :width => 225, :height => 225, :alt => "Middleman"), "/", { :class => 'logo' } %></h1>
       <p class="console">$ gem install middleman</p>
+      <div id="search">
+        <form>
+          <input type="text" id="st-search-input" class="st-search-input" placeholder="Search the documentation" />
+        </form>
+        <div id="st-results-container"></div>
+        <script type="text/javascript">
+          var Swiftype = window.Swiftype || {};
+          (function() {
+            Swiftype.key = 'q3qjGN5LmX2oq6w1V47y';
+            Swiftype.inputElement = '#st-search-input';
+            Swiftype.resultContainingElement = '#st-results-container';
+            Swiftype.attachElement = '#st-search-input';
+            Swiftype.renderStyle = "overlay";
+
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.async = true;
+            script.src = "//swiftype.com/embed.js";
+            var entry = document.getElementsByTagName('script')[0];
+            entry.parentNode.insertBefore(script, entry);
+          }());
+        </script>
+      </div>
+
       <a class="toc-nav-link icon-arrow-down" href="#toc">Menu</a>
     </div>
   </header>

source/stylesheets/_articles.scss

@@ -9,7 +9,7 @@
     bottom: -35px;
   }
   p {
-    @include span-columns(17);
+    @include span-columns(10);
     @include push(6);
     font-family: $display-monospace-font-family;
     margin-top: 14px;
@@ -22,6 +22,11 @@
   .toc-nav-link {
     display: none;
   }
+  #search {
+    @include span-columns(7);
+    text-align: right;
+    margin-top: 9px;
+  }
 }
 
 #toc {

source/stylesheets/_mediaqueries.scss

@@ -68,6 +68,9 @@
     b {
       font-size: 24px;
     }
+    #search {
+      display: none;
+    }
   }
   .grid {
     .toc-block {
@@ -92,7 +95,11 @@
 @media screen and ( max-width: $two-column ) {
   #header {
     p {
-      text-align: right;
+      display: none;
+    }
+    #search {
+      @include span-columns(24);
+      margin: 9px 0;
     }
   }
   #toc {
@@ -124,7 +131,7 @@
         }
       }
     }
-    p {
+    p, #search {
       display: none;
     }
     .toc-nav-link {