feat: add YouTube social link and update README#306
Open
iamdwaseem wants to merge 3 commits intoAOSSIE-Org:mainfrom
Open
feat: add YouTube social link and update README#306iamdwaseem wants to merge 3 commits intoAOSSIE-Org:mainfrom
iamdwaseem wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughAdded an official YouTube social link and icon in the site's About and Footer components, and appended a YouTube subscribe badge plus a "🌐 Connect With Us" section to the README. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
README.md (1)
93-97: Optional: expand "Connect With Us" to cover all social platformsThe section currently lists only YouTube while the
Aboutcomponent already exposes five other channels (email, GitLab, GitHub, Discord, X). Adding the remaining links here would make the README a single authoritative reference for all community touch-points.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 93 - 97, Update the "Connect With Us" section to include the remaining community channels exposed by the About component (email, GitLab, GitHub, Discord, X) so README is a single authoritative reference; add descriptive bullets with the appropriate display names and their URLs (matching the links used by the About component) alongside the existing YouTube entry, ensuring link formatting and icons stay consistent with the current pattern.app/components/About/About.jsx (2)
27-41: Existing external social links are missingtarget="_blank",rel, andaria-labelThe new YouTube link correctly sets these attributes, but the four existing external links (GitLab, GitHub, Discord, X) do not, leaving an inconsistency. Consider aligning them so all external links share the same security and accessibility posture.
♻️ Proposed fix for existing external links
- <a href="https://gitlab.com/aossie"> + <a href="https://gitlab.com/aossie" target="_blank" rel="noopener noreferrer" aria-label="GitLab"> <SiGitlab /> </a> - <a href="https://github.com/AOSSIE-Org"> + <a href="https://github.com/AOSSIE-Org" target="_blank" rel="noopener noreferrer" aria-label="GitHub"> <FaGithub /> </a> - <a href="https://discord.com/invite/MMZBadkYFm"> + <a href="https://discord.com/invite/MMZBadkYFm" target="_blank" rel="noopener noreferrer" aria-label="Discord"> <FaDiscord /> </a> - <a href="https://x.com/aossie_org"> + <a href="https://x.com/aossie_org" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)"> <BsTwitterX /> </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/About/About.jsx` around lines 27 - 41, In the About component update the four external anchor elements that wrap SiGitlab, FaGithub, FaDiscord and BsTwitterX to match the YouTube link by adding target="_blank", rel="noopener noreferrer" and a descriptive aria-label (e.g., "GitLab — AOSSIE", "GitHub — AOSSIE", "Discord — AOSSIE", "X — AOSSIE"); keep the mailto link as-is or add aria-label for email if desired. Ensure the attributes are added directly on the corresponding <a> tags in About.jsx so all external links share the same security and accessibility posture.
42-57: Replace inline SVG withFaYoutubefromreact-icons/fafor consistencyEvery other icon in this component uses
react-icons(FaEnvelope,FaGithub,FaDiscord,FaGithub,SiGitlab,BsTwitterX).FaYoutubeis available inreact-icons/fa, so there is no need to hand-roll an inline SVG here. Beyond inconsistency, the current SVG also setsstroke="currentColor"on a purely fill-based path, which adds an unintended rendered outline and can make the icon appear visually heavier than its siblings.♻️ Proposed refactor – use FaYoutube
-import { FaEnvelope, FaGithub, FaDiscord } from "react-icons/fa"; +import { FaEnvelope, FaGithub, FaDiscord, FaYoutube } from "react-icons/fa";- <a - href="https://www.youtube.com/@AOSSIE-Org" - target="_blank" - rel="noopener noreferrer" - aria-label="YouTube" - > - <svg - viewBox="0 0 576 512" - height="1em" - width="1em" - fill="currentColor" - stroke="currentColor" - > - <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.781 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" /> - </svg> - </a> + <a + href="https://www.youtube.com/@AOSSIE-Org" + target="_blank" + rel="noopener noreferrer" + aria-label="YouTube" + > + <FaYoutube /> + </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/About/About.jsx` around lines 42 - 57, In the About.jsx component, replace the inline YouTube SVG inside the anchor with the FaYoutube icon from react-icons: add an import "FaYoutube" from "react-icons/fa" at the top, then swap the entire <svg ...><path .../></svg> block inside the anchor (the element alongside FaEnvelope/FaGithub/etc.) with <FaYoutube /> so it uses the same sizing/color behavior (e.g., rely on height/width="1em" or parent CSS); remove the hand-rolled SVG and any stroke attributes, keep the existing anchor attributes (href, target, rel, aria-label) unchanged to preserve accessibility and behavior.
🤖 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/About/About.jsx`:
- Around line 27-41: In the About component update the four external anchor
elements that wrap SiGitlab, FaGithub, FaDiscord and BsTwitterX to match the
YouTube link by adding target="_blank", rel="noopener noreferrer" and a
descriptive aria-label (e.g., "GitLab — AOSSIE", "GitHub — AOSSIE", "Discord —
AOSSIE", "X — AOSSIE"); keep the mailto link as-is or add aria-label for email
if desired. Ensure the attributes are added directly on the corresponding <a>
tags in About.jsx so all external links share the same security and
accessibility posture.
- Around line 42-57: In the About.jsx component, replace the inline YouTube SVG
inside the anchor with the FaYoutube icon from react-icons: add an import
"FaYoutube" from "react-icons/fa" at the top, then swap the entire <svg
...><path .../></svg> block inside the anchor (the element alongside
FaEnvelope/FaGithub/etc.) with <FaYoutube /> so it uses the same sizing/color
behavior (e.g., rely on height/width="1em" or parent CSS); remove the
hand-rolled SVG and any stroke attributes, keep the existing anchor attributes
(href, target, rel, aria-label) unchanged to preserve accessibility and
behavior.
In `@README.md`:
- Around line 93-97: Update the "Connect With Us" section to include the
remaining community channels exposed by the About component (email, GitLab,
GitHub, Discord, X) so README is a single authoritative reference; add
descriptive bullets with the appropriate display names and their URLs (matching
the links used by the About component) alongside the existing YouTube entry,
ensuring link formatting and icons stay consistent with the current pattern.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/components/About/About.jsx (1)
27-49: Align existing social links with the conventions set by the new YouTube link.The new YouTube
<a>correctly usestarget="_blank",rel="noopener noreferrer", andaria-label. The four other external links (GitLab, GitHub, Discord, X) have none of these attributes, creating two issues:
- Inconsistent UX: those links open in the same tab while YouTube opens in a new one.
- Accessibility: all five existing links are icon-only with no accessible name, making them indistinguishable to screen readers.
Since this PR already establishes the right pattern, consider applying it to the remaining external links:
♻️ Proposed fix — consistent attributes on all external social links
- <a href="https://gitlab.com/aossie"> + <a href="https://gitlab.com/aossie" target="_blank" rel="noopener noreferrer" aria-label="GitLab"> <SiGitlab /> </a> - <a href="https://github.com/AOSSIE-Org"> + <a href="https://github.com/AOSSIE-Org" target="_blank" rel="noopener noreferrer" aria-label="GitHub"> <FaGithub /> </a> - <a href="https://discord.com/invite/MMZBadkYFm"> + <a href="https://discord.com/invite/MMZBadkYFm" target="_blank" rel="noopener noreferrer" aria-label="Discord"> <FaDiscord /> </a> - <a href="https://x.com/aossie_org"> + <a href="https://x.com/aossie_org" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)"> <BsTwitterX /> </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/About/About.jsx` around lines 27 - 49, Update the remaining icon-only anchor elements to match the YouTube link pattern: for the anchors wrapping FaGithub, SiGitlab, FaDiscord, and BsTwitterX add target="_blank", rel="noopener noreferrer", and a descriptive aria-label (e.g., "GitHub", "GitLab", "Discord", "X") so they open in a new tab and are accessible to screen readers; for the FaEnvelope mailto anchor at least add an aria-label like "Email" (and optionally target/rel if you want it to open in a new tab), ensuring each <a> element in About.jsx has the same accessibility and external-link attributes as the YouTube 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/About/About.jsx`:
- Around line 27-49: Update the remaining icon-only anchor elements to match the
YouTube link pattern: for the anchors wrapping FaGithub, SiGitlab, FaDiscord,
and BsTwitterX add target="_blank", rel="noopener noreferrer", and a descriptive
aria-label (e.g., "GitHub", "GitLab", "Discord", "X") so they open in a new tab
and are accessible to screen readers; for the FaEnvelope mailto anchor at least
add an aria-label like "Email" (and optionally target/rel if you want it to open
in a new tab), ensuring each <a> element in About.jsx has the same accessibility
and external-link attributes as the YouTube anchor.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/components/Layout/Footer/index.jsx (1)
38-45:target/relattribute order is inverted compared to existing links (nit).All three existing anchors follow
rel→target, but the new YouTube anchor hastarget→rel. No functional impact, but aligning keeps the JSX uniform.🔧 Proposed consistency fix
<a href="https://www.youtube.com/@AOSSIE-Org" - target="_blank" - rel="noopener noreferrer" + rel="noopener noreferrer" + target="_blank" aria-label="YouTube" > <FaYoutube /> </a>🤖 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 38 - 45, The YouTube anchor in the Footer component (the <a> element wrapping <FaYoutube />) has its target and rel attributes reversed compared to other anchors; update that anchor so the rel attribute appears before the target attribute (i.e., change from target then rel to rel then target) to keep JSX attribute ordering consistent with the other links in the Footer.
🤖 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 38-45: The YouTube anchor in the Footer component (the <a> element
wrapping <FaYoutube />) has its target and rel attributes reversed compared to
other anchors; update that anchor so the rel attribute appears before the target
attribute (i.e., change from target then rel to rel then target) to keep JSX
attribute ordering consistent with the other links in the Footer.
Author
|
@M4dhav Please review and let me know if there is need of any changes |
6 tasks
15 tasks
Author
|
Hi @aniket866 , I was assigned this issue (#305) and have submitted the PR accordingly. I noticed similar PRs were closed/merged later. Could you please clarify if any changes are needed from my side or if this PR is still being considered? Happy to update it as required. Thanks! |
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.
🚀 Add YouTube Link to Home Page
📌 Description
This PR adds the official YouTube channel link to the Home page social links section.
The YouTube icon is now displayed alongside existing social platforms in the header and footer to improve visibility and community engagement.
Fixes #305
🖼 Screenshots / Recordings
✅ Checklist
🤖 AI Usage Disclosure
📦 Release Notes
✨ New Features
Summary by CodeRabbit
New Features
Documentation