Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabbed view with examples in landing page #191

Merged
merged 3 commits into from
Oct 1, 2015
Merged

Tabbed view with examples in landing page #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1311e0f
Tabbed view with examples in landing page
mziccard Sep 30, 2015
3123b93
Removed PROJECT_ID from GCE/GAE example
mziccard Sep 30, 2015
da3c441
Remove unnecessary lines from landing page examples
mziccard Sep 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 55 additions & 2 deletions src/site/resources/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

/*
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
*/
Expand Down
63 changes: 49 additions & 14 deletions src/site/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand All @@ -123,22 +124,54 @@ <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="hljs 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().build();
Datastore datastore = DatastoreFactory.instance().get(options);
KeyFactory keyFactory = datastore.newKeyFactory().kind(<span class="hljs-string">KIND</span>);
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(<span class="hljs-string">PROJECT_ID</span>)
.authCredentials(AuthCredentials.createForJson(
new FileInputStream(<span class="hljs-string">PATH_TO_JSON_KEY</span>))).build();
Datastore datastore = DatastoreFactory.instance().get(options);
KeyFactory keyFactory = datastore.newKeyFactory().kind(<span class="hljs-string">KIND</span>);
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 -->

Expand All @@ -154,9 +187,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>
7 changes: 6 additions & 1 deletion src/site/resources/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,9 @@ $('.nav-current').click(function(){

$('.faq-btn').click(function(){
$(this).toggleClass('open');
});
});

(function() {
var myAppModule = angular.module('gcloud-java', []);
hljs.initHighlightingOnLoad();
})();
1 change: 1 addition & 0 deletions src/site/resources/js/vendor/highlight.pack.js
View file
Open in desktop

Large diffs are not rendered by default.