Add AOSSIE YouTube to social links (header, footer, About, README)#312
Closed
Alishasaroha wants to merge 3 commits intoAOSSIE-Org:mainfrom
Closed
Add AOSSIE YouTube to social links (header, footer, About, README)#312Alishasaroha wants to merge 3 commits intoAOSSIE-Org:mainfrom
Alishasaroha wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughAdded YouTube social links to About, Footer, and NavBar; introduced a structured exported Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
README.md (1)
101-106: Consider markdown link formatting in "Connect With Us".Plain-text URLs are valid but markdown-formatted hyperlinks are more conventional in READMEs and keep the section visually consistent with the rest of the document (e.g., the Tech Stack and Contributing sections already use
[text](url)style).✏️ Proposed fix
## 🔗 Connect With Us -- GitHub: https://github.com/AOSSIE-Org -- X (Twitter): https://x.com/aossie_org -- LinkedIn: https://www.linkedin.com/company/aossie -- YouTube: https://youtube.com/@AOSSIE +- [GitHub](https://github.com/AOSSIE-Org) +- [X (Twitter)](https://x.com/aossie_org) +- [LinkedIn](https://www.linkedin.com/company/aossie) +- [YouTube](https://www.youtube.com/@AOSSIE)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 101 - 106, The "## 🔗 Connect With Us" list currently uses plain-text URLs; update each list item under that heading (e.g., the GitHub, X (Twitter), LinkedIn, and YouTube entries) to use markdown link syntax like [GitHub](https://github.com/AOSSIE-Org) so the section matches the rest of the README's `[text](url)` style and improves readability.app/components/Layout/NavBar/index.jsx (1)
63-73: Attribute indentation is off by one space.Lines 64–69 use 11-space indentation for the anchor's attributes, while the sibling GitHub anchor (lines 55–59) uses 12 spaces. There is also trailing whitespace on Line 73.
✏️ Proposed fix
<a - href="https://youtube.com/@AOSSIE" - target="_blank" - rel="noopener noreferrer" - className="nav-link" - onClick={handleLinkClick} - aria-label="YouTube" + href="https://youtube.com/@AOSSIE" + target="_blank" + rel="noopener noreferrer" + className="nav-link" + onClick={handleLinkClick} + aria-label="YouTube" > <FaYoutube size={20} /> - </a> - + </a>🤖 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 63 - 73, The anchor for the YouTube link has misaligned attributes and trailing whitespace; update the attribute indentation on the <a> element (the one with href "https://youtube.com/@AOSSIE", onClick handler handleLinkClick and child <FaYoutube>) so its attributes use the same column spacing as the sibling GitHub anchor (match the 12-space indentation pattern) and remove the trailing whitespace after the closing tag; ensure consistent indentation for all attributes and no extra spaces at line ends.app/components/About/About.jsx (1)
27-44: Existing external links inAboutare missingtarget,rel, andaria-label.The new YouTube link correctly adds
target="_blank",rel="noopener noreferrer", andaria-label, but the four pre-existing external links (GitLab, GitHub, Discord, Twitter) are missing all three, leaving them inconsistent and vulnerable to reverse tabnapping while also failing accessibility requirements for icon-only anchors.✏️ Proposed fix
- <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 - 44, In About.jsx add target="_blank" rel="noopener noreferrer" and a descriptive aria-label to each external icon anchor (the anchors wrapping SiGitlab, FaGithub, FaDiscord, BsTwitterX) so they match the YouTube link and avoid reverse tabnapping and improve accessibility; update the anchor elements in the About component that currently wrap SiGitlab, FaGithub, FaDiscord and BsTwitterX to include those attributes and meaningful aria-label values (e.g., "GitLab", "GitHub", "Discord", "X / Twitter").app/components/Layout/Footer/index.jsx (1)
38-45: Indentation inconsistency in new YouTube anchor.
targetandaria-label(Line 41–42) are indented 11 spaces, and<FaYoutube />(Line 44) 10 spaces, while all sibling anchor blocks indent their attributes and icon at 12 spaces.✏️ Proposed fix
<a href="https://youtube.com/@AOSSIE" rel="noopener noreferrer" - target="_blank" - aria-label="YouTube" + target="_blank" + aria-label="YouTube" > - <FaYoutube /> + <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 new YouTube anchor block has inconsistent indentation for its attributes and icon; adjust the indentation in the Footer component so the anchor's attributes (target, rel, aria-label) and the <FaYoutube /> element use the same 12-space alignment as the other social anchors; locate the anchor with href="https://youtube.com/@AOSSIE" and realign target and aria-label and the <FaYoutube /> line to match the sibling anchor blocks.
🤖 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-44: In About.jsx add target="_blank" rel="noopener noreferrer"
and a descriptive aria-label to each external icon anchor (the anchors wrapping
SiGitlab, FaGithub, FaDiscord, BsTwitterX) so they match the YouTube link and
avoid reverse tabnapping and improve accessibility; update the anchor elements
in the About component that currently wrap SiGitlab, FaGithub, FaDiscord and
BsTwitterX to include those attributes and meaningful aria-label values (e.g.,
"GitLab", "GitHub", "Discord", "X / Twitter").
In `@app/components/Layout/Footer/index.jsx`:
- Around line 38-45: The new YouTube anchor block has inconsistent indentation
for its attributes and icon; adjust the indentation in the Footer component so
the anchor's attributes (target, rel, aria-label) and the <FaYoutube /> element
use the same 12-space alignment as the other social anchors; locate the anchor
with href="https://youtube.com/@AOSSIE" and realign target and aria-label and
the <FaYoutube /> line to match the sibling anchor blocks.
In `@app/components/Layout/NavBar/index.jsx`:
- Around line 63-73: The anchor for the YouTube link has misaligned attributes
and trailing whitespace; update the attribute indentation on the <a> element
(the one with href "https://youtube.com/@AOSSIE", onClick handler
handleLinkClick and child <FaYoutube>) so its attributes use the same column
spacing as the sibling GitHub anchor (match the 12-space indentation pattern)
and remove the trailing whitespace after the closing tag; ensure consistent
indentation for all attributes and no extra spaces at line ends.
In `@README.md`:
- Around line 101-106: The "## 🔗 Connect With Us" list currently uses
plain-text URLs; update each list item under that heading (e.g., the GitHub, X
(Twitter), LinkedIn, and YouTube entries) to use markdown link syntax like
[GitHub](https://github.com/AOSSIE-Org) so the section matches the rest of the
README's `[text](url)` style and improves readability.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/layout.js (1)
21-27: Correctly migrates viewport config out ofmetadata;widthandinitialScaleare redundant.The
viewportoption inmetadatais deprecated as of Next.js 14 — theviewportconfiguration export should be used instead. MovingthemeColorhere is the right fix.However, Next.js always adds
<meta name="viewport" content="width=device-width, initial-scale=1" />by default, even if a route doesn't define any viewport metadata. This makeswidth: "device-width"andinitialScale: 1redundant — onlythemeColorcarries new information here.♻️ Slim the viewport export to the non-default field only
export const viewport = { themeColor: "#000000", - width: "device-width", - initialScale: 1, };Optionally, since this is a
.jsfile, a JSDoc annotation can add type safety:/**@type{import("next").Viewport} */.🛡️ Optional JSDoc type annotation
+/** `@type` {import("next").Viewport} */ export const viewport = { themeColor: "#000000", };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/layout.js` around lines 21 - 27, The exported viewport object (export const viewport) includes redundant defaults; remove the width and initialScale properties so only the non-default field themeColor remains (i.e., change export const viewport to only include themeColor), and optionally add a JSDoc type annotation /** `@type` {import("next").Viewport} */ above the viewport export to get type safety in this .js file.
🤖 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/layout.js`:
- Around line 21-27: The exported viewport object (export const viewport)
includes redundant defaults; remove the width and initialScale properties so
only the non-default field themeColor remains (i.e., change export const
viewport to only include themeColor), and optionally add a JSDoc type annotation
/** `@type` {import("next").Viewport} */ above the viewport export to get type
safety in this .js file.
Contributor
|
Closing as: PR without assignment |
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
2 participants
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.
Description
Added the official AOSSIE YouTube channel to all social link sections of the website, including the header, footer, and About section, and included it in the README under "Connect With Us".
This keeps social links consistent across the project and makes AOSSIE’s video content easier for users and contributors to discover.
Updates include:
This ensures users and contributors can easily access AOSSIE’s YouTube content from all relevant parts of the site.
Fixes #305
Fixes #312
Type of change
How Has This Been Tested?
npm run devChecklist:
Summary by CodeRabbit
New Features
Documentation