"Contributed by" widget, recognize contributors on each page

[heathermiller]

It'd be nice to have a list of people (as github user icons) under a subsection called "contributed by" on each page.

[sudonatalie]

I have this working locally:

It requires explicitly listing contributors in the front matter, like so:

---
layout: overview-large
title: Overview

contributors:
 - heathermiller
 - xeno-by
 - phaller
 - Offline Joe
---

It gets links, full names and gravatars with JS on page load, which is less than ideal, but I don't think it can be done statically with safe-mode GitHub pages. (I could be wrong.)

Comments/suggestions?

[SethTisue]

Ooohhhh, that screen shot looks nice.

It requires explicitly listing contributors in the front matter

I think we'd need a script that would fetch and update that information automatically via the GitHub API. I don't think we have a prayer of manually maintaining this information.

[sake92]

Following this answer I managed to get this via Github API:

Unfortunately, the right sidebar then goes down. I don't know what to tweak in order to squeeze all three columns together (contributors, content and sidebar). Also don't know how to make it pretty... 😄

If someone wants to try it, add this to /resources/js/functions.js:

//Contributors widget
// see https://stackoverflow.com/a/19200303/4496364
$(document).ready(function () {
	var githubApiUrl = 'https://api.github.com/repos/scala/docs.scala-lang/commits';
	// transform "/tour/basics.html" to "_ba/tour/basics.md";
	var thisPageUrl = window.location.pathname;
	thisPageUrl = thisPageUrl.substring(1, thisPageUrl.lastIndexOf('.'));
	thisPageUrl = '_' + thisPageUrl + '.md';
	// e.g. https://api.github.com/repos/scala/docs.scala-lang/commits?path=README
	var url = githubApiUrl + '?path=' + thisPageUrl;
	$.get(url, function (data, status) {
		var contributorsHtml = '<table>';
		var contributorsUnique = [];
		var res = data.forEach(commit => {
				if (!contributorsUnique.find(c => c.login == commit.author.login)) {
					// add if not already in array
					contributorsUnique.push({
						'login': commit.author.login,
						'avatar_url': commit.author.avatar_url,
						'html_url': commit.author.html_url
					});
				}
			});

		contributorsUnique.forEach(contributor => {
			var contributorHtml = '<tr>';
			// image
			contributorHtml += '<td><img src="' + contributor.avatar_url + '" width="50" height="50"></td>';
			contributorHtml += '<td><a href="' + contributor.html_url + '">' + contributor.login + '</a></td>';
			contributorHtml += '</tr>';
			contributorsHtml += contributorHtml;
		});
		contributorsHtml += '</table>';
		$('.contributors').html(contributorsHtml);
	});
});

and this to /_layouts/tour.html:

<div class="wrap">
    <div>
      <h3>Contributors</h3>
      <div class="contributors"></div>
    </div>

[jvican]

It's likely that you need to make change to scala/scala-lang too, not only this repository, since (I think) all the style and layouts of the website live there.