use the GitHub API instead

larsoner · Jul 20, 2023 · 1a88272 · 1a88272
1 parent 2cf51f6
commit 1a88272
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 13 deletions.
diff --git a/doc/_static/js/contrib-avatars.js 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
@@ -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/homepage.html b/doc/_templates/homepage.html
@@ -42,14 +42,3 @@
     {% endfor %}
   </div>
 </div>
-<!-- contributors -->
-<div class="container my-4">
-  <p class="h4 text-center font-weight-light">Contributors</p>
-  <div id="contributor-logos" class="d-flex flex-wrap flex-row justify-content-center align-items-center">
-    <div class="card my-1 mx-2" style="width: 85%; border: none">
-      <a href="https://github.com/mne-tools/mne-python/graphs/contributors">
-        <img class="card-img institution" style="background: #ffffff00" src="https://contrib.rocks/image?repo=mne-tools/mne-python" title="Contributors" alt="GitHub avatars for contributors">
-      </a>
-    </div>
-  </div>
-</div>
diff --git 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 %}