sporkd · andyh · Feb 27, 2011 · Feb 27, 2011 · Feb 27, 2011 · Feb 27, 2011
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ Features
 
 * Html5 Boilerplate stylesheets implemented as a modularized Compass library
 * Lets you pick and choose only the Boilerplate mixins and includes you want
+* Choose either erb or haml templates
 * Generates sass/scss partials to keep your stylesheets organized
 * Generates modularized haml layouts for Rails apps (header, footer, flashes, etc.)
 * Rails helpers to cleanly hide a little of Boilerplate's html complexity
@@ -34,6 +35,12 @@ First, make sure the following gems are in your Gemfile
     gem "compass"
     gem "haml"
     gem "html5-boilerplate"
+
+If you want to use erb as the template engine set an environment variable called 'TEMPLATE_ENGINE'
+
+.e.g. declare -x TEMPLATE_ENGINE="erb"
+
+Not specifying an engine or anything other than "erb" it will fallback to using Haml
 
 Then run the following
 
@@ -44,7 +51,7 @@ Then run the following
 
 (For a new project, I answer "Yes" to keep my stylesheets in app/stylesheets, but "No" for compiling them into public/stylesheets/compiled.)
 
-Now remove your application.html.erb so that Haml can do its thing
+If you're using Haml you'll probably want to remove your application.html.erb so that Haml can do its thing
 
     mv apps/views/layouts/application.html.erb apps/views/layouts/application.html.old
 

diff --git a/lib/app/helpers/html5_boilerplate_helper.rb b/lib/app/helpers/html5_boilerplate_helper.rb
@@ -14,12 +14,36 @@ def ie_tag(name=:body, attrs={}, &block)
     end
   end
 
+  def ie_tag_erb(name=:body, attrs={}, &block)
+    attrs.symbolize_keys!
+    html_head =<<-HTML
+    <!--[if lt IE 7 ]> #{ tag(name, add_class('ie6', attrs), true) } <![endif]-->
+    <!--[if IE 7 ]>    #{ tag(name, add_class('ie7', attrs), true) } <![endif]-->
+    <!--[if IE 8 ]>    #{ tag(name, add_class('ie8', attrs), true) } <![endif]-->
+    <!--[if IE 9 ]>    #{ tag(name, add_class('ie9', attrs), true) } <![endif]-->
+    <!--[if (gte IE 9)|!(IE)]><!-->
+    #{tag(name, attrs)}
+    <!--<![endif]-->
+      #{capture(&block)}
+    </html>
+    HTML
+    html_head.html_safe
+  end
+
   def ie_html(attrs={}, &block)
-    ie_tag(:html, attrs, &block)
+    if using_erb?
+      ie_tag_erb(:html, attrs, &block)
+    else
+      ie_tag(:html, attrs, &block)
+    end
   end
 
   def ie_body(attrs={}, &block)
-    ie_tag(:body, attrs, &block)
+    if using_erb?
+      ie_tag_erb(:body, attrs, &block)
+    else
+      ie_tag(:body, attrs, &block)
+    end
   end
 
   def google_account_id
@@ -48,6 +72,11 @@ def local_jquery(version)
 
 private
 
+  def using_erb?
+    template = ENV['TEMPLATE_ENGINE'] || "haml"
+    template.downcase == "erb"
+  end
+
   def add_class(name, attrs)
     classes = attrs[:class] || ''
     classes.strip!

diff --git a/templates/project/_flashes.html.erb b/templates/project/_flashes.html.erb
@@ -0,0 +1,7 @@
+<div id="flash">
+    <%- flash.each do |key,value| -%>
+        <div title="<%= key.to_s.humanize %>" class="<%= key %>">
+            <p><%= value %></p>
+        </div>
+    <%- end -%>
+</div>
diff --git a/templates/project/_footer.html.erb b/templates/project/_footer.html.erb
@@ -0,0 +1,3 @@
+<small class="copyright">
+  Copyright &copy; <%= Date.today.year %>
+</small>
diff --git a/templates/project/_head.html.erb b/templates/project/_head.html.erb
@@ -0,0 +1,25 @@
+<head>
+    <meta name="charset" content="utf-8"/>
+    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+    Remove this if you use the .htaccess -->
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
+    <title><%= controller.controller_name.titleize %> - <%= controller.action_name.titleize %></title>
+
+    <meta name="description" content=""/>
+    <meta name="author" content=""/>
+
+    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
+    <!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
+    <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> -->
+
+    <%= render :partial => 'layouts/stylesheets' %>
+
+    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+    <%= javascript_include_tag 'modernizr.min' %>
+
+    <%= csrf_meta_tag %>
+</head>
diff --git a/templates/project/_header.html.erb b/templates/project/_header.html.erb
@@ -0,0 +1 @@
+<h1>Header</h1>
diff --git a/templates/project/_javascripts.html.erb b/templates/project/_javascripts.html.erb
@@ -0,0 +1,41 @@
+<!-- Grab Google CDN's jQuery, with a protocol relative URL -->
+<!-- Looks for google_api_key first in ENV['GOOGLE_API_KEY'] then in config/google.yml -->
+<!-- remote_jquery and local_jquery helpers use minified jquery unless Rails.env is development -->
+<%- if !google_api_key.blank? -%>
+  <%= javascript_include_tag "//www.google.com/jsapi?key=#{google_api_key}" %>
+  <script type="text/javascript" charset="utf-8">
+    google.load(<%= remote_jquery("1.5.1") %>);
+  </script>
+<%- else -%>
+  <%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/#{ local_jquery("1.5.1") }" %>
+
+<!-- fall back to local jQuery if necessary -->
+<script type="text/javascript" charset="utf-8">
+  !window.jQuery && document.write(unescape('%3Cscript src="/javascripts/jquery.min.js"%3E%3C/script%3E'))
+</script>
+
+<%= javascript_include_tag 'rails', 'plugins', 'application' %>
+
+ <!-- Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb -->
+<!-- [if lt IE 7 ] -->
+  <%= javascript_include_tag 'dd_belatedpng.js' %>
+  <script type="text/javascript" charset="utf-8">
+    //DD_belatedPNG.fix('img, .png_bg');
+  </script>
+<!-- [endif] -->
+  <!-- Append your own using content_for :javascripts -->
+<%= yield :javascripts %>
+
+<!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
+<!-- Looks for google_account_id first in ENV['GOOGLE_ACCOUNT_ID'] then in config/google.yml -->
+<%- if !google_account_id.blank? -%>
+  <script type="text/javascript" charset="utf-8">
+    var _gaq = [['_setAccount', '<%= google_account_id %>'], ['_trackPageview']];
+    (function(d, t) {
+      var g = d.createElement(t),
+          s = d.getElementsByTagName(t)[0];
+      g.async = true;
+      g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+      s.parentNode.insertBefore(g, s);
+    })(document, 'script');    
+  </script>
diff --git a/templates/project/_stylesheets.html.erb b/templates/project/_stylesheets.html.erb
@@ -0,0 +1,8 @@
+<%- # CSS: implied media="all" -%>
+<%= stylesheet_link_tag 'style', :media => 'all' %>
+
+<%- # Uncomment if you are specifically targeting less enabled mobile browsers -%>
+<% #= stylesheet_link_tag 'handheld', :media => 'handheld' %>
+
+<%- # Append your own using content_for :stylesheets -%>
+<%= yield :stylesheets %>
diff --git a/templates/project/application.html.erb b/templates/project/application.html.erb
@@ -0,0 +1,21 @@
+<!doctype html>
+ <!-- http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither -->
+<%= ie_html :class => 'no-js' %>
+  <%= render :partial => 'layouts/head' %>
+  <body lang="en" class="<%= controller.controller_name %>">
+    <div id="container">
+        <header id="header">
+            <%= render :partial => "layouts/header" %>
+        </header>
+        <div id="main" role="main">
+            <%= render :partial => "layouts/flashes" %>
+            <%= yield %>
+        </div>
+        <footer id="footer">
+            <%= render :partial => "layouts/footer" %>
+        </footer>
+    </div>
+    <!-- Javascript at the bottom for fast page loading -->
+    <%= render :partial => "layouts/javascripts" %>
+  </body>
+</html>
diff --git a/templates/project/index.html b/templates/project/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+ <!-- http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither -->
+    <!--[if lt IE 7 ]> <html class="ie6 no-js"> <![endif]-->
+    <!--[if IE 7 ]>    <html class="ie7 no-js"> <![endif]-->
+    <!--[if IE 8 ]>    <html class="ie8 no-js"> <![endif]-->
+    <!--[if IE 9 ]>    <html class="ie9 no-js"> <![endif]-->
+    <!--[if (gte IE 9)|!(IE)]><!-->
+    <html class="no-js" />
+    <!--<![endif]-->
+
+  <head>
+    <meta name="charset" content="utf-8"/>
+    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+    Remove this if you use the .htaccess -->
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
+    <title></title>
+
+    <meta name="description" content=""/>
+    <meta name="author" content=""/>
+
+    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
+    <!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
+    <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> -->
+
+    <link href="css/style.css?v=1" media="all" rel="stylesheet" type="text/css" />
+    <!-- Uncomment if you are specifically targeting less enabled mobile browsers -->
+    <!-- <link href="css/handheld.css?v=1" media="handheld" rel="stylesheet" type="text/css" /> -->
+
+
+    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+    <script src="js/modernizr.min.js" type="text/javascript"></script>
+
+</head>
+  <body lang="en">
+    <div id="container">
+        <header>
+        </header>
+        <div id="main">
+        </div>
+        <footer>
+            <%= Date.today.year %>
+        </footer>
+    </div>
+
+  <!-- Javascript at the bottom for fast page loading -->
+  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" />
+
+  <script type="text/javascript" charset="utf-8">
+      !window.jQuery && document.write(unescape('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))
+  </script>
+  <script src="js/plugins.js?v=1" />
+  <script src="js/script.js?v=1" />
+
+    <!-- [if lt IE 7 ] -->
+    <script src="js/dd_belatedpng.js" />
+    <script type="text/javascript" charset="utf-8">
+        //DD_belatedPNG.fix('img, .png_bg');
+    </script>
+    <!-- [ endif ] -->
+
+    <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
+    <!-- change the UA-XXXXX-X to be your site's ID -->
+    <script type="text/javascript" charset="utf-8">
+      var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
+      (function(d, t) {
+       var g = d.createElement(t),
+           s = d.getElementsByTagName(t)[0];
+       g.async = true;
+       g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+       s.parentNode.insertBefore(g, s);
+      })(document, 'script');
+    </script>
+</body>
+</html>
diff --git a/templates/project/manifest.rb b/templates/project/manifest.rb
@@ -8,29 +8,40 @@
 stylesheet 'partials/_media.scss'
 stylesheet 'partials/_page.scss'
 
+file_extn = ENV['TEMPLATE_ENGINE'] || "haml"
+file_extn = file_extn.downcase
+if ["erb","haml"].include?(file_extn)
+  file_extn
+else
+  file_extn = "haml"
+end
 if Compass.configuration.project_type == :rails
-  file 'application.html.haml', :to => 'app/views/layouts/application.html.haml'
-  file '_flashes.html.haml', :to => 'app/views/layouts/_flashes.html.haml'
-  file '_footer.html.haml', :to => 'app/views/layouts/_footer.html.haml'
-  file '_head.html.haml', :to => 'app/views/layouts/_head.html.haml'
-  file '_header.html.haml', :to => 'app/views/layouts/_header.html.haml'
-  file '_javascripts.html.haml', :to => 'app/views/layouts/_javascripts.html.haml'
-  file '_stylesheets.html.haml', :to => 'app/views/layouts/_stylesheets.html.haml'
-  file 'files/google.yml', :to => 'config/google.yml'
-  javascript 'javascripts/dd_belatedpng.js', :to => 'dd_belatedpng.js'
-  javascript 'javascripts/jquery-1.5.1.js', :to => 'jquery.js'
-  javascript 'javascripts/jquery-1.5.1.min.js', :to => 'jquery.min.js'
-  javascript 'javascripts/modernizr-1.7.min.js', :to => 'modernizr.min.js'
-  javascript 'javascripts/plugins.js', :to => 'plugins.js'
-  javascript 'javascripts/rails.js', :to => 'rails.js'
+  file "application.html.#{file_extn}", :to => "app/views/layouts/application.html.#{file_extn}"
+  file "_flashes.html.#{file_extn}", :to => "app/views/layouts/_flashes.html.#{file_extn}"
+  file "_footer.html.#{file_extn}", :to => "app/views/layouts/_footer.html.#{file_extn}"
+  file "_head.html.#{file_extn}", :to => "app/views/layouts/_head.html.#{file_extn}"
+  file "_header.html.#{file_extn}", :to => "app/views/layouts/_header.html.#{file_extn}"
+  file "_javascripts.html.#{file_extn}", :to => "app/views/layouts/_javascripts.html.#{file_extn}"
+  file "_stylesheets.html.#{file_extn}", :to => "app/views/layouts/_stylesheets.html.#{file_extn}"
+  file "files/google.yml", :to => "config/google.yml"
+  javascript "javascripts/dd_belatedpng.js", :to => "dd_belatedpng.js"
+  javascript "javascripts/jquery-1.5.1.js", :to => "jquery.js"
+  javascript "javascripts/jquery-1.5.1.min.js", :to => "jquery.min.js"
+  javascript "javascripts/modernizr-1.7.min.js", :to => "modernizr.min.js"
+  javascript "javascripts/plugins.js", :to => "plugins.js"
+  javascript "javascripts/rails.js", :to => "rails.js"
 else
-  html 'index.html.haml'
-  file 'index.html.haml'
-  javascript 'javascripts/dd_belatedpng.js', :to => 'dd_belatedpng.js'
-  javascript 'javascripts/jquery-1.5.1.min.js', :to => 'jquery.min.js'
-  javascript 'javascripts/modernizr-1.7.min.js', :to => 'modernizr.min.js'
-  javascript 'javascripts/plugins.js', :to => 'plugins.js'
-  javascript 'javascripts/script.js', :to => 'script.js'
+  if file_extn=="erb"
+    html "index.html", :erb => true
+  else
+    html "index.html.haml"
+    file "index.html.haml"
+  end
+  javascript "javascripts/dd_belatedpng.js", :to => "dd_belatedpng.js"
+  javascript "javascripts/jquery-1.5.1.min.js", :to => "jquery.min.js"
+  javascript "javascripts/modernizr-1.7.min.js", :to => "modernizr.min.js"
+  javascript "javascripts/plugins.js", :to => "plugins.js"
+  javascript "javascripts/script.js", :to => "script.js"
 end
 html 'files/404.html', :to => '404.html'
 html 'files/htaccess', :to => '.htaccess'