Enhance 404 page with metadata and improved layout; update build process to verify 404.html existence

Author: mCodex

.github/workflows/website-deploy.yml

@@ -17,7 +17,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Test Build
-        run: yarn build
+        run: |
+          yarn build
+          # Verify 404.html exists
+          ls -la build/ | grep 404.html || echo "404.html not found!"
   gh-release:
     if: github.event_name != 'pull_request'
     runs-on: ubuntu-latest

docusaurus.config.js

@@ -8,17 +8,23 @@ const config = {
   url: 'https://mcodex.dev',
   baseUrl: '/react-native-rooster/',
   onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'mcodex',
   projectName: 'react-native-rooster',
 
   // Performance and SEO optimization
-  trailingSlash: true,
+  trailingSlash: false,
   noIndex: false, // Allow search engine indexing
 
   // Improved build settings
   staticDirectories: ['static'],
 
+  // Configure 404 handling explicitly
+  customFields: {
+    errorPagePath: '404.html',
+  },
+  
   // Webpack configuration for better performance
   webpack: {
     jsLoader: (isServer) => ({
@@ -78,7 +84,7 @@ const config = {
     },
     footer: {
       style: 'dark',
-      copyright: `Copyright © ${new Date().getFullYear()} Made with ❤️ by mCodex`,
+      copyright: `Copyright © 2020 - ${new Date().getFullYear()} Made with ❤️ by mCodex`,
     },
     // Add image zoom
     zoom: {
@@ -112,7 +118,7 @@ const config = {
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-        googleAnalytics: {
+        gtag: {
           trackingID: 'UA-79205996-7',
           anonymizeIP: true,
         },
@@ -130,6 +136,13 @@ const config = {
       '@docusaurus/plugin-client-redirects',
       {
         fromExtensions: ['html'],
+        redirects: [
+          // Ensure proper redirects for common patterns
+          {
+            from: '/404.html',
+            to: '/404',
+          },
+        ],
         createRedirects: function (existingPath) {
           // Redirect old paths to new paths if any
           return undefined;

src/pages/404.js

@@ -3,42 +3,58 @@ import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { PageMetadata } from '@docusaurus/theme-common';
+import { translate } from '@docusaurus/Translate';
 import styles from './styles.module.css';
 
 export default function NotFound() {
   return (
-    <Layout title="Page Not Found">
-      <div className={clsx('container', styles.notFoundContainer)}>
-        <div className={styles.notFoundContent}>
-          <h1 className={styles.notFoundTitle}>Page Not Found</h1>
-          <p className={styles.notFoundText}>
-            We couldn't find what you were looking for. The page might have been moved or renamed.
-          </p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx(
-                'button button--primary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('/')}
-            >
-              Go to Homepage
-            </Link>
-            <Link
-              className={clsx(
-                'button button--outline button--secondary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('/docs/overview')}
-            >
-              Check Documentation
-            </Link>
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <div className={clsx('container', styles.notFoundContainer)}>
+          <div className={styles.notFoundContent}>
+            <h1 className={styles.notFoundTitle}>Page Not Found</h1>
+            <p className={styles.notFoundText}>
+              We couldn't find what you were looking for. The page might have been moved or renamed.
+            </p>
+            <div className={styles.buttons}>
+              <Link
+                className={clsx(
+                  'button button--primary button--lg',
+                  styles.getStarted,
+                )}
+                to={useBaseUrl('/')}
+              >
+                Go to Homepage
+              </Link>
+              <Link
+                className={clsx(
+                  'button button--outline button--secondary button--lg',
+                  styles.getStarted,
+                )}
+                to={useBaseUrl('/docs/overview')}
+              >
+                Check Documentation
+              </Link>
+            </div>
+          </div>
+          <div className={styles.notFoundImage}>
+            <img
+              src={useBaseUrl('img/undraw_mobile.svg')}
+              alt="Page not found"
+              loading="lazy"
+              width="400"
+              height="300"
+            />
           </div>
         </div>
-        <div className={styles.notFoundImage}>
-          <img src={useBaseUrl('img/undraw_mobile.svg')} alt="Page not found" />
-        </div>
-      </div>
-    </Layout>
+      </Layout>
+    </>
   );
 }