Skip to content

Instantly share code, notes, and snippets.

@astray1988

astray1988/index.html

Created January 14, 2015 20:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save astray1988/596e9994a3a475ab828b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save astray1988/596e9994a3a475ab828b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container" id="github-app"></div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Github </h1>
<hr>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is the Github explorer for all of our favourite developers</p>
<ul>
{{#each}}
<li>{{#link-to 'user' this}}{{login}}{{/link-to}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="user">
<div class="row">
<div class="col-md-3">
<div class="well">
<p class="text-center">
{{#link-to 'user' this}}<img {{bind-attr src=avatar_url}} style="width:140px"/>{{/link-to}}
</p>
<h4>{{#link-to 'user' this}}{{name}}{{/link-to}}</h4>
<p>
{{company}}<br/>
{{location}}<br/>
{{email}}<br/>
</p>
<hr/>
<table class="table table-striped">
<tr><td>Followers:</td><td>{{followers}}</td></tr>
<tr><td>Repositories:</td><td>{{public_repos}}</td></tr>
<tr><td>Gists:</td><td>{{public_gists}}</td></tr>
</table>
<p>
{{#link-to 'index'}}Back{{/link-to}}
</p>
</div>
</div>
<div class="col-md-8">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="user/index">
<h2>{{login}}'s Github</h2>
<hr/>
<ul>
<li>{{#link-to 'repositories'}}Repositories{{/link-to}}</li>
<li><a href="#">News and Events</li>
<li><a href="#">Gists</li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="repositories">
<ol class="breadcrumb">
<li>{{#link-to 'index'}}Devs{{/link-to}}</li>
<li>{{#link-to 'user' user}}{{user.login}}{{/link-to}}</li>
<li class="active">Respoistories</li>
</ol>
<table class="table table-striped">
{{#each}}
<tr>
<td><h4>{{#link-to 'repository' this}}{{name}}{{/link-to}}</h4></td>
</tr>
{{/each}}
</table>
</script>
<script type="text/x-handlebars" data-template-name="repository">
<ol class="breadcrumb">
<li>{{#link-to 'index'}}Devs{{/link-to}}</li>
<li>{{#link-to 'user' user}}{{user.login}}{{/link-to}}</li>
<li>{{#link-to 'repositories'}}Repositories{{/link-to}}</li>
<li class="active">{{name}}</li>
</ol>
<h1>{{name}} Repo</h1>
<p>{{description}}</p>
<ul>
<li>language : {{language}}</li>
<li>Watchers : {{watchers}}</li>
<li>Open Issues : {{watchers}}</li>
<li>Clone : <b>{{clone_url}}</b></li>
<li>Web: <a {{bind-attr href=html_url}} target=_blink>{{html_url}}</a></li>
</ul>
<hr/>
<ul class="list-inline">
<li>{{#link-to 'issues'}}Issues{{/link-to}}</li>
<li>{{#link-to 'forks'}}Forks{{/link-to}}</li>
<li>{{#link-to 'commits'}}Commits{{/link-to}}</li>
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" id="issues">
<h4>Issues</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=user.avatar_url}} style="width:120px" /></td>
<td>
{{title}}
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No issues yet! </p>
</td></tr>
{{/each}}
</table>
</script>
<script type="text/x-handlebars" id="forks">
<h4>Forks</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=owner.avatar_url}} style="width:120px" /></td>
<td>
{{full_name}}
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No Forks yet! </p>
</td></tr>
{{/each}}
</table>
</script>
<script type="text/x-handlebars" id="commits">
<h4>Commits</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=author.avatar_url}} style="width:120px" /></td>
<td>
<h5>{{sha}}</h5>
<p>{{commit.message}}</p>
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No commits yet! </p>
</td></tr>
{{/each}}
</table>
</script>
<script id="jsbin-javascript">
window.Github = Ember.Application.create({
rootElement: "#github-app",
LOG_TRANSITIONS:true
});
Github.Router.map(function() {
this.resource("user",{path:"/users/:login"},function(){
this.resource("repositories");
this.resource("repository",{path:"repositories/:name"},function(){
this.resource("issues");
this.resource("forks");
this.resource("commits");
});
});
});
Github.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON("https://api.github.com/users/robconery/followers");
}
});
Github.UserRoute = Ember.Route.extend({
model:function(params){
return Ember.$.getJSON("https://api.github.com/users/" + params.login);
}
});
Github.UserIndexRoute = Ember.Route.extend({
model:function(){
return this.modelFor('user');
console.log(user);
}
});
Github.RepositoriesRoute = Ember.Route.extend({
model:function(){
var user = this.modelFor("user");
return Ember.$.getJSON(user.repos_url);
}
});
Github.RepositoriesController = Ember.ArrayController.extend({
needs:["user"],
user: Ember.computed.alias("controllers.user")
});
Github.RepositoryRoute = Ember.Route.extend({
model:function(params){
var user = this.modelFor("user");
//build the URL for the Repo call manually
var url = "https://api.github.com/repos/" + user.login + "/" + params.name ;
return Ember.$.getJSON(url);
}
});
Github.RepositoryController = Ember.ObjectController.extend({
needs:["user"],
user:Ember.computed.alias("controllers.user"),
forked: Ember.computed.alias("fork")
});
Github.IssuesRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.issues_url.replace("{/number}","");
return Ember.$.getJSON(url);
}
});
Github.ForksRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
return Ember.$.getJSON(repo.forks_url);
}
});
Github.CommitsRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.commits_url.replace("{/sha}","");
return Ember.$.getJSON(url);
}
});
Ember.Handlebars.registerBoundHelper('fromDate',function(theDate){
var today = moment();
var target = moment(theDate);
return target.from(today);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.9.0/ember.js"><\/script>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container" id="github-app"></div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Github </h1>
<hr>
{{outlet}}
</div>
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is the Github explorer for all of our favourite developers</p>
<ul>
{{#each}}
<li>{{#link-to 'user' this}}{{login}}{{/link-to}}</li>
{{/each}}
</ul>
<\/script>
<script type="text/x-handlebars" data-template-name="user">
<div class="row">
<div class="col-md-3">
<div class="well">
<p class="text-center">
{{#link-to 'user' this}}<img {{bind-attr src=avatar_url}} style="width:140px"/>{{/link-to}}
</p>
<h4>{{#link-to 'user' this}}{{name}}{{/link-to}}</h4>
<p>
{{company}}<br/>
{{location}}<br/>
{{email}}<br/>
</p>
<hr/>
<table class="table table-striped">
<tr><td>Followers:</td><td>{{followers}}</td></tr>
<tr><td>Repositories:</td><td>{{public_repos}}</td></tr>
<tr><td>Gists:</td><td>{{public_gists}}</td></tr>
</table>
<p>
{{#link-to 'index'}}Back{{/link-to}}
</p>
</div>
</div>
<div class="col-md-8">
{{outlet}}
</div>
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="user/index">
<h2>{{login}}'s Github</h2>
<hr/>
<ul>
<li>{{#link-to 'repositories'}}Repositories{{/link-to}}</li>
<li><a href="#">News and Events</li>
<li><a href="#">Gists</li>
</ul>
<\/script>
<script type="text/x-handlebars" data-template-name="repositories">
<ol class="breadcrumb">
<li>{{#link-to 'index'}}Devs{{/link-to}}</li>
<li>{{#link-to 'user' user}}{{user.login}}{{/link-to}}</li>
<li class="active">Respoistories</li>
</ol>
<table class="table table-striped">
{{#each}}
<tr>
<td><h4>{{#link-to 'repository' this}}{{name}}{{/link-to}}</h4></td>
</tr>
{{/each}}
</table>
<\/script>
<script type="text/x-handlebars" data-template-name="repository">
<ol class="breadcrumb">
<li>{{#link-to 'index'}}Devs{{/link-to}}</li>
<li>{{#link-to 'user' user}}{{user.login}}{{/link-to}}</li>
<li>{{#link-to 'repositories'}}Repositories{{/link-to}}</li>
<li class="active">{{name}}</li>
</ol>
<h1>{{name}} Repo</h1>
<p>{{description}}</p>
<ul>
<li>language : {{language}}</li>
<li>Watchers : {{watchers}}</li>
<li>Open Issues : {{watchers}}</li>
<li>Clone : <b>{{clone_url}}</b></li>
<li>Web: <a {{bind-attr href=html_url}} target=_blink>{{html_url}}</a></li>
</ul>
<hr/>
<ul class="list-inline">
<li>{{#link-to 'issues'}}Issues{{/link-to}}</li>
<li>{{#link-to 'forks'}}Forks{{/link-to}}</li>
<li>{{#link-to 'commits'}}Commits{{/link-to}}</li>
</ul>
{{outlet}}
<\/script>
<script type="text/x-handlebars" id="issues">
<h4>Issues</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=user.avatar_url}} style="width:120px" /></td>
<td>
{{title}}
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No issues yet! </p>
</td></tr>
{{/each}}
</table>
<\/script>
<script type="text/x-handlebars" id="forks">
<h4>Forks</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=owner.avatar_url}} style="width:120px" /></td>
<td>
{{full_name}}
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No Forks yet! </p>
</td></tr>
{{/each}}
</table>
<\/script>
<script type="text/x-handlebars" id="commits">
<h4>Commits</h4>
<table class="table table-striped">
{{#each}}
<tr>
<td><img {{bind-attr src=author.avatar_url}} style="width:120px" /></td>
<td>
<h5>{{sha}}</h5>
<p>{{commit.message}}</p>
<hr/>
<p class="text-muted">{{fromDate created_at}}</p>
</td>
</tr>
{{else}}
<tr><td>
<p class="text-muted">No commits yet! </p>
</td></tr>
{{/each}}
</table>
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">window.Github = Ember.Application.create({
rootElement: "#github-app",
LOG_TRANSITIONS:true
});
Github.Router.map(function() {
this.resource("user",{path:"/users/:login"},function(){
this.resource("repositories");
this.resource("repository",{path:"repositories/:name"},function(){
this.resource("issues");
this.resource("forks");
this.resource("commits");
});
});
});
Github.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON("https://api.github.com/users/robconery/followers");
}
});
Github.UserRoute = Ember.Route.extend({
model:function(params){
return Ember.$.getJSON("https://api.github.com/users/" + params.login);
}
});
Github.UserIndexRoute = Ember.Route.extend({
model:function(){
return this.modelFor('user');
console.log(user);
}
});
Github.RepositoriesRoute = Ember.Route.extend({
model:function(){
var user = this.modelFor("user");
return Ember.$.getJSON(user.repos_url);
}
});
Github.RepositoriesController = Ember.ArrayController.extend({
needs:["user"],
user: Ember.computed.alias("controllers.user")
});
Github.RepositoryRoute = Ember.Route.extend({
model:function(params){
var user = this.modelFor("user");
//build the URL for the Repo call manually
var url = "https://api.github.com/repos/" + user.login + "/" + params.name ;
return Ember.$.getJSON(url);
}
});
Github.RepositoryController = Ember.ObjectController.extend({
needs:["user"],
user:Ember.computed.alias("controllers.user"),
forked: Ember.computed.alias("fork")
});
Github.IssuesRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.issues_url.replace("{/number}","");
return Ember.$.getJSON(url);
}
});
Github.ForksRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
return Ember.$.getJSON(repo.forks_url);
}
});
Github.CommitsRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.commits_url.replace("{/sha}","");
return Ember.$.getJSON(url);
}
});
Ember.Handlebars.registerBoundHelper('fromDate',function(theDate){
var today = moment();
var target = moment(theDate);
return target.from(today);
});
</script></body>
</html>
Raw
jsbin.rorufupuda.js
window.Github = Ember.Application.create({
rootElement: "#github-app",
LOG_TRANSITIONS:true
});
Github.Router.map(function() {
this.resource("user",{path:"/users/:login"},function(){
this.resource("repositories");
this.resource("repository",{path:"repositories/:name"},function(){
this.resource("issues");
this.resource("forks");
this.resource("commits");
});
});
});
Github.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON("https://api.github.com/users/robconery/followers");
}
});
Github.UserRoute = Ember.Route.extend({
model:function(params){
return Ember.$.getJSON("https://api.github.com/users/" + params.login);
}
});
Github.UserIndexRoute = Ember.Route.extend({
model:function(){
return this.modelFor('user');
console.log(user);
}
});
Github.RepositoriesRoute = Ember.Route.extend({
model:function(){
var user = this.modelFor("user");
return Ember.$.getJSON(user.repos_url);
}
});
Github.RepositoriesController = Ember.ArrayController.extend({
needs:["user"],
user: Ember.computed.alias("controllers.user")
});
Github.RepositoryRoute = Ember.Route.extend({
model:function(params){
var user = this.modelFor("user");
//build the URL for the Repo call manually
var url = "https://api.github.com/repos/" + user.login + "/" + params.name ;
return Ember.$.getJSON(url);
}
});
Github.RepositoryController = Ember.ObjectController.extend({
needs:["user"],
user:Ember.computed.alias("controllers.user"),
forked: Ember.computed.alias("fork")
});
Github.IssuesRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.issues_url.replace("{/number}","");
return Ember.$.getJSON(url);
}
});
Github.ForksRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
return Ember.$.getJSON(repo.forks_url);
}
});
Github.CommitsRoute = Ember.Route.extend({
model:function(){
var repo = this.modelFor("repository");
var url = repo.commits_url.replace("{/sha}","");
return Ember.$.getJSON(url);
}
});
Ember.Handlebars.registerBoundHelper('fromDate',function(theDate){
var today = moment();
var target = moment(theDate);
return target.from(today);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment