pulled in jasons changes, moving to using his haml directly

Gemfile

@@ -11,6 +11,7 @@ gem 'faraday'
 gem 'yajl-ruby', '~> 1.1.0'
 gem 'excon', '~> 0.9.4'
 gem 'heroku'
+gem 'haml'
 
 # Gems used only for assets and not required
 # in production environments by default.

Gemfile.lock

@@ -58,6 +58,7 @@ GEM
       multipart-post (~> 1.1)
       rack (~> 1.1)
     fssm (0.2.8.1)
+    haml (3.1.4)
     heroku (2.22.0)
       launchy (>= 0.3.2)
       netrc (~> 0.7.1)
@@ -158,6 +159,7 @@ DEPENDENCIES
   compass-rails
   excon (~> 0.9.4)
   faraday
+  haml
   heroku
   jquery-rails
   json

app/assets/stylesheets/forms.css.scss

@@ -53,7 +53,7 @@ form#search {
   top: 2px;
   right: -8px;
   width: 384px;
-  background: transparent url(/images/bg/search-header.jpg) 0 1px repeat-x;
+  background: #398a94 url(/images/bg/search-header.jpg) 0 1px repeat-x;
   @include border-radius(3px);
   @include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
   border-bottom: solid 1px $base-border-color;

app/assets/stylesheets/front-page.css.scss

@@ -0,0 +1,271 @@
+#front-content {
+  @include clearfix;
+  overflow: visible;
+//  height: 400px;
+
+  #front-navigation {
+    width: 618px;
+    float: left;
+    border-right: solid 1px $base-border-color;
+    margin-bottom: 24px;
+  }
+}
+
+#front-nav {
+  @include clearfix;
+  ul {
+    @extend .unstyled;
+    padding-top: 24px;
+    li {
+      display: block;
+      width: 280px;
+      float: left;
+      margin-bottom: 20px;
+      &#nav-about, &#nav-downloads {
+        margin-right: 30px;
+      }
+      &#nav-about, &#nav-documentation {
+        margin-bottom: 40px;
+      }
+    }
+  }
+  a {
+    height: 86px;
+    display: block;
+    color: $font-color;
+    padding-left: 90px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    @include transition-property(color);
+    @include transition-duration(.30s);
+    img {
+      margin-left: -90px;
+      margin-right: -90px;
+      float: left;
+      opacity: 0.9;
+      @include transition-property(opacity);
+      @include transition-duration(.30s);
+    }
+    h3 {
+      font-size: 18px;
+      font-weight: bold;
+      color: $orange;
+    }
+    p {
+      font-size: 13px;
+      line-height: $base-line-height * 0.8;
+    }
+  }
+  a:hover {
+    img {
+      opacity: 1;
+    }
+    h3 {
+      color: darken($orange, 5%);
+    }
+  }
+}
+
+#front-book {
+  padding-top: 20px;
+  float: left;
+  width: 590px;
+  border-top: solid 1px $base-border-color;
+  img {
+    float: left;
+    margin-right: 20px;
+  }
+  p {
+    margin-top: 16px;
+  }
+}
+
+$monitor-width: 313px;
+$monitor-height: 271px;
+
+#front-downloads {
+  width: 313px;
+  float: right;
+  position: relative;
+  .monitor {
+    position: absolute;
+    top: 0;
+    right: -12px;
+    width: 313px;
+    height: 271px;
+    color: #fff;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    h4 {
+      font-weight: normal;
+      color: #fff;
+      font-size: 16px;
+    }
+    span.version {
+      display: block;
+      font-weight: bold;
+      font-size: 28px;
+      margin-bottom: 6px;
+    }
+    a {
+      color: #59d6de;
+      font-size: 12px;
+    }
+    span.release-date {
+      font-size: 12px;
+    }
+    a.button {
+      display: block;
+      margin-top: 10px;
+      border-top: solid 1px #085e64;
+      border-left: solid 1px #1f6367;
+      border-right: solid 1px #1f6367;
+      border-bottom: solid 1px #134143;
+      text-align: center;
+      color: #fff;
+      font-size: 16px; 
+      width: 224px;
+      padding: 5px 0;
+      @include border-radius(2px);
+      @include background-image(linear-gradient(#1c868c, #186368));
+      @include box-shadow(0 1px 0 #148a92);
+      @include transition-property(background-image);
+      @include transition-duration(.30s);
+      &:hover {
+        @include background-image(linear-gradient(darken(#1c868c, 2%), darken(#186368, 2%)));
+      }
+    }
+    &.mac {
+      background: transparent url(/images/monitor-mac.png) top right no-repeat;
+      padding-top: 36px;
+      padding-left: 40px;
+      height: $monitor-height - 36;
+      width: $monitor-width - 40;
+    }
+    &.windows {
+      background: transparent url(/images/monitor-windows.png) top right no-repeat;
+      padding-top: 45px;
+      padding-left: 40px;
+      height: $monitor-height - 45;
+      width: $monitor-width - 40;
+    }
+    &.linux {
+      background: transparent url(/images/monitor-linux.png) top right no-repeat;
+      padding-top: 45px;
+      padding-left: 40px;
+      height: $monitor-height - 45;
+      width: $monitor-width - 40;
+    }
+  }
+
+  table {
+    position: absolute;
+    top: $monitor-height;
+    left: 24px;
+    td {
+      padding: 8px 20px 6px 0;
+    }
+    a {
+      font-weight: bold;
+    }
+  }
+}
+
+#companies-projects {
+  clear: both;
+  border-top: solid 1px $base-border-color;
+  padding-top: 20px;
+  ul {
+    @extend .unstyled;
+    li {
+      display: block;
+      float: left;
+      width: 108px;
+      height: 65px;
+      margin: 0 4px 25px 5px;
+    }
+    a {
+      display: block;
+      width: 108px;
+      height: 65px;
+      opacity: 0.85;
+      @include transition-property(opacity);
+      @include transition-duration(.30s);
+      background-position: 0 0;
+      background-repeat: no-repeat;
+      text-indent: -9999px;
+      &:hover {
+        opacity: 1;
+      }
+      &.facebook {
+        background-image: url(/images/company-project-logos/facebook.png);
+      }
+      &.google {
+        background-image: url(/images/company-project-logos/google.png);
+      }
+      &.twitter {
+        background-image: url(/images/company-project-logos/twitter.png);
+      }
+      &.microsoft {
+        background-image: url(/images/company-project-logos/microsoft.png);
+      }
+      &.linked-in {
+        background-image: url(/images/company-project-logos/linked-in.png);
+      }
+      &.linux {
+        background-image: url(/images/company-project-logos/linux.png);
+      }
+      &.perl {
+        background-image: url(/images/company-project-logos/perl.png);
+      }
+      &.postgresql {
+        background-image: url(/images/company-project-logos/postgresql.png);
+      }
+      &.facebook {
+        background-image: url(/images/company-project-logos/facebook.png);
+      }
+      &.android {
+        background-image: url(/images/company-project-logos/android.png);
+      }
+      &.debian {
+        background-image: url(/images/company-project-logos/debian.png);
+      }
+      &.rails {
+        background-image: url(/images/company-project-logos/rails.png);
+      }
+      &.qt {
+        background-image: url(/images/company-project-logos/qt.png);
+      }
+      &.gnome {
+        background-image: url(/images/company-project-logos/gnome.png);
+      }
+      &.eclipse {
+        background-image: url(/images/company-project-logos/eclipse.png);
+      }
+      &.kde {
+        background-image: url(/images/company-project-logos/kde.png);
+      }
+      &.x {
+        background-image: url(/images/company-project-logos/x.png);
+      }
+    }
+  }
+}
+
+a.icon {
+  padding-left: 30px;
+  height: 30px;
+  line-height: 36px;
+  @include inline-block;
+  &.gui {
+    background: transparent url(/images/icons/gui.png) 6px 0 no-repeat;
+  }
+  &.older-releases {
+    background: transparent url(/images/icons/box.png) 0 4px no-repeat;
+  }
+  &.windows {
+    background: transparent url(/images/icons/windows.png) 0 3px no-repeat;
+  }
+  &.source {
+    background: transparent url(/images/icons/source-code.png) 0 4px no-repeat;
+  }
+}

app/assets/stylesheets/git-scm.css.scss

@@ -4,6 +4,7 @@
 @import "variables.css.scss";
 @import "typography.css.scss";
 @import "layout.css.scss";
+@import "front-page.css.scss";
 @import "sidebar.css.scss";
 @import "reference.css.scss";
 @import "forms.css.scss";

app/assets/stylesheets/layout.css.scss

@@ -82,7 +82,17 @@ aside {
 header {
   margin-top: 14px;
   position: relative;
-  padding-bottom: 30px;
+  padding-bottom: 26px;
+  #tagline {
+    display: block;
+    position: absolute;
+    top: 11px;
+    left: 120px;
+    margin-top: 1px;
+    color: $light-font-color;
+    font-size: 24px;
+    line-height: 24px;
+  }
 }
 
 // Navigation
@@ -149,6 +159,7 @@ a.dropdown-trigger {
 
 // Footer
 footer {
+  clear: both;
   @include clearfix;
   margin-top: 35px;
   border-top: solid 1px $base-border-color;

app/assets/stylesheets/variables.css.scss

@@ -1,5 +1,5 @@
 // Palette
-$orange:             #f24e32;
+$orange:             #f14e32;
 $blue:               #009099;
 
 $page-width:         940px;

app/controllers/doc_controller.rb

@@ -1,8 +1,7 @@
 class DocController < ApplicationController
-  layout "sidebar"
+  layout "layout"
 
   def index
-    p Gitscm::CATEGORIES
     @docs = DocFile.all
   end
 

app/controllers/site_controller.rb

@@ -1,4 +1,6 @@
 class SiteController < ApplicationController
+  layout "layout"
+
   def index
   end
 end

app/helpers/application_helper.rb

@@ -1,2 +1,7 @@
 module ApplicationHelper
+
+  def partial(part)
+    render part
+  end
+
 end

app/views/layouts/layout.html.haml

@@ -0,0 +1,61 @@
+!!! 5
+%html{:lang => "en"}
+  %head
+    %title Git
+    %meta{:charset => "utf-8"}    
+    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
+    = stylesheet_link_tag "git-scm.css" 
+    /[if (lte IE 7)]
+      = stylesheet_link_tag "ie7.css"
+    = javascript_include_tag "modernizr.js"
+    /[if (gte IE 6)&(lte IE 8)]
+      = javascript_include_tag "selectivizr-min.js"
+    = javascript_include_tag "http://use.typekit.com/lmc6xsg.js"
+    :javascript
+      try{Typekit.load();}catch(e){}
+    
+  %body{:id => @page}
+    %div.inner
+      = partial 'shared/header'
+
+    - if @section == 'home'
+      %div#masthead
+        %div.inner
+          %p
+            Git is a <strong>free</strong> & <strong>open source, distributed version control system</strong> designed to handle everything from small to very large projects with speed and efficiency.
+
+          %p
+            Git is <a href="#">easy to learn</a>, has <a href="#">lightening fast performance</a> and a <a href="#">tiny footprint</a>. It outclasses SCM tools like Mercurial, Subversion, CVS, Perforce, and Team Foundation Server with features like <a href="#">cheap local branching</a>, <a href="#">distributed workflows</a>, and convenient <a href="#">staging areas</a>.
+
+          <img class="illustration" src="images/branching-illustration.png" />
+
+      %div#conent-wrapper
+        %div.inner 
+          =yield
+          = partial 'shared/footer'
+
+    - else
+      %div.inner
+        %div#content-wrapper
+          %aside.sidebar
+            %nav
+              %ul
+                %li= link_to "About", "/about"
+                %li
+                  =link_to "Documentation", "/documentation", {:class => (@section == 'documentation') ? 'active' : ''}
+                  %ul 
+                    %li= link_to "Reference", "/documentation/reference", {:class => (@subsection == 'reference') ? 'active' : ''}
+                    %li= link_to "Book", "/documentation/book", {:class => (@subsection == 'book') ? 'active' : ''}
+                    %li= link_to "Videos", "/documentation/videos", {:class => (@subsection == 'videos') ? 'active' : ''}
+                    %li= link_to "External Links", "/documentation/external-links", {:class => (@subsection == 'external-links') ? 'active' : ''}
+                %li= link_to "Downloads", "/downloads"
+                %li= link_to "Community", "/community"
+
+            - if content_for(:sidebar)
+              %hr.sidebar
+              = yield :sidebar
+
+          %div#content
+            =yield
+
+        = partial 'shared/footer'

app/views/layouts/sidebar.html.erb

@@ -8,7 +8,7 @@
     <!--[if (lte IE 7)]>
       <link href="/stylesheets/ie7.css" media="screen" rel="stylesheet" type="text/css" />
     <![endif]-->
-    <script src="/javascripts/modernizr.js" type="text/javascript"></script>
+    <%= javascript_include_tag "modernizr.js" %>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script src="/javascripts/selectivizr-min.js" type="text/javascript"></script>
     <![endif]-->
@@ -42,10 +42,10 @@
           Git is a member of the <a href="#">Software Freedom Conservancy</a>
         </div>
       </footer>
-      <script src="/javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>
-      <script src="/javascripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
-      <script src="/javascripts/jquery.defaultvalue.js" type="text/javascript"></script>
-      <script src="/javascripts/site.js" type="text/javascript"></script>
+      <%= javascript_include_tag "jquery-1.7.1.min.js" %>
+      <%= javascript_include_tag "jquery-ui-1.8.18.custom.min.js" %>
+      <%= javascript_include_tag "jquery.defaultvalue.js" %>
+      <%= javascript_include_tag "site.js" %>
     </div>
   </body>
 </html>

app/views/shared/_footer.html.haml

@@ -0,0 +1,9 @@
+%footer
+  %div.site-source
+    The <a href="#">source for this page</a> (and this <a href="#">entire site</a>) is hosted on GitHub.<br>
+    Patches, suggestions, and comments are welcome.
+
+  %div.sfc-member
+    Git is a member of the <a href="#">Software Freedom Conservancy</a>
+
+= javascript_include_tag "jquery-1.7.1.min.js", "jquery-ui-1.8.18.custom.min.js", "jquery.defaultvalue.js", "site.js"

app/views/shared/_header.html.erb

@@ -1,8 +0,0 @@
-<div class="row header">
-  <div class="span8">
-    <img src="/images/logo.png">
-  </div>
-  <div class="span4">
-    <input name="search"/>
-  </div>
-</div>

app/views/shared/_header.html.haml

@@ -0,0 +1,38 @@
+%header
+  <a href="/"><img src="/images/logo.png" /></a>
+  %span#tagline
+    \--random-clever-tagline-here
+
+  %form#search
+    <input placeholder="Search entire site..." type="text" />
+
+  %div#search-results
+    %header Search Results
+    %table
+      %tr.show-all
+        %td.category &nbsp;
+        %td.matches
+          %ul
+            %li
+              <a href="#">Show all results...</a>
+      %tr
+        %td.category Reference
+        %td.matches
+          %ul
+            %li
+              <a href="#">git-rebase(1) Manual Page</a>
+      %tr
+        %td.category Book
+        %td.matches
+          %ul
+            %li
+              <a href="#">Rebasing <span class="metadata">Chapter 3: Git Branching</span></a>
+      %tr
+        %td.category Videos
+        %td.matches
+          %ul
+            %li
+              <a href="#">Understanding Rebase and Merge <span class="metadata">Length: 8:12</span></a>
+            %li
+              <a href="#">Another Video About Rebasing<span class="metadata">Length: 24:55</span></a>
+

app/views/site/index.html.erb

@@ -1,46 +0,0 @@
-<div class="hero-unit">
-
-  <div class="row">
-    <div class="span6">
-      <p>Git is a <strong>free</strong> & <strong>open source, distributed version control system</strong>
-      designed to handle everything from small to very large projects
-      with speed and efficiency.</p>
-
-      <p>Git is easy to learn, has lightning fast performance and a tiny footprint.
-      It outclasses SCM tools like Subversion, CVS, Perforce, ClearCase and Team
-      Foundation Server with features like cheap local branching, simple merging,
-      distributed workflows and convenient staging areas.</p>
-    </div>
-    <div class="span4">
-      <img src="/images/mocks/awesome-branch-mock.jpg">
-    </div>
-  </div>
-
-</div>
-
-<div class="row">
-  <div class="span7">
-    <a href="/doc"><img src="/images/mocks/menu-mock.jpg"></a>
-  </div>
-  <div class="span5">
-    <img src="/images/mocks/download-mock.jpg">
-  </div>
-</div>
-
-<div class="row">
-  <div class="span7">
-    <h2>Projects Using Git</h2>
-    <img src="/images/mocks/projects-mock.jpg">
-  </div>
-  <div class="span5">
-    <div class="book">
-      <div>
-        <img src="/images/book.png">
-        <p>The entire Pro Git book written by Scott Chacon is
-        available to read online for free. Dead tree versions
-        are available on Amazon.com.</p>
-      </div>
-    </div>
-  </div>
-</div>
-

app/views/site/index.html.haml

@@ -0,0 +1,76 @@
+- @section = "home"
+- @subsection = ""
+
+%div#front-content
+  %section#front-navigation
+    %nav#front-nav
+      %ul
+        %li#nav-about
+          <a href="/about">
+          <img src="/images/icons/nav-about.png" />
+          <h3>About</h3>
+          <p>A technical overview of how Git works.</p>
+          </a>
+        %li#nav-documentation
+          <a href="/documentation">
+          <img src="/images/icons/nav-documentation.png" />
+          <h3>Documentation</h3>
+          <p>Man pages, Pro Git book content, and other reference material.</p>
+          </a>  
+        %li#nav-downloads
+          <a href="/downloads">
+          <img src="/images/icons/nav-downloads.png" />
+          <h3>Downloads</h3>
+          <p>GUI clients and binary releases for all major platforms.</p>
+          </a>
+        %li#nav-community
+          <a href="/community">
+          <img src="/images/icons/nav-community.png" />
+          <h3>Community</h3>
+          <p>Blogs, forums, mailing lists, and more.</p> </a>
+
+    %div#front-book
+      <img src="/images/pro-git-56x74.jpg" />
+      %p
+        <strong><a href="#">Pro Git</a></strong> by Scott Chacon is available to <a href="#">read online for free</a>. Dead tree versions are available on <a href="#">Amazon.com</a>.
+
+  %section#front-downloads
+    %div.monitor.mac
+      %h4 Latest stable release
+      %span.version 1.7.9.5
+
+      =link_to "Release Notes"
+      %span.release-date (2012-26-03)
+
+      =link_to "Download for Mac", "#", {:class => 'button'}
+
+    %table
+      %tr
+        %td= link_to "Mac GUI Clients", "#", {:class => 'icon gui'}
+        %td= link_to "Older Releases", "#", {:class => 'icon older-releases'}
+      %tr
+        %td= link_to "Windows Build", "#", {:class => 'icon windows'}
+        %td= link_to "Source Code", "#", {:class => 'icon source'}
+
+
+%section#companies-projects
+  %h3 Companies &amp; Projects Using Git
+
+  %ul
+    %li= link_to "Facebook", "#", {:class => 'facebook'}
+    %li= link_to "Google", "#", {:class => 'google'}
+    %li= link_to "Twitter", "#", {:class => 'twitter'}
+    %li= link_to "Microsoft", "#", {:class => 'microsoft'}
+    %li= link_to "LinkedIn", "#", {:class => 'linked-in'}
+    %li= link_to "Linux", "#", {:class => 'linux'}
+    %li= link_to "Perl", "#", {:class => 'perl'}
+    %li= link_to "PostgreSQL", "#", {:class => 'postgresql'}
+
+    %li= link_to "Android", "#", {:class => 'android'}
+    %li= link_to "Debian", "#", {:class => 'debian'}
+    %li= link_to "Ruby on Rails", "#", {:class => 'rails'}
+    %li= link_to "Qt", "#", {:class => 'qt'}
+    %li= link_to "Gnome", "#", {:class => 'gnome'}
+    %li= link_to "Eclipse", "#", {:class => 'eclipse'}
+    %li= link_to "KDE", "#", {:class => 'kde'}
+    %li= link_to "X", "#", {:class => 'x'}

config/application.rb

@@ -48,7 +48,7 @@ module Gitscm
     # This will create an empty whitelist of attributes available for mass-assignment for all models
     # in your app. As such, your models will need to explicitly whitelist or blacklist accessible
     # parameters by using an attr_accessible or attr_protected declaration.
-    # config.active_record.whitelist_attributes = true
+    config.active_record.whitelist_attributes = true
 
     # Enable the asset pipeline
     config.assets.enabled = true

lib/tasks/copy.rake

@@ -0,0 +1,12 @@
+task :copy do
+  puts "copying images"
+  `cp -Rf ../scm-mock/source/images/* public/images/`
+  puts "copying styles"
+  `cp -Rf ../scm-mock/source/stylesheets/* app/assets/stylesheets/`
+  puts "copying js"
+  `cp -Rf ../scm-mock/source/javascripts/* app/assets/javascripts/`
+  puts 'copying layouts'
+  `cp ../scm-mock/source/layout.haml app/views/layouts/layout.html.haml`
+  `cp ../scm-mock/source/index.html.haml app/views/site/`
+  `cp ../scm-mock/source/shared/_* app/views/shared/`
+end