git diff done

basic/index.html

@@ -57,33 +57,33 @@ layout: reference
     </p>
 
 <pre>
-$ git status -s
-?? README
-?? hello.rb
+<b>$ git status -s</b>
+<span class="red">??</span> README
+<span class="red">??</span> hello.rb
 </pre>
 
     So right now we have two untracked files.  We can now add them.
 
 <pre>
-$ git add README hello.rb
+<b>$ git add README hello.rb</b>
 </pre>
     
     Now if we run <code>git status</code> again, we'll see that they've been
     added.
 
 <pre>
-$ git status -s
-A  README
-A  hello.rb
+<b>$ git status -s</b>
+<span class="green">A</span>  README
+<span class="green">A</span>  hello.rb
 </pre>
 
     <p>OK, so now if we edit one of these files and run <code>git status</code>
     again, we will see something odd.</p>
 <pre>
-$ vim README
-$ git status -s
-AM README
-A  hello.rb
+<b>$ vim README</b>
+<b>$ git status -s</b>
+<span class="green">A</span><span class="red">M</span> README
+<span class="green">A</span>  hello.rb
 </pre>
 
     <p>The 'AM' status means that the file has been modified on disk since we
@@ -184,6 +184,7 @@ A  hello.rb
 <span class="green">M</span><span class="red">M</span> README
  <span class="red">D</span> hello.rb
 </pre>
+
     <p class="nutshell">
     <strong>In a nutshell</strong>, 
     you run <code>git status</code> to see if anything has been modified 
@@ -191,9 +192,183 @@ A  hello.rb
     commit a new snapshot and what will be recorded in it.
     </p>
 
+  </div>
+</div>
 
+<div class="box">
+  <h2>
+    <span class="docs">
+      <a href="#">docs</a> &nbsp;
+      <a href="#">book</a>
+    </span>
+    <a name="diff">git diff</a>
+    <span class="desc">shows diff of what is staged and what is modified but unstaged</span>
+  </h2>
+
+  <div class="block">
+    <p>There are two main uses of the <code>git diff</code> command.  One use we
+    will describe here, the other we will describe later in the 
+    <a href="/inspection">"Inspection and Comparison"</a>
+    section. The way we're going to use it here is to describe the
+    changes that are staged or modified on disk but unstaged.</p>
+
+    <h4>
+      git diff
+      <small>show diff of unstaged changes</small>
+    </h4>
+
+    <p>Without any extra arguments, a simple <code>git diff</code> will display
+    in unified diff format (a patch) what code or content you've changed in your
+    project since the last commit that are not yet staged for the next commit
+    snapshot.
     </p>
 
+<pre>
+<b>$ vim hello.rb</b>
+<b>$ git status -s</b>
+ <span class="red">M</span> hello.rb
+<b>$ git diff</b>
+<span class="umber">diff --git a/hello.rb b/hello.rb
+index d62ac43..8d15d50 100644
+--- a/hello.rb
++++ b/hello.rb</span>
+<span class="lblue">@@ -1,7 +1,7 @@</span>
+ class HelloWorld
+   
+   def self.hello
+<span class="red">-    puts "hello world"</span>
+<span class="green">+    puts "hola mundo"</span>
+   end
+ 
+ end
+</pre>
+
+    <p>So where <code>git status</code> will show you what files have changed 
+    and/or been staged since your last commit, <code>git diff</code> will
+    show you what those changes actually are, line by line.  It's generally
+    a good follow-up command to <code>git status</code>
+    </p>
+
+    <h4>
+      git diff --cached
+      <small>show diff of staged changes</small>
+    </h4>
+
+    <p>The <code>git diff --cached</code> command will show you what contents
+    have been staged.  That is, this will show you the changes that will 
+    currently go into the next commit snapshot.  So, if you were to stage
+    the change to <code>hello.rb</code> in the example above, 
+    <code>git diff</code> by itself won't show you any output because it will
+    only show you what is <i>not yet</i> staged.
+    </p>
+
+<pre>
+<b>$ git status -s</b>
+ <span class="red">M</span> hello.rb
+<b>$ git add hello.rb </b>
+<b>$ git status -s</b>
+<span class="green">M</span>  hello.rb
+<b>$ git diff</b>
+<b>$ </b>
+</pre>
+
+    <p>If you want to see the staged changes, you can run 
+    <code>git diff --cached</code> instead.</p>
+
+<pre>
+<b>$ git status -s</b>
+<span class="green">M</span>  hello.rb
+<b>$ git diff</b>
+<b>$ </b>
+<b>$ git diff --cached</b>
+<span class="umber">diff --git a/hello.rb b/hello.rb
+index d62ac43..8d15d50 100644
+--- a/hello.rb
++++ b/hello.rb</span>
+<span class="lblue">@@ -1,7 +1,7 @@</span>
+ class HelloWorld
+   
+   def self.hello
+<span class="red">-    puts "hello world"</span>
+<span class="green">+    puts "hola mundo"</span>
+   end
+ 
+ end
+</pre>
+
+    <h4>
+      git diff HEAD
+      <small>show diff of all staged or unstaged changes</small>
+    </h4>
+
+    <p>If you want to see both staged and unstaged changes together, you
+    can run <code>git diff HEAD</code> - this basically means you want to
+    see the difference between your working directory and the last commit,
+    ignoring the staging area. If we make another change to our 
+    <code>hello.rb</code> file then we'll have some changes staged and some
+    changes unstaged.  Here are what all three <code>diff</code> commands
+    will show you:</p>
+<pre>
+<b>$ vim hello.rb </b>
+<b>$ git diff</b>
+<span class="umber">diff --git a/hello.rb b/hello.rb
+index 4f40006..2ae9ba4 100644
+--- a/hello.rb
++++ b/hello.rb</span>
+<span class="lblue">@@ -1,7 +1,7 @@</span>
+ class HelloWorld
+   
+<span class="green">+  # says hello</span>
+   def self.hello
+     puts "hola mundo"
+   end
+ 
+ end
+<b>$ git diff --cached</b>
+<span class="umber">diff --git a/hello.rb b/hello.rb
+index 2aabb6e..4f40006 100644
+--- a/hello.rb
++++ b/hello.rb</span>
+<span class="lblue">@@ -1,7 +1,7 @@</span>
+ class HelloWorld
+ 
+   def self.hello
+<span class="red">-    puts "hello world"</span>
+<span class="green">+    puts "hola mundo"</span>
+   end
+ 
+ end
+<b>$ git diff HEAD</b>
+<span class="umber">diff --git a/hello.rb b/hello.rb
+index 2aabb6e..2ae9ba4 100644
+--- a/hello.rb
++++ b/hello.rb</span>
+<span class="lblue">@@ -1,7 +1,8 @@</span>
+ class HelloWorld
+ 
+<span class="green">+  # says hello</span>
+   def self.hello
+<span class="red">-    puts "hello world"</span>
+<span class="green">+    puts "hola mundo"</span>
+   end
+ 
+ end
+</pre>
+
+    <p>
+    You can also provide a file path at the end of any of these options
+    to limit the <code>diff</code> output to a specific file or subdirectory.
+    </p>
+
+
+    <p class="nutshell">
+    <strong>In a nutshell</strong>, 
+    you run <code>git diff</code> to see details of the <code>git status</code>
+    command - <i>how</i> files have been modified or staged on a line by line
+    basis. 
+    </p>
+
+
   </div>
 </div>
 

css/layout.css

@@ -40,6 +40,7 @@ p.nutshell {
   margin-top: 10px;
   padding: 8px;
   background: #ffe; 
+  color: #555;
 }
 
 .box code.code {
@@ -51,9 +52,22 @@ p.nutshell {
   margin: 10px;
   color: #555;
 }
-code.code b { color: #111; }
-.red { color: #833; }
+pre b { color: #111; }
+.red { color: #d33; }
 .green { color: #383; }
+.umber { color: #8A3324; }
+.lblue { color: #55a; }
+
+.box h4 { 
+  font-family:monospace;
+  margin-top: 20px;
+}
+.box h4 small { 
+  color: #888;
+  font-size: 0.8em;
+  margin-left: 10px;
+  font-weight: normal;
+}
 
 .note { 
   float: right;