Easily embed a GitHub repo onto your site

Repo.js is a jQuery plugin that enables you to embed GitHub repositories into any webpage. It works by reading the repository information from GitHub and dynamically building a DOM tree of the directories. The complete hierarchical structure is downloaded in a single go and saved as a DOM structure, making it extremely fast. However file source for each one is retrieved only when clicked. A simple example for the twitter bootstrap repo is shown below.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jquery.min.js"></script>
    <script src="repo.min.js"></script>
</head>
<body>
    <script type="text/javascript"> 
    $('body').repo({ user: 'twitter', name: 'bootstrap' });
    </script>
</body>
</html>

Make sure that charset="utf-8" is specified on the page as directory icons are not rendered properly without it. You can also customize the repository listing using css if required.

You can also get a specific branch by adding the branch attribute, however the result for the branch is currently somewhat inconsistent.

$('body').repo({ user: 'twitter', name: 'bootstrap', branch: 'gh-pages' });


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>