Pimp Haml Coffee Online.

- Add Ace editor.
- Add Select2.
- Overall CSS enhancements.
- Compress assets
- Show compiled templates

Gemfile

@@ -8,6 +8,8 @@ gem 'guard-haml'
 gem 'guard-sass'
 gem 'guard-coffeescript'
 gem 'guard-livereload'
+gem 'guard-jammit'
 
 gem 'yajl-ruby'
-gem 'growl'
+gem 'ruby_gntp'
+gem 'rb-fsevent'

Gemfile.lock

@@ -1,6 +1,10 @@
 GEM
   remote: http://rubygems.org/
   specs:
+    POpen4 (0.1.4)
+      Platform (>= 0.4.0)
+      open4
+    Platform (0.4.0)
     addressable (2.3.2)
     bourbon (2.1.1)
       sass (>= 3.1)
@@ -11,12 +15,10 @@ GEM
     em-websocket (0.3.8)
       addressable (>= 2.1.1)
       eventmachine (>= 0.12.9)
-    eventmachine (0.12.10)
+    eventmachine (1.0.0)
     execjs (1.4.0)
       multi_json (~> 1.0)
-    ffi (1.1.3)
-    growl (1.0.3)
-    guard (1.2.3)
+    guard (1.4.0)
       listen (>= 0.4.2)
       thor (>= 0.14.6)
     guard-coffeescript (1.2.0)
@@ -25,39 +27,43 @@ GEM
     guard-haml (0.4)
       guard (>= 1.1)
       haml (>= 3.0)
-    guard-livereload (1.0.0)
+    guard-jammit (1.0.1)
+      guard (>= 1.1.0)
+      jammit
+    guard-livereload (1.0.1)
       em-websocket (>= 0.2.0)
       guard (>= 1.1.0)
       multi_json (~> 1.0)
     guard-sass (1.0.0)
       guard (>= 1.1.0)
       sass (>= 3.1)
-    haml (3.1.6)
-    listen (0.4.7)
-      rb-fchange (~> 0.0.5)
-      rb-fsevent (~> 0.9.1)
-      rb-inotify (~> 0.8.8)
+    haml (3.1.7)
+    jammit (0.6.5)
+      yui-compressor (>= 0.9.3)
+    listen (0.5.2)
     multi_json (1.3.6)
+    open4 (1.3.0)
     rack (1.4.1)
-    rb-fchange (0.0.5)
-      ffi
-    rb-fsevent (0.9.1)
-    rb-inotify (0.8.8)
-      ffi (>= 0.5.0)
-    sass (3.1.20)
-    thor (0.15.4)
+    rb-fsevent (0.9.2)
+    ruby_gntp (0.3.4)
+    sass (3.2.1)
+    thor (0.16.0)
     yajl-ruby (1.1.0)
+    yui-compressor (0.9.6)
+      POpen4 (>= 0.1.4)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   bourbon
-  growl
   guard
   guard-coffeescript
   guard-haml
+  guard-jammit
   guard-livereload
   guard-sass
   rack
+  rb-fsevent
+  ruby_gntp
   yajl-ruby

Guardfile

@@ -2,9 +2,16 @@ guard 'haml', output: 'public', input: 'src' do
   watch(/^.+(\.haml)/)
 end
 
-guard 'sass', input: 'src/stylesheets', output: 'public/stylesheets', :load_paths => ['src/stylesheets/bourbon']
+guard 'sass', input: 'src/styles', output: 'src/styles', :load_paths => ['src/stylesheets/bourbon']
 
-guard 'coffeescript', input: 'src/javascripts', output: 'public/javascripts'
+guard 'coffeescript', input: 'src/scripts', output: 'src/scripts'
+
+guard :jammit, public_root: 'public' do
+  watch(/^src\/scripts\/(.*)\.js$/)
+  watch(/^src\/styles\/(.*)\.css$/)
+  watch(/^vendor\/scripts\/(.*)\.js$/)
+  watch(/^vendor\/styles\/(.*)\.css$/)
+end
 
 guard 'livereload' do
   watch(%r{public/.+\.(css|js|html)})

config.ru

@@ -1,7 +1,15 @@
 use Rack::Static,
-  :urls => ['/stylesheets', '/javascripts', '/images'],
+  :urls => ['/assets', '/images'],
   :root => 'public'
 
+map '/worker-coffee.js' do
+  run Rack::File.new('vendor/scripts/ace/worker-coffee.js')
+end
+
+map '/worker-javascript.js' do
+  run Rack::File.new('vendor/scripts/ace/worker-javascript.js')
+end
+
 run lambda { |env|
   [
     200,

config/assets.yml

@@ -0,0 +1,22 @@
+javascript_compressor: closure
+
+embed_assets: off
+compress_assets: on
+gzip_assets: off
+
+javascripts:
+  application:
+    - vendor/scripts/jquery.js
+    - vendor/scripts/ace/ace.js
+    - vendor/scripts/ace/mode-coffee.js
+    - vendor/scripts/ace/mode-html.js
+    - vendor/scripts/ace/mode-javascript.js
+    - vendor/scripts/ace/theme-github.js
+    - vendor/scripts/select2.js
+    - src/scripts/application.js
+
+stylesheets:
+  application:
+    - vendor/styles/animate.css
+    - vendor/styles/select2.css
+    - src/styles/application.css

public/index.html

@@ -8,13 +8,13 @@
     <meta charset='Try Haml Coffee Online in your Browser' name='description' />
     <meta charset='Haml, CoffeeScript, Template, JavaScript, JST' name='keywords' />
     <meta charset='Michael Kessler' name='author' />
-    <script src='http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js'></script>
-    <script src='http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js'></script>
-    <script src='https://raw.github.com/netzpirat/haml-coffee/master/dist/compiler/hamlcoffee.min.js'></script>
-    <script src='/javascripts/application.js'></script>
-    <link href='/stylesheets/application.css' rel='stylesheet' type='text/css' />
-    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css' />
+    <script src='//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.1/coffee-script.min.js'></script>
+    <script src='//raw.github.com/netzpirat/haml-coffee/master/dist/compiler/hamlcoffee.min.js'></script>
+    <script src='/assets/application.js'></script>
+    <link href='/assets/application.css' rel='stylesheet' type='text/css' />
+    <link href='//fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
+    <link href='//fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css' />
+    <link href='//fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css' />
     <link href='http://haml-coffee-online.herokuapp.com/assets/favicon.ico' rel='shortcut icon' />
     <link href='http://haml-coffee-online.herokuapp.com/assets/favicon.png' rel='icon' type='image/png' />
     <script type='text/javascript'>
@@ -32,9 +32,13 @@
     </script>
   </head>
   <body>
+    <a href='https://github.com/netzpirat/haml-coffee' id='github'>
+      <span>Fork me on GitHub!</span>
+      <span>Haml Coffee rocks!</span>
+    </a>
     <div id='container'>
       <header>
-        <img alt='Haml Coffee Online' height='256px' src='/images/coffee_machine.png' width='256px' />
+        <img alt='Haml Coffee Online' class='animated flipInY' height='256px' src='/images/coffee_machine.png' width='256px' />
         <h1>Haml Coffee Online</h1>
         <p>
           Hi! I'm
@@ -89,7 +93,7 @@ <h1>Haml Coffee Online</h1>
             <label for='extendScope'>Extend scope</label>
           </li>
           <li>
-            <label for='format'>Format</label>
+            <label for='format'>Format:</label>
             <select id='format'>
               <option>html5</option>
               <option>html4</option>
@@ -99,21 +103,35 @@ <h1>Haml Coffee Online</h1>
         </ul>
       </fieldset>
       <div id='input'>
-        <div id='left'>
-          <label for='template'>Template</label>
-          <textarea id='template'></textarea>
+        <div class='left'>
+          <label for='template'>Haml Coffee Template</label>
+          <div id='template'></div>
         </div>
-        <div id='right'>
-          <label for='data'>Data</label>
-          <textarea id='data'></textarea>
+        <div class='right'>
+          <label for='data'>JSON Data</label>
+          <div id='data'></div>
         </div>
-        <button id='render'>Render template</button>
+        <button id='render'>
+          Compile & Render Template
+        </button>
       </div>
-      <div id='output'>
-        <label for='result'>Result</label>
-        <textarea id='result'></textarea>
+      <div class='hidden animated' id='output'>
+        <div class='hidden animated' id='compiled'>
+          <div class='left'>
+            <label for='cst'>Compiled CoffeeScript Template</label>
+            <div id='cst'></div>
+          </div>
+          <div class='right'>
+            <label for='jst'>Compiled JavaScript Template</label>
+            <div id='jst'></div>
+          </div>
+        </div>
+        <a class='toggle' href='#'>Toggle template source code</a>
+        <label for='result'>Resulting HTML</label>
+        <div id='result'></div>
       </div>
       <footer>
+        <img alt='Netzpirat' height='48' src='/images/netzpirat.png' width='48' />
         Haml Coffee is developed by
         <a href='https://mksoft.ch'>Michael Kessler</a>
         (<a href='http://twitter.com/netzpirat/'>@netzpirat</a>)