Add custom 404 page with improved UX and social links: FOR AOSSIE WEBSITE #578
Open
averma2988225-droid wants to merge 1 commit intoAOSSIE-Org:mainfrom
Open
Add custom 404 page with improved UX and social links: FOR AOSSIE WEBSITE #578averma2988225-droid wants to merge 1 commit intoAOSSIE-Org:mainfrom
averma2988225-droid wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThis pull request introduces a custom 404 error page for the Next.js application. A new NotFoundPage component renders a full-page layout with a "Page not found" message, navigation, and footer. The custom 404 route is registered, and the app's footer is conditionally hidden on the 404 page. FontAwesome configuration is also imported and CSS auto-injection is disabled. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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
🤖 Fix all issues with AI agents
In `@src/components/404.page/NotFoundPage.jsx`:
- Around line 38-52: External social links are inconsistent: NotFoundPage.jsx
uses external links with target="_blank" and rel="noreferrer" but Footer.jsx's
external Link elements do not. Update the external anchor/Link elements in
Footer.jsx (the Footer component's social link elements) to include
target="_blank" and rel="noreferrer" so behavior matches NotFoundPage.jsx;
ensure you add these attributes to the same Link/anchor elements that render
external hrefs (the social link elements) and keep internal links unchanged.
- Around line 57-167: The footer in NotFoundPage.jsx duplicates Footer.jsx
(links, icons, styles) causing drift; extract the repeated markup into a shared
component (e.g., FooterLinks or SocialIcons) and replace the duplicated block
inside NotFoundPage.jsx (the Container.Outer footer block with Link +
FontAwesomeIcon items) with that shared component; parameterize props for icon
size, color classes, and external-link attributes (target/rel) so Footer.jsx and
NotFoundPage.jsx can render consistent links while allowing layout differences.
🧹 Nitpick comments (1)
src/pages/_app.jsx (1)
38-38: Conditional footer hiding works but is fragile if more custom-footer pages are added.This is fine for a single route, but if additional pages need the same treatment, consider a per-page layout pattern (e.g.,
Component.hideFooter) instead of growing the condition.
Comment on lines
+38
to
+52
| <div className="mt-6 flex justify-center"> | ||
| <Link | ||
| href="/" | ||
| aria-label="Back to AOSSIE home" | ||
| className="rounded-2xl border border-zinc-300/80 bg-white/70 p-4 shadow-sm transition hover:border-[#00843D] dark:border-zinc-700 dark:bg-zinc-800/70 dark:hover:border-yellow-400" | ||
| > | ||
| <Image | ||
| src="/logo1.png" | ||
| width={90} | ||
| height={90} | ||
| alt="AOSSIE Logo" | ||
| className="mx-auto" | ||
| priority | ||
| /> | ||
| </Link> |
There was a problem hiding this comment.
External links in the main Footer lack target="_blank" and rel="noreferrer" — inconsistency.
The external social links in Footer.jsx (Lines 41-52) do not set target="_blank" or rel="noreferrer", while the same links here do. This should be consistent — external links should generally open in a new tab with rel="noreferrer" for security (window.opener protection). Whichever convention is chosen, apply it uniformly.
🤖 Prompt for AI Agents
In `@src/components/404.page/NotFoundPage.jsx` around lines 38 - 52, External
social links are inconsistent: NotFoundPage.jsx uses external links with
target="_blank" and rel="noreferrer" but Footer.jsx's external Link elements do
not. Update the external anchor/Link elements in Footer.jsx (the Footer
component's social link elements) to include target="_blank" and
rel="noreferrer" so behavior matches NotFoundPage.jsx; ensure you add these
attributes to the same Link/anchor elements that render external hrefs (the
social link elements) and keep internal links unchanged.
Comment on lines
+57
to
+167
| {/* Footer */} | ||
| <Container.Outer> | ||
| <div className="w-full px-4 pb-4 pt-4 sm:px-6 lg:px-8"> | ||
|
|
||
| {/* Footer Row */} | ||
| <div className="flex w-full flex-col gap-y-3 text-center md:flex-row md:items-center md:justify-between md:text-left"> | ||
|
|
||
| {/* Left Links */} | ||
| <div className="flex justify-center gap-4 text-xs font-semibold font-mono text-zinc-800 dark:text-zinc-200 sm:text-sm md:justify-start"> | ||
| <Link | ||
| href="/about" | ||
| className="transition hover:text-[#00843D] dark:hover:text-yellow-400" | ||
| > | ||
| About | ||
| </Link> | ||
|
|
||
| <Link | ||
| href="/projects" | ||
| className="transition hover:text-[#00843D] dark:hover:text-yellow-400" | ||
| > | ||
| Projects | ||
| </Link> | ||
|
|
||
| <Link | ||
| href="/ideas" | ||
| className="transition hover:text-[#00843D] dark:hover:text-yellow-400" | ||
| > | ||
| Ideas | ||
| </Link> | ||
|
|
||
| <Link | ||
| href="/apply" | ||
| className="transition hover:text-[#00843D] dark:hover:text-yellow-400" | ||
| > | ||
| Apply | ||
| </Link> | ||
| </div> | ||
|
|
||
| {/* Copyright — centered */} | ||
| <p className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 sm:text-xs"> | ||
| © 2016-{new Date().getFullYear()} AOSSIE. All rights reserved. | ||
| </p> | ||
|
|
||
| {/* Icons */} | ||
| <div className="flex items-center justify-center gap-5 md:justify-end"> | ||
| <Link | ||
| aria-label="Contact by Mail" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="mailto:aossie.oss@gmail.com" | ||
| > | ||
| <FontAwesomeIcon icon={faEnvelope} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Follow on GitLab" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://gitlab.com/aossie" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faGitlab} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Follow on GitHub" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://github.com/AOSSIE-Org" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faGithub} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Join on Discord" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://discord.gg/hjUhu33uAn" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faDiscord} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Follow on Twitter" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://twitter.com/aossie_org" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faTwitter} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Follow on LinkedIn" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://www.linkedin.com/company/aossie" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faLinkedin} size="sm" /> | ||
| </Link> | ||
| <Link | ||
| aria-label="Subscribe on YouTube" | ||
| className="text-zinc-300 transition hover:text-[#00843D] dark:text-zinc-300 dark:hover:text-yellow-400" | ||
| href="https://www.youtube.com/@aossie" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| <FontAwesomeIcon icon={faYoutube} size="sm" /> | ||
| </Link> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </Container.Outer> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Footer content is duplicated from Footer.jsx — this will drift.
The entire footer section (nav links, copyright, social icons) is a near-copy of src/components/Footer.jsx with several silent differences:
- Extra social links here (LinkedIn, YouTube) that are absent from the global Footer.
- Different icon sizes (
smhere vsxlin Footer). - Different base text colors (
zinc-300here vszinc-400in Footer). target="_blank"/rel="noreferrer"on external links here but missing from Footer.
Any future update to footer links or branding will need to be applied in two places. Consider extracting a shared FooterLinks / SocialIcons component that both footers consume, parameterized for size/layout differences.
🤖 Prompt for AI Agents
In `@src/components/404.page/NotFoundPage.jsx` around lines 57 - 167, The footer
in NotFoundPage.jsx duplicates Footer.jsx (links, icons, styles) causing drift;
extract the repeated markup into a shared component (e.g., FooterLinks or
SocialIcons) and replace the duplicated block inside NotFoundPage.jsx (the
Container.Outer footer block with Link + FontAwesomeIcon items) with that shared
component; parameterize props for icon size, color classes, and external-link
attributes (target/rel) so Footer.jsx and NotFoundPage.jsx can render consistent
links while allowing layout differences.
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.
#OVERVIEW: A custom 404 (Not Found) page is introduced to deal with invalid and non-existent routes on the entire AOSSIE website, replacing the default Next.js fallback with a branded and navigable error recovery page. #305
#PROBLEM: The current application uses the default Next.js 404 page for invalid routes, which is deficient in the following aspects:
•Lack of project branding
•Lack of recovery navigation
•Lack of contextual information for users accessing the application through broken URLs
This leads to suboptimal user experience and possible loss of users.
#SOULTION
-->1)Created a custom 404 UI module at the following location:
2)Incorporated routing functionality at the following location:
#TECHNICAL NOTES:-
•Technology: Next.js (App Router)
•Routing convention: not-found.js
•Component organization: Modularized for easier maintainability
•Design and layout: Consistent with the existing site design
#TESTING :-
Locally tested by accessing a non-existent route on the application:
http://localhost:3000/any-non-existent-route
Verified that:
•The custom 404 page is displayed correctly
•The navigation links are functional
•There are no console or build errors
Impact:-
•Enhanced invalid route user experience
•Added guided recovery navigation
•Integrated error handling with AOSSIE branding
•No breaking changes introduced
Summary by CodeRabbit
New Features