feature(404): Added Custom 404 Page#232
Conversation
Signed-off-by: GitHub Action <action@github.com>
✅ Deploy Preview for kmesh-net ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Summary of Changes
Hello @yashisrani, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request introduces a custom 404 "Page Not Found" experience, replacing the default Docusaurus screen. The goal is to enhance user experience by providing a branded, visually appealing, and helpful page that guides visitors back to relevant sections of the site, improving navigation and reducing frustration for users encountering broken links.
Highlights
- Custom 404 Page Implementation: Replaces the default Docusaurus 404 page with a custom, branded, and user-friendly version.
- Docusaurus Theme Swizzling: The @docusaurus/theme-classic NotFound component was swizzled to allow for extensive customization.
- New UI/UX for 404: Introduces a new React component with custom markup, integrated SVG icons, and clear navigation options (Return Home, View Documentation).
- Styling and Accessibility: Applies a professional blue-grey color scheme via CSS modules, ensuring full responsiveness and WCAG 2.1 AA color accessibility.
- Specific Content Message: Includes a specific message indicating that Chinese documentation is currently unavailable and directs users to English documentation.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a new custom 404 page with a professional design. The implementation is a good start, but there are several areas for improvement to align with best practices and ensure maintainability. My main concerns are the hardcoded, non-translatable text and a confusing message specific to Chinese documentation on a generic error page. I've also pointed out the need to use Docusaurus's useBaseUrl hook for robust linking and some cleanup opportunities in the CSS. Addressing these points will make the new 404 page more robust, maintainable, and provide a better user experience.
| <h1 className={styles.title}>Page Not Found</h1> | ||
| <p className={styles.subtitle}> | ||
| The requested resource could not be located on this server. | ||
| </p> |
There was a problem hiding this comment.
The title and subtitle are hardcoded in English. To support internationalization (i18n), which is configured for this site, you should use the <Translate> component from @docusaurus/Translate for all user-facing text. You'll also need to add import {Translate} from '@docusaurus/Translate'; at the top of the file.
| <h1 className={styles.title}>Page Not Found</h1> | |
| <p className={styles.subtitle}> | |
| The requested resource could not be located on this server. | |
| </p> | |
| <h1 className={styles.title}><Translate id="theme.NotFound.title">Page Not Found</Translate></h1> | |
| <p className={styles.subtitle}> | |
| <Translate id="theme.NotFound.p1">We could not find what you were looking for.</Translate> | |
| </p> |
| <div className={styles.messageBox}> | ||
| <div className={styles.infoIcon}> | ||
| <svg | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| <div> | ||
| <p className={styles.message}> | ||
| Chinese documentation is currently unavailable. | ||
| </p> | ||
| <p className={styles.message}> | ||
| Please refer to our{" "} | ||
| <Link to="/docs/welcome" className={styles.link}> | ||
| English documentation | ||
| </Link>{" "} | ||
| for comprehensive project information. | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
This message box contains a very specific message about Chinese documentation being unavailable. A 404 page is a generic fallback for any broken URL, so this message will be confusing to most users. It should be replaced with a more general message. For example, you could use the standard Docusaurus message which advises users to contact the site owner about the broken link. This text should also be made translatable using the <Translate> component.
<div className={styles.messageBox}>
<div className={styles.infoIcon}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
fill="currentColor"
/>
</svg>
</div>
<div>
<p className={styles.message}>
<Translate id="theme.NotFound.p2">
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
</Translate>
</p>
</div>
</div>| <div className={styles.actions}> | ||
| <Link to="/" className={styles.primaryButton}> | ||
| <svg | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| Return Home | ||
| </Link> | ||
| <Link to="/docs/welcome" className={styles.secondaryButton}> | ||
| <svg | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| View Documentation | ||
| </Link> | ||
| </div> |
There was a problem hiding this comment.
The to props for the Link components have hardcoded paths (/ and /docs/welcome). It's a Docusaurus best practice to use the useBaseUrl hook to prepend the site's baseUrl to paths. This makes the links resilient to changes in the baseUrl configuration.
Example:
import useBaseUrl from '@docusaurus/useBaseUrl';
export default function NotFoundContent({ className }) {
const homeUrl = useBaseUrl('/');
const docsUrl = useBaseUrl('/docs/welcome');
return (
// ...
<Link to={homeUrl} className={styles.primaryButton}>
{/* ... */}
</Link>
<Link to={docsUrl} className={styles.secondaryButton}>
{/* ... */}
</Link>
// ...
);
}| .errorSection { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-bottom: 3rem; | ||
| } | ||
|
|
||
| .errorCode { | ||
| font-size: 5rem; | ||
| font-weight: 700; | ||
| color: #475569; | ||
| line-height: 1; | ||
| margin-bottom: 0.5rem; | ||
| font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace; | ||
| } | ||
|
|
||
| .errorIcon { | ||
| color: #64748b; | ||
| opacity: 0.7; | ||
| } |
There was a problem hiding this comment.
These CSS classes (.errorSection, .errorCode, .errorIcon) do not appear to be used in the NotFound/Content/index.js component. Unused code should be removed to improve maintainability.
| .link { | ||
| color: #3b82f6 !important; | ||
| font-weight: 500; | ||
| text-decoration: none; | ||
| border-bottom: 1px solid transparent; | ||
| transition: border-color 0.2s ease; | ||
| } | ||
|
|
||
| .link:hover { | ||
| border-bottom-color: #3b82f6; | ||
| text-decoration: none !important; | ||
| } |
There was a problem hiding this comment.
The use of !important in .link and .link:hover should be avoided. It breaks the natural CSS cascade and can make future styling changes difficult and unpredictable. Try to achieve the desired styling by increasing selector specificity or re-ordering CSS rules instead.
|
q: Will all our 404 pages be replaced with this one? |
Yes, this new custom 404 page will replace the default 404 error page, so all 404 errors across the site will show this version instead of the standard one. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: hzxuzhonghu The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/lgtm |
This PR addresses the issue in kmesh-net/kmesh#1412
How
@docusaurus/theme-classic NotFound(--eject)src/theme/NotFound/Content/index.jswith new markup and SVG iconssrc/theme/NotFound/Content/styles.module.css