Add Github contributors list

website/js/mrare/contributors.js

@@ -0,0 +1,40 @@
+let json = '';
+let html = '';
+
+function profileHtmlString(to, title, style) {
+    return `<a href="${to}" title="${title}" target="_blank" class="github-contributors__avatar" style="${style}">&nbsp;</a>`;
+}
+
+function generateProfile(c) {
+    const to = `https://github.com/${c.login}`;
+    const title = `${c.contributions} contributions from ${c.login}`;
+    const style = `background-image: url('${c.avatar_url}&s=64');`;
+    html += profileHtmlString(to, title, style);
+}
+
+function getContributorAmount() {
+    return json.length;
+}
+
+function generateFooterRow() {
+    document.getElementById('github-contributors__thanks').innerText = `Thanks to all of our ${getContributorAmount()} contributors!`;
+    for (let i = 0; i < json.length; i++) {
+        generateProfile(json[i]);
+    }
+    document.getElementById('github-contributors__users').innerHTML = html;
+}
+
+async function getContr() {
+    fetch('https://api.github.com/repos/responsively-org/responsively-app/contributors', {
+        method: 'GET',
+        headers: {
+            'User-Agent': 'responsively-app/website',
+        },
+    })
+        .then((response) => response.text())
+        .then((text) => json = JSON.parse(text))
+        .then((json) => generateFooterRow())
+        .catch((err) => console.error(err));
+}
+
+getContr();

website/pages/assets/css/custom.css

@@ -1,5 +1,5 @@
-/* 
-/* 
+/*
+/*
 /*  custom.css
 /*
 /*  If not using Gulp and Sass, add your custom CSS below then include it
@@ -37,4 +37,21 @@ html {
 
 .extensionButton {
   width: 300px;
-}
+}
+
+#github-contributors__users {
+  padding: 0 2rem;
+  max-width: 40rem;
+  margin: 1rem auto;
+}
+
+.github-contributors__avatar {
+  overflow: hidden;
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  margin: .1rem .2rem;
+  display: inline-block;
+  background-color: hsla(0, 0%, 100%, .1);
+  background-size: contain;
+}

website/pages/index.html

@@ -554,6 +554,13 @@
       </div>
     </section>
 
+    <section>
+      <div class="justify-content-center text-center">
+        <h3 id="github-contributors__thanks">Thanks to all of our contributors!</h3>
+        <div id="github-contributors__users">
+        </div>
+      </div>
+    </section>
     <!--
       <section id="How-It-Works" class="bg-primary-3 text-light has-divider jarallax" data-jarallax data-speed="0.2">
         <img src="assets/img/desktop-app-3.jpg" alt="Image" class="jarallax-img opacity-20">
@@ -729,6 +736,8 @@
     <!-- Required theme scripts (Do not remove) -->
     <script type="text/javascript" src="assets/js/theme.js"></script>
     <!-- Removes page load animation when window is finished loading -->
+    <script type="text/javascript" src="../js/mrare/contributors.js"></script>
+    <!-- Loads github contributors -->
     <script type="text/javascript">
       window.addEventListener("load", function() {
         document.querySelector("body").classList.add("loaded");