feat: add Instagram and Facebook social media links to footer#149
feat: add Instagram and Facebook social media links to footer#149anushreekhatri028-coder wants to merge 5 commits into
Conversation
|
@anushreekhatri028-coder is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
dco-missing
accessibility
assignee-match
client
enhancement
DCO Sign-off NeededHi @anushreekhatri028-coder, one or more commits need a Fix these commits:
For the latest commit: git commit --amend --signoff
git push --force-with-leaseFor multiple commits, replace git rebase --signoff HEAD~N
git push --force-with-leaseThis comment will update after you push. VoiceForge automation |
📝 WalkthroughWalkthroughAdds a new Footer component with GitHub, Instagram, and Facebook links and renders it persistently in App.jsx; updates the issue-maintainer-decision GitHub Actions workflow to default missing priority/level labels to medium and adjusts bot comment-deletion markers. ChangesFooter with Social Media Links
GitHub Actions: maintainer-decision changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 |
github-actions
Bot
requested review from
1754riya,
Anushreebasics,
itsdakshjain,
leonagoel,
sabeenaviklar and
snehkris
PR Ready For Mentor ReviewHi @anushreekhatri028-coder, your PR passed automated validation and moved into the GSSoC review queue.
@sabeenaviklar @1754riya @Anushreebasics @itsdakshjain @snehkris @leonagoel, this GSSoC PR is ready for review. Mentor next steps: confirm scope, review behavior and tests, then approve, comment, or request changes. This does not mean the PR is approved yet. Please wait for mentor feedback before expecting merge. If changes are requested, update the same branch and keep the PR focused on the linked issue. VoiceForge automation |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
client/src/components/footer.jsx (1)
7-32: ⚡ Quick winAdd hover states and explicit dark mode text color for better UX.
The social media links currently lack hover/focus visual feedback and explicit text color for dark mode, which may result in poor visibility and unclear interactivity. The existing codebase pattern (from Settings.jsx) shows links with hover states like
hover:border-moss hover:text-moss dark:hover:border-glow dark:hover:text-glow.♻️ Proposed enhancement for hover states and dark mode styling
<a href="https://github.com/project" target="_blank" rel="noopener noreferrer" aria-label="GitHub" + className="text-ink transition hover:text-moss dark:text-neutral-200 dark:hover:text-glow" > <Github size={20} /> </a> <a href="https://instagram.com/project" target="_blank" rel="noopener noreferrer" aria-label="Instagram" + className="text-ink transition hover:text-moss dark:text-neutral-200 dark:hover:text-glow" > <Instagram size={20} /> </a> <a href="https://facebook.com/project" target="_blank" rel="noopener noreferrer" aria-label="Facebook" + className="text-ink transition hover:text-moss dark:text-neutral-200 dark:hover:text-glow" > <Facebook size={20} /> </a>🤖 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 `@client/src/components/footer.jsx` around lines 7 - 32, The social links in footer.jsx (the three <a> anchors wrapping Github/Instagram/Facebook) lack hover/focus feedback and explicit dark-mode text color; update each anchor to include the same interactive classes used in Settings.jsx (e.g., hover:border-moss hover:text-moss dark:hover:border-glow dark:hover:text-glow and focus-visible equivalents) and add an explicit text color that includes a dark mode variant (for example text-gray-600 dark:text-gray-200) so icons remain visible in dark mode and provide clear hover/focus states.
🤖 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 `@client/src/App.jsx`:
- Line 9: Update the import in App.jsx to match the actual filename casing:
change the import path from "./components/Footer" to "./components/footer" (so
the imported symbol Footer still refers to the default export from
client/src/components/footer.jsx); alternatively, rename the component file to
Footer.jsx if you prefer PascalCase filenames—ensure import path and actual
filename casing are identical to avoid failures on case-sensitive filesystems.
In `@client/src/components/footer.jsx`:
- Line 8: The footer anchors in the Footer component currently use placeholder
hrefs ("https://github.com/project", "https://instagram.com/project",
"https://facebook.com/project"); update the anchor href attributes in
client/src/components/footer.jsx (the social link <a> elements in the Footer
component) to the real VoiceForge social URLs or read them from a config/env
(e.g., SOCIAL_GITHUB, SOCIAL_INSTAGRAM, SOCIAL_FACEBOOK) and use those constants
instead; ensure each <a> uses the correct URL, and keep or add target="_blank"
rel="noopener noreferrer" for external links.
---
Nitpick comments:
In `@client/src/components/footer.jsx`:
- Around line 7-32: The social links in footer.jsx (the three <a> anchors
wrapping Github/Instagram/Facebook) lack hover/focus feedback and explicit
dark-mode text color; update each anchor to include the same interactive classes
used in Settings.jsx (e.g., hover:border-moss hover:text-moss
dark:hover:border-glow dark:hover:text-glow and focus-visible equivalents) and
add an explicit text color that includes a dark mode variant (for example
text-gray-600 dark:text-gray-200) so icons remain visible in dark mode and
provide clear hover/focus states.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 42979324-83bd-4546-abb1-e3248dbc47f5
📒 Files selected for processing (2)
client/src/App.jsxclient/src/components/footer.jsx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 2 files
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
itsdakshjain
left a comment
itsdakshjain
left a comment
There was a problem hiding this comment.
similar file path mismatch here @anushreekhatri028-coder like your previous pr
|
@itsdakshjain Could you please review it? |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
client/src/App.jsx (1)
9-9: 💤 Low valueConsider adding the
.jsxextension for consistency.Most local component imports in this file include the explicit
.jsxextension (lines 4-6, 8), which improves readability and makes the file type clear at a glance. While Vite resolves imports without extensions, adding.jsxhere would align with the predominant pattern.✨ Proposed change for consistency
-import Footer from "./components/footer"; +import Footer from "./components/footer.jsx";🤖 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 `@client/src/App.jsx` at line 9, Update the local import for the Footer component to include the .jsx extension for consistency with other imports; specifically change the import statement that references Footer (import Footer from "./components/footer") so it explicitly imports "./components/footer.jsx" to match the existing pattern used for other components in App.jsx.
🤖 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.
Nitpick comments:
In `@client/src/App.jsx`:
- Line 9: Update the local import for the Footer component to include the .jsx
extension for consistency with other imports; specifically change the import
statement that references Footer (import Footer from "./components/footer") so
it explicitly imports "./components/footer.jsx" to match the existing pattern
used for other components in App.jsx.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cc21c7d5-c7f0-4bda-be07-e524cba029fd
📒 Files selected for processing (4)
.github/workflows/issue-assigned-notice.yml.github/workflows/issue-maintainer-decision.ymlclient/src/App.jsxclient/src/components/footer.jsx
💤 Files with no reviewable changes (1)
- .github/workflows/issue-assigned-notice.yml
🚧 Files skipped from review as they are similar to previous changes (1)
- client/src/components/footer.jsx
Anushreebasics
added
gssoc:approved
There was a problem hiding this comment.
App.jsx: Duplicate Footer import; this will break compilation.
App.jsx: Looks like the page content block is duplicated after main; please remove the extra conditional wrapper.
App.jsx: The closing tags near the end seem unbalanced after adding Footer; please verify JSX structure.
footer.jsx: Instagram and Facebook links currently point to generic platform homepages, not project-specific accounts.
footer.jsx: Consider adding hover/focus styles so the social icons feel interactive and match the rest of the UI.
|
@itsdakshjain Could you provide me official social media links of project? |
|
The Facebook and Instagram links are currently unavailable. They will be updated once the official accounts are created and confirmed. Until then, please use placeholders such as Also, for GitHub, please use the repository link:
Thanks! |
❌ Mentor Label RemovedCaution Review Required First — The label Hey @leonagoel! 👋 In VoiceForge, mentor labels are applied automatically when a mentor submits their review (approval, comment, or changes requested). They cannot be added manually. 💡 How to apply this label correctly:
🤖 VoiceForge Automation · Ping: @itzzavdhesh |
6 participants
🚀 Program
GSSoC
📝 Description
Added Instagram and Facebook social media icons to the website footer to improve community engagement and provide quick access to the project's social media platforms.
Changes Made
target="_blank"andrel="noopener noreferrer".🔗 Related Issue
Closes #147
🔄 Type of Change
🧪 How to Test
Run the application locally:
Open
http://localhost:5173in a browser.Scroll to the footer section.
Verify that GitHub, Instagram, and Facebook icons are displayed correctly.
Click the Instagram icon and confirm it opens the correct profile in a new tab.
Click the Facebook icon and confirm it opens the correct profile in a new tab.
Verify the footer layout remains responsive on different screen sizes.
Test in both light and dark themes.
✅ Checklist
feat: add voice preview)Summary by cubic
Add Instagram and Facebook links to the site footer and render the new Footer across the app. Also cleans up CI by removing an unused workflow and adding default labels. Closes #147.
New Features
lucide-react.aria-labels and open in new tabs (target="_blank"+rel="noopener noreferrer").components/footer.jsxand mounted app-wide inApp.jsx.Refactors
.github/workflows/issue-assigned-notice.yml..github/workflows/issue-maintainer-decision.ymlto auto-addpriority: mediumandlevel: mediumif unset, and stop deleting old assignment comments.Written for commit 4e0250d. Summary will update on new commits.
Summary by CodeRabbit
New Features
Chores