",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
diff --git a/source/javascripts/lang_selector.js b/source/javascripts/lang_selector.js
new file mode 100644
index 0000000..e9d5487
--- /dev/null
+++ b/source/javascripts/lang_selector.js
@@ -0,0 +1,19 @@
+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;
+ });
+
+}
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 7bdfeb1..826873c 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -2,18 +2,59 @@
-
+
-
+
-
<%= current_page.data.title || "The Middleman" %>
-
- <%= stylesheet_link_tag "normalize", "all" %>
+
<%= current_page.data.title || "API Documentation" %>
+
+ <%= stylesheet_link_tag "normalize", "all", "syntax" %>
+
<%= javascript_include_tag "all" %>
+
+
-
+
- <%= yield %>
+
+
+ <%= current_page.data.external_links %>
+
+
+
+
+
+
<%= current_page.data.title || "API Documentation" %>
+ <%= yield %>
+
+
+
+ <% current_page.data.languages.each do |lang| %>
+
<%= lang %>
+ <% end %>
+
+
+
\ No newline at end of file
diff --git a/source/stylesheets/all.css b/source/stylesheets/all.css
deleted file mode 100644
index 6ff94cf..0000000
--- a/source/stylesheets/all.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@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
diff --git a/source/stylesheets/all.css.scss b/source/stylesheets/all.css.scss
new file mode 100644
index 0000000..3f419d9
--- /dev/null
+++ b/source/stylesheets/all.css.scss
@@ -0,0 +1,230 @@
+@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 {
+}
+
diff --git a/source/stylesheets/syntax.css.erb b/source/stylesheets/syntax.css.erb
new file mode 100644
index 0000000..c28735c
--- /dev/null
+++ b/source/stylesheets/syntax.css.erb
@@ -0,0 +1 @@
+<%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %>
\ No newline at end of file
diff --git a/source/stylesheets/variables.scss b/source/stylesheets/variables.scss
new file mode 100644
index 0000000..4cc1348
--- /dev/null
+++ b/source/stylesheets/variables.scss
@@ -0,0 +1,47 @@
+// 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;
+}