Fix #538 - Homepage code sample has tabs for different runtime environments.

Author: jgeewax

docs/site/css/main.css

@@ -586,6 +586,32 @@ ul {
     color: #4285f4;
 }
 
+.about .code-sample-tabs {
+  margin-top: 10px;
+  width: 450px;
+}
+
+.about .code-sample-tabs a {
+  display: inline-block;
+  padding: 2px 12px 0px 12px;
+  border: 1px solid rgba(0,0,0,0.2);
+  background-color: #fefefe;
+  margin-bottom: -3px;
+  margin-right: 8px;
+  color: #333;
+  text-decoration: none;
+}
+
+.about .code-sample-tabs a.selected {
+  background-color: #f8f8f8;
+  font-weight: bold;
+  border-bottom-color: #f8f8f8;
+}
+
+.about pre {
+  margin-top: 0;
+}
+
 /*
  Examples
  */

docs/site/home.html

@@ -80,9 +80,18 @@ <h3 class="block-title">What is it?</h3>
       </div>
 
       <div class="quote-box--supplementary">
-        <h4>Retrieve Datastore Entities</h4>
-
-        <div hljs language="js">
+        <h4>Example: Retrieve an entity from Cloud Datastore</h4>
+
+        <div class="code-sample-tabs" ng-init="selected = 'compute engine'">
+          <a ng-click="selected = 'anywhere'"
+             ng-class="{selected: selected == 'anywhere'}"
+             >Run anywhere</a>
+          <a ng-click="selected = 'compute engine'"
+             ng-class="{selected: selected == 'compute engine'}"
+             >Run in Compute Engine</a>
+        </div>
+
+        <div hljs language="js" ng-show="selected == 'anywhere'">
 var gcloud = require('gcloud')({
   projectId: 'my-project',
   keyFilename: '/path/to/keyfile.json'
@@ -95,6 +104,14 @@ <h4>Retrieve Datastore Entities</h4>
   console.log(err, entity);
 });</div>
 
+        <div hljs language="js" ng-show="selected == 'compute engine'">
+// Auth is handled automatically inside GCE.
+var dataset = require('gcloud').datastore.dataset();
+var productKey = dataset.key(['Product', 123]);
+
+dataset.get(productKey, function(err, entity) {
+  console.log(err, entity);
+});</div>
       </div>
     </div><!-- end of .container -->
   </section><!-- end of .featuring -->