Skip to content

Getting Started

Jump to bottom Edit New page
Akshay Sharma edited this page Apr 6, 2015 · 2 revisions

This documentation is designed to let you quickly start exploring and developing web applications with the Github.js library.

Download and Setup

  1. Create a project folder myapp.

  2. Create index.html file in the project folder.(leave it empty, we'll add content later)

  3. Download the underscore.js library from here. Create a folder named underscore. Then, save the file as underscore.min.js in underscore folder.

[Note: Use the production version for improving performance.]

  1. Download Github.js library from here.

  2. Unzip the zip file github-js-master.zip in the project folder.

  3. Rename the unziped folder to github-js.

  4. Now, you should have folder structure like this:

	myapp/
    |
    |---index.html
    |   
    |---github-js/
    |   |---.gitignore
    |   |---bower.json
    |   |---Gruntfile.js
    |   |---LICENSE
    |   |---package.json
    |   |---README.md
    |   |   
    |   |---dist/
    |   |   |---github.min.css
    |   |   |---github.min.js
    |   |       
    |   |---src/
    |       |---github.css
    |       |---github.js
    |           
    |---underscore/
        |---underscore-min.js

Linking it to a web page

Copy the HTML below to link index.html with the library.

<!DOCTYPE html>
<html>
<head>
	<title>My App</title>
	<!-- Adding CSS stylesheet -->
	<link rel="stylesheet" type="text/css" href="github-js/dist/github.min.css">
</head>
<body>
	<div id="myProfile">
	</div>
    <!-- Adding underscore.js dependency -->
	<script type="text/javascript" src="underscore/underscore-min.js"></script>
	<!-- Adding github.js library -->
	<script type="text/javascript" src="github-js/dist/github.min.js"></script>
</body>
</html>

Using library functions

Get the widgets using the below JavaScript code.

<!DOCTYPE html>
<html>
<head>
	<title>My App</title>
	<!-- Adding CSS stylesheet -->
	<link rel="stylesheet" type="text/css" href="github-js/dist/github.min.css">
</head>
<body>
	<div id="myProfile">
	</div>
    <!-- Adding underscore.js dependency -->
	<script type="text/javascript" src="underscore/underscore-min.js"></script>
	<!-- Adding github.js library -->
	<script type="text/javascript" src="github-js/dist/github.min.js"></script>
    <!-- Using library functions -->
	<script type="text/javascript">
		Github.userActivity({
        	username: 'akshaykumar6',
        	selector: '#myProfile'
		});
	</script>
</body>
</html>

You can style the #myProfile div as per your requirement. Refer the documentation for more functions.

Add a custom footer
Add a custom sidebar
Clone this wiki locally