feat: add "Contribute" section to encourage open source participation#349
Open
Shweta-281 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Open
feat: add "Contribute" section to encourage open source participation#349Shweta-281 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Shweta-281 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThis PR introduces a new "Contribute" section to the homepage, refactors Footer and NavBar components to use shared link constants for maintainability, updates asset import paths to use path aliases, improves accessibility with ARIA labels and semantic roles, and adds GSAP animations for the contribute section. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Important Merge conflicts detected (Beta)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (5)
app/constants/links.js (1)
13-17: Consider addingexternal: truefor consistency.The GitHub link points to an external URL but doesn't have
external: truelike the AOSSIE link does. This inconsistency might affect how external links are rendered (e.g., withtarget="_blank"andrel="noopener noreferrer").♻️ Proposed fix for consistency
{ name: "GitHub", url: "https://github.com/AOSSIE-Org/Resonate", icon: "github", + external: true, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/constants/links.js` around lines 13 - 17, The GitHub link object (the entry with name: "GitHub" and url: "https://github.com/AOSSIE-Org/Resonate") is missing the external: true flag; update that object to include external: true so it matches the AOSSIE link pattern and ensures external links are rendered with the correct behavior (e.g., target="_blank" and rel="noopener noreferrer").app/components/sections/Contribute/Contribute.css (1)
36-38: Add focus state for keyboard accessibility.The
.contribute-btnhas a hover state but lacks a visible focus state for keyboard navigation. This is important for accessibility compliance.♿ Proposed fix to add focus styles
.contribute-btn:hover { opacity: 0.85; } + +.contribute-btn:focus { + outline: 2px solid `#FFC107`; + outline-offset: 3px; +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/sections/Contribute/Contribute.css` around lines 36 - 38, The .contribute-btn CSS lacks a keyboard-visible focus state; add explicit focus styles (use :focus and/or :focus-visible selectors) for .contribute-btn that mirror the hover feedback (e.g., matching opacity/visual change) and include a high-contrast ring or outline (outline, box-shadow, or border) so keyboard users can see focus; update the .contribute-btn rules to include these focus selectors and ensure the visual focus is not removed by outline: none.app/components/Layout/NavBar/Navbar.css (1)
25-28: Add focus styles for the logo button.Since
.navbar-logois now a<button>element for accessibility, it should have visible focus styles for keyboard navigation, similar to the other interactive elements (lines 158-163).♿ Proposed fix to add focus styles
.hamburger:focus, +.navbar-logo:focus, .nav-link:focus, .download-btn:focus { outline: 2px solid `#FFC107`; outline-offset: 3px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/Layout/NavBar/Navbar.css` around lines 25 - 28, Add visible keyboard focus styles for the .navbar-logo button: update the .navbar-logo selector to include :focus and :focus-visible rules that mirror the existing interactive focus styling used elsewhere (lines that style other nav interactive elements), e.g., apply the same outline/box-shadow, border-radius and focus color so the logo button is visually identifiable when focused; ensure the styles only affect focus state and do not change default layout or padding.app/components/Layout/Footer/index.jsx (1)
7-11: Good refactoring with one maintainability consideration.The
iconMapapproach cleanly decouples icon rendering from the link data. However, if a new entry is added toSOCIAL_LINKSwithout a correspondingiconMapentry, it will silently renderundefined(no icon).Consider adding a fallback or validation:
♻️ Optional: Add defensive check for missing icons
const iconMap = { "GitHub": <FaGithub />, "Twitter/X": <BsTwitterX />, "LinkedIn": <FaLinkedinIn />, }; + +const getIcon = (name) => { + const icon = iconMap[name]; + if (!icon) { + console.warn(`Missing icon for social link: ${name}`); + } + return icon; +};Then use
{getIcon(link.name)}instead of{iconMap[link.name]}.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/Layout/Footer/index.jsx` around lines 7 - 11, Add a defensive getter for icons and use it where links are rendered: keep the existing iconMap but implement a getIcon(name) function that returns iconMap[name] if present, otherwise returns a sensible fallback (e.g., a default icon component or null) and optionally logs or warns about the missing mapping; then replace direct uses of iconMap[link.name] with getIcon(link.name) in the Footer rendering (references: iconMap, getIcon, SOCIAL_LINKS, and the Footer component) so adding a new SOCIAL_LINK without an icon no longer renders undefined.app/components/Layout/NavBar/index.jsx (1)
61-74: Consider the UX of showing both text and icon for the GitHub link.For the GitHub entry in
NAV_LINKS, this renders both the text "GitHub" and the<FaGithub />icon (line 70 + line 72). This may be intentional, but it's worth confirming the design intent—typically, you'd show either the text label or the icon, not both.If intended, consider adding
aria-hidden="true"to the icon since the link text already conveys meaning:♻️ Optional: Hide decorative icon from screen readers
{link.name} {link.external && <FaExternalLinkAlt size={12} />} - {link.icon === "github" && <FaGithub size={20} />} + {link.icon === "github" && <FaGithub size={20} aria-hidden="true" />}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/Layout/NavBar/index.jsx` around lines 61 - 74, NAV_LINKS' GitHub entry currently renders both the "GitHub" text and the FaGithub icon inside NavBar; decide whether to show only the icon or the text, and if you keep both make the icon decorative by adding aria-hidden="true" to the FaGithub component (so screen readers rely on the link text). Update the conditional rendering in the NavBar return (where link.icon === "github") to either render only the icon or add aria-hidden="true" to FaGithub, and ensure the link text remains the accessible label for the anchor.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@app/components/Layout/Footer/index.jsx`:
- Around line 7-11: Add a defensive getter for icons and use it where links are
rendered: keep the existing iconMap but implement a getIcon(name) function that
returns iconMap[name] if present, otherwise returns a sensible fallback (e.g., a
default icon component or null) and optionally logs or warns about the missing
mapping; then replace direct uses of iconMap[link.name] with getIcon(link.name)
in the Footer rendering (references: iconMap, getIcon, SOCIAL_LINKS, and the
Footer component) so adding a new SOCIAL_LINK without an icon no longer renders
undefined.
In `@app/components/Layout/NavBar/index.jsx`:
- Around line 61-74: NAV_LINKS' GitHub entry currently renders both the "GitHub"
text and the FaGithub icon inside NavBar; decide whether to show only the icon
or the text, and if you keep both make the icon decorative by adding
aria-hidden="true" to the FaGithub component (so screen readers rely on the link
text). Update the conditional rendering in the NavBar return (where link.icon
=== "github") to either render only the icon or add aria-hidden="true" to
FaGithub, and ensure the link text remains the accessible label for the anchor.
In `@app/components/Layout/NavBar/Navbar.css`:
- Around line 25-28: Add visible keyboard focus styles for the .navbar-logo
button: update the .navbar-logo selector to include :focus and :focus-visible
rules that mirror the existing interactive focus styling used elsewhere (lines
that style other nav interactive elements), e.g., apply the same
outline/box-shadow, border-radius and focus color so the logo button is visually
identifiable when focused; ensure the styles only affect focus state and do not
change default layout or padding.
In `@app/components/sections/Contribute/Contribute.css`:
- Around line 36-38: The .contribute-btn CSS lacks a keyboard-visible focus
state; add explicit focus styles (use :focus and/or :focus-visible selectors)
for .contribute-btn that mirror the hover feedback (e.g., matching
opacity/visual change) and include a high-contrast ring or outline (outline,
box-shadow, or border) so keyboard users can see focus; update the
.contribute-btn rules to include these focus selectors and ensure the visual
focus is not removed by outline: none.
In `@app/constants/links.js`:
- Around line 13-17: The GitHub link object (the entry with name: "GitHub" and
url: "https://github.com/AOSSIE-Org/Resonate") is missing the external: true
flag; update that object to include external: true so it matches the AOSSIE link
pattern and ensures external links are rendered with the correct behavior (e.g.,
target="_blank" and rel="noopener noreferrer").
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c4b3970f-f27a-40c7-ac31-428ef063d629
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (18)
app/components/Layout/Footer/index.jsxapp/components/Layout/NavBar/Navbar.cssapp/components/Layout/NavBar/index.jsxapp/components/sections/About/About.cssapp/components/sections/About/About.jsxapp/components/sections/Contribute/Contribute.cssapp/components/sections/Contribute/Contribute.jsxapp/components/sections/DownloadApp/DownloadApp.cssapp/components/sections/DownloadApp/DownloadApp.jsxapp/components/sections/DownloadApp/StoreButton.jsapp/components/sections/Features/Features.cssapp/components/sections/Features/Features.jsxapp/components/sections/Hero/Hero.cssapp/components/sections/Hero/Hero.jsxapp/components/sections/TechStack/TechStack.cssapp/components/sections/TechStack/TechStack.jsxapp/constants/links.jsapp/page.jsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Added a new "Contribute" section to the homepage to encourage users and developers to participate in the project.
Changes
Contributesection componentBenefits
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Please include screenshots below if applicable.
Checklist:
Maintainer Checklist
Summary by CodeRabbit
New Features
Improvements