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' }); |
This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.
