Open
Conversation
📝 WalkthroughWalkthroughThis PR adds "Support Us" call-to-action links throughout the website, pointing to Open Collective (https://opencollective.com/aossie). Links are added to the navbar, footer, and multiple pages/component headers, with consistent external link handling via Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/about/page.jsx`:
- Around line 219-221: The <h5> heading is currently nested inside a <motion.p>
which produces invalid HTML; change the container element used in the animation
so headings are not children of a paragraph—e.g., replace the <motion.p> wrapper
that contains the <h5> with a <motion.div> (or move the <h5> out of the
<motion.p>) in the component rendering the "Get to know our Community" block so
the <h5> is not inside a paragraph.
- Around line 227-229: The file uses the Next.js <Link> component (seen in the
JSX block with className and href "https://opencollective.com/aossie") but does
not import it; add the missing import for Link from 'next/link' at the top of
the module so the Link identifier is defined (e.g., add an import statement for
Link before the component definition where the JSX uses Link).
In `@src/app/page.jsx`:
- Around line 241-245: Remove the target="_blank" attribute from the Link
component that renders the internal route (the Link with href="/projects") so it
behaves as an in-app navigation link; locate the Link element in
src/app/page.jsx (the component using Link with className="group relative
inline-flex ...") and delete the target prop, leaving other props (href,
className, etc.) intact.
In `@src/components/apply/ApplyHeader.jsx`:
- Around line 49-53: The file uses the Next.js Link component in the ApplyHeader
component (the <Link> element near the Open Collective callout) but never
imports it; add an import for Link from "next/link" at the top of
ApplyHeader.jsx (alongside other imports) so the Link symbol is defined and the
component builds correctly.
In `@src/components/shared/Footer.jsx`:
- Line 52: The Support Us NavLink is an external URL but doesn't open in a new
tab; update the code so external links set target="_blank" and rel="noopener
noreferrer". Modify the NavLink usage in Footer.jsx (and/or the NavLink
component itself) to detect external hrefs (e.g., href startsWith('http') or a
passed isExternal prop) and add target and rel attributes when true; ensure
NavLink (component) passes these attributes through to the rendered anchor
element so Support Us and other external links behave consistently.
🪄 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: 38e43823-f168-4cda-880f-fe408102dbec
📒 Files selected for processing (6)
src/app/about/page.jsxsrc/app/page.jsxsrc/components/apply/ApplyHeader.jsxsrc/components/ideas/IdeasHeader.jsxsrc/components/shared/Footer.jsxsrc/components/shared/Header.jsx
Comment on lines
+219
to
+221
| <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'> | ||
| Get to know our <span className="text-[#00843D] dark:text-yellow-400">Community</span> | ||
| </h5> |
There was a problem hiding this comment.
Avoid invalid heading-inside-paragraph nesting.
<h5> is nested inside <motion.p>, which is invalid HTML and can lead to hydration/DOM mismatch behavior.
💡 Proposed fix
- <motion.p
+ <motion.div
className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono pt-5 mb-10 text-center"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'>
Get to know our <span className="text-[`#00843D`] dark:text-yellow-400">Community</span>
</h5>
- <span className="text-[`#32a852`] font-bold">AOSSIE</span> (Australian Open
- Source Software Innovation and Education) is a not-for-profit
- organization dedicated to project-based innovation-focused and
- research-intensive education. Our projects are free and open-source.
- <br />
- <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[`#00843D`] dark:text-yellow-400 font-bold hover:underline">
- Support our work on Open Collective →
- </Link>
- </motion.p>
+ <p>
+ <span className="text-[`#32a852`] font-bold">AOSSIE</span> (Australian Open
+ Source Software Innovation and Education) is a not-for-profit
+ organization dedicated to project-based innovation-focused and
+ research-intensive education. Our projects are free and open-source.
+ <br />
+ <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[`#00843D`] dark:text-yellow-400 font-bold hover:underline">
+ Support our work on Open Collective →
+ </Link>
+ </p>
+ </motion.div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/about/page.jsx` around lines 219 - 221, The <h5> heading is currently
nested inside a <motion.p> which produces invalid HTML; change the container
element used in the animation so headings are not children of a paragraph—e.g.,
replace the <motion.p> wrapper that contains the <h5> with a <motion.div> (or
move the <h5> out of the <motion.p>) in the component rendering the "Get to know
our Community" block so the <h5> is not inside a paragraph.
Comment on lines
+227
to
+229
| <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[#00843D] dark:text-yellow-400 font-bold hover:underline"> | ||
| Support our work on Open Collective → | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify Link usage/import in About page
rg -n -C2 "import Link from 'next/link'|<Link\\b" src/app/about/page.jsxRepository: AOSSIE-Org/Website
Length of output: 457
🏁 Script executed:
head -30 src/app/about/page.jsxRepository: AOSSIE-Org/Website
Length of output: 956
Add missing Link import from Next.js.
The <Link> component is used at lines 227-229 but next/link is not imported. This will cause an undefined identifier error at build time.
Suggested fix
import React from 'react';
+import Link from 'next/link';
import { Line } from 'react-chartjs-2';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/about/page.jsx` around lines 227 - 229, The file uses the Next.js
<Link> component (seen in the JSX block with className and href
"https://opencollective.com/aossie") but does not import it; add the missing
import for Link from 'next/link' at the top of the module so the Link identifier
is defined (e.g., add an import statement for Link before the component
definition where the JSX uses Link).
Comment on lines
+241
to
+245
| <Link | ||
| target="_blank" | ||
| className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900" | ||
| href="/projects" | ||
| > |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify internal links opening in new tabs within Home page
rg -n -C3 'href="/projects"|target="_blank"' src/app/page.jsxRepository: AOSSIE-Org/Website
Length of output: 3957
Remove target="_blank" from internal /projects link.
The /projects route is internal to the app, so target="_blank" forces an unnecessary new tab and breaks expected in-app navigation behavior. This differs from external links elsewhere on the page which correctly use target="_blank".
Fix
<Link
- target="_blank"
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[`#00843D`] px-8 py-3 text-white focus:outline-none active:bg-[`#00843D`] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>📝 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
| <Link | |
| target="_blank" | |
| className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900" | |
| href="/projects" | |
| > | |
| <Link | |
| className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[`#00843D`] px-8 py-3 text-white focus:outline-none active:bg-[`#00843D`] dark:bg-yellow-400 dark:text-zinc-900" | |
| href="/projects" | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/page.jsx` around lines 241 - 245, Remove the target="_blank"
attribute from the Link component that renders the internal route (the Link with
href="/projects") so it behaves as an in-app navigation link; locate the Link
element in src/app/page.jsx (the component using Link with className="group
relative inline-flex ...") and delete the target prop, leaving other props
(href, className, etc.) intact.
Comment on lines
+49
to
+53
| <p className='text-zinc-500 dark:text-zinc-500 text-sm font-mono mt-4'> | ||
| Want to help us keep these projects free and open-source?{' '} | ||
| <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="text-[#00843D] dark:text-yellow-400 font-bold hover:underline"> | ||
| Support us on Open Collective | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify Link usage/import in ApplyHeader
rg -n -C2 "import Link from 'next/link'|<Link\\b" src/components/apply/ApplyHeader.jsxRepository: AOSSIE-Org/Website
Length of output: 533
Import Link from next/link before using it.
The <Link> component is used at line 51, but next/link is not imported in this file. This will cause a build failure.
Proposed fix
import { useRef, useMemo } from 'react'
import { useInView } from 'framer-motion'
import { Container } from '@/components/shared/Container'
import { motion, useScroll, useTransform } from 'framer-motion'
+import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/apply/ApplyHeader.jsx` around lines 49 - 53, The file uses the
Next.js Link component in the ApplyHeader component (the <Link> element near the
Open Collective callout) but never imports it; add an import for Link from
"next/link" at the top of ApplyHeader.jsx (alongside other imports) so the Link
symbol is defined and the component builds correctly.
| <NavLink href="/projects">Our Projects</NavLink> | ||
| <NavLink href="/ideas">Project Ideas</NavLink> | ||
| <NavLink href="/apply">How to Apply</NavLink> | ||
| <NavLink href="https://opencollective.com/aossie">Support Us</NavLink> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify NavLink external handling and OpenCollective usage in Footer
rg -n -C3 "function NavLink|href=\\\"https://opencollective.com/aossie\\\"|target=\\{|rel=\\{" src/components/shared/Footer.jsxRepository: AOSSIE-Org/Website
Length of output: 226
🏁 Script executed:
# First, let's read the Footer.jsx file to understand the current state
cat -n src/components/shared/Footer.jsx | head -60Repository: AOSSIE-Org/Website
Length of output: 3180
🏁 Script executed:
# Search for NavLink definition and Support Us link more carefully
rg -n "NavLink|opencollective|target|rel" src/components/shared/Footer.jsx -A 2Repository: AOSSIE-Org/Website
Length of output: 2886
Add target="_blank" and rel="noopener noreferrer" to external NavLink URLs.
The Support Us link at line 52 uses NavLink with an external URL, but NavLink doesn't set proper attributes for external links. This will open the external link in the same tab, inconsistent with other external links in the component (GitHub, Discord, LinkedIn, etc., which correctly use target="_blank" and rel="noopener noreferrer"). Update NavLink to conditionally set these attributes based on whether the href is external.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/shared/Footer.jsx` at line 52, The Support Us NavLink is an
external URL but doesn't open in a new tab; update the code so external links
set target="_blank" and rel="noopener noreferrer". Modify the NavLink usage in
Footer.jsx (and/or the NavLink component itself) to detect external hrefs (e.g.,
href startsWith('http') or a passed isExternal prop) and add target and rel
attributes when true; ensure NavLink (component) passes these attributes through
to the rendered anchor element so Support Us and other external links behave
consistently.
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.
Addressed Issues:
Fixes #699
Screenshots/Recordings:
Before:
No “Support Us” button was present on the website.
After:
A “Support Us” button is added to the navigation/header section.
Clicking the button redirects users to the official Open Collective page for AOSSIE:
https://opencollective.com/aossie
Additional Notes:
AI Usage Disclosure:
I have used the following AI models and tools:
Checklist
Summary by CodeRabbit