arbre 1.0.3 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 6c1b05989079a4f6408269a6d5079ac41b957e2c
-  data.tar.gz: 283b93e148607c2d7537ebab5f330b10312f1828
+SHA256:
+  metadata.gz: 0c192e41b4dd924bcd01ee41b718ba77d3bc140bb0cc8da0c98c36f9fc8a4e4c
+  data.tar.gz: 5c25837e426eb3e02937e5bbd6acfb0dc44ed17d693fef7482596b53397f0c4a
 SHA512:
-  metadata.gz: 747b0ee1ddf4ea35e05aaec1d072d96a65edd94d8b63163f791af329baf91a259bd98fba5aaa49e793b5516b357a9378688e59b35e7a0c1b9bb842c892e88ec8
-  data.tar.gz: 4ebf3319eea32ff425ba13ce734a4c5b11cb5a666a0729c6898f1b9fbb0a326e429d5e3e3eeb421155c8c0e0d6a40fd1b386bfe52a2abf99ecc55e110030ad29
+  metadata.gz: 700578cfd7370e84e888e361d30f74a640a011d9614e2b93530af7278ac8ac3772a6f72a0ac9a3b7e8f9f9defb4a8524b365e1cb9f17cdf46c5c0bce5f7b717b
+  data.tar.gz: 18da81bc8e4ca14c50cc7b99da96be67e1f52307a010d97aad017f872bc11a1ca747b8a66827a92b65b538680476c087a4bd0c5dbc1a121bdb830401fc104f1e

data/CHANGELOG.md

@@ -1,4 +1,35 @@
-## unreleased [☰](https://github.com/activeadmin/arbre/compare/v1.0.3...master)
+# Changelog
+
+## Master (unreleased)
+
+## 1.3.0 [☰](https://github.com/activeadmin/arbre/compare/v1.2.1...v1.3.0)
+
+* Drop ruby 2.3 support. [#152][] by [@deivid-rodriguez][]
+* Drop ruby 2.4 support. [#177][] by [@deivid-rodriguez][]
+* Fix ruby 2.7 kwargs warnings. [#202][] and [#205][] by [@deivid-rodriguez][]
+
+## 1.2.1 [☰](https://github.com/activeadmin/arbre/compare/v1.2.0...v1.2.1)
+
+* Revert [#64][] to fix several regressions, at the cost of reintroducing [#46][]. [#121][] by [@deivid-rodriguez][]
+
+## 1.2.0 [☰](https://github.com/activeadmin/arbre/compare/v1.2.0.rc1...v1.2.0)
+
+_No changes_.
+
+## 1.2.0.rc1 [☰](https://github.com/activeadmin/arbre/compare/v1.1.1...v1.2.0.rc1)
+
+* Fix deprecation warning about single arity template handlers on Rails 6. [#110][] by [@aramvisser][]
+* Fix rendering `link_to` with a block in a arbre template. [#64][] by [@varyonic][]
+* Drop support for EOL'd rubies (under 2.3). [#78][] by [@deivid-rodriguez][]
+
+## 1.1.1 [☰](https://github.com/activeadmin/arbre/compare/v1.1.0...v1.1.1)
+
+* Use mime-types 2.x for Ruby 1.9 by [@timoschilling][]
+* Verify Ruby 2.3 support. [#59][] by [@dlackty][] 
+
+## 1.1.0 [☰](https://github.com/activeadmin/arbre/compare/v1.0.3...v1.1.0)
+
+* Tag option `for` sets the attribute when value is a string or symbol [#49][] by [@ramontayag][]
 
 ## 1.0.3 [☰](https://github.com/activeadmin/arbre/compare/v1.0.2...v1.0.3)
 
@@ -51,11 +82,29 @@ Initial release and extraction from Active Admin
 [#36]: https://github.com/activeadmin/arbre/issues/36
 [#39]: https://github.com/activeadmin/arbre/issues/39
 [#40]: https://github.com/activeadmin/arbre/issues/40
+[#46]: https://github.com/activeadmin/arbre/issues/46
+[#49]: https://github.com/activeadmin/arbre/issues/49
+[#59]: https://github.com/activeadmin/arbre/issues/59
+[#64]: https://github.com/activeadmin/arbre/pull/64
+[#78]: https://github.com/activeadmin/arbre/pull/78
+[#110]: https://github.com/activeadmin/arbre/pull/110
+[#121]: https://github.com/activeadmin/arbre/pull/121
+[#152]: https://github.com/activeadmin/arbre/pull/152
+[#177]: https://github.com/activeadmin/arbre/pull/177
+[#202]: https://github.com/activeadmin/arbre/pull/202
+[#205]: https://github.com/activeadmin/arbre/pull/205
+
+[@aramvisser]: https://github.com/aramvisser
 [@LTe]: https://github.com/LTe
 [@OscarBarrett]: https://github.com/OscarBarrett
 [@alexesDev]: https://github.com/alexesDev
+[@deivid-rodriguez]: https://github.com/deivid-rodriguez
+[@dlackty]: https://github.com/dlackty
 [@dtaniwaki]: https://github.com/dtaniwaki
 [@gregbell]: https://github.com/gregbell
 [@jpmckinney]: https://github.com/jpmckinney
 [@kaapa]: https://github.com/kaapa
-[@seanlinsley]: https://github.com/seanlinsley
+[@ramontayag]: https://github.com/ramontayag
+[@seanlinsley]: https://github.com/seanlinsley
+[@timoschilling]: https://github.com/timoschilling
+[@varyonic]: https://github.com/varyonic

data/README.md

@@ -1,110 +1,43 @@
 # Arbre - HTML Views in Ruby
 
-Arbre makes it easy to generate HTML directly in Ruby. This gem was extracted from [Active Admin](https://github.com/activeadmin/active_admin).
+[Arbre][docs] makes it easy to generate HTML directly in Ruby. This gem was extracted from [Active Admin](https://github.com/activeadmin/active_admin).
 
-[![Version  ](http://img.shields.io/gem/v/arbre.svg)                    ](https://rubygems.org/gems/arbre)
-[![Travis CI](http://img.shields.io/travis/activeadmin/arbre/master.svg)](https://travis-ci.org/activeadmin/arbre)
+[![Version         ][rubygems_badge]][rubygems]
+[![Travis CI       ][travis_badge]][travis]
+[![Tidelift        ][tidelift_badge]][tidelift]
 
-## Simple Usage
-
-```ruby
-html = Arbre::Context.new do
-  h2 "Why is Arbre awesome?"
-
-  ul do
-    li "The DOM is implemented in ruby"
-    li "You can create object oriented views"
-    li "Templates suck"
-  end
-end
-
-puts html.to_s # =>
-```
-
-```html
-<h2>Why is Arbre awesome?</h2>
-<ul>
-  <li>The DOM is implemented in ruby</li>
-  <li>You can create object oriented views</li>
-  <li>Templates suck</li>
-</ul>
-```
-
-## The DOM in Ruby
+## Goals
 
 The purpose of Arbre is to leave the view as ruby objects as long
 as possible. This allows OO Design to be used to implement the view layer.
 
-```ruby
-html = Arbre::Context.new do
-  h2 "Why Arbre is awesome?"
-end
-
-html.children.size # => 1
-html.children.first # => #<Arbre::HTML::H2>
-```
-
-## Components
-
-The purpose of Arbre is to be able to create shareable and extendable HTML
-components. To do this, you create a subclass of Arbre::Component.
-
-For example:
-
-```ruby
-class Panel < Arbre::Component
-  builder_method :panel
-
-  def build(title, attributes = {})
-    super(attributes)
+## Getting started
 
-    h3(title, class: "panel-title")
-  end
-end
-```
+* Check out [the docs][docs].
 
-The builder_method defines the method that will be called to build this component
-when using the DSL. The arguments passed into the builder_method will be passed 
-into the #build method for you.
+## Need help?
 
-You can now use this panel in any Arbre context:
+Please use [StackOverflow][stackoverflow] for help requests and how-to questions.
 
-```ruby
-html = Arbre::Context.new do
-  panel "Hello World", id: "my-panel" do
-    span "Inside the panel"
-  end
-end
+Please open GitHub issues for bugs and enhancements only, not general help requests.
+Please search previous issues (and Google and StackOverflow) before creating a new issue.
 
-puts html.to_s # =>
-```
+## Want to support us?
 
-```html
-<div class='panel' id="my-panel">
-  <h3 class='panel-title'>Hello World</h3>
-  <span>Inside the panel</span>
-</div>
-```      
-      
-### Text Nodes
+Subscribe to [Tidelift][tidelift] to support Arbre and get licensing assurances and timely security notifications.
 
-To insert unwrapped text nodes use `text_node`:
+## Security contact information
 
-```ruby
-html = Arbre::Context.new do
-  panel "Hello World", id: "my-panel" do
-    span "Inside the panel"
-    text_node "Plain text"
-  end
-end
+Please use the Tidelift security contact to [report a security vulnerability][Tidelift security contact].
+Tidelift will coordinate the fix and disclosure.
 
-puts html.to_s # =>
-```
+[rubygems_badge]: http://img.shields.io/gem/v/arbre.svg
+[rubygems]: https://rubygems.org/gems/arbre
+[travis_badge]: http://img.shields.io/travis/activeadmin/arbre/master.svg
+[travis]: https://travis-ci.org/activeadmin/arbre
+[tidelift_badge]: https://tidelift.com/badges/github/activeadmin/arbre
+[tidelift]: https://tidelift.com/subscription/pkg/rubygems-arbre?utm_source=rubygems-arbre&utm_medium=referral&utm_campaign=readme
 
-```html
-<div class='panel' id="my-panel">
-  <h3 class='panel-title'>Hello World</h3>
-  <span>Inside the panel</span>
-  Plain text
-</div>
-```
+[docs]: https://activeadmin.github.io/arbre/
+[stackoverflow]: http://stackoverflow.com/questions/tagged/arbre
+[Tidelift security contact]: https://tidelift.com/security

data/docs/Gemfile

@@ -0,0 +1,2 @@
+gem 'github-pages'
+gem 'jekyll-redirect-from'

data/docs/_config.yml

@@ -0,0 +1,7 @@
+plugins:
+  - jekyll-redirect-from
+
+defaults:
+  -
+    values:
+      layout: "default"

data/docs/_includes/footer.html

@@ -0,0 +1,8 @@
+<p id="footer">
+<div class="left">
+    Copyright 2011 <a href="http://gregbell.ca/">Greg Bell</a> and <a href="http://www.versapay.com/">VersaPay</a>
+</div>
+<div class="right">
+    <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a></p>
+</div>
+</p>

data/docs/_includes/google-analytics.html

@@ -0,0 +1,16 @@
+<script type="text/javascript">
+
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-23306458-1']);
+    _gaq.push(['_trackPageview']);
+
+    (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+    })();
+
+</script>

data/docs/_includes/head.html

@@ -0,0 +1,7 @@
+<head>
+    <title>Arbre | HTML Views in Ruby</title>
+    <link href='//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
+    <link href="{{ site.baseurl }}/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
+    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+</head>

data/docs/_includes/toc.html

@@ -0,0 +1,12 @@
+<ol class='level-1'>
+    <li><a href='{{ site.baseurl }}'>Contents</a></li>
+    <ol class='level-2'>
+        <li><a href='{{ site.baseurl }}#introduction'>Introduction</a></li>
+        <li><a href='{{ site.baseurl }}#installation'>Installation</a></li>
+        <li><a href='{{ site.baseurl }}#tags'>Tags</a></li>
+        <li><a href='{{ site.baseurl }}#componenets'>Components</a></li>
+        <li><a href='{{ site.baseurl }}#contexts'>Contexts</a></li>
+        <!-- li><a href='{{ site.baseurl }}/documentation.html#layouts'>Layouts</a></li -->
+        <li><a href='{{ site.baseurl }}#background'>Background</a></li>
+    </ol>
+</ol>

data/docs/_includes/top-menu.html

@@ -0,0 +1,8 @@
+<div id="header">
+    <h1><a href="{{ site.baseurl }}/index.html"><span>Arbre</span></a></h1>
+
+    <div id="nav">
+        <!-- a href="{{ site.baseurl }}/documentation.html">Documentation</a -->
+        <a href="http://github.com/activeadmin/arbre">Get the Code</a>
+    </div>
+</div>

data/docs/_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+  <body class="with-sidebar">
+    <div id="wrapper">
+      {% include top-menu.html %}
+      <div id="main-content">
+        <div class='toc'>
+          {% include toc.html %}
+        </div>
+        <div class='toc-content'>
+          <div class='docs-content'>
+            {{ content }}
+          </div>
+        </div>
+      </div>
+      {% include footer.html %}
+    </div>
+    {% include google-analytics.html %}
+  </body>
+</html>

data/docs/index.md

@@ -0,0 +1,106 @@
+---
+redirect_from: /docs/documentation.html
+---
+# Arbre
+HTML Views in Ruby
+
+### Introduction
+
+Arbre is a alternate template system for [Ruby on Rails Action View](http://guides.rubyonrails.org/action_view_overview.html).
+Arbre expresses HTML using a Ruby DSL, which makes it similar to the [Builder](https://github.com/tenderlove/builder) gem for XML.
+Arbre was extracted from [Active Admin](https://activeadmin.info/).
+
+An example `index.html.arb`:
+
+```ruby
+html {
+  head {
+    title "Welcome page"
+  }
+  body {
+    para "Hello, world"
+  }
+}
+```
+
+The purpose of Arbre is to leave the view as Ruby objects as long as possible,
+which allows an object-oriented approach including inheritance, composition, and encapsulation.
+
+### Installation
+
+Add gem `arbre` to your `Gemfile` and `bundle install`.
+
+Arbre registers itself as a Rails template handler for files with an extension `.arb`.
+
+### Tags
+
+Arbre DSL is composed of HTML tags.  Tag attributes including `id` and HTML classes are passed as a hash parameter and the tag body is passed as a block. Most HTML5 tags are implemented, including `script`, `embed` and `video`.
+
+A special case is the paragraph tag, <p>, which is mapped to `para`.
+
+JavaScript can be included by using `script { raw ... }`
+
+To include text that is not immediately part of a tag use `text_node`.
+
+### Components
+
+Arbre DSL can be extended by defining new tags composed of other, simpler tags.
+This provides a simpler alternative to nesting partials.
+The recommended approach is to subclass Arbre::Component and implement a new builder method.
+
+The builder_method defines the method that will be called to build this component
+when using the DSL. The arguments passed into the builder_method will be passed 
+into the #build method for you.
+
+For example:
+
+```ruby
+class Panel < Arbre::Component
+  builder_method :panel
+
+  def build(title, attributes = {})
+    super(attributes)
+
+    h3(title, class: "panel-title")
+  end
+end
+```
+
+By default components are `div` tags with an HTML class corresponding to the component class name.  This can be overridden by redefining the `tag_name` method.
+
+Several examples of Arbre components are [included in Active Admin](https://activeadmin.info/12-arbre-components.html)
+
+### Contexts
+
+An [Arbre::Context](http://www.rubydoc.info/gems/arbre/Arbre/Context) is an object in which Arbre DSL is interpreted, providing a root for the Ruby DOM that can be [searched and manipulated](http://www.rubydoc.info/gems/arbre/Arbre/Element). A context is automatically provided when a `.arb` template or partial is loaded. Contexts can be used when developing or testing a component.  Contexts are rendered by calling to_s.
+
+```ruby
+html = Arbre::Context.new do
+  panel "Hello World", id: "my-panel" do
+    span "Inside the panel"
+    text_node "Plain text"
+  end
+end
+
+puts html.to_s # =>
+```
+
+```html
+<div class='panel' id="my-panel">
+  <h3 class='panel-title'>Hello World</h3>
+  <span>Inside the panel</span>
+  Plain text
+</div>
+```
+
+A context allows you to specify Rails template assigns, aka. 'locals' and helper methods. Templates loaded by Action View have access to all [Action View helper methods](http://guides.rubyonrails.org/action_view_overview.html#overview-of-helpers-provided-by-action-view)
+
+### Background
+
+Similar projects include:
+- [Markaby](http://markaby.github.io/), written by \_why the luck stiff.
+- [Erector](http://erector.github.io/), developed at PivotalLabs.
+- [Fortitude](https://github.com/ageweke/fortitude), developed at Scribd.
+- [Inesita](https://inesita.fazibear.me/) (Opal)
+- [html_builder](https://github.com/crystal-lang/html_builder) (Crystal)
+

data/docs/stylesheets/main.css

@@ -0,0 +1,1152 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q, blockquote {
+  quotes: none;
+}
+
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+a img {
+  border: none;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+#dsl {
+  /* Comment */
+  /* Error */
+  /* Keyword */
+  /* Literal */
+  /* Name */
+  /* Operator */
+  /* Punctuation */
+  /* Comment.Multiline */
+  /* Comment.Preproc */
+  /* Comment.Single */
+  /* Comment.Special */
+  /* Generic.Emph */
+  /* Generic.Strong */
+  /* Keyword.Constant */
+  /* Keyword.Declaration */
+  /* Keyword.Namespace */
+  /* Keyword.Pseudo */
+  /* Keyword.Reserved */
+  /* Keyword.Type */
+  /* Literal.Date */
+  /* Literal.Number */
+  /* Literal.String */
+  /* Name.Attribute */
+  /* Name.Builtin */
+  /* Name.Class */
+  /* Name.Constant */
+  /* Name.Decorator */
+  /* Name.Entity */
+  /* Name.Exception */
+  /* Name.Function */
+  /* Name.Label */
+  /* Name.Namespace */
+  /* Name.Other */
+  /* Name.Property */
+  /* Name.Tag */
+  /* Name.Variable */
+  /* Operator.Word */
+  /* Text.Whitespace */
+  /* Literal.Number.Float */
+  /* Literal.Number.Hex */
+  /* Literal.Number.Integer */
+  /* Literal.Number.Oct */
+  /* Literal.String.Backtick */
+  /* Literal.String.Char */
+  /* Literal.String.Doc */
+  /* Literal.String.Double */
+  /* Literal.String.Escape */
+  /* Literal.String.Heredoc */
+  /* Literal.String.Interpol */
+  /* Literal.String.Other */
+  /* Literal.String.Regex */
+  /* Literal.String.Single */
+  /* Literal.String.Symbol */
+  /* Name.Builtin.Pseudo */
+  /* Name.Variable.Class */
+  /* Name.Variable.Global */
+  /* Name.Variable.Instance */
+  /* Literal.Number.Integer.Long */
+}
+
+#dsl .highlight .hll {
+  background-color: #49483e;
+}
+
+#dsl .highlight {
+  background: #272822;
+  color: #f8f8f2;
+}
+
+#dsl .highlight .c {
+  color: #75715e;
+}
+
+#dsl .highlight .err {
+  color: #960050;
+  background-color: #1e0010;
+}
+
+#dsl .highlight .k {
+  color: #66d9ef;
+}
+
+#dsl .highlight .l {
+  color: #ae81ff;
+}
+
+#dsl .highlight .n {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .o {
+  color: #f92672;
+}
+
+#dsl .highlight .p {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .cm {
+  color: #75715e;
+}
+
+#dsl .highlight .cp {
+  color: #75715e;
+}
+
+#dsl .highlight .c1 {
+  color: #75715e;
+}
+
+#dsl .highlight .cs {
+  color: #75715e;
+}
+
+#dsl .highlight .ge {
+  font-style: italic;
+}
+
+#dsl .highlight .gs {
+  font-weight: bold;
+}
+
+#dsl .highlight .kc {
+  color: #66d9ef;
+}
+
+#dsl .highlight .kd {
+  color: #66d9ef;
+}
+
+#dsl .highlight .kn {
+  color: #f92672;
+}
+
+#dsl .highlight .kp {
+  color: #66d9ef;
+}
+
+#dsl .highlight .kr {
+  color: #66d9ef;
+}
+
+#dsl .highlight .kt {
+  color: #66d9ef;
+}
+
+#dsl .highlight .ld {
+  color: #e6db74;
+}
+
+#dsl .highlight .m {
+  color: #ae81ff;
+}
+
+#dsl .highlight .s {
+  color: #e6db74;
+}
+
+#dsl .highlight .na {
+  color: #a6e22e;
+}
+
+#dsl .highlight .nb {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .nc {
+  color: #a6e22e;
+}
+
+#dsl .highlight .no {
+  color: #66d9ef;
+}
+
+#dsl .highlight .nd {
+  color: #a6e22e;
+}
+
+#dsl .highlight .ni {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .ne {
+  color: #a6e22e;
+}
+
+#dsl .highlight .nf {
+  color: #a6e22e;
+}
+
+#dsl .highlight .nl {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .nn {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .nx {
+  color: #a6e22e;
+}
+
+#dsl .highlight .py {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .nt {
+  color: #f92672;
+}
+
+#dsl .highlight .nv {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .ow {
+  color: #f92672;
+}
+
+#dsl .highlight .w {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .mf {
+  color: #ae81ff;
+}
+
+#dsl .highlight .mh {
+  color: #ae81ff;
+}
+
+#dsl .highlight .mi {
+  color: #ae81ff;
+}
+
+#dsl .highlight .mo {
+  color: #ae81ff;
+}
+
+#dsl .highlight .sb {
+  color: #e6db74;
+}
+
+#dsl .highlight .sc {
+  color: #e6db74;
+}
+
+#dsl .highlight .sd {
+  color: #e6db74;
+}
+
+#dsl .highlight .s2 {
+  color: #e6db74;
+}
+
+#dsl .highlight .se {
+  color: #ae81ff;
+}
+
+#dsl .highlight .sh {
+  color: #e6db74;
+}
+
+#dsl .highlight .si {
+  color: #e6db74;
+}
+
+#dsl .highlight .sx {
+  color: #e6db74;
+}
+
+#dsl .highlight .sr {
+  color: #e6db74;
+}
+
+#dsl .highlight .s1 {
+  color: #e6db74;
+}
+
+#dsl .highlight .ss {
+  color: #AE81FF;
+}
+
+#dsl .highlight .bp {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .vc {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .vg {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .vi {
+  color: #f8f8f2;
+}
+
+#dsl .highlight .il {
+  color: #ae81ff;
+}
+
+body {
+  line-height: 1.5;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  color: #333333;
+  font-size: 75%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+  color: #222222;
+}
+
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
+  margin: 0;
+}
+
+h1 {
+  font-size: 3em;
+  line-height: 1;
+  margin-bottom: 0.50em;
+}
+
+h2 {
+  font-size: 2em;
+  margin-bottom: 0.75em;
+}
+
+h3 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1.00em;
+}
+
+h4 {
+  font-size: 1.2em;
+  line-height: 1.25;
+  margin-bottom: 1.25em;
+}
+
+h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1.50em;
+}
+
+h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+
+p {
+  margin: 0 0 1.5em;
+}
+
+p .left {
+  display: inline;
+  float: left;
+  margin: 1.5em 1.5em 1.5em 0;
+  padding: 0;
+}
+
+p .right {
+  display: inline;
+  float: right;
+  margin: 1.5em 0 1.5em 1.5em;
+  padding: 0;
+}
+
+a {
+  text-decoration: underline;
+  color: #0066cc;
+}
+
+a:visited {
+  color: #004c99;
+}
+
+a:focus {
+  color: #0099ff;
+}
+
+a:hover {
+  color: #0099ff;
+}
+
+a:active {
+  color: #bf00ff;
+}
+
+blockquote {
+  margin: 1.5em;
+  color: #666666;
+  font-style: italic;
+}
+
+strong, dfn {
+  font-weight: bold;
+}
+
+em, dfn {
+  font-style: italic;
+}
+
+sup, sub {
+  line-height: 0;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #666666;
+}
+
+address {
+  margin: 0 0 1.5em;
+  font-style: italic;
+}
+
+del {
+  color: #666666;
+}
+
+pre {
+  margin: 1.5em 0;
+  white-space: pre;
+}
+
+pre, code, tt {
+  font: 1em "andale mono", "lucida console", monospace;
+  line-height: 1.5;
+}
+
+li ul, li ol {
+  margin: 0;
+}
+
+ul, ol {
+  margin: 0 1.5em 1.5em 0;
+  padding-left: 1.5em;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+dl {
+  margin: 0 0 1.5em 0;
+}
+
+dl dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 1.5em;
+}
+
+table {
+  margin-bottom: 1.4em;
+  width: 100%;
+}
+
+th {
+  font-weight: bold;
+}
+
+thead th {
+  background: #c3d9ff;
+}
+
+th, td, caption {
+  padding: 4px 10px 4px 5px;
+}
+
+table.striped tr:nth-child(even) td,
+table tr.even td {
+  background: #e5ecf9;
+}
+
+tfoot {
+  font-style: italic;
+}
+
+caption {
+  background: #eeeeee;
+}
+
+.quiet {
+  color: #666666;
+}
+
+.loud {
+  color: #111111;
+}
+
+body {
+  background: #f6f4f1;
+  color: #676767;
+  width: 676px;
+  padding: 0 20px;
+  font-size: 95%;
+  margin: 25px auto;
+  font-family: 'Georgia';
+}
+
+body #wrapper {
+  position: relative;
+}
+
+body a, body a:hover, body a:link, body a:visited {
+  color: #407985;
+}
+
+body h1, body h2, body h3, body h4, body h5, body h6 {
+  color: #595959;
+  font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+body h1 a {
+  background: url("../images/activeadmin.png") 0 0 no-repeat;
+  display: block;
+  width: 257px;
+  height: 55px;
+}
+
+body h1 a span {
+  display: none;
+}
+
+body #header {
+  margin: 40px 0;
+}
+
+body .clear {
+  clear: both;
+}
+
+body .intro {
+  color: #595959;
+  font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 3.2em;
+  font-weight: 300;
+  line-height: 1em;
+  margin-bottom: 0.3em;
+  padding-top: 35px;
+  background: url("../images/divider.png") 0 0 repeat-x;
+}
+
+body .intro strong {
+  font-weight: 400;
+}
+
+body h2 {
+  margin: 50px 0 10px 0;
+  padding-top: 35px;
+  background: url("../images/divider.png") 0 0 repeat-x;
+  font-size: 2.5em;
+  font-weight: 200;
+  line-height: 105%;
+}
+
+body h3 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+  font-size: 1.7em;
+  font-weight: 300;
+}
+
+body #nav {
+  font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 1.2em;
+  text-transform: uppercase;
+  position: absolute;
+  right: 0;
+  top: 20px;
+  text-align: right;
+}
+
+body #nav a {
+  text-decoration: none;
+  color: #8b9091;
+  margin-left: 20px;
+}
+
+body #features {
+  padding-top: 0;
+  clear: both;
+  background: url("../images/features.png") 0 0 no-repeat;
+  margin: 0 -35px;
+  overflow: visible;
+  min-height: 569px;
+  font-size: 1.0em;
+  line-height: 1.2em;
+  font-weight: 300;
+  font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+body #features #features-left {
+  float: left;
+  width: 150px;
+  margin-left: -150px;
+}
+
+body #features #features-right {
+  float: right;
+  width: 150px;
+  margin-right: -150px;
+}
+
+body #features h3 {
+  font-size: 1.2em;
+  padding-bottom: 0;
+  margin-bottom: 5px;
+}
+
+body #features h3.first {
+  margin-top: 10px;
+}
+
+body.with-sidebar {
+  width: 976px;
+}
+
+body .toc {
+  font-family: Helvetica, Arial, sans-serif;
+  padding-top: 35px;
+  width: 270px;
+  float: right;
+  font-size: 0.9em;
+  background: url("../images/divider.png") top left repeat-x;
+}
+
+body .toc ol li {
+  list-style: none;
+}
+
+body .toc a, body .toc a:link, body .toc a:hover, body .toc a:visited {
+  text-decoration: none;
+  color: #595959;
+}
+
+body .toc ol.level-1 > li {
+  font-size: 1.0em;
+  font-weight: bold;
+  margin-top: 20px;
+}
+
+body .toc ol.level-1 > ol {
+  padding-left: 0;
+  font-size: 0.95em;
+  margin: 0;
+}
+
+body .toc ol.level-2 > ol {
+  display: none;
+}
+
+body .toc-content {
+  width: 676px;
+}
+
+body #dsl {
+  margin-top: 20px;
+}
+
+body #dsl .highlight {
+  font-size: 0.82em;
+  background: #292929 url("../images/code-header.png") 0 0 no-repeat;
+  padding: 40px 15px 20px 15px !important;
+  -moz-box-shadow: 0 8px 20px #444444;
+  -webkit-box-shadow: 0 8px 20px #444444;
+  -o-box-shadow: 0 8px 20px #444444;
+  box-shadow: 0 8px 20px #444444;
+}
+
+body .getting-started {
+  font-size: 2em;
+  text-align: center;
+}
+
+body .getting-started a {
+  margin-right: 15px;
+  display: block;
+}
+
+body .getting-started-heading {
+  text-align: center;
+}
+
+body .left {
+  float: left;
+}
+
+body .right {
+  float: right;
+}
+
+body .highlight {
+  background-color: #333;
+  font-family: "Droid Sans Mono", Monaco, monospace;
+  padding: 10px 5px;
+  font-size: 0.9em;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -o-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -khtml-border-radius: 2px;
+  border-radius: 2px;
+  margin-bottom: 1.5em;
+}
+
+body .highlight > pre, body .highlight code, body .highlight span {
+  line-height: 1.3em;
+  margin: 0;
+  padding: 0;
+}
+
+body #footer {
+  margin-top: 50px;
+  margin-bottom: 20px;
+  background: url("../images/divider.png") 0 0 repeat-x;
+  clear: both;
+  padding-top: 20px;
+  font-size: 0.9em;
+}
+
+body .post .post-date, body .post .post-meta {
+  font-size: 0.7em;
+}
+
+body .post .post-date {
+  display: inline-block;
+  width: 100px;
+}
+
+body .post .post-meta {
+  font-size: 0.6em;
+  padding-left: 40px;
+}
+
+span.breadcrumb {
+  display: block;
+  font-size: 45%;
+  font-weight: 200;
+  margin: 0;
+  padding: 0;
+}
+
+h2.in-docs {
+  font-weight: 400;
+}
+
+.docs-content {
+  /* Comment */
+  /* Error */
+  /* Keyword */
+  /* Comment.Multiline */
+  /* Comment.Preproc */
+  /* Comment.Single */
+  /* Comment.Special */
+  /* Generic.Deleted */
+  /* Generic.Emph */
+  /* Generic.Error */
+  /* Generic.Heading */
+  /* Generic.Inserted */
+  /* Generic.Output */
+  /* Generic.Prompt */
+  /* Generic.Strong */
+  /* Generic.Subheading */
+  /* Generic.Traceback */
+  /* Keyword.Constant */
+  /* Keyword.Declaration */
+  /* Keyword.Namespace */
+  /* Keyword.Pseudo */
+  /* Keyword.Reserved */
+  /* Keyword.Type */
+  /* Literal.Number */
+  /* Name */
+  /* Name */
+  /* Literal.String */
+  /* Name.Attribute */
+  /* Name.Builtin */
+  /* Name.Class */
+  /* Name.Constant */
+  /* Name.Decorator */
+  /* Name.Entity */
+  /* Name.Function */
+  /* Name.Namespace */
+  /* Name.Tag */
+  /* Name.Variable */
+  /* Operator.Word */
+  /* Text.Whitespace */
+  /* Literal.Number.Float */
+  /* Literal.Number.Hex */
+  /* Literal.Number.Integer */
+  /* Literal.Number.Oct */
+  /* Literal.String.Backtick */
+  /* Literal.String.Char */
+  /* Literal.String.Doc */
+  /* Literal.String.Double */
+  /* Literal.String.Escape */
+  /* Literal.String.Heredoc */
+  /* Literal.String.Interpol */
+  /* Literal.String.Other */
+  /* Literal.String.Regex */
+  /* Literal.String.Single */
+  /* Literal.String.Symbol */
+  /* Name.Builtin.Pseudo */
+  /* Name.Variable.Class */
+  /* Name.Variable.Global */
+  /* Name.Variable.Instance */
+  /* Literal.Number.Integer.Long */
+}
+
+.docs-content h3 {
+  margin-top: 50px;
+  margin-bottom: 10px;
+  font-size: 2em;
+  font-weight: 400;
+}
+
+.docs-content h4 {
+  font-size: 1.5em;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+.docs-content p, .docs-content li {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 0.9em;
+}
+
+.docs-content .highlight {
+  font-size: 0.85em;
+  background-color: #ece8e1;
+  color: #000000;
+}
+
+.docs-content .highlight .hll {
+  background-color: #ffffcc;
+}
+
+.docs-content .highlight .c {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+.docs-content .highlight .err {
+  color: #F00000;
+  background-color: #F0A0A0;
+}
+
+.docs-content .highlight .k {
+  color: #0000aa;
+}
+
+.docs-content .highlight .cm {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+.docs-content .highlight .cp {
+  color: #4c8317;
+}
+
+.docs-content .highlight .c1 {
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+.docs-content .highlight .cs {
+  color: #0000aa;
+  font-style: italic;
+}
+
+.docs-content .highlight .gd {
+  color: #aa0000;
+}
+
+.docs-content .highlight .ge {
+  font-style: italic;
+}
+
+.docs-content .highlight .gr {
+  color: #aa0000;
+}
+
+.docs-content .highlight .gh {
+  color: #000080;
+  font-weight: bold;
+}
+
+.docs-content .highlight .gi {
+  color: #00aa00;
+}
+
+.docs-content .highlight .go {
+  color: #888888;
+}
+
+.docs-content .highlight .gp {
+  color: #555555;
+}
+
+.docs-content .highlight .gs {
+  font-weight: bold;
+}
+
+.docs-content .highlight .gu {
+  color: #800080;
+  font-weight: bold;
+}
+
+.docs-content .highlight .gt {
+  color: #aa0000;
+}
+
+.docs-content .highlight .kc {
+  color: #0000aa;
+}
+
+.docs-content .highlight .kd {
+  color: #0000aa;
+}
+
+.docs-content .highlight .kn {
+  color: #0000aa;
+}
+
+.docs-content .highlight .kp {
+  color: #0000aa;
+}
+
+.docs-content .highlight .kr {
+  color: #0000aa;
+}
+
+.docs-content .highlight .kt {
+  color: #00aaaa;
+}
+
+.docs-content .highlight .m {
+  color: #009999;
+}
+
+.docs-content .highlight .n {
+  color: #000000;
+}
+
+.docs-content .highlight .p {
+  color: #000000;
+}
+
+.docs-content .highlight .s {
+  color: #aa5500;
+}
+
+.docs-content .highlight .na {
+  color: #1e90ff;
+}
+
+.docs-content .highlight .nb {
+  color: #00aaaa;
+}
+
+.docs-content .highlight .nc {
+  color: #00aa00;
+  text-decoration: underline;
+}
+
+.docs-content .highlight .no {
+  color: #aa0000;
+}
+
+.docs-content .highlight .nd {
+  color: #888888;
+}
+
+.docs-content .highlight .ni {
+  color: #800000;
+  font-weight: bold;
+}
+
+.docs-content .highlight .nf {
+  color: #00aa00;
+}
+
+.docs-content .highlight .nn {
+  color: #00aaaa;
+  text-decoration: underline;
+}
+
+.docs-content .highlight .nt {
+  color: #1e90ff;
+  font-weight: bold;
+}
+
+.docs-content .highlight .nv {
+  color: #aa0000;
+}
+
+.docs-content .highlight .ow {
+  color: #0000aa;
+}
+
+.docs-content .highlight .w {
+  color: #bbbbbb;
+}
+
+.docs-content .highlight .mf {
+  color: #009999;
+}
+
+.docs-content .highlight .mh {
+  color: #009999;
+}
+
+.docs-content .highlight .mi {
+  color: #009999;
+}
+
+.docs-content .highlight .mo {
+  color: #009999;
+}
+
+.docs-content .highlight .sb {
+  color: #aa5500;
+}
+
+.docs-content .highlight .sc {
+  color: #aa5500;
+}
+
+.docs-content .highlight .sd {
+  color: #aa5500;
+}
+
+.docs-content .highlight .s2 {
+  color: #aa5500;
+}
+
+.docs-content .highlight .se {
+  color: #aa5500;
+}
+
+.docs-content .highlight .sh {
+  color: #aa5500;
+}
+
+.docs-content .highlight .si {
+  color: #aa5500;
+}
+
+.docs-content .highlight .sx {
+  color: #aa5500;
+}
+
+.docs-content .highlight .sr {
+  color: #009999;
+}
+
+.docs-content .highlight .s1 {
+  color: #aa5500;
+}
+
+.docs-content .highlight .ss {
+  color: #0000aa;
+}
+
+.docs-content .highlight .bp {
+  color: #00aaaa;
+}
+
+.docs-content .highlight .vc {
+  color: #aa0000;
+}
+
+.docs-content .highlight .vg {
+  color: #aa0000;
+}
+
+.docs-content .highlight .vi {
+  color: #aa0000;
+}
+
+.docs-content .highlight .il {
+  color: #009999;
+}