Skip to content
Open {re}Source
Articles

contrib.rocks: Generate an Image of GitHub Repositories Top Contributors

Estimated reading time 2 min
Julien Déramond
Julien Déramond
Open {re}Source • Bootstrap • Orange

contrib.rocks is a an online tool that generates an image of the top contributors of a GitHub repository that can be embedded in any website or Markdown file; including its README file.

It is completely free and maintained by Suguru Inatomi, a.k.a. lacolaco. The source code is available on GitHub:

lacolaco/
contributors-img

This service allows to give a visual representation of the top contributors of any GitHub repository.

Generating such an image of your GitHub repository top contributors can be a great way to show the activity of your GitHub repository and encourage people to contribute, but also to celebrate your top contributors.

How to Use

Usage is pretty straightforward:

  1. Go to https://contrib.rocks/
  2. Enter a GitHub repository (e.g., open-reSource/openresource.dev)

And that’s it! You will get the image representing the top contributors of the GitHub repository you entered.

Then, you can click on the “Get Image URL!” button to get the Markdown code to embed the image in your README file for instance.

<a href="https://github.com/open-reSource/openresource.dev/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=open-reSource/openresource.dev" />
</a>


Made with [contrib.rocks](https://contrib.rocks).

You will notice that the first part of the generated Markdown code is in reality HTML code. You can use this HTML code to embed the image in any website or Markdown file.

Rendering

Here is what it looks like for our openresource.dev GitHub repository:

Made with contrib.rocks.

And here is the same rendering, but on a more active repository like godot:

godotengine/
godot Godot Engine – Multi-platform 2D and 3D game engine

Made with contrib.rocks.

Some parameters can be added to the URL to customize the image:

  • max={number}: Max contributor count (100 by default)
  • columns={number}: Max columns (12 by default)
  • anon={0|1}: Include anonymous users (false by default)

So if we add &max=10&columns=2 to the image URL https://contrib.rocks/image?repo=godotengine/godot we get the following image with only the top 10 contributors and 2 columns:

<a href="https://github.com/godotengine/godot/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=godotengine/godot&max=10&columns=2" />
</a>


Made with [contrib.rocks](https://contrib.rocks).

Made with contrib.rocks.

Tags: