From 3f93b52cd8ee0017610b3340bdb0b5e7653e3da4 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Wed, 18 Feb 2026 19:49:38 +0530 Subject: [PATCH 1/7] Adding feedback card --- frontend/css/feedback.css | 76 ++++++++++++++++++++++++++++++++++-- frontend/pages/feedback.html | 11 ++++-- 2 files changed, 81 insertions(+), 6 deletions(-) diff --git a/frontend/css/feedback.css b/frontend/css/feedback.css index 2676aae0..56acefc5 100644 --- a/frontend/css/feedback.css +++ b/frontend/css/feedback.css @@ -1,8 +1,15 @@ +body { + margin: 0; +} + .feedback-header { text-align: center; - padding: 80px 20px 40px; + padding: 40px 20px 0px; /* remove bottom gap */ + margin-bottom: 0; } + + .feedback-header h1 { font-size: 2.5rem; color: var(--deep-navy); @@ -15,10 +22,12 @@ .feedback-container { max-width: 600px; - margin: auto; - padding: 30px; + margin: 0 auto 60px; /* removes top gap */ + padding: 0 20px 40px; } + + form { display: flex; flex-direction: column; @@ -61,3 +70,64 @@ button:hover { margin-top: 10px; font-weight: 600; } + +/* ===== Card Layout Enhancement ===== */ + +.feedback-container { + max-width: 700px; + margin: auto; + padding: 40px 20px 80px; + display: flex; + justify-content: center; +} + +.feedback-card { + width: 100%; + background: #ffffff; + padding: 35px 30px; + border-radius: 14px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.05); +} + +/* Hover effect for modern UI depth */ +.feedback-card:hover { + transform: translateY(-4px); + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); +} + +/* Improve input styling consistency */ +.feedback-card input, +.feedback-card select, +.feedback-card textarea { + width: 100%; + padding: 12px; + border-radius: 8px; + border: 1px solid #dcdcdc; + font-size: 1rem; + transition: border 0.2s ease, box-shadow 0.2s ease; +} + +/* Focus interaction */ +.feedback-card input:focus, +.feedback-card select:focus, +.feedback-card textarea:focus { + outline: none; + border-color: var(--primary-gold); + box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); +} + +/* Better button polish */ +.feedback-card button { + margin-top: 10px; + font-size: 1rem; + letter-spacing: 0.3px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.feedback-card button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); +} + diff --git a/frontend/pages/feedback.html b/frontend/pages/feedback.html index 384df9ae..ae246214 100644 --- a/frontend/pages/feedback.html +++ b/frontend/pages/feedback.html @@ -22,9 +22,12 @@

We’d Love Your Feedback

-
+ + + + +
+ From b446e4c20d7ee9dfebe333c150a98bc60f9572d5 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Wed, 18 Feb 2026 19:58:59 +0530 Subject: [PATCH 2/7] Adding tips --- frontend/pages/Event/gsoc.html | 107 +++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) diff --git a/frontend/pages/Event/gsoc.html b/frontend/pages/Event/gsoc.html index 9341fe90..e5905a29 100644 --- a/frontend/pages/Event/gsoc.html +++ b/frontend/pages/Event/gsoc.html @@ -586,6 +586,69 @@ font-weight: 500; } + /* ---------- GSoC Tips Section ---------- */ +.gsoc-tips-section { + padding: 80px 8%; + background-color: var(--light-gray); + text-align: center; +} + +.gsoc-tips-section h2 { + font-size: clamp(2rem, 4vw, 2.8rem); + color: var(--primary-blue); + margin-bottom: 20px; + font-weight: 700; +} + +.gsoc-tips-section p { + max-width: 700px; + margin: 0 auto 50px; + font-size: 1.1rem; + color: var(--text-dark); +} + +.gsoc-tips-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 28px; + max-width: 1200px; + margin: 0 auto; +} + +.gsoc-tip-card { + background: var(--white); + padding: 30px; + border-radius: 16px; + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); + transition: transform 0.4s ease, box-shadow 0.4s ease; + text-align: left; +} + +.gsoc-tip-card i { + font-size: 28px; + color: var(--secondary-blue); + margin-bottom: 15px; +} + +.gsoc-tip-card h3 { + font-size: 1.3rem; + color: var(--primary-blue); + margin-bottom: 10px; + font-weight: 600; +} + +.gsoc-tip-card p { + font-size: 0.95rem; + margin: 0; + line-height: 1.6; +} + +.gsoc-tip-card:hover { + transform: translateY(-10px); + box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15); +} + + /* ---------- CTA Section ---------- */ .cta-section { padding: 80px 8%; @@ -1081,6 +1144,50 @@

Large Projects

+ +
+

Tips to Get Selected for GSoC

+

Practical strategies that significantly increase your chances of getting accepted into Google Summer of Code.

+ +
+
+ +

Start Contributing Early

+

Begin contributing to open source projects before the application period to build credibility and familiarity with the codebase.

+
+ +
+ +

Pick Beginner-Friendly Issues

+

Look for “good first issue” or “beginner-friendly” tags to understand the project structure and workflow.

+
+ +
+ +

Communicate with Mentors

+

Actively interact in community channels like Discord, Slack, or mailing lists to show genuine interest.

+
+ +
+ +

Write a Strong Proposal

+

Create a detailed proposal with technical approach, timeline, and expected deliverables to stand out.

+
+ +
+ +

Be Consistent

+

Regular contributions and consistent activity show commitment and reliability to mentors.

+
+ +
+ +

Understand the Codebase

+

Study documentation, past PRs, and project architecture before proposing your idea.

+
+
+
+

Ready to Start Your GSoC Journey?

From 143a08006b30683d924764044c13cf6a0420ca09 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Wed, 18 Feb 2026 20:08:21 +0530 Subject: [PATCH 3/7] Fixing dark mode --- frontend/css/guides.css | 63 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/frontend/css/guides.css b/frontend/css/guides.css index 9772a0e6..52516493 100644 --- a/frontend/css/guides.css +++ b/frontend/css/guides.css @@ -788,3 +788,66 @@ html { grid-template-columns: 1fr; } } + +/* ========================================================= + DARK MODE FIX — GUIDES PAGE READABILITY (Issue #860) + ========================================================= */ + +/* Page background & base text */ +body.dark-mode { + background-color: #0f172a; + color: #e5e7eb; +} + +/* Section headings */ +body.dark-mode h2, +body.dark-mode h3, +body.dark-mode h4 { + color: #f9fafb !important; +} + +/* Paragraph text readability */ +body.dark-mode p, +body.dark-mode li { + color: #cbd5e1 !important; +} + +/* Guide cards (major issue: parchment background in dark mode) */ +body.dark-mode .guide-list li, +body.dark-mode .pr-steps li, +body.dark-mode .practice-item, +body.dark-mode .mistakes-list li { + background: #1e293b !important; /* replaces light parchment */ + color: #e5e7eb !important; + border: 1px solid rgba(255,255,255,0.06); +} + +/* Fix titles inside cards */ +body.dark-mode .guide-list h4, +body.dark-mode .pr-steps h4, +body.dark-mode .timeline-list h4, +body.dark-mode .practice-item h4 { + color: #ffffff !important; +} + +/* Fix description text inside components */ +body.dark-mode .guide-list p, +body.dark-mode .pr-steps p, +body.dark-mode .timeline-list p, +body.dark-mode .practice-item p, +body.dark-mode .mistakes-list p { + color: #cbd5e1 !important; +} + +/* Timeline line visibility */ +body.dark-mode .timeline-list::before { + background: linear-gradient(to bottom, #facc15, #eab308); +} + +/* Icons contrast */ +body.dark-mode .icon, +body.dark-mode .step, +body.dark-mode .mistake-icon { + background: #facc15 !important; + color: #0f172a !important; +} From 461c4dde779e9f8b3bbc616d262fd349672233c4 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Thu, 19 Feb 2026 09:27:29 +0530 Subject: [PATCH 4/7] Adding dark toggle --- frontend/pages/Event/gsoc.html | 96 ++++++++++++++++++++++++++++++---- 1 file changed, 87 insertions(+), 9 deletions(-) diff --git a/frontend/pages/Event/gsoc.html b/frontend/pages/Event/gsoc.html index e5905a29..e4e937ed 100644 --- a/frontend/pages/Event/gsoc.html +++ b/frontend/pages/Event/gsoc.html @@ -911,21 +911,79 @@ outline: 3px solid var(--secondary-blue); outline-offset: 2px; } + + /* ---------- Dark Mode ---------- */ +body.dark-mode { + --white: #0f172a; + --light-gray: #020617; + --text-dark: #e5e7eb; + --primary-blue: #93c5fd; + --secondary-blue: #60a5fa; + --accent-orange: #fb923c; + --accent-purple: #c084fc; + background-color: #020617; + color: #e5e7eb; +} + +body.dark-mode header { + background-color: #020617; + border-bottom: 1px solid #1f2937; +} + +body.dark-mode nav a { + color: #e5e7eb; +} + +body.dark-mode .feature-card, +body.dark-mode .timeline-card, +body.dark-mode .step-content, +body.dark-mode .gsoc-tip-card { + background-color: #020617; + color: #e5e7eb; + border: 1px solid #1f2937; +} + +body.dark-mode .features-section, +body.dark-mode .timeline-section, +body.dark-mode .gsoc-tips-section { + background-color: #020617; +} + +body.dark-mode .btn-primary { + background-color: #1e293b; + color: #e5e7eb; +} + +body.dark-mode footer { + background-color: #020617; +} +
-

OpenSource Compass

- -
+

OpenSource Compass

+ + +
@@ -1255,6 +1313,26 @@

Ready to Start Your GSoC Journey?

hero.style.transform = `translateY(${scrolled * 0.3}px)`; } }); + + const toggleBtn = document.getElementById("darkModeToggle"); + +// Load saved theme +if (localStorage.getItem("theme") === "dark") { + document.body.classList.add("dark-mode"); + toggleBtn.textContent = "☀️"; +} + +toggleBtn.addEventListener("click", () => { + document.body.classList.toggle("dark-mode"); + + if (document.body.classList.contains("dark-mode")) { + localStorage.setItem("theme", "dark"); + toggleBtn.textContent = "☀️"; + } else { + localStorage.setItem("theme", "light"); + toggleBtn.textContent = "🌙"; + } +}); From 8e20a4c58afc826c7e4cd415dc0e4165757fb975 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Thu, 19 Feb 2026 09:37:59 +0530 Subject: [PATCH 5/7] Stucturing faqs --- frontend/css/style.css | 86 +++++++++++++++++ frontend/pages/faq.html | 204 ++++++++++++++++++++++++++-------------- 2 files changed, 219 insertions(+), 71 deletions(-) diff --git a/frontend/css/style.css b/frontend/css/style.css index 6f0501c9..dc672c0f 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -1135,3 +1135,89 @@ body.dark-mode .chat-widget-btn { color: #0b1220; } +/* FAQ Accordion Styles */ +/* ===== FAQ Accordion - Improved Structure ===== */ +.faq-accordion { + max-width: 950px; + margin: 50px auto 0; + display: flex; + flex-direction: column; + gap: 16px; /* SPACE BETWEEN QUESTIONS */ +} + +.faq-item { + background: #ffffff; + border-radius: 14px; /* ROUNDED CORNERS */ + box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); + overflow: hidden; + transition: all 0.3s ease; + border: 1px solid #e5e7eb; +} + +/* Hover Card Effect */ +.faq-item:hover { + transform: translateY(-3px); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); + border-color: #d1d5db; +} + +.faq-question { + width: 100%; + background: #ffffff; + border: none; + padding: 20px 24px; + font-size: 19px; + font-weight: 600; + text-align: left; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + color: #1f2937; + transition: all 0.25s ease; + border-radius: 14px; +} + +/* Hover effect on question */ +.faq-question:hover { + background: #f8fafc; +} + +/* Chevron icon animation */ +.faq-question i { + font-size: 16px; + transition: transform 0.3s ease; + color: #6b7280; +} + +.faq-item.active .faq-question i { + transform: rotate(180deg); +} + +/* Answer section */ +.faq-answer { + max-height: 0; + overflow: hidden; + background: #ffffff; + transition: max-height 0.35s ease, padding 0.3s ease; + padding: 0 24px; + border-top: 1px solid transparent; +} + +/* When open */ +.faq-item.active { + border-color: #e2e8f0; +} + +.faq-item.active .faq-answer { + max-height: 300px; + padding: 10px 24px 22px 24px; + border-top: 1px solid #f1f5f9; +} + +.faq-answer p { + margin: 0; + color: #4b5563; + font-size: 16px; + line-height: 1.7; +} diff --git a/frontend/pages/faq.html b/frontend/pages/faq.html index b06b3cc9..0120224f 100644 --- a/frontend/pages/faq.html +++ b/frontend/pages/faq.html @@ -27,79 +27,118 @@

Frequently Asked Questions

Common questions about OpenSource Compass and open source contributions.

-
-
-

What is OpenSource Compass?

-

OpenSource Compass is a platform that helps beginners navigate open source by providing structured guides, resources, and program information.

-
- -
-

Do I need programming experience?

-

No. You can contribute to open source through documentation, design, testing, community support, and many other non-coding roles.

-
- -
-

How do I get started with open source?

-

Start by reading contribution guides, choosing a beginner-friendly project, and working on small issues such as documentation or bug fixes.

-
- -
-

How do I choose a project to contribute to?

-

Pick projects that match your interests and skill level. Look for repositories with labels like “good first issue” or “help wanted”.

-
- -
-

What are the benefits of contributing to open source?

-

Contributing helps you build a portfolio, improve technical skills, collaborate globally, and gain real-world development experience.

-
- -
-

Where can I ask for help?

-

Most projects have active communities on GitHub, Discord, or Slack. Asking questions is encouraged and is part of open-source culture.

-
-
-

How do I find beginner-friendly issues?

-

- Look for repositories with labels like good first issue, - beginner, or help wanted. These issues are - specifically curated for new contributors. -

+
+
+ +
+

OpenSource Compass is a platform that helps beginners navigate open source by providing structured guides, resources, and program information.

+
+
+ +
+ +
+

No. You can contribute to open source through documentation, design, testing, community support, and many other non-coding roles.

+
+
+ +
+ +
+

Start by reading contribution guides, choosing a beginner-friendly project, and working on small issues such as documentation or bug fixes.

+
+
+ +
+ +
+

Pick projects that match your interests and skill level. Look for repositories with labels like “good first issue” or “help wanted”.

+
+
+ +
+ +
+

Contributing helps you build a portfolio, improve technical skills, collaborate globally, and gain real-world development experience.

+
+
+ +
+ +
+

Most projects have active communities on GitHub, Discord, or Slack. Asking questions is encouraged and is part of open-source culture.

+
+
+ +
+ +
+

Look for repositories with labels like good first issue, beginner, or help wanted.

+
+
+ +
+ +
+

A good first issue is a small, well-defined task that helps beginners understand the project without deep knowledge of the entire codebase.

+
+
+ +
+ +
+

Basic Git knowledge is helpful, but not mandatory. Many projects provide step-by-step contribution guides.

+
+
+ +
+ +
+

Be polite, clear, and patient. Use GitHub issues or discussions to ask questions and seek feedback before starting work.

+
+
+ +
+ +
+

Don’t be discouraged. Read the feedback carefully, make the suggested changes, or ask for clarification.

+
+
-
-

What is a “good first issue”?

-

- A good first issue is a small, well-defined task that helps beginners - understand the project without deep knowledge of the entire codebase. -

-
- -
-

Do I need to know Git before contributing?

-

- Basic Git knowledge is helpful, but not mandatory. Many projects provide - step-by-step contribution guides, and you can learn Git basics as you go. -

-
- -
-

How should I communicate with maintainers?

-

- Be polite, clear, and patient. Use GitHub issues or discussions to ask - questions, describe your approach, and seek feedback before starting work. -

-
- -
-

What should I do if my pull request is rejected?

-

- Don’t be discouraged. Read the feedback carefully, make the suggested - changes, or ask for clarification. Rejections are a normal part of learning - open source. -

-
- -
@@ -117,5 +156,28 @@

What should I do if my pull request is rejected?

+ + + From 5637ff66d2a8d88c47bd51a6ec5996e546ce7ef2 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Thu, 19 Feb 2026 09:47:45 +0530 Subject: [PATCH 6/7] Search bar --- frontend/css/contributors.css | 108 +++++++++++++++++++++++++++++++ frontend/pages/contributors.html | 16 +++-- 2 files changed, 118 insertions(+), 6 deletions(-) diff --git a/frontend/css/contributors.css b/frontend/css/contributors.css index 27bd6dc0..c95d5ed5 100644 --- a/frontend/css/contributors.css +++ b/frontend/css/contributors.css @@ -864,3 +864,111 @@ display: flex; align-items: center; } + +/* ===== Contributors Controls (Search + Toggle) ===== */ +.contributors-controls { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + margin: 30px auto 20px; + max-width: 900px; + flex-wrap: wrap; +} + +/* Search Wrapper */ +.search-wrapper { + position: relative; + flex: 1; + min-width: 280px; +} + +/* Search Icon */ +.search-icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + color: #9ca3af; + font-size: 15px; + pointer-events: none; +} + +/* Search Input Styling */ +#contributor-search { + width: 100%; + padding: 14px 16px 14px 42px; + border-radius: 12px; + border: 1.5px solid #e5e7eb; + font-size: 16px; + font-family: "Inter", sans-serif; + background: #ffffff; + transition: all 0.25s ease; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); +} + +/* Hover Effect */ +#contributor-search:hover { + border-color: #d1d5db; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); +} + +/* Focus Effect (Important for UX) */ +#contributor-search:focus { + outline: none; + border-color: var(--primary-gold, #d4af37); + box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); + background: #ffffff; +} + +/* Bot Toggle Styling */ +.bot-toggle { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + color: #374151; + background: #ffffff; + padding: 10px 14px; + border-radius: 10px; + border: 1px solid #e5e7eb; + transition: all 0.2s ease; + cursor: pointer; +} + +.bot-toggle:hover { + border-color: #d1d5db; + background: #f9fafb; +} + +.bot-toggle input { + accent-color: var(--primary-gold, #d4af37); + cursor: pointer; +} + +/* Mobile Responsiveness */ +@media (max-width: 640px) { + .contributors-controls { + flex-direction: column; + align-items: stretch; + } + + .bot-toggle { + justify-content: center; + } +} + +.contributors-section { + padding-top: 40px; +} + +.contributors-section h3 { + text-align: center; + margin-bottom: 10px; +} + +.contributors-section p { + text-align: center; + margin-bottom: 20px; + color: #6b7280; +} diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html index 159ffe83..e0d23d7d 100644 --- a/frontend/pages/contributors.html +++ b/frontend/pages/contributors.html @@ -51,19 +51,23 @@

Contributors

+
+ - -
+ +
+ +
From 3de1cde40aad18133fcc2ef7ab34dc0f67437102 Mon Sep 17 00:00:00 2001 From: Aarya Chaudhari Date: Thu, 19 Feb 2026 10:03:49 +0530 Subject: [PATCH 7/7] Structuring top contributors --- frontend/css/contributors.css | 104 ++++++++++++++++++++ frontend/js/contributors.js | 163 ++++++++++++++++++++++--------- frontend/pages/contributors.html | 12 ++- 3 files changed, 234 insertions(+), 45 deletions(-) diff --git a/frontend/css/contributors.css b/frontend/css/contributors.css index c95d5ed5..fcd33d9c 100644 --- a/frontend/css/contributors.css +++ b/frontend/css/contributors.css @@ -972,3 +972,107 @@ margin-bottom: 20px; color: #6b7280; } + +/* ===== Top Contributors Highlight Section ===== */ +.top-contributors-section { + max-width: 1100px; + margin: 40px auto 20px; + padding: 30px 24px; + background: linear-gradient(135deg, #fffaf0, #fff7e6); + border-radius: 20px; + border: 1px solid #f1e3b0; + box-shadow: 0 12px 35px rgba(212, 175, 55, 0.15); + text-align: center; +} + + +.top-title { + text-align: center; + font-size: 22px; + font-weight: 700; + margin-bottom: 20px; + color: #b8860b; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; +} + +.top-title i { + color: #d4af37; +} + +.top-contributors-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} + +/* Highlight Top Cards */ +.top-contributors-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + align-items: stretch; + justify-content: center; +} + +/* Rank Badge */ +.top-contributors-grid .contributor-card::before { + content: "🏆 Top"; + position: absolute; + top: 10px; + right: 10px; + background: #d4af37; + color: white; + font-size: 12px; + font-weight: 600; + padding: 4px 8px; + border-radius: 8px; +} + +.top-contributors-grid .contributor-card { + width: 100%; + max-width: 320px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + + +/* Hover Effect */ +.top-contributors-grid .contributor-card:hover { + transform: scale(1.08) translateY(-5px); + box-shadow: 0 20px 45px rgba(212, 175, 55, 0.25); +} + +/* Dark Mode Support */ +body.dark-mode .top-contributors-section { + background: linear-gradient(135deg, #1f2937, #111827); + border: 1px solid #374151; +} + +body.dark-mode .top-title { + color: #facc15; +} +.top-card { + transform: scale(1.05); + border: 2px solid #f0d98c; + box-shadow: 0 15px 35px rgba(212, 175, 55, 0.18); + position: relative; +} + +.top-rank-badge { + position: absolute; + top: 10px; + right: 12px; + font-size: 20px; +} + +.contributor-chip.is-top { + background: #fff3cd; + color: #856404; + font-weight: 600; +} + diff --git a/frontend/js/contributors.js b/frontend/js/contributors.js index 2a8cd78c..7bd0318a 100644 --- a/frontend/js/contributors.js +++ b/frontend/js/contributors.js @@ -56,7 +56,11 @@ async function refreshInBackground() { writeCache(enriched); const grid = document.getElementById("contributors-grid"); - if (grid) renderContributorsGrid(grid, visibleContributors); + if (grid) { + renderTopContributors(visibleContributors); + renderContributorsGrid(grid, visibleContributors); +} + } catch { // Silent background refresh failure. } @@ -77,8 +81,12 @@ async function loadAndRender() { writeCache(enriched); setStatus(""); - renderContributorsGrid(grid, visibleContributors); - updateStats(visibleContributors); +renderTopContributors(visibleContributors); +renderTopContributors(visibleContributors); +renderContributorsGrid(grid, visibleContributors); +updateStats(visibleContributors); + + } catch (err) { renderEmptyState(grid); setStatus(formatError(err), true); @@ -149,10 +157,24 @@ function renderContributorsGrid(grid, list) { return; } + // 🔥 Remove Top 3 contributors (already shown in highlight section) + const topThreeLogins = new Set( + [...list] + .sort((a, b) => (b.merged_prs || 0) - (a.merged_prs || 0)) + .slice(0, 3) + .map(c => c.login) + ); + + const filteredList = list.filter(c => !topThreeLogins.has(c.login)); + + if (!filteredList.length) { + renderEmptyState(grid); + return; + } + const frag = document.createDocumentFragment(); - - list.forEach((c) => { + filteredList.forEach((c) => { const login = c?.login || c?.name || "Anonymous"; const mergedPrs = Number.isFinite(c?.merged_prs) ? c.merged_prs : 0; const avatar = c?.avatar_url @@ -162,7 +184,7 @@ function renderContributorsGrid(grid, list) { const isBot = (c?.type || "").toLowerCase() === "bot" || /\[bot\]$/i.test(login); const isFirstTime = isFirstTimeContributor(c); - const tier = getContributorTier(mergedPrs); // ✅ MOVE HERE + const tier = getContributorTier(mergedPrs); const card = document.createElement("div"); card.className = "contributor-card"; @@ -172,46 +194,42 @@ function renderContributorsGrid(grid, list) {
${escapeHtml(login)}
- - - ${mergedPrs} merged PR${mergedPrs === 1 ? "" : "s"} - - - ${ - isFirstTime - ? ` - - 🏅 First-time contributor - - ` - : "" - } - - ${ - tier - ? ` - - ${tier === "gold" ? "🥇 Gold" : tier === "silver" ? "🥈 Silver" : "🥉 Bronze"} - - ` - : "" - } - - ${ - isBot - ? ` - - Bot - - ` - : "" - } -
- - + + + ${mergedPrs} merged PR${mergedPrs === 1 ? "" : "s"} + + + ${ + isFirstTime + ? `🏅 First-time contributor` + : "" + } + + ${ + tier + ? ` + ${tier === "gold" ? "🥇 Gold" : tier === "silver" ? "🥈 Silver" : "🥉 Bronze"} + ` + : "" + } + + ${ + isBot + ? ` + Bot + ` + : "" + } +
- ${profileUrl ? `` : ""} + ${ + profileUrl + ? ` + + ` + : "" + }
`; @@ -223,6 +241,7 @@ function renderContributorsGrid(grid, list) { grid.appendChild(frag); } + function fallbackAvatar(seed) { // Inline SVG fallback so we never show a broken image. const initial = @@ -466,3 +485,59 @@ function updateStats(list) { ${top ? `🏆 Top: ${top.login}` : ''} `; } + +function renderTopContributors(contributors) { + const topGrid = document.getElementById("top-contributors-grid"); + if (!topGrid) return; + + // Use merged PRs (your actual metric) + const topThree = [...contributors] + .sort((a, b) => (b.merged_prs || 0) - (a.merged_prs || 0)) + .slice(0, 3); + + topGrid.innerHTML = ""; + + topThree.forEach((c, index) => { + const login = c?.login || "Anonymous"; + const mergedPrs = c?.merged_prs || 0; + const avatar = c?.avatar_url + ? `${c.avatar_url}&s=200` + : fallbackAvatar(login); + const profileUrl = c?.html_url || ""; + + const card = document.createElement("div"); + card.className = "contributor-card top-card"; + + card.innerHTML = ` +
+
+ ${index === 0 ? "🥇" : index === 1 ? "🥈" : "🥉"} +
+ ${escapeHtml(login)} avatar +
+
${escapeHtml(login)}
+
+ + + ${mergedPrs} merged PR${mergedPrs === 1 ? "" : "s"} + + + 🏆 Top Contributor + +
+
+
+ ${ + profileUrl + ? ` + + ` + : "" + } +
+
+ `; + + topGrid.appendChild(card); + }); +} diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html index e0d23d7d..b6f74865 100644 --- a/frontend/pages/contributors.html +++ b/frontend/pages/contributors.html @@ -70,7 +70,17 @@

Contributors

-
+ +
+

+ Top Contributors +

+
+
+ + +
+