Add stylesheets, javascript, and html for documentation generation

Gemfile

@@ -4,12 +4,18 @@ source 'http://rubygems.org'
 
 gem "middleman", "~>3.1.5"
 
+# For syntax highlighting
+gem "middleman-syntax"
+
 # Plugin for middleman to generate Github pages
 gem 'middleman-gh-pages'
 
 # Live-reloading plugin
 gem "middleman-livereload", "~> 3.1.0"
 
+gem "redcarpet"
+gem "github-linguist"
+
 # For faster file watcher updates on Windows:
 gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
 

Gemfile.lock

@@ -4,6 +4,7 @@ GEM
     activesupport (3.2.14)
       i18n (~> 0.6, >= 0.6.4)
       multi_json (~> 1.0)
+    charlock_holmes (0.6.9.4)
     chunky_png (1.2.8)
     coffee-script (2.2.0)
       coffee-script-source
@@ -16,11 +17,17 @@ GEM
     em-websocket (0.5.0)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.5.3)
+    escape_utils (0.3.2)
     eventmachine (1.0.3)
     execjs (1.4.0)
       multi_json (~> 1.0)
     ffi (1.9.0)
     fssm (0.2.10)
+    github-linguist (2.9.4)
+      charlock_holmes (~> 0.6.6)
+      escape_utils (~> 0.3.1)
+      mime-types (~> 1.19)
+      pygments.rb (~> 0.5.2)
     haml (4.0.3)
       tilt
     hike (1.2.3)
@@ -65,7 +72,15 @@ GEM
       sprockets (~> 2.1)
       sprockets-helpers (~> 1.0.0)
       sprockets-sass (~> 1.0.0)
+    middleman-syntax (1.2.1)
+      middleman-core (~> 3.0)
+      rouge (~> 0.3.0)
+    mime-types (1.25)
     multi_json (1.8.0)
+    posix-spawn (0.3.6)
+    pygments.rb (0.5.2)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
     rack (1.5.2)
     rack-livereload (0.3.15)
       rack
@@ -77,6 +92,9 @@ GEM
       ffi (>= 0.5.0)
     rb-kqueue (0.2.0)
       ffi (>= 0.5.0)
+    redcarpet (3.0.0)
+    rouge (0.3.10)
+      thor
     ruby18_source_location (0.2)
     sass (3.2.10)
     sprockets (2.10.0)
@@ -94,13 +112,17 @@ GEM
     uglifier (2.1.2)
       execjs (>= 0.3.0)
       multi_json (~> 1.0, >= 1.0.2)
+    yajl-ruby (1.1.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  github-linguist
   middleman (~> 3.1.5)
   middleman-gh-pages
   middleman-livereload (~> 3.1.0)
+  middleman-syntax
+  redcarpet
   ruby18_source_location
   wdm (~> 0.1.0)

config.rb

@@ -40,9 +40,6 @@
 
 # Methods defined in the helpers block are available in templates
 # helpers do
-#   def some_helper
-#     "Helping"
-#   end
 # end
 
 set :css_dir, 'stylesheets'
@@ -51,13 +48,20 @@ set :js_dir, 'javascripts'
 
 set :images_dir, 'images'
 
+set :markdown_engine, :redcarpet
+
+set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :with_toc_data => true, :tables => true
+
+# Activate the syntax highlighter
+activate :syntax
+
 # Build-specific configuration
 configure :build do
   # For example, change the Compass output style for deployment
-  # activate :minify_css
+  activate :minify_css
 
   # Minify Javascript on build
-  # activate :minify_javascript
+  activate :minify_javascript
 
   # Enable cache buster
   # activate :asset_hash

source/index.html.erb

----
-title: Welcome to Middleman
----
-
-<div class="welcome">
-  <h1>Middleman is Watching</h1>
-  <p class="doc">
-    <%= link_to "Read Online Documentation", "http://middlemanapp.com/" %>
-  </p><!-- .doc -->
-</div><!-- .welcome -->
\ No newline at end of file

source/javascripts/all.js

+//= require './jquery_ui'
 //= require_tree .
\ No newline at end of file

source/javascripts/jquery_ui.js

+/*! jQuery UI - v1.10.3 - 2013-09-16
+* http://jqueryui.com
+* Includes: jquery.ui.widget.js
+* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
+
+(function(e,t){var i=0,s=Array.prototype.slice,a=e.cleanData;e.cleanData=function(t){for(var i,s=0;null!=(i=t[s]);s++)try{e(i).triggerHandler("remove")}catch(n){}a(t)},e.widget=function(i,s,a){var n,r,o,h,l={},u=i.split(".")[0];i=i.split(".")[1],n=u+"-"+i,a||(a=s,s=e.Widget),e.expr[":"][n.toLowerCase()]=function(t){return!!e.data(t,n)},e[u]=e[u]||{},r=e[u][i],o=e[u][i]=function(e,i){return this._createWidget?(arguments.length&&this._createWidget(e,i),t):new o(e,i)},e.extend(o,r,{version:a.version,_proto:e.extend({},a),_childConstructors:[]}),h=new s,h.options=e.widget.extend({},h.options),e.each(a,function(i,a){return e.isFunction(a)?(l[i]=function(){var e=function(){return s.prototype[i].apply(this,arguments)},t=function(e){return s.prototype[i].apply(this,e)};return function(){var i,s=this._super,n=this._superApply;return this._super=e,this._superApply=t,i=a.apply(this,arguments),this._super=s,this._superApply=n,i}}(),t):(l[i]=a,t)}),o.prototype=e.widget.extend(h,{widgetEventPrefix:r?h.widgetEventPrefix:i},l,{constructor:o,namespace:u,widgetName:i,widgetFullName:n}),r?(e.each(r._childConstructors,function(t,i){var s=i.prototype;e.widget(s.namespace+"."+s.widgetName,o,i._proto)}),delete r._childConstructors):s._childConstructors.push(o),e.widget.bridge(i,o)},e.widget.extend=function(i){for(var a,n,r=s.call(arguments,1),o=0,h=r.length;h>o;o++)for(a in r[o])n=r[o][a],r[o].hasOwnProperty(a)&&n!==t&&(i[a]=e.isPlainObject(n)?e.isPlainObject(i[a])?e.widget.extend({},i[a],n):e.widget.extend({},n):n);return i},e.widget.bridge=function(i,a){var n=a.prototype.widgetFullName||i;e.fn[i]=function(r){var o="string"==typeof r,h=s.call(arguments,1),l=this;return r=!o&&h.length?e.widget.extend.apply(null,[r].concat(h)):r,o?this.each(function(){var s,a=e.data(this,n);return a?e.isFunction(a[r])&&"_"!==r.charAt(0)?(s=a[r].apply(a,h),s!==a&&s!==t?(l=s&&s.jquery?l.pushStack(s.get()):s,!1):t):e.error("no such method '"+r+"' for "+i+" widget instance"):e.error("cannot call methods on "+i+" prior to initialization; "+"attempted to call method '"+r+"'")}):this.each(function(){var t=e.data(this,n);t?t.option(r||{})._init():e.data(this,n,new a(r,this))}),l}},e.Widget=function(){},e.Widget._childConstructors=[],e.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"<div>",options:{disabled:!1,create:null},_createWidget:function(t,s){s=e(s||this.defaultElement||this)[0],this.element=e(s),this.uuid=i++,this.eventNamespace="."+this.widgetName+this.uuid,this.options=e.widget.extend({},this.options,this._getCreateOptions(),t),this.bindings=e(),this.hoverable=e(),this.focusable=e(),s!==this&&(e.data(s,this.widgetFullName,this),this._on(!0,this.element,{remove:function(e){e.target===s&&this.destroy()}}),this.document=e(s.style?s.ownerDocument:s.document||s),this.window=e(this.document[0].defaultView||this.document[0].parentWindow)),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:e.noop,_getCreateEventData:e.noop,_create:e.noop,_init:e.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(e.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled "+"ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:e.noop,widget:function(){return this.element},option:function(i,s){var a,n,r,o=i;if(0===arguments.length)return e.widget.extend({},this.options);if("string"==typeof i)if(o={},a=i.split("."),i=a.shift(),a.length){for(n=o[i]=e.widget.extend({},this.options[i]),r=0;a.length-1>r;r++)n[a[r]]=n[a[r]]||{},n=n[a[r]];if(i=a.pop(),s===t)return n[i]===t?null:n[i];n[i]=s}else{if(s===t)return this.options[i]===t?null:this.options[i];o[i]=s}return this._setOptions(o),this},_setOptions:function(e){var t;for(t in e)this._setOption(t,e[t]);return this},_setOption:function(e,t){return this.options[e]=t,"disabled"===e&&(this.widget().toggleClass(this.widgetFullName+"-disabled ui-state-disabled",!!t).attr("aria-disabled",t),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")),this},enable:function(){return this._setOption("disabled",!1)},disable:function(){return this._setOption("disabled",!0)},_on:function(i,s,a){var n,r=this;"boolean"!=typeof i&&(a=s,s=i,i=!1),a?(s=n=e(s),this.bindings=this.bindings.add(s)):(a=s,s=this.element,n=this.widget()),e.each(a,function(a,o){function h(){return i||r.options.disabled!==!0&&!e(this).hasClass("ui-state-disabled")?("string"==typeof o?r[o]:o).apply(r,arguments):t}"string"!=typeof o&&(h.guid=o.guid=o.guid||h.guid||e.guid++);var l=a.match(/^(\w+)\s*(.*)$/),u=l[1]+r.eventNamespace,c=l[2];c?n.delegate(c,u,h):s.bind(u,h)})},_off:function(e,t){t=(t||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,e.unbind(t).undelegate(t)},_delay:function(e,t){function i(){return("string"==typeof e?s[e]:e).apply(s,arguments)}var s=this;return setTimeout(i,t||0)},_hoverable:function(t){this.hoverable=this.hoverable.add(t),this._on(t,{mouseenter:function(t){e(t.currentTarget).addClass("ui-state-hover")},mouseleave:function(t){e(t.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(t){this.focusable=this.focusable.add(t),this._on(t,{focusin:function(t){e(t.currentTarget).addClass("ui-state-focus")},focusout:function(t){e(t.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(t,i,s){var a,n,r=this.options[t];if(s=s||{},i=e.Event(i),i.type=(t===this.widgetEventPrefix?t:this.widgetEventPrefix+t).toLowerCase(),i.target=this.element[0],n=i.originalEvent)for(a in n)a in i||(i[a]=n[a]);return this.element.trigger(i,s),!(e.isFunction(r)&&r.apply(this.element[0],[i].concat(s))===!1||i.isDefaultPrevented())}},e.each({show:"fadeIn",hide:"fadeOut"},function(t,i){e.Widget.prototype["_"+t]=function(s,a,n){"string"==typeof a&&(a={effect:a});var r,o=a?a===!0||"number"==typeof a?i:a.effect||i:t;a=a||{},"number"==typeof a&&(a={duration:a}),r=!e.isEmptyObject(a),a.complete=n,a.delay&&s.delay(a.delay),r&&e.effects&&e.effects.effect[o]?s[t](a):o!==t&&s[o]?s[o](a.duration,a.easing,n):s.queue(function(i){e(this)[t](),n&&n.call(s[0]),i()})}})})(jQuery);
\ No newline at end of file

source/javascripts/lang_selector.js

+function activateLanguage(language) {
+  $("#lang-selector a").removeClass('active');
+  $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
+  $(".highlight").hide();
+  $(".highlight." + language).show();
+  $(".highlight.text").show(); // always show text
+}
+
+function setupLanguages(languages) {
+  currentLanguage = languages[0];
+
+  activateLanguage(languages[0]);
+
+  $("#lang-selector a").bind("click", function() {
+    activateLanguage($(this).data("language-name"));
+    return false;
+  });
+
+}

source/layouts/layout.erb

@@ -2,18 +2,59 @@
 <html>
   <head>
     <meta charset="utf-8">
-    
+
     <!-- Always force latest IE rendering engine or request Chrome Frame -->
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    
+
     <!-- Use title if it's in the page YAML frontmatter -->
-    <title><%= current_page.data.title || "The Middleman" %></title>
-    
-    <%= stylesheet_link_tag "normalize", "all" %>
+    <title><%= current_page.data.title || "API Documentation" %></title>
+
+    <%= stylesheet_link_tag "normalize", "all", "syntax" %>
+    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <%= javascript_include_tag  "all" %>
+
+    <script>
+      $(function() {
+        $("#toc").tocify({
+          selectors: "h1,h2",
+          extendPage: false,
+          theme: "none",
+          smoothScroll: false,
+          showEffectSpeed: 180,
+          hideEffectSpeed: 180,
+          ignoreSelector: ".toc-ignore",
+          hashGenerator: 'pretty',
+          highlightOffset: 60,
+          scrollHistory: true
+        });
+        setupLanguages([
+          <% current_page.data.languages.each do |lang| %>
+            ['<%= lang %>'],
+          <% end %>
+        ]);
+      });
+    </script>
   </head>
-  
+
   <body class="<%= page_classes %>">
-    <%= yield %>
+    <div id="toc">
+      <div class="toc-bottom">
+        <%= current_page.data.external_links %>
+      </div>
+      <!-- table of contents will be inserted here -->
+    </div>
+    <div class="page-wrapper">
+      <div class="content">
+        <h1 id="bigtitle" class="bigtitle toc-ignore"><%= current_page.data.title || "API Documentation" %></h1>
+        <%= yield %>
+      </div>
+      <div class="dark-box">
+        <div id="lang-selector">
+          <% current_page.data.languages.each do |lang| %>
+            <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
+          <% end %>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
\ No newline at end of file

source/stylesheets/all.css

-@charset "utf-8";
-
-body {
-  background: #d4d4d4 url("../images/background.png");
-  text-align: center;
-  font-family: sans-serif; }
-
-h1 {
-  color: rgba(0, 0, 0, .3);
-  font-weight: bold;
-  font-size: 32px;
-  letter-spacing: -1px;
-  text-transform: uppercase;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-  background: url("../images/middleman.png") no-repeat center 100px;
-  padding: 350px 0 10px;
-  margin: 0; }
-
-.doc {
-  font-size: 14px;
-  margin: 0; }
-  .doc:before,
-  .doc:after {
-    opacity: .2;
-    padding: 6px;
-    font-style: normal;
-    position: relative;
-    content: "•"; }
-  .doc a {
-    color: rgba(0, 0, 0, 0.3); }
-    .doc a:hover {
-      color: #666; }
-
-.welcome {
-  -webkit-animation-name: welcome;
-  -webkit-animation-duration: .9s; }
-
-@-webkit-keyframes welcome {
-  from {
-    -webkit-transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-   -webkit-transform: scale(0);
-   opacity: 0;
-  }
-  82.5% {
-    -webkit-transform: scale(1.03);
-    -webkit-animation-timing-function: ease-out;
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: scale(1);
-  }
-}
\ No newline at end of file

source/stylesheets/all.css.scss

+@charset "utf-8";
+@import 'compass';
+@import 'variables';
+
+/*
+ * jquery.tocify.css 1.7.0
+ * Author: @gregfranko
+ */
+
+
+html, body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: $main-text-color;
+  padding: 0;
+  margin: 0;
+}
+
+.page-wrapper {
+  margin-left: $nav-width;
+  min-width: 700px;
+  position: relative;
+  z-index: 10;
+  background-color: #fff;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  .dark-box {
+    width: 50%;
+    background: $examples-bg;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  #lang-selector {
+    position: fixed;
+    width: 100%;
+    z-index: 50;
+    font-weight: bold;
+    background-color: $lang-select-bg;
+    border-bottom: 1px solid #000;
+    a {
+      background-color: $lang-select-bg;
+      display: block;
+      float:left;
+      color: $lang-select-text;
+      text-decoration: none;
+      padding: 0 10px;
+      border-right: 1px solid $lang-select-border;
+      line-height: 30px;
+
+      &:hover {
+        background-color: $lang-select-hover-bg;
+      }
+
+      &:active, &.active {
+        background-color: $examples-bg;
+        border-top: 1px solid $examples-bg;
+        border-right-color: $examples-bg;
+        margin-bottom: -1px;
+        position: relative;
+        z-index: 70;
+      }
+    }
+
+    &:after {
+      content: '';
+      clear: both;
+      display: block;
+    }
+  }
+}
+
+.content {
+  // to place content above the dark box
+  position: relative;
+  z-index: 30;
+
+  pre, code {
+    font-family: Monaco, "Courier New", monospace;
+    font-size: 12px;
+  }
+
+  code {
+    background-color: #ebf2f4;
+    border-radius: 5px;
+    padding: 3px;
+  }
+
+  &>h1, &>h2, &>h3, &>p, &>table {
+    margin-right: 50%;
+    @include box-sizing(border-box);
+    padding: 0 $main-padding;
+    display: block;
+  }
+
+  &>h1, &>h2, &>div { // the div is the tocify hidden div for placeholding stuff
+    clear:both;
+  }
+
+  th,td {
+    text-align: left;
+    padding: 10px;
+    border-bottom: 1px solid $line-color;
+    vertical-align: top;
+    line-height: 1.6;
+  }
+
+  th {
+    padding-top: 0; // so that there isn't an awk space above tables
+  }
+
+  h1#bigtitle {
+    margin-top: 0.5em;
+    font-size: 35px;
+  }
+
+  h1 {
+    font-size: 30px;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  h2 {
+    font-size: 20px;
+    margin-top: 2em;
+    margin-bottom: 1em;
+  }
+
+  h3 {
+    font-size: 15px;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+  h1,h2,h3 {
+    font-weight: bold;
+  }
+
+  p {
+    line-height: 1.6;
+  }
+
+  pre, blockquote {
+    float:right;
+    width: 50%;
+    clear:right;
+    @include box-sizing(border-box);
+    padding: 0 $main-padding;
+    margin: 0;
+    color: #fff;
+  }
+
+  pre {
+    padding: $main-padding/2 $main-padding;
+    background-color: $code-bg;
+    @include fancy-inset-border-top;
+    @include fancy-inset-border-bottom;
+  }
+}
+
+/* The Table of Contents container element */
+.tocify {
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: $nav-width;
+  background-color: $nav-bg;
+  font-size: 13px;
+}
+
+.tocify-item>a {
+  padding: 0 $nav-padding 0 $nav-padding;
+  display:block;
+  overflow-x:hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  @include text-shadow(0px -1px 1px rgba(0,0,0,0.3));
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+.tocify ul, .tocify li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 28px;
+  @include transition-property('background-color');
+  @include transition-timing-function('linear');
+  @include transition-duration(230ms);
+}
+
+.tocify li {
+  background-color: rgba(#1d82c6,0);
+  color: #fff;
+}
+
+.tocify .tocify-focus {
+  background-color: #1d82c6;
+  @include box-shadow(0px 1px 0px #000);
+}
+
+/* Top level header elements */
+.tocify-header {
+}
+
+/* Top level subheader elements.  These are the first nested items underneath a header element. */
+.tocify-subheader {
+    display: none;
+    background-color: $nav-subitem-bg;
+    .tocify-item>a {
+      padding-left: $nav-padding + $nav-indent;
+      font-size: 12px;
+    }
+    &>li:first-child {
+      @include fancy-inset-border-top;
+    }
+
+    &>li:last-child {
+      @include fancy-inset-border-bottom;
+    }
+}
+
+/* Makes the font smaller for all subheader elements. */
+.tocify-subheader li {
+}
+

source/stylesheets/syntax.css.erb

+<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>
\ No newline at end of file

source/stylesheets/variables.scss

+// width of the navbar
+$nav-width: 230px;
+
+// default padding of the navbar
+$nav-padding: 20px;
+
+// background colors
+$nav-bg: #393939;
+$examples-bg: #393939;
+$code-bg: #262626;
+$nav-subitem-bg: #262626;
+$lang-select-bg: #1d82c6;
+$lang-select-hover-bg: #175fa1;
+
+// border colors
+$lang-select-border: #113a6f;
+
+// text colors
+// $nav-bg: #393939;
+// $examples-bg: #393939;
+// $code-bg: #262626;
+// $nav-subitem-bg: #262626;
+$lang-select-text: #fff;
+
+// indentation amount for sub-items
+$nav-indent: 10px;
+
+// padding to the left of the main content, to the right of the navbar
+$main-padding: 40px;
+
+// primary text color
+$main-text-color: #333;
+
+// currently just the color of table borders
+$line-color: #cfcfcf;
+
+
+// these are for the code blocks on the right, and the
+// subheader navbar thing that swoops in
+@mixin fancy-inset-border-top {
+  border-top: 1px solid #000;
+}
+
+@mixin fancy-inset-border-bottom {
+  border-bottom: 1px solid #404040;
+  box-shadow: none;
+}