scripting/getRepositoryDirectory.html

## getRepositoryDirectory.html
<html>
	<head>
		<title>GitHub API: Get repo directory</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
		<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
		<script src="http://fargo.io/code/bootstrap.min.js"></script>
		<link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css">
		<script>
			/*
			A sample web app that travels through the River5 repository on my GitHub account,
			producing a directory structure that reflects the structure of the repo.

			I couldn't find sample code that does this simple thing, now I won't have to hunt
			for it, and neither will you. ;-)

			You can run this app here:

			http://scripting.com/misc/code/githubapi/directory.html

			Dave Winer
			June 21, 2017
			*/

			function readHttpFile (url, callback) {
				var jxhr = $.ajax ({
					url: url,
					dataType: "text"
					})
				.success (function (data, status) {
					callback (data);
					})
				.error (function (status) {
					console.log ("readHttpFile: url == " + url + ", error == " + jsonStringify (status));
					callback (undefined);
					});
				}
			function getDirectoryStruct (userName, repositoryName, callback) {
				var baseUrl = "https://api.github.com/repos/" + userName + "/" + repositoryName + "/contents";
				function readDirectory (url, callback) {
					readHttpFile (url, function (jsontext) {
						var jstruct = JSON.parse (jsontext), theDirectory = new Array ();
						function doNextFile (ix) {
							if (ix < jstruct.length) {
								var file = jstruct [ix];
								if (file.type == "dir") {
									readDirectory (file.url, function (theSubDirectory) {
										var obj = {
											name: file.name,
											subs: theSubDirectory
											};
										theDirectory.push (obj);
										doNextFile (ix + 1);
										});
									}
								else {
									var obj = {
										name: file.name,
										url: file.download_url
										};
									theDirectory.push (obj);
									doNextFile (ix + 1);
									}
								}
							else {
								callback (theDirectory);
								}
							}
						doNextFile (0);
						});
					}
				readDirectory (baseUrl, function (theDirectory) {
					callback (theDirectory);
					});
				}
			function startup () {
				console.log ("startup");
				getDirectoryStruct ("scripting", "river5", function (jstruct) {
					$("#idDirectoryJson").text (JSON.stringify (jstruct, undefined, 4));
					});
				}
			</script>
		<style>
			body {
				font-family: Ubuntu;
				font-size: 18px;
				background-color: whitesmoke;
				}
			.divPageBody {
				width: 60%;
				margin-top: 10px;
				margin-left: auto;
				margin-right: auto;
				}
			</style>
		</head>
	<body>
		<div class="divPageBody">
			<pre id="idDirectoryJson">
				</pre>
			</div>
		<script>
			$(document).ready (function () {
				startup ();
				});
			</script>
		</body>
	</html>
	<html>
	<head>
	<title>GitHub API: Get repo directory</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
	<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
	<script src="http://fargo.io/code/bootstrap.min.js"></script>
	<link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css">
	<script>
	/*
	A sample web app that travels through the River5 repository on my GitHub account,
	producing a directory structure that reflects the structure of the repo.

	I couldn't find sample code that does this simple thing, now I won't have to hunt
	for it, and neither will you. ;-)

	You can run this app here:

	http://scripting.com/misc/code/githubapi/directory.html

	Dave Winer
	June 21, 2017
	*/

	function readHttpFile (url, callback) {
	var jxhr = $.ajax ({
	url: url,
	dataType: "text"
	})
	.success (function (data, status) {
	callback (data);
	})
	.error (function (status) {
	console.log ("readHttpFile: url == " + url + ", error == " + jsonStringify (status));
	callback (undefined);
	});
	}
	function getDirectoryStruct (userName, repositoryName, callback) {
	var baseUrl = "https://api.github.com/repos/" + userName + "/" + repositoryName + "/contents";
	function readDirectory (url, callback) {
	readHttpFile (url, function (jsontext) {
	var jstruct = JSON.parse (jsontext), theDirectory = new Array ();
	function doNextFile (ix) {
	if (ix < jstruct.length) {
	var file = jstruct [ix];
	if (file.type == "dir") {
	readDirectory (file.url, function (theSubDirectory) {
	var obj = {
	name: file.name,
	subs: theSubDirectory
	};
	theDirectory.push (obj);
	doNextFile (ix + 1);
	});
	}
	else {
	var obj = {
	name: file.name,
	url: file.download_url
	};
	theDirectory.push (obj);
	doNextFile (ix + 1);
	}
	}
	else {
	callback (theDirectory);
	}
	}
	doNextFile (0);
	});
	}
	readDirectory (baseUrl, function (theDirectory) {
	callback (theDirectory);
	});
	}
	function startup () {
	console.log ("startup");
	getDirectoryStruct ("scripting", "river5", function (jstruct) {
	$("#idDirectoryJson").text (JSON.stringify (jstruct, undefined, 4));
	});
	}
	</script>
	<style>
	body {
	font-family: Ubuntu;
	font-size: 18px;
	background-color: whitesmoke;
	}
	.divPageBody {
	width: 60%;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	</head>
	<body>
	<div class="divPageBody">
	<pre id="idDirectoryJson">
	</pre>
	</div>
	<script>
	$(document).ready (function () {
	startup ();
	});
	</script>
	</body>
	</html>