Skip to content

Commit 6b34dcc

Browse files
mziccardmziccard
committed
Tabbed view with examples in landing page
1 parent e13fc60 commit 6b34dcc

File tree

4 files changed

+116
-18
lines changed

4 files changed

+116
-18
lines changed

‎src/site/resources/css/site.css‎

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,50 @@ h1, h2, h3, h4, h5, h6 {
333333
What is it?
334334
*/
335335
.about pre {
336-
font-size: 110%;
336+
padding: 8px;
337+
background: #fff;
338+
line-height: 1.6em;
339+
}
340+
341+
pre, code {
342+
font-family: Monaco, 'Droid Sans Mono', monospace !important;
343+
}
344+
345+
.about .code-sample-tabs {
346+
margin-top: 10px;
347+
width: 450px;
348+
}
349+
350+
.about .code-sample-tabs a.selected {
351+
background-color: #fff;
352+
font-weight: bold;
353+
}
354+
355+
.about .code-sample-tabs a {
356+
display: inline-block;
357+
padding: 2px 12px 0px 12px;
358+
background-color: #f8f8f8;
359+
margin-right: 8px;
360+
color: #333;
361+
text-decoration: none;
362+
cursor: pointer;
363+
}
364+
365+
.about .hljs {
366+
background-color: #fff;
367+
font-size: .9em;
368+
line-height: 1.6em;
369+
}
370+
371+
.hljs {
372+
display: block;
373+
padding: .5em;
374+
color: #333;
375+
background: #f8f8f8;
376+
}
377+
378+
[hljs] > pre {
379+
margin: 0 !important;
337380
}
338381

339382
/*
@@ -507,7 +550,7 @@ h1, h2, h3, h4, h5, h6 {
507550
}
508551

509552
.about h4 {
510-
margin-bottom: 0;
553+
margin: 0;
511554
font-size: 1.2em;
512555
font-weight: bold;
513556
color: #4285f4;
@@ -1114,6 +1157,16 @@ h1, h2, h3, h4, h5, h6 {
11141157
font-size: 2em;
11151158
}
11161159

1160+
.quote-box {
1161+
width: 40%;
1162+
float: left;
1163+
}
1164+
1165+
.quote-box--supplementary {
1166+
float: right;
1167+
width: 56%;
1168+
}
1169+
11171170
/*
11181171
Hero Banner
11191172
*/

‎src/site/resources/index.html‎

Lines changed: 54 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
1616
<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'>
1717
</head>
18-
<body>
18+
<body ng-app="gcloud-java">
1919
<header class="page-header" role="banner">
2020
<h1 class="logo"><img src="img/logo-full.svg" alt="Google Cloud Platform" /></h1>
2121
<nav class="main-nav">
@@ -107,6 +107,7 @@ <h2>Quickstart with Maven: Add gcloud to your pom.xml</h2>
107107

108108
<section class="block about">
109109
<div class="container clearfix">
110+
<div class="quote-box">
110111
<h3 class="block-title">What is it?</h3>
111112

112113
<p><code>gcloud</code> is a client library for accessing Google
@@ -123,22 +124,58 @@ <h3 class="block-title">What is it?</h3>
123124
Add the <code>gcloud</code> dependency to your project and get a private key to be
124125
up and ready to go. Better yet, if you are running on a Google
125126
Compute Engine instance, the private key is automatically detected.
126-
127+
</div>
128+
129+
<div class="quote-box--supplementary">
127130
<h4>Example: Retrieve Datastore Entries</h4>
128-
129-
<div hljs="" language="js">
130-
<pre><code class="hljs java"><span class="hljs-keyword">import</span> com.google.gcloud.datastore.Datastore;
131-
<span class="hljs-keyword">import</span> com.google.gcloud.datastore.DatastoreFactory;
132-
<span class="hljs-keyword">import</span> com.google.gcloud.datastore.DatastoreOptions;
133-
<span class="hljs-keyword">import</span> com.google.gcloud.datastore.Entity;
134-
<span class="hljs-keyword">import</span> com.google.gcloud.datastore.Key;
135-
<span class="hljs-keyword">import</span> com.google.gcloud.datastore.KeyFactory;
136-
137-
DatastoreOptions options = DatastoreOptions.builder().projectId(<span class="hljs-string">PROJECT_ID</span>).build();
131+
132+
<div class="code-sample-tabs" ng-init="selected = 'compute engine'">
133+
<a ng-click="selected = 'compute engine'" ng-class="{selected: selected == 'compute engine'}" class="selected">Run in Compute/App Engine</a>
134+
<a ng-click="selected = 'elsewhere'" ng-class="{selected: selected == 'elsewhere'}">Run elsewhere</a>
135+
</div>
136+
137+
<div hljs="" language="java" ng-show="selected == 'compute engine'" class=""><pre>
138+
<code class="hljs java">import com.google.gcloud.datastore.Datastore;
139+
import com.google.gcloud.datastore.DatastoreFactory;
140+
import com.google.gcloud.datastore.DatastoreOptions;
141+
import com.google.gcloud.datastore.Entity;
142+
import com.google.gcloud.datastore.Key;
143+
import com.google.gcloud.datastore.KeyFactory;
144+
145+
146+
// Authentication is automatic inside Google Compute Engine
147+
// and Google App Engine.
148+
DatastoreOptions options = DatastoreOptions.builder()
149+
.projectId(PROJECT_ID)
150+
.build();
151+
152+
Datastore datastore = DatastoreFactory.instance().get(options);
153+
KeyFactory keyFactory = datastore.newKeyFactory().kind(KIND);
154+
Key key = keyFactory.newKey(keyName);
155+
Entity entity = datastore.get(key);
156+
</code></pre></div>
157+
158+
<div hljs="" language="java" ng-show="selected == 'elsewhere'" class=""><pre>
159+
<code class="hljs java">import com.google.gcloud.AuthCredentials;
160+
import com.google.gcloud.datastore.Datastore;
161+
import com.google.gcloud.datastore.DatastoreFactory;
162+
import com.google.gcloud.datastore.DatastoreOptions;
163+
import com.google.gcloud.datastore.Entity;
164+
import com.google.gcloud.datastore.Key;
165+
import com.google.gcloud.datastore.KeyFactory;
166+
167+
DatastoreOptions options = DatastoreOptions.builder()
168+
.projectId(PROJECT_ID)
169+
.authCredentials(AuthCredentials.createForJson(
170+
new FileInputStream(PATH_TO_JSON_KEY)))
171+
.build();
172+
138173
Datastore datastore = DatastoreFactory.instance().get(options);
139-
KeyFactory keyFactory = datastore.newKeyFactory().kind(<span class="hljs-string">KIND</span>);
174+
KeyFactory keyFactory = datastore.newKeyFactory().kind(KIND);
140175
Key key = keyFactory.newKey(keyName);
141-
Entity entity = datastore.get(key);</code></pre></div>
176+
Entity entity = datastore.get(key);
177+
</code></pre></div>
178+
</div>
142179
</div><!-- end of .container -->
143180
</section><!-- end of .featuring -->
144181

@@ -154,9 +191,11 @@ <h4>What is the relationship between gcloud and the Google APIs Java Client?</h4
154191
</section><!-- end of .faq -->
155192
</article><!-- end of .main -->
156193

157-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
194+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
195+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
158196
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
159197
<script src="js/plugins.js"></script>
198+
<script src="js/vendor/highlight.pack.js"></script>
160199
<script src="js/main.js"></script>
161200
</body>
162201
</html>

‎src/site/resources/js/main.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,9 @@ $('.nav-current').click(function(){
44

55
$('.faq-btn').click(function(){
66
$(this).toggleClass('open');
7-
});
7+
});
8+
9+
(function() {
10+
var myAppModule = angular.module('gcloud-java', []);
11+
hljs.initHighlightingOnLoad();
12+
})();

‎src/site/resources/js/vendor/highlight.pack.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)