Conversation
📝 WalkthroughWalkthroughThe footer components were restructured and styled with Google fonts. A new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/web/src/components/landing/CreatedWithHackkit.tsx (1)
4-9: Consider extracting the shared font instance.The
Shadows_Into_Lightfont is instantiated identically in three files (CreatedWithHackkit.tsx,Footer.tsx,FooterLinks.tsx). While Next.js deduplicates the font resource at build time, extracting the font configuration to a shared module would improve maintainability and reduce duplication.💡 Example shared font module
Create a shared font file (e.g.,
apps/web/src/lib/fonts.ts):import { Shadows_Into_Light } from "next/font/google"; export const shadowsIntoLight = Shadows_Into_Light({ weight: "400", subsets: ["latin"], });Then import from the shared module in each component.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/landing/CreatedWithHackkit.tsx` around lines 4 - 9, Extract the duplicated Shadows_Into_Light instantiation into a single shared export and import it from the three components; specifically, create a module that exports a const (e.g., shadowsIntoLight) created by calling Shadows_Into_Light({ weight: "400", subsets: ["latin"] }) and replace the local instantiations in CreatedWithHackkit.tsx, Footer.tsx, and FooterLinks.tsx with an import of that shared shadowsIntoLight symbol.apps/web/src/components/landing/FooterLinks.tsx (1)
63-71: Addtarget="_blank"andrel="noopener noreferrer"for external links.Several links in the footer data arrays point to external domains (MLH, GitHub, other hackathon sites). External links should open in a new tab with appropriate security attributes to prevent tabnapping.
♻️ Proposed fix for mobile dropdown links
<DropdownMenuItem key={idx}> <Link className="block text-sm font-semibold text-black" href={link} + target={link.startsWith("http") ? "_blank" : undefined} + rel={link.startsWith("http") ? "noopener noreferrer" : undefined} > {name} </Link> </DropdownMenuItem>♻️ Proposed fix for desktop links
{data.map(({ link, name }, idx) => ( <Link href={link} className="text-sm text-black hover:underline" key={idx} + target={link.startsWith("http") ? "_blank" : undefined} + rel={link.startsWith("http") ? "noopener noreferrer" : undefined} > <span className={`${shadowsIntoLight.className}`}> {name} </span> </Link> ))}Also applies to: 84-93
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/landing/FooterLinks.tsx` around lines 63 - 71, The footer link items rendered in FooterLinks (the map that returns <DropdownMenuItem> + <Link> and the other desktop link map) need external links to open in a new tab with security attrs; update the Link usage inside the map callbacks (the one mapping data to <DropdownMenuItem> and the other mapping that renders desktop links) to detect external URLs (e.g., href startsWith('http') or otherwise not same-origin) and, for those links, add target="_blank" and rel="noopener noreferrer" to the Link props so external domains (MLH, GitHub, hackathon sites) open in a new tab securely.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/components/landing/Footer.tsx`:
- Around line 68-74: The paragraph element using the variable
shadowsIntoLight.className currently includes an invalid Tailwind utility
"text-s"; update the className string in the Footer component's <p> element to
use a valid font-size utility such as "text-sm" or "text-base" (e.g., replace
"text-s" with "text-sm") so Tailwind applies the intended sizing; ensure you
keep the rest of the classes (shadowsIntoLight.className, "text-center",
"text-black") unchanged.
- Around line 45-66: The social icon Link elements (e.g., the Link wrappers
around Twitter, Instagram, Facebook, Github and the Image for Discord) need
accessible labels and safe external link attributes: add an aria-label (or
title) to each Link describing the destination (e.g., "RowdyHacks on Twitter")
so screen readers can announce them, and add target="_blank" rel="noopener
noreferrer" to open external sites safely; ensure the Discord Image alt is
descriptive if needed. Also verify and update the Github Link href (currently
pointing to RowdyHacksX) to the correct RowdyHacksXII repository if required.
---
Nitpick comments:
In `@apps/web/src/components/landing/CreatedWithHackkit.tsx`:
- Around line 4-9: Extract the duplicated Shadows_Into_Light instantiation into
a single shared export and import it from the three components; specifically,
create a module that exports a const (e.g., shadowsIntoLight) created by calling
Shadows_Into_Light({ weight: "400", subsets: ["latin"] }) and replace the local
instantiations in CreatedWithHackkit.tsx, Footer.tsx, and FooterLinks.tsx with
an import of that shared shadowsIntoLight symbol.
In `@apps/web/src/components/landing/FooterLinks.tsx`:
- Around line 63-71: The footer link items rendered in FooterLinks (the map that
returns <DropdownMenuItem> + <Link> and the other desktop link map) need
external links to open in a new tab with security attrs; update the Link usage
inside the map callbacks (the one mapping data to <DropdownMenuItem> and the
other mapping that renders desktop links) to detect external URLs (e.g., href
startsWith('http') or otherwise not same-origin) and, for those links, add
target="_blank" and rel="noopener noreferrer" to the Link props so external
domains (MLH, GitHub, hackathon sites) open in a new tab securely.
🪄 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
Run ID: 4d9d06d3-a1a2-4c08-a539-8a7115a9a11b
⛔ Files ignored due to path filters (2)
apps/web/public/img/assets/discord-logo.pngis excluded by!**/*.pngapps/web/public/img/logo/rh-logo-black.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
apps/web/src/components/landing/CreatedWithHackkit.tsxapps/web/src/components/landing/Footer.tsxapps/web/src/components/landing/FooterLinks.tsxapps/web/src/components/landing/WorkWithUs.tsx
Comment on lines
+45
to
+66
| <Link href="https://twitter.com/rowdyhacks/"> | ||
| <Twitter className="invert dark:invert-0" /> | ||
| </Link> | ||
| <Link href="https://www.instagram.com/rowdyhacks/"> | ||
| <Instagram className="invert dark:invert-0" /> | ||
| </Link> | ||
| <Link href="https://www.facebook.com/UTSA.ACM"> | ||
| <Facebook className="invert dark:invert-0" /> | ||
| </Link> | ||
| <Link href="https://github.com/acmutsa/RowdyHacksX"> | ||
| <Github className="invert dark:invert-0" /> | ||
| </Link> | ||
| <Link href="https://go.rowdyhacks.org/discord"> | ||
| <Image | ||
| className="select-none" | ||
| src="/img/assets/discord-logo.png" | ||
| alt="Discord logo" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| </Link> | ||
| </div> |
There was a problem hiding this comment.
Add accessibility attributes to social icon links.
The social media links contain only icons without text, which makes them inaccessible to screen reader users. Additionally, external links should include target="_blank" with rel="noopener noreferrer" for security and UX.
♿ Proposed fix with accessibility and security attributes
- <Link href="https://twitter.com/rowdyhacks/">
- <Twitter className="invert dark:invert-0" />
+ <Link href="https://twitter.com/rowdyhacks/" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
+ <Twitter className="invert dark:invert-0" aria-hidden="true" />
</Link>
- <Link href="https://www.instagram.com/rowdyhacks/">
- <Instagram className="invert dark:invert-0" />
+ <Link href="https://www.instagram.com/rowdyhacks/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+ <Instagram className="invert dark:invert-0" aria-hidden="true" />
</Link>
- <Link href="https://www.facebook.com/UTSA.ACM">
- <Facebook className="invert dark:invert-0" />
+ <Link href="https://www.facebook.com/UTSA.ACM" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
+ <Facebook className="invert dark:invert-0" aria-hidden="true" />
</Link>
- <Link href="https://github.com/acmutsa/RowdyHacksX">
- <Github className="invert dark:invert-0" />
+ <Link href="https://github.com/acmutsa/RowdyHacksXII" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+ <Github className="invert dark:invert-0" aria-hidden="true" />
</Link>
- <Link href="https://go.rowdyhacks.org/discord">
+ <Link href="https://go.rowdyhacks.org/discord" target="_blank" rel="noopener noreferrer" aria-label="Discord">
<Image
- className="select-none"
+ className="select-none"
src="/img/assets/discord-logo.png"
alt="Discord logo"
+ aria-hidden="true"
width={20}
height={20}
/>
</Link>Note: The GitHub link currently points to RowdyHacksX but this PR is for RowdyHacksXII - verify if this should be updated.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/components/landing/Footer.tsx` around lines 45 - 66, The social
icon Link elements (e.g., the Link wrappers around Twitter, Instagram, Facebook,
Github and the Image for Discord) need accessible labels and safe external link
attributes: add an aria-label (or title) to each Link describing the destination
(e.g., "RowdyHacks on Twitter") so screen readers can announce them, and add
target="_blank" rel="noopener noreferrer" to open external sites safely; ensure
the Discord Image alt is descriptive if needed. Also verify and update the
Github Link href (currently pointing to RowdyHacksX) to the correct
RowdyHacksXII repository if required.
Comment on lines
+68
to
+74
| <p | ||
| className={`${shadowsIntoLight.className} text-s text-center text-black`} | ||
| > | ||
| Made with </> & ♥ @ RowdyHacks | ||
| <br />© RowdyHacks & Association of Computing Machinery | ||
| at UTSA 2026. All Rights Reserved. | ||
| </p> |
There was a problem hiding this comment.
Fix invalid Tailwind class text-s.
text-s is not a valid Tailwind CSS utility class. The valid options are text-xs, text-sm, text-base, etc.
🐛 Proposed fix
<p
- className={`${shadowsIntoLight.className} text-s text-center text-black`}
+ className={`${shadowsIntoLight.className} text-sm text-center text-black`}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <p | |
| className={`${shadowsIntoLight.className} text-s text-center text-black`} | |
| > | |
| Made with </> & ♥ @ RowdyHacks | |
| <br />© RowdyHacks & Association of Computing Machinery | |
| at UTSA 2026. All Rights Reserved. | |
| </p> | |
| <p | |
| className={`${shadowsIntoLight.className} text-sm text-center text-black`} | |
| > | |
| Made with </> & ♥ @ RowdyHacks | |
| <br />© RowdyHacks & Association of Computing Machinery | |
| at UTSA 2026. All Rights Reserved. | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/components/landing/Footer.tsx` around lines 68 - 74, The
paragraph element using the variable shadowsIntoLight.className currently
includes an invalid Tailwind utility "text-s"; update the className string in
the Footer component's <p> element to use a valid font-size utility such as
"text-sm" or "text-base" (e.g., replace "text-s" with "text-sm") so Tailwind
applies the intended sizing; ensure you keep the rest of the classes
(shadowsIntoLight.className, "text-center", "text-black") unchanged.
Looks good to go, just need you to increase the font thickness or size to make links more visible same goes for RH/HackKit( this one needs an appropriately colroed fill) logos |
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.
added some logos for discord and rh, but mostly just finished the footer. works for both mobile and desktop, using a dropdown for mobile.
Summary by CodeRabbit
New Features
Style