Fix #538 - Homepage code sample has tabs for different runtime enviro…

…nments.
googleapis · May 7, 2015 · a1b8021 · a1b8021
1 parent e9c7fa2
commit a1b8021
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git 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
@@ -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'