BoyCook/GitApp.js

## default.css
h1 {
	font-size: 2em;
	color: lightgreen;
}

ul {
	list-style: none;
	padding-left: 5px;
}

## git.html
<html>
<head>
   <link href="/bags/mygit_public/tiddlers/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h1>My GitHub</h1>
     <section>
	<input type="text" id="account" placeholder="Account name..." />
	<input type="button" id="load" value="Load" />
     </section>
	<section class="repos">

	</section>
    <script id="repos-template" type="text/x-handlebars-template">
        <ul>
            {{#each this.repos}}
        	<li>
        	   <a href="https://github.com/BoyCook{{account}}/{{this.name}}" target="_blank">{{this.name}}</a>
		</li>
            {{/each}}
        </ul>
    </script>
    <script src="http://tiddlyspace.com/bags/common/tiddlers/backstage.js"></script>
    <script src="/status.js"></script>
    <script type="text/javascript" src="/bags/common/tiddlers/jquery.js"></script>
    <script type="text/javascript" src="/bags/spaceui_public/tiddlers/handlebars.js"></script>
    <script type="text/javascript" src="/bags/mygit_public/tiddlers/GitApp.js"></script>
</body>
</hmtl>

## GitApp.js
function GitApp(account) {
	this.account = account;
	this.template = Handlebars.compile($('#repos-template').html())
	this.github = 'https://api.github.com';
}

GitApp.prototype.loadRepos = function() {
	var context = this;
	var url = this.github + '/users/' + this.account +  '/repos?per_page=100';
	var callBack = function(data) {
		var html = context.template({ account: context.account, repos: data });
		$('.repos').html(html);
	};
	$.getJSON(url, callBack);
};

$(document).ready(function(){
	$('#load').click(function(){
		var app = new GitApp($('#account').val());
		app.loadRepos();
	});
});

## Makefile
ASSETS := $(wildcard assets/*)
BAG = 'mygit' # Set bag name here

push:
  @for asset in $(ASSETS); do tsapp push_hard $(BAG) `echo $$asset | cut -d '/' -f 2` ; done
	tsapp push_hard $(BAG) git.html
	h1 {
	font-size: 2em;
	color: lightgreen;
	}

	ul {
	list-style: none;
	padding-left: 5px;
	}
	<html>
	<head>
	<link href="/bags/mygit_public/tiddlers/default.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<h1>My GitHub</h1>
	<section>
	<input type="text" id="account" placeholder="Account name..." />
	<input type="button" id="load" value="Load" />
	</section>
	<section class="repos">

	</section>
	<script id="repos-template" type="text/x-handlebars-template">
	<ul>
	{{#each this.repos}}
	<li>
	<a href="https://github.com/BoyCook{{account}}/{{this.name}}" target="_blank">{{this.name}}</a>
	</li>
	{{/each}}
	</ul>
	</script>
	<script src="http://tiddlyspace.com/bags/common/tiddlers/backstage.js"></script>
	<script src="/status.js"></script>
	<script type="text/javascript" src="/bags/common/tiddlers/jquery.js"></script>
	<script type="text/javascript" src="/bags/spaceui_public/tiddlers/handlebars.js"></script>
	<script type="text/javascript" src="/bags/mygit_public/tiddlers/GitApp.js"></script>
	</body>
	</hmtl>
	function GitApp(account) {
	this.account = account;
	this.template = Handlebars.compile($('#repos-template').html())
	this.github = 'https://api.github.com';
	}

	GitApp.prototype.loadRepos = function() {
	var context = this;
	var url = this.github + '/users/' + this.account + '/repos?per_page=100';
	var callBack = function(data) {
	var html = context.template({ account: context.account, repos: data });
	$('.repos').html(html);
	};
	$.getJSON(url, callBack);
	};

	$(document).ready(function(){
	$('#load').click(function(){
	var app = new GitApp($('#account').val());
	app.loadRepos();
	});
	});
	ASSETS := $(wildcard assets/*)
	BAG = 'mygit' # Set bag name here

	push:
	@for asset in $(ASSETS); do tsapp push_hard $(BAG) `echo $$asset \| cut -d '/' -f 2` ; done
	tsapp push_hard $(BAG) git.html