ui: redesign Authors & Maintainers with leaderboard

Author: Ajaypanchal4326

public/css/style.css

@@ -258,7 +258,8 @@ div.page>section h2 {
 ul {
   margin-top: var(--default-margin);
 }
-ul + ul {
+
+ul+ul {
   margin-right: 20px;
 }
 
@@ -283,7 +284,8 @@ ul>li>a {
   color: var(--secondary-text-color);
 }
 
-ul>li>p,ul>li>span {
+ul>li>p,
+ul>li>span {
   font-size: 18px;
 }
 
@@ -347,3 +349,84 @@ li[role=link]:focus {
     display: 100%;
   }
 }
+
+.box-stats,
+.box-stats-resume>.one-stat {
+  background: var(--card-background, transparent);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.box-stats:hover,
+.box-stats-resume>.one-stat:hover {
+  transform: translateY(-2px);
+}
+
+ul>li>a span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.npm-packages-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 4px;
+}
+
+.box-stats-resume>.one-stat span {
+  font-size: 1.3rem;
+  letter-spacing: 1px;
+}
+
+.box-stats-container.charts {
+  box-shadow: inset 0 0 0 1px var(--faded-border-color);
+}
+
+.authors-leaderboard {
+  margin-top: 20px;
+  max-width: 650px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+}
+
+.authors-leaderboard li {
+  display: grid;
+  grid-template-columns: 40px 1fr 60px;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--faded-border-color);
+  font-family: "mononoki";
+}
+
+.authors-leaderboard .rank {
+  font-weight: bold;
+  text-align: center;
+}
+
+.authors-leaderboard .rank-1 {
+  border-color: gold;
+}
+
+.authors-leaderboard .rank-2 {
+  border-color: silver;
+}
+
+.authors-leaderboard .rank-3 {
+  border-color: #cd7f32;
+}
+
+.author-email {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.author-count {
+  font-weight: bold;
+  color: var(--main-color);
+  text-align: right;
+}

views/template.html

@@ -153,14 +153,37 @@ <h3><span>[[=Object.keys(z.npm_stats.deps.node).length]]</span>Node.js Core Depe
           <i class="fas fa-user"></i>
           <h3>Authors & Maintainers</h3>
         </div>
+
         <div class="box-avatar">
           [[ for (const [email, count] of Object.entries(z.npm_stats.authors)) { ]]
           <div class="avatar" data-email="[[=email]]">
-            <a href="#" target="_blank" rel="noopener"></a>
             <p>[[=count]]</p>
           </div>
           [[ } ]]
         </div>
+
+        <p class="authors-total">
+          Total Contributors: [[=Object.keys(z.npm_stats.authors).length]]
+        </p>
+
+        [[
+        let sortedAuthors = Object.entries(z.npm_stats.authors)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 10);
+        ]]
+
+        <ul class="authors-leaderboard">
+          [[ let index = 0; ]]
+          [[ for (const [email, count] of sortedAuthors) { ]]
+          <li class="rank-[[=index+1]]">
+            <span class="rank">[[=index+1]]</span>
+            <span class="author-email">[[=email]]</span>
+            <span class="author-count">[[=count]]</span>
+          </li>
+          [[ index++; ]]
+          [[ } ]]
+        </ul>
+
       </div>
     </div>
     [[ if (Object.keys(z.npm_stats.scorecards).length > 0) { ]]
@@ -326,7 +349,6 @@ <h3>Authors & Maintainers</h3>
         <div class="box-avatar">
           [[ for (const [email, count] of Object.entries(z.git_stats.authors)) { ]]
           <div class="avatar" data-email="[[=email]]">
-            <a href="#" target="_blank" rel="noopener"></a>
             <p>[[=count]]</p>
           </div>
           [[ } ]]