Revamping the footer with a fresh, modern and clean look#101
Revamping the footer with a fresh, modern and clean look#101ananya-09 wants to merge 4 commits intoOWASP-BLT:mainfrom
Conversation
📊 Monthly LeaderboardHi @ananya-09! Here's how you rank for March 2026:
Scoring this month (across OWASP-BLT org): Open PRs (+1 each), Merged PRs (+10), Closed (not merged) (−2), Reviews (+5; first two per PR in-month), Comments (+2, excludes CodeRabbit). Run |
|
👋 Hi @ananya-09! This pull request needs a peer review before it can be merged. Please request a review from a team member who is not:
Once a valid peer review is submitted, this check will pass automatically. Thank you!
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughUpdated the homepage footer: replaced the multi-column grid with a rounded, semi-transparent blurred container, changed Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
index.html (2)
699-773: Add Playwright coverage for the new footer structure.This PR rewrites the footer, but current tests don’t assert footer headings/links/CTA at all (
tests/homepage.spec.js:1-40). Add a focused test to lock expected labels and critical href targets.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 699 - 773, Update tests/homepage.spec.js to add Playwright assertions for the rewritten footer: verify the CTA title "Connect with us" (h2 text), the CTA button anchor linking to "https://github.com/OWASP-BLT" (the rounded anchor with aria-label "Explore OWASP BLT"), presence of key footer headings "OWASP", "Project", and "Report" (their h3 texts), and that the copyright year element with id "footer-year" exists; locate these elements by visible text, aria-labels, or ids (e.g., h2 text "Connect with us", aria-label "Explore OWASP BLT", h3 texts, and `#footer-year`) and add focused expects on text content and href targets rather than brittle class selectors. Ensure the new test is small, deterministic, and placed in tests/homepage.spec.js alongside existing homepage checks.
737-757: Footer link styling is heavily duplicated; extract a reusable class.The same long utility chain is repeated across all grouped links, which increases drift risk during future style edits. Consider a
footer-linkutility/class and reuse it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 737 - 757, Extract the repeated anchor utility chain (text-primary hover:text-primary-hover hover:underline dark:text-primary dark:hover:text-red-200) into a single reusable CSS class named footer-link, add that class to your stylesheet with equivalent rules (including hover and dark variants), and then replace the long class attribute on each <a> (e.g., the links using the svg icons and labels like "owasp.org", "Source code", "Public bug", etc.) with class="footer-link" so all footer links reuse the new class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Line 730: The LinkedIn icon reference uses a missing SVG symbol
(href="#fa-linkedin") so the <use> element won’t render; fix by either adding a
symbol with id="fa-linkedin" to your SVG sprite (matching the expected path data
and viewBox) or replace the <use href="#fa-linkedin"> element inside the anchor
(aria-label="OWASP BLT on LinkedIn") with an inline SVG for the LinkedIn logo
that preserves the existing classes (fa-icon text-xl), aria-hidden attribute,
and styling (text-gray-600 transition hover:text-primary dark:text-gray-300
dark:hover:text-red-300).
---
Nitpick comments:
In `@index.html`:
- Around line 699-773: Update tests/homepage.spec.js to add Playwright
assertions for the rewritten footer: verify the CTA title "Connect with us" (h2
text), the CTA button anchor linking to "https://github.com/OWASP-BLT" (the
rounded anchor with aria-label "Explore OWASP BLT"), presence of key footer
headings "OWASP", "Project", and "Report" (their h3 texts), and that the
copyright year element with id "footer-year" exists; locate these elements by
visible text, aria-labels, or ids (e.g., h2 text "Connect with us", aria-label
"Explore OWASP BLT", h3 texts, and `#footer-year`) and add focused expects on text
content and href targets rather than brittle class selectors. Ensure the new
test is small, deterministic, and placed in tests/homepage.spec.js alongside
existing homepage checks.
- Around line 737-757: Extract the repeated anchor utility chain (text-primary
hover:text-primary-hover hover:underline dark:text-primary
dark:hover:text-red-200) into a single reusable CSS class named footer-link, add
that class to your stylesheet with equivalent rules (including hover and dark
variants), and then replace the long class attribute on each <a> (e.g., the
links using the svg icons and labels like "owasp.org", "Source code", "Public
bug", etc.) with class="footer-link" so all footer links reuse the new class.
🪄 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: Repository: OWASP-BLT/coderabbit/.coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: e77cb8fb-bb2c-427e-be2b-5d9c2af53dcb
📒 Files selected for processing (1)
index.html
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Thanks! |
Summary
Revamps the website footer with a refreshed visual structure, improved content hierarchy, and a more modern glass-style presentation while maintaining consistency with BLT branding.
Related Issues
Changes
Heard enough? -> Connect with us) for stronger CTA visibilityOWASP,Project,Report) for faster navigationFeatures
Testing
Snapshots
Desktop
Mobile
Summary by CodeRabbit
Style
Documentation