From 7b2304840405f1d7956494c735c91d8bff094e7e Mon Sep 17 00:00:00 2001
From: Eric Larson <larson.eric.d@gmail.com>
Date: Thu, 20 Jul 2023 20:21:09 -0400
Subject: [PATCH] ENH: Show contributor image on homepage (#11819)

Co-authored-by: Daniel McCloy <dan@mccloy.info>
---
 doc/_static/js/contrib-avatars.js | 51 +++++++++++++++++++++++++++++++
 doc/_static/style.css             | 13 ++++++--
 doc/_templates/layout.html        |  3 ++
 3 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 doc/_static/js/contrib-avatars.js

diff --git a/doc/_static/js/contrib-avatars.js b/doc/_static/js/contrib-avatars.js
new file mode 100644
index 00000000000..d214506099b
--- /dev/null
+++ b/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();
diff --git a/doc/_static/style.css b/doc/_static/style.css
index 8e976e3ffd1..f9ead72d6a9 100644
--- a/doc/_static/style.css
+++ b/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 {
diff --git a/doc/_templates/layout.html b/doc/_templates/layout.html
index 6bb88d43ed1..a016af6141f 100644
--- a/doc/_templates/layout.html
+++ b/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 %}