From a1b8021eb66e376ba39beea2c3a82cafbfbe0d1c Mon Sep 17 00:00:00 2001
From: JJ Geewax <jjg@google.com>
Date: Thu, 7 May 2015 10:16:06 -0400
Subject: [PATCH] Fix #538 - Homepage code sample has tabs for different
 runtime environments.

---
 docs/site/css/main.css | 26 ++++++++++++++++++++++++++
 docs/site/home.html    | 23 +++++++++++++++++++++--
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/docs/site/css/main.css b/docs/site/css/main.css
index 1444b34a997..006f63238bd 100755
--- a/docs/site/css/main.css
+++ b/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
  */
diff --git a/docs/site/home.html b/docs/site/home.html
index 5399f483aa3..79d059e8d28 100755
--- a/docs/site/home.html
+++ b/docs/site/home.html
@@ -80,9 +80,28 @@ <h3 class="block-title">What is it?</h3>
       </div>
 
       <div class="quote-box--supplementary">
-        <h4>Retrieve Datastore Entities</h4>
+        <h4>Example: Retrieve an entity from Cloud Datastore</h4>
+
+        <div class="code-sample-tabs" ng-init="selected = 'compute engine'">
+          <a ng-click="selected = 'compute engine'"
+             ng-class="{selected: selected == 'compute engine'}"
+             >Run in Compute Engine</a>
+          <a ng-click="selected = 'elsewhere'"
+             ng-class="{selected: selected == 'elsewhere'}"
+             >Run elsewhere</a>
+        </div>
+
+        <div hljs language="js" ng-show="selected == 'compute engine'">
+// Auth is handled automatically inside GCE.
+var gcloud = require('gcloud');
+var dataset = gcloud.datastore.dataset();
+var productKey = dataset.key(['Product', 123]);
+
+dataset.get(productKey, function(err, entity) {
+  console.log(err, entity);
+});</div>
 
-        <div hljs language="js">
+        <div hljs language="js" ng-show="selected == 'elsewhere'">
 var gcloud = require('gcloud')({
   projectId: 'my-project',
   keyFilename: '/path/to/keyfile.json'