Skip to content

Redesign Authors & Maintainers section with ranked leaderboard UI #491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ajaypanchal4326 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Redesign Authors & Maintainers section with ranked leaderboard UI #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c46026f
fix: update @nodesecure/scanner to v10
Ajaypanchal4326 Feb 4, 2026
ebab1aa
Merge branch 'NodeSecure:master' into master
Ajaypanchal4326 Feb 7, 2026
05fa18b
ui: modernize Authors & Maintainers section with readable layout
Ajaypanchal4326 Feb 7, 2026
4be7660
ui: redesign Authors & Maintainers with ranked leaderboard
Ajaypanchal4326 Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 90 additions & 2 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,8 @@ div.page>section h2 {
ul {
margin-top: var(--default-margin);
}
ul + ul {

ul+ul {
margin-right: 20px;
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -347,3 +349,89 @@ li[role=link]:focus {
display: 100%;
}
}

/* ===== UI ENHANCEMENTS ===== */

.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 & Maintainers – Leaderboard UI ===== */

.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;
}

/* Top 3 highlight */
.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;
}
16 changes: 15 additions & 1 deletion views/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ <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]]">
Expand All @@ -161,6 +162,19 @@ <h3>Authors & Maintainers</h3>
</div>
[[ } ]]
</div>

<ul class="authors-leaderboard">
[[ let index = 0; ]]
[[ for (const [email, count] of Object.entries(z.npm_stats.authors).sort((a, b) => b[1] - a[1])) { ]]
<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) { ]]
Expand Down Expand Up @@ -370,4 +384,4 @@ <h3>[[=name]]</h3>
[[ } ]]
</section>
[[ } ]]
</div>
</div>