Fork me on GitHub
give props to your

contributors

About

contributors is a JavaScript widget to display the contributors of an open source Github project.

Downloads

Motivation

I wanted to give props to the people who spend their valuable time to improve open source software by listing them on the project websites.

How to use

When contributors.js is loaded you can use the contributors.generate method to generate a list of the contributors.

Parameters

user
Github user/organization
repository
Github repository of user/organization
options (optional)
imageSize (default: 30px)
Size of the Gravatar images
placeholder
A DOM-Element or the string of an element's ID where the contributors should be appended to
maxContributors
Limit the list of contributors to the provided count
callback (optional)
Called with the contributors list as string parameter

Simple Example

<div id="coffee-script-contributors"></div>
<script>
contributors.generate('jashkenas', 'coffee-script',
  { placeholder: 'coffee-script-contributors'});
</script>
or another way with jQuery could be 
<div id="coffee-script-contributors"></div>
<script>
contributors.generate('jashkenas', 'coffee-script', {}, function(contributors) {
  $('#coffee-script-contributors').html(contributors);
});
</script>

Styling can be found here: example/contributors.css

Another Example

<div id="brunch-contributors"></div>
<script>
var el = document.getElementById('brunch-contributors')
contributors.generate('brunch', 'brunch', { imageSize: 40, placeholder: el });
</script>

Styling can be found here: example/brunch-contributors.css

List Structure

The generated list includes two different types of entries.

Contributor Entry

<li>
  <a href="[Github user URL]">
    <img width="[image size]" height="[image size]" src="[Gravatar URL]">
    <span>[name with Github login as fallback]</span>
  </a>
</li>

Github Anonymous Contributor Entry

<li>
  <img width="[image size]" height="[image size]"
  src="https://d3nwyuy0nl342s.cloudfront.net/images/gravatars/gravatar-140.png">
  <span>[name]</span>
</li>

Github Api v2

I picked API v2, because API v3 doesn't provide the name when fetching the contributors of a repository. The only way to get the real name in API v3 is to create another API request.

License

Contributors is licensed under MIT - Copyright 2011 Nikolaus Graf, blossom

Development

Source can be found on Github: https://github.com/blossom/contributors

This widget is developed in CoffeeScript. The command cake watch compiles all source including the tests. cake minify generates a minifed version based on lib/contributors.js.

To run the test suite open test/runner.html

Contributors

tiny logoblossom lab