Feat: Enhance Footer UI#1997
Conversation
Signed-off-by: khushijanadri <jk18022008@gmail.com>
|
@khushijanadri is attempting to deploy a commit to the s3dfx-cyber's projects Team on Vercel. A member of the Team first needs to authorize it. |
💬 Faster Reviews & AssignmentsHi @khushijanadri, for faster coordination and smoother communication, consider joining our Discord community: Useful Channels
|
github-actions
Bot
added
enhancement
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis PR redesigns the site footer with a new grid layout, brand panel, platform stats section, and social icon links, accompanied by extensive CSS updates for gradients, hover effects, and responsive/dark-mode behavior. It also fixes a mobile nav anchor, adds a footer stat binding, and introduces a standalone local static file server script. ChangesFooter UI Redesign
Dev Tooling Additions
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/styles.cssParsing error: Unexpected token * Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Warning |
👋 Thanks for opening a PR, @khushijanadri!Your PR has entered the 🚦 PR Review Pipeline.
🔄 Review Flow
A pipeline status comment may appear automatically as your PR progresses. ✅ Contributor Checklist
|
|
github-actions
Bot
added
size/xl
gssoc26
🤖 TENET Agent Review📋 SummaryThis pull request aims to enhance the footer UI with a modern, responsive, and accessible design. It involves a complete rewrite of the footer's HTML structure and a significant overhaul of its styling. A new Node.js static file server ( 🔐 Security Findings
🧹 Code Quality
✅ What's Done Well
📝 Overall Verdict[REQUEST CHANGES] - The introduction of a new server is a critical architectural change that is out of scope for a UI enhancement and poses significant security and maintainability questions. |
Signed-off-by: Khushi <jk18022008@gmail.com>
github-actions
Bot
added
gssoc26
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
🤖 TENET Agent Review📋 SummaryThe pull request introduces a comprehensive redesign of the application's footer UI, aiming for a modern, responsive, and accessible layout. This involves significant changes to 🔐 Security Findings
🧹 Code Quality
✅ What's Done Well
📝 Overall VerdictREQUEST CHANGES - The purpose and deployment strategy of the new static file server ( |
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/footer.html (1)
97-118: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSocial links point to individual/personal accounts rather than project accounts.
The LinkedIn link (Line 103) and Twitter/X link (Line 113) point to what appear to be a specific individual's personal profiles rather than an official project account, while GitHub (Line 98) and Discord (Line 108) correctly point to project/community resources. Issue
#867asks for social links to boost "branding visibility" and "community presence" — personal accounts tied to one contributor are a single point of failure if that person leaves the project, and conflate personal identity with project branding.Consider using official project/organization social handles for LinkedIn and Twitter/X if they exist, or removing those specific links if no project-level account exists yet.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/footer.html` around lines 97 - 118, The footer social links are using personal LinkedIn and Twitter/X profiles instead of project-owned accounts, which weakens branding and creates a single point of failure. Update the social link targets in the footer component to use official project or organization profiles if they exist, or remove the LinkedIn/Twitter anchors from the footer when no project-level accounts are available. Keep the GitHub and Discord links as-is and make the changes in the footer social links markup so the branding stays consistent.src/styles.css (1)
575-583: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMinor duplication between shared and per-component card rules.
.footer-community-card, .footer-stat-cardshare a base rule block (Lines 575-582), then.footer-stat-cardis redefined separately with overlappingdisplay/paddingproperties (Lines 657-664). Not incorrect, just slightly redundant — could consolidate shared layout properties into one place for easier maintenance.Also applies to: 657-664
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/styles.css` around lines 575 - 583, The `.footer-community-card` and `.footer-stat-card` styles are split between a shared base rule and a later `.footer-stat-card` override, which repeats overlapping layout properties. Consolidate the shared card layout styles into the common rule and keep `.footer-stat-card` only for truly specific differences, using the `.footer-community-card` / `.footer-stat-card` selectors to find the duplicated declarations..new-footer-server.js (2)
51-51: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low valueAdd an error handler for
listen.If port 5000 is already in use,
listenwill emit an unhandlederrorevent and crash the process. Since this is meant as a repeatable local dev tool, a friendly error message would be more useful than a stack trace.🔧 Proposed fix
-}).listen(5000, '127.0.0.1'); +const server = http.createServer((req, res) => { + // ... +}); + +server.on('error', (err) => { + if (err.code === 'EADDRINUSE') { + console.error('Port 5000 is already in use.'); + process.exit(1); + } + throw err; +}); + +server.listen(5000, '127.0.0.1');🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.new-footer-server.js at line 51, The server startup in the listen call is missing an error handler, so a port-in-use failure can crash the process with an unhandled event. Update the startup logic around the listen(5000, '127.0.0.1') call to attach an error listener on the returned server instance and emit a friendly message for address-in-use cases. Keep the change localized to the local dev server bootstrap in .new-footer-server.js and use the existing listen setup as the entry point for the fix.
1-52: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConfirm this dev-only server script belongs in the PR.
This adds a standalone static file server purely for local footer preview, unrelated to the footer UI/CSS changes described in the PR objectives. The PR description also states no new build tools were introduced. Consider moving this to a
scripts/ordev/folder with a clear name (not a dotfile) and documenting its purpose, or dropping it from this PR if it was only used for local testing.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.new-footer-server.js around lines 1 - 52, The new standalone server in createServer is a dev-only helper and appears unrelated to the footer UI/CSS changes in this PR. Either remove this script from the change if it was only for local testing, or move it into a clearly named dev/scripts location and document its purpose so the main PR stays focused. Keep the security and malformed-URL handling in the same server entrypoint if you retain it.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/footer.html`:
- Around line 1-3: The Quick Links section in footer.html has an unclosed div,
so the footer markup is unbalanced. Locate the Quick Links block in the footer
template and add the missing closing div before the closing footer tag, keeping
the existing structure around premium-footer, footer-shell, and footer-grid
intact. Ignore the doctype-first hint since this is only a partial.
---
Nitpick comments:
In @.new-footer-server.js:
- Line 51: The server startup in the listen call is missing an error handler, so
a port-in-use failure can crash the process with an unhandled event. Update the
startup logic around the listen(5000, '127.0.0.1') call to attach an error
listener on the returned server instance and emit a friendly message for
address-in-use cases. Keep the change localized to the local dev server
bootstrap in .new-footer-server.js and use the existing listen setup as the
entry point for the fix.
- Around line 1-52: The new standalone server in createServer is a dev-only
helper and appears unrelated to the footer UI/CSS changes in this PR. Either
remove this script from the change if it was only for local testing, or move it
into a clearly named dev/scripts location and document its purpose so the main
PR stays focused. Keep the security and malformed-URL handling in the same
server entrypoint if you retain it.
In `@src/components/footer.html`:
- Around line 97-118: The footer social links are using personal LinkedIn and
Twitter/X profiles instead of project-owned accounts, which weakens branding and
creates a single point of failure. Update the social link targets in the footer
component to use official project or organization profiles if they exist, or
remove the LinkedIn/Twitter anchors from the footer when no project-level
accounts are available. Keep the GitHub and Discord links as-is and make the
changes in the footer social links markup so the branding stays consistent.
In `@src/styles.css`:
- Around line 575-583: The `.footer-community-card` and `.footer-stat-card`
styles are split between a shared base rule and a later `.footer-stat-card`
override, which repeats overlapping layout properties. Consolidate the shared
card layout styles into the common rule and keep `.footer-stat-card` only for
truly specific differences, using the `.footer-community-card` /
`.footer-stat-card` selectors to find the duplicated declarations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 76a2ff61-e84f-4648-aac6-1fc8057d4365
📒 Files selected for processing (6)
.gitignore.new-footer-server.jsindex.htmlsrc/components/footer.htmlsrc/js/landing.jssrc/styles.css
📜 Review details
⏰ Context from checks skipped due to timeout. (2)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: Greptile Review
⚠️ CI failures not shown inline (1)
Commit Status: Vercel: Vercel
Conclusion: failure
Authorization required to deploy.
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-06-15T18:15:28.688Z
Learnt from: arghya29
Repo: S3DFX-CYBER/GSoC-Org-Finder- PR: 1882
File: src/js/footer.js:33-33
Timestamp: 2026-06-15T18:15:28.688Z
Learning: In this repo’s JavaScript (e.g., footer.js), `globalThis` is intentionally preferred over `window` to keep code environment-agnostic and to satisfy SonarCloud static analysis. The project targets modern browsers (ES2021) with no transpilation, so `globalThis` is fully supported—do not flag `globalThis` usage as a browser compatibility concern or suggest replacing it with `window` during review.
Applied to files:
src/js/landing.js
🪛 ast-grep (0.44.1)
.new-footer-server.js
[warning] 19-50: Use https protocol over http
Context: http.createServer((req, res) => {
try {
const url = new URL(req.url || '/', 'http://127.0.0.1:5000');
let pathname = decodeURIComponent(url.pathname);
if (pathname === '/') pathname = '/index.html';
const file = path.resolve(root, `.${pathname}`);
// FIX: Path traversal security fix
const relative = path.relative(root, file);
if (relative.startsWith('..') || path.isAbsolute(relative)) {
res.writeHead(403);
res.end('Forbidden');
return;
}
fs.readFile(file, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Not found');
return;
}
res.writeHead(200, { 'Content-Type': types[path.extname(file).toLowerCase()] || 'application/octet-stream' });
res.end(data);
});
} catch (err) {
// FIX: Prevents unhandled crashes from malformed URI component parameters
res.writeHead(400);
res.end('Bad Request: Malformed URL');
}
})
Note: [CWE-319] Cleartext Transmission of Sensitive Information. Security best practice.
(https-protocol-missing)
[warning] 35-44: Filesystem path is not a string literal; a request-/variable-derived path can enable path traversal. Validate and normalize the path before use.
Context: fs.readFile(file, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Not found');
return;
}
res.writeHead(200, { 'Content-Type': types[path.extname(file).toLowerCase()] || 'application/octet-stream' });
res.end(data);
})
Note: [CWE-22] Improper Limitation of a Pathname to a Restricted Directory ('Path Traversal').
(detect-non-literal-fs-filename)
🪛 HTMLHint (1.9.2)
src/components/footer.html
[error] 1-1: Doctype must be declared before any non-comment content.
(doctype-first)
[error] 3-3: Tag must be paired, missing: [ ], start tag match failed [
(tag-pair)
🔇 Additional comments (9)
index.html (1)
1302-1302: 🎯 Functional CorrectnessNo issue: the mobile menu already intercepts this link and scrolls by
data-section, so thehrefchange doesn’t alter the click behavior.> Likely an incorrect or invalid review comment.src/components/footer.html (2)
1-19: Brand panel markup looks solid.Semantic structure,
aria-labelon the brand link, andaria-hiddenon decorative glyphs/icons are all correctly applied.
65-88: Platform Stats section wiring matches downstream consumers.IDs
footerOrgCount,footerVeteranOrgCount,footerNewcomerOrgCountline up with bothupdateFooterStats()insrc/js/footer.js:30-43and the newrenderLiveStats()binding insrc/js/landing.js.src/js/landing.js (1)
348-369: LGTM!src/styles.css (4)
447-729: Footer theme/layout rewrite looks solid.Gradient border, glow, glass-like stat/community cards, and responsive grid collapse are implemented consistently, with dark-mode variants provided throughout.
765-830: Social hover and reduced-motion handling looks correct.Per-brand hover colors and the consolidated
prefers-reduced-motionoverride that neutralizes all footer hover transforms (Lines 886-897) properly address the accessibility requirement from issue#867.Also applies to: 886-897
831-885: Responsive breakpoints for footer look consistent.The 1100px/720px breakpoints collapse the grid sensibly, and the 640px
.premium-footer{padding:0}override (Line 1024) correctly defers to.footer-shell's own padding set in the 720px block, avoiding double-padding.Also applies to: 1024-1024
1186-1206: Privacy-page footer overrides are consistent with the base theme.Gradient background and border-color overrides for
.privacy-page .premium-footer(light/dark) mirror the base premium-footer treatment, and card background/border overrides look aligned..new-footer-server.js (1)
20-34: Path traversal mitigation looks correct.The relative-path check properly rejects requests resolving outside
root, correctly addressing the static analysis CWE-22 hint at Line 35.
| <footer class="premium-footer" aria-labelledby="footer-brand"> | ||
| <div class="footer-shell"> | ||
| <div class="footer-grid"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Validate div/section tag balance in footer.html
fd -a footer.html src/components --exec cat -n {}Repository: S3DFX-CYBER/GSoC-Org-Finder-
Length of output: 9912
🏁 Script executed:
python3 - <<'PY'
from pathlib import Path
import re
path = Path("src/components/footer.html")
text = path.read_text()
# Ignore tags that are self-closing or not part of normal HTML nesting.
void = {
"area","base","br","col","embed","hr","img","input","link","meta",
"param","source","track","wbr"
}
stack = []
for m in re.finditer(r"<\s*(/)?\s*([a-zA-Z][\w:-]*)\b[^>]*?(\/?)\s*>", text):
closing, tag, self_close = m.group(1), m.group(2).lower(), m.group(3)
if tag in void or self_close:
continue
if closing:
if stack and stack[-1] == tag:
stack.pop()
else:
print(f"mismatch at {m.start()}: expected {stack[-1] if stack else None}, found /{tag}")
break
else:
stack.append(tag)
else:
print("open_tags_remaining:", stack)
print("doctype_present:", "<!doctype" in text.lower())
PYRepository: S3DFX-CYBER/GSoC-Org-Finder-
Length of output: 235
🏁 Script executed:
python3 - <<'PY'
from pathlib import Path
from html.parser import HTMLParser
VOID = {"area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"}
SVG_VOID_LIKE = {"path","circle","ellipse","line","polyline","polygon","rect","stop","use","animate","animateTransform","animateMotion","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"}
class Checker(HTMLParser):
def __init__(self):
super().__init__()
self.stack = []
self.errors = []
def handle_starttag(self, tag, attrs):
tag = tag.lower()
if tag in VOID or tag in SVG_VOID_LIKE:
return
self.stack.append(tag)
def handle_endtag(self, tag):
tag = tag.lower()
while self.stack and self.stack[-1] != tag:
# record the first clear mismatch and stop early
self.errors.append((self.getpos(), self.stack[-1], tag))
return
if self.stack and self.stack[-1] == tag:
self.stack.pop()
else:
self.errors.append((self.getpos(), None, tag))
text = Path("src/components/footer.html").read_text()
p = Checker()
p.feed(text)
print("errors:", p.errors[:5])
print("remaining_stack_tail:", p.stack[-10:])
print("remaining_stack_len:", len(p.stack))
PYRepository: S3DFX-CYBER/GSoC-Org-Finder-
Length of output: 386
Close the unbalanced Quick Links <div> src/components/footer.html:22-121 — the Quick Links block is opened at line 22 but never closed before </footer>, so the tag-pair warning is real here. The doctype-first hint can still be ignored for this partial.
🧰 Tools
🪛 HTMLHint (1.9.2)
[error] 1-1: Doctype must be declared before any non-comment content.
(doctype-first)
[error] 3-3: Tag must be paired, missing: [ ], start tag match failed [
(tag-pair)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/footer.html` around lines 1 - 3, The Quick Links section in
footer.html has an unclosed div, so the footer markup is unbalanced. Locate the
Quick Links block in the footer template and add the missing closing div before
the closing footer tag, keeping the existing structure around premium-footer,
footer-shell, and footer-grid intact. Ignore the doctype-first hint since this
is only a partial.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
0 issues found across 1 file (changes from recent commits).
Requires human review: Large footer UI redesign with extensive CSS changes and a new dev server file. High risk of visual regressions; requires human review.
Re-trigger cubic
TarunyaProgrammer
left a comment
TarunyaProgrammer
left a comment
There was a problem hiding this comment.
Please sign off your commits using standard developer certificate of origin format (DCO).
Use: git commit -s --amend to sign your commits.
TarunyaProgrammer
left a comment
TarunyaProgrammer
left a comment
There was a problem hiding this comment.
Great work on this PR so far!
The git diff introduces a critical HTML structure issue (unclosed divs in the footer), a security vulnerability in the custom Node.js server allowing access to sensitive hidden dotfiles, and styling inconsistencies due to an incomplete migration from Tailwind to vanilla CSS.
Major Changes Needed:
- src/components/footer.html:44: Critical HTML structure violation. The closing tags for the Quick Links and Programs columns were removed. This causes these columns and the subsequent stats/bottom elements to nest inside each other, breaking the flex/grid layout and leaving the parent 'footer-shell' and 'footer-grid' divs unclosed.
Suggestion:Restore the closing </div> tags for both the Quick Links column and the Programs column to maintain proper layout hierarchy.
Minor Changes / Suggestions:
- .new-footer-server.js:28: Sensitive File Exposure / Information Disclosure. The path traversal check prevents escaping the root directory, but does not block requests to hidden files/directories (dotfiles). An attacker can request and read sensitive files like '.env', '.git/config', or the server code itself ('.new-footer-server.js') because they reside within the root directory and pass the startsWith('..') check.
- src/components/footer.html:20: Incomplete CSS Migration. The footer brand and stats sections were successfully migrated to custom CSS classes, but the Quick Links and Programs columns still rely on Tailwind utility classes (e.g., flex, flex-col, gap-2, text-zinc-600). This results in inconsistent styling mechanics.
- index.html:1302: UX/Performance degradation. Changing the mobile menu anchor link from '#orgs' to 'index.html#orgs' causes the browser to reload the page when clicked on the homepage instead of executing a smooth internal anchor scroll.
- .new-footer-server.js:36: Suboptimal memory utilization. The server uses fs.readFile to read the entire file into memory before sending it. For larger assets, this is memory-inefficient.
- .new-footer-server.js:43: Missing security and caching headers. The server serves static files without X-Content-Type-Options: nosniff or Cache-Control headers.
3 participants
📝 Description
Enhance the existing footer UI with a modern, responsive, and visually appealing design that aligns with contemporary open-source and developer-focused websites. The update should improve layout structure, branding visibility, interactivity, and overall user experience while maintaining the current dark theme aesthetics.
🔗 Related Issue
Closes #867
🚀 Program Classification
🔄 Type of Change
✅ Checklist
feat: add scroll button)