Tabbed view with examples in landing page

googleapis · Sep 30, 2015 · d9fb1c8 · d9fb1c8
1 parent e13fc60
commit d9fb1c8
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 18 deletions.
diff --git a/src/site/resources/css/site.css b/src/site/resources/css/site.css
@@ -333,7 +333,50 @@ h1, h2, h3, h4, h5, h6 {
  What is it?
  */
 .about pre {
-  font-size: 110%;
+    padding: 8px;
+    background: #fff;
+    line-height: 1.6em;
+}
+
+pre, code {
+    font-family: Monaco, 'Droid Sans Mono', monospace !important;
+}
+
+.about .code-sample-tabs {
+    margin-top: 10px;
+    width: 450px;
+}
+
+.about .code-sample-tabs a.selected {
+    background-color: #fff;
+    font-weight: bold;
+}
+
+.about .code-sample-tabs a {
+    display: inline-block;
+    padding: 2px 12px 0px 12px;
+    background-color: #f8f8f8;
+    margin-right: 8px;
+    color: #333;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.about .hljs {
+    background-color: #fff;
+    font-size: .9em;
+    line-height: 1.6em;
+}
+
+.hljs {
+    display: block;
+    padding: .5em;
+    color: #333;
+    background: #f8f8f8;
+}
+
+[hljs] > pre {
+    margin: 0 !important;
 }
 
 /*
@@ -507,7 +550,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .about h4 {
-    margin-bottom: 0;
+    margin: 0;
     font-size: 1.2em;
     font-weight: bold;
     color: #4285f4;
@@ -1114,6 +1157,16 @@ h1, h2, h3, h4, h5, h6 {
         font-size: 2em;
     }
 
+    .quote-box {
+        width: 40%;
+        float: left;
+    }
+
+    .quote-box--supplementary {
+        float: right;
+        width: 56%;
+    }
+
     /*
     Hero Banner
     */

diff --git a/src/site/resources/index.html b/src/site/resources/index.html
@@ -15,7 +15,7 @@
         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
         <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Roboto:300,400,700,700italic,400italic|Open+Sans:300' rel='stylesheet' type='text/css'>
     </head>
-    <body>
+    <body ng-app="gcloud-java">
         <header class="page-header" role="banner">
             <h1 class="logo"><img src="img/logo-full.svg" alt="Google Cloud Platform" /></h1>
             <nav class="main-nav">
@@ -107,6 +107,7 @@ <h2>Quickstart with Maven: Add gcloud to your pom.xml</h2>
 
             <section class="block about">
                 <div class="container clearfix">
+                <div class="quote-box">
                   <h3 class="block-title">What is it?</h3>
 
                   <p><code>gcloud</code> is a client library for accessing Google
@@ -123,22 +124,58 @@ <h3 class="block-title">What is it?</h3>
 		    Add the <code>gcloud</code> dependency to your project and get a private key to be
 		    up and ready to go. Better yet, if you are running on a Google
 		    Compute Engine instance, the private key is automatically detected.
-
+                </div>
+
+                <div class="quote-box--supplementary">		  
                   <h4>Example: Retrieve Datastore Entries</h4>
-
-                  <div hljs="" language="js">
-		    <pre><code class="hljs java"><span class="hljs-keyword">import</span> com.google.gcloud.datastore.Datastore;
-<span class="hljs-keyword">import</span> com.google.gcloud.datastore.DatastoreFactory;
-<span class="hljs-keyword">import</span> com.google.gcloud.datastore.DatastoreOptions;
-<span class="hljs-keyword">import</span> com.google.gcloud.datastore.Entity;
-<span class="hljs-keyword">import</span> com.google.gcloud.datastore.Key;
-<span class="hljs-keyword">import</span> com.google.gcloud.datastore.KeyFactory;
-
-DatastoreOptions options = DatastoreOptions.builder().projectId(<span class="hljs-string">PROJECT_ID</span>).build();
+
+                    <div class="code-sample-tabs" ng-init="selected = 'compute engine'">
+                      <a ng-click="selected = 'compute engine'" ng-class="{selected: selected == 'compute engine'}" class="selected">Run in Compute/App Engine</a>
+                      <a ng-click="selected = 'elsewhere'" ng-class="{selected: selected == 'elsewhere'}">Run elsewhere</a>
+                    </div>
+
+                    <div hljs="" language="java" ng-show="selected == 'compute engine'" class=""><pre>
+<code class="java">import com.google.gcloud.datastore.Datastore;
+import com.google.gcloud.datastore.DatastoreFactory;
+import com.google.gcloud.datastore.DatastoreOptions;
+import com.google.gcloud.datastore.Entity;
+import com.google.gcloud.datastore.Key;
+import com.google.gcloud.datastore.KeyFactory;
+
+
+// Authentication is automatic inside Google Compute Engine
+// and Google App Engine.
+DatastoreOptions options = DatastoreOptions.builder()
+  .projectId(PROJECT_ID)
+  .build();
+
+Datastore datastore = DatastoreFactory.instance().get(options);
+KeyFactory keyFactory = datastore.newKeyFactory().kind(KIND);
+Key key = keyFactory.newKey(keyName);
+Entity entity = datastore.get(key);
+</code></pre></div>
+
+                    <div hljs="" language="java" ng-show="selected == 'elsewhere'" class=""><pre>
+<code class="hljs java">import com.google.gcloud.AuthCredentials;
+import com.google.gcloud.datastore.Datastore;
+import com.google.gcloud.datastore.DatastoreFactory;
+import com.google.gcloud.datastore.DatastoreOptions;
+import com.google.gcloud.datastore.Entity;
+import com.google.gcloud.datastore.Key;
+import com.google.gcloud.datastore.KeyFactory;
+
+DatastoreOptions options = DatastoreOptions.builder()
+  .projectId(PROJECT_ID)
+  .authCredentials(AuthCredentials.createForJson(
+    new FileInputStream(PATH_TO_JSON_KEY)))
+  .build();
+
 Datastore datastore = DatastoreFactory.instance().get(options);
-KeyFactory keyFactory = datastore.newKeyFactory().kind(<span class="hljs-string">KIND</span>);
+KeyFactory keyFactory = datastore.newKeyFactory().kind(KIND);
 Key key = keyFactory.newKey(keyName);
-Entity entity = datastore.get(key);</code></pre></div>
+Entity entity = datastore.get(key);
+</code></pre></div>
+                </div>
                 </div><!-- end of .container -->
             </section><!-- end of .featuring -->
 
@@ -154,9 +191,11 @@ <h4>What is the relationship between gcloud and the Google APIs Java Client?</h4
             </section><!-- end of .faq -->
         </article><!-- end of .main -->
 
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
+        <script src="js/vendor/highlight.pack.js"></script>
         <script src="js/main.js"></script>
     </body>
 </html>
diff --git a/src/site/resources/js/main.js b/src/site/resources/js/main.js
@@ -4,4 +4,9 @@ $('.nav-current').click(function(){
 
 $('.faq-btn').click(function(){
 	$(this).toggleClass('open');
-});
+});
+
+(function() {
+  var myAppModule = angular.module('gcloud-java', []);
+  hljs.initHighlightingOnLoad();
+})();
diff --git a/src/site/resources/js/vendor/highlight.pack.js b/src/site/resources/js/vendor/highlight.pack.js