Added new contributors list

content/developers.html

@@ -144,7 +144,17 @@ <h3 class="header">Acknowledgement</h3>
         <div class="protocol-contributors-grid">
           <div class="protocol-contributor-content">
             <div class="center-aligned-flex"><img src="/images/gray-nav-logo-border.svg" loading="lazy" height="40" alt="" class="protocol-contributor-image"></div>
-            <p class="protocol-contributor-title">Title</p>
+            <div class="center-aligned-flex">
+              <p class="protocol-contributor-title">Title</p>
+            </div>
+            <div class="protocol-contributor-repos">
+            </div>
+            <div class="center-aligned-flex protocol-contributor-showhide" style="display: none;">
+              <a href="#" class="protocol-contributor-showhide-btn w-button">Show more</a>
+            </div>
+            <div class="center-aligned-flex">
+              <p class="protocol-contributor-paragraph"><span class="protocol-contributor-contributions"></span> contributions</p>
+            </div>
             <div class="center-aligned-flex">
               <a href="#" target="_blank" rel="noopener noreferrer nofollow" class="protocol-contributor-button w-button">See profile</a>
             </div>

static/css/main.css

@@ -2520,7 +2520,7 @@ figcaption {
 .protocol-contributor-content {
   display: -ms-grid;
   display: grid;
-  padding: 30px;
+  padding: 30px 20px;
   grid-auto-flow: row;
   grid-auto-columns: 1fr;
   grid-column-gap: 0px;
@@ -2564,6 +2564,76 @@ figcaption {
   background-color: #f0f0f0;
 }
 
+.protocol-contributor-showhide-btn {
+  margin: 3px;
+  display:inline-block;
+  position: relative;
+  width: auto;
+  padding: 0px 6px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #686868;
+  background-color: #ebebeb;
+  font-family: 'Gotham Rounded', sans-serif;
+  color: #050505;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: center;
+}
+
+.protocol-contributor-repos {
+  max-height: 28px;
+  overflow: hidden;
+  transition: max-height 0.5s;
+  -webkit-transition: max-height 0.5s;
+}
+
+.protocol-contributor-repos-expanded {
+  max-height: 1000px;
+}
+
+.protocol-contributor-paragraph {
+  font-family: 'Gotham Rounded', sans-serif;
+  margin-bottom: 0;
+  margin-top: 0px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.protocol-contributor-button-repo {
+  margin: 3px;
+  display:inline-block;
+  position: relative;
+  width: auto;
+  padding: 0px 6px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #686868;
+  background-color: #ebebeb;
+  font-family: 'Gotham Rounded', sans-serif;
+  color: #050505;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: center;
+}
 .protocol-contributor-title {
   margin-top: 0px;
   margin-bottom: 0px;

static/data/repos.json

@@ -0,0 +1,18 @@
+[
+	"navcoin/navcoin-core",
+	"navcoin/navcoin-org",
+	"navcoin/KnowledgeBase",
+
+	"aguycalled/nav-react",
+	"aguycalled/bitcore-lib",
+	"aguycalled/electrum",
+	"aguycalled/electrumx",
+	"aguycalled/electrum-client-js",
+	"aguycalled/ledger-app-nav",
+	"aguycalled/nav-ledger-loader",
+	"aguycalled/navcoin-js",
+	"aguycalled/wnav-react",
+
+	"sakdeniz/next",
+	"sakdeniz/next-mobile"
+]

static/js/developers.js

@@ -1,20 +1,118 @@
-fetch('https://api.github.com/repos/navcoin/navcoin-core/contributors?anon=true')
-.then((result) => result.json())
-.then((data) => {
-    const grid = document.getElementsByClassName('protocol-contributors-grid')[0];
-    const template = document.getElementsByClassName('protocol-contributor-content')[0];
-
-    for (let i = 0; i < data.length; i++) {
-        const item = data[i];
-        if (item.type == 'User') {
-            const content = template.cloneNode(true);
-            content.querySelector('.protocol-contributor-image').src = item.avatar_url;
-            content.querySelector('.protocol-contributor-title').innerHTML = item.login;
-            content.querySelector('.protocol-contributor-button').href = item.html_url;
-            content.style.opacity = '100%';
-            grid.append(content);
-        }
-    }
-
-    template.remove();
-});
+'use strict'
+
+fetch('/data/repos.json')
+	.then((result) => result.json())
+	.then((repos) => {
+
+		let promises = []
+		let contributors = {}
+
+		for (let i = 0; i < repos.length; i++) {
+			const repo = repos[i]
+			promises.push(fetch(`https://api.github.com/repos/${repo}/contributors`)
+				.then(result => result.json())
+				.then((data) => {
+					for (let j = 0; j < data.length; j++) {
+						if (data[j].type == 'User') {
+							const user = data[j]
+							const repoObj = {
+								name: repo,
+								contributions: user.contributions,
+								url: `https://github.com/${repo}`
+							}
+
+							contributors[user.login] = contributors[user.login] || user
+							contributors[user.login].repos = contributors[user.login].repos || []
+
+							contributors[user.login].repos.push(repoObj)
+
+							contributors[user.login].contributions_total = contributors[user.login].contributions_total || 0
+							contributors[user.login].contributions_total += user.contributions
+						}
+					}
+				}))
+		}
+
+		Promise.all(promises).then(() => {
+			let sortedList = Object.values(contributors).sort((a, b) => {
+				if (a.contributions_total > b.contributions_total) {
+					return -1
+				}
+
+				if (a.contributions_total < b.contributions_total) {
+					return 1
+				}
+
+				return 0
+			})
+
+			const grid = document.getElementsByClassName('protocol-contributors-grid')[0]
+			const template = document.getElementsByClassName('protocol-contributor-content')[0]
+
+			for (let i = 0; i < sortedList.length; i++) {
+				const user = sortedList[i]
+				const content = template.cloneNode(true)
+				let repoListHTML = ''
+				content.querySelector('.protocol-contributor-image').src = user.avatar_url
+				content.querySelector('.protocol-contributor-title').innerHTML = user.login
+				content.querySelector('.protocol-contributor-button').href = user.html_url
+				content.querySelector('.protocol-contributor-contributions').innerHTML = `${user.contributions_total}`
+
+				user.repos.sort((a, b) => {
+					if(a.name < b.name) { return -1; }
+					if(a.name > b.name) { return 1; }
+					return 0;
+				})
+
+				for (let j = 0; j < user.repos.length; j++) {
+					const repo = user.repos[j]
+					let color1 = '46b1e8'
+					let color2 = 'c42bb7'
+					let ratio = (repos.indexOf(repo.name) + 1) / repos.length
+					let hex = (x) => {
+						x = x.toString(16)
+						return (x.length == 1) ? '0' + x : x
+					}
+
+					let r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio))
+					let g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio))
+					let b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio))
+
+					let color = hex(r) + hex(g) + hex(b)
+
+					repoListHTML += `<a href="${repo.url}" target="_blank" rel="noopener noreferrer nofollow" class="protocol-contributor-button-repo w-button" style="background-color: #${color};">${repo.name.replace(/navcoin\//, '')}</a>`
+				}
+
+				content.querySelector('.protocol-contributor-repos').innerHTML = repoListHTML
+
+				content.style.opacity = '100%'
+				grid.append(content)
+
+				let el = content.querySelector('.protocol-contributor-repos')
+
+				if (el.scrollHeight > el.clientHeight) {
+					let showHide = content.querySelector('.protocol-contributor-showhide')
+					let showHideBtn = content.querySelector('.protocol-contributor-showhide-btn')
+					showHide.style.display = 'block'
+
+					let expanded = false
+					showHideBtn.onclick = () => {
+						// Switch it up
+						expanded = expanded ? false : true
+
+						// Add our class
+						if (expanded) {
+							content.querySelector('.protocol-contributor-repos').classList.add('protocol-contributor-repos-expanded')
+							content.querySelector('.protocol-contributor-showhide-btn').innerHTML = 'Show less'
+						} else {
+							content.querySelector('.protocol-contributor-repos').classList.remove('protocol-contributor-repos-expanded')
+							content.querySelector('.protocol-contributor-showhide-btn').innerHTML = 'Show more'
+						}
+					}
+				}
+
+				template.remove();
+			}
+		})
+
+	})