ENH: Show contributor image on homepage (mne-tools#11819)

Co-authored-by: Daniel McCloy <dan@mccloy.info>

doc/_static/js/contrib-avatars.js

@@ -0,0 +1,51 @@
+async function getContribs(url) {
+    result = await fetch(url);
+    data = await result.json();
+    return data;
+}
+
+function addCards(data, container) {
+    data.forEach((entry) => {
+        let card = document.createElement("div");
+        let anchor = document.createElement("a");
+        let image = document.createElement("img");
+        card.setAttribute("class", "card my-1 mx-2");
+        anchor.setAttribute("href", entry.html_url);
+        image.setAttribute("class", "card-img contributor-avatar");
+        image.setAttribute("src", entry.avatar_url);
+        image.setAttribute("title", entry.login);
+        image.setAttribute("alt", `Contributor avatar for ${entry.login}`);
+        anchor.append(image);
+        card.append(anchor);
+        container.append(card);
+    });
+}
+
+async function putAvatarsInPage() {
+    // container
+    const outer = document.createElement("div");
+    const title = document.createElement("p");
+    const inner = document.createElement("div");
+    outer.setAttribute("id", "contributor-avatars");
+    outer.setAttribute("class", "container my-4");
+    title.setAttribute("class", "h4 text-center font-weight-light");
+    title.innerText = "Contributors";
+    inner.setAttribute("class", "d-flex flex-wrap flex-row justify-content-center align-items-center");
+    // GitHub API returns batches of 100 so we have to loop
+    var page = 1;
+    while (true) {
+      data = await getContribs(
+        `https://api.github.com/repos/mne-tools/mne-python/contributors?per_page=100&page=${page}`
+      );
+      if (!data.length) {
+        break;
+      }
+      addCards(data, container=inner);
+      page++;
+    }
+    // finish
+    outer.append(title, inner);
+    document.getElementById("institution-logos").after(outer);
+}
+
+putAvatarsInPage();

doc/_static/style.css

@@ -313,13 +313,22 @@ div.card {
 
 /* *************************************** homepage funder/institution logos */
 div#funder-logos div.card,
-div#institution-logos div.card,
 div#funder-logos div.card img,
-div#institution-logos div.card img {
+div#institution-logos div.card,
+div#institution-logos div.card img,
+div#contributor-avatars div.card,
+div#contributor-avatars div.card img {
     background-color: unset;
     border: none;
     border-radius: unset;
 }
+div#contributor-avatars div.card img {
+    width: 3em;
+}
+
+.contributor-avatar {
+    clip-path: circle(closest-side);
+}
 
 /* ************************************************************ funders page */
 ul.funders li {

doc/_templates/layout.html

@@ -17,4 +17,7 @@
 {%- block scripts_end %}
     {{ super() }}
     <script src="https://mne.tools/versionwarning.js"></script>
+    {% if pagename == 'index' %}
+      <script src="{{ pathto('_static/js/contrib-avatars.js', 1) }}"></script>
+    {% endif %}
 {%- endblock %}