feat: introduced not found / error layout (#6247)

nodejs · Jan 17, 2024 · bd543e0 · bd543e0
1 parent 4664438
commit bd543e0
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 89 deletions.
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
@@ -1,10 +1,16 @@
 'use client';
 
 import { captureException } from '@sentry/nextjs';
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
-const ErrorPage: FC<{ error: Error }> = ({ error }) => {
+import Button from '@/components/Common/Button';
+import CenteredLayout from '@/layouts/New/Centered';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyErrorPage: FC<{ error: Error }> = ({ error }) => {
   useMemo(() => captureException(error), [error]);
 
   return (
@@ -15,4 +21,26 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
   );
 };
 
-export default ErrorPage;
+const ErrorPage: FC<{ error: Error }> = ({ error }) => {
+  captureException(error);
+  const t = useTranslations();
+
+  return (
+    <CenteredLayout>
+      <div className="glowingBackdrop" />
+
+      <main>
+        500
+        <h1 className="special -mt-4">
+          {t('layouts.error.internalServerError.title')}
+        </h1>
+        <p className="-mt-4 max-w-sm text-center text-lg">
+          {t('layouts.error.internalServerError.description')}
+        </p>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
+      </main>
+    </CenteredLayout>
+  );
+};
+
+export default ENABLE_WEBSITE_REDESIGN ? ErrorPage : LegacyErrorPage;
diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
@@ -3,7 +3,12 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-const LocalizedNotFound: FC = () => {
+import Button from '@/components/Common/Button';
+import CenteredLayout from '@/layouts/New/Centered';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyNotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
@@ -14,4 +19,23 @@ const LocalizedNotFound: FC = () => {
   );
 };
 
-export default LocalizedNotFound;
+const NotFoundPage: FC = () => {
+  const t = useTranslations();
+
+  return (
+    <CenteredLayout>
+      <div className="glowingBackdrop" />
+
+      <main>
+        404
+        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
+        <p className="-mt-4 max-w-sm text-center text-lg">
+          {t('layouts.error.notFound.description')}
+        </p>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
+      </main>
+    </CenteredLayout>
+  );
+};
+
+export default ENABLE_WEBSITE_REDESIGN ? NotFoundPage : LegacyNotFoundPage;
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -5,7 +5,13 @@ import ErrorComponent from 'next/error';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
-const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
+import Button from '@/components/Common/Button';
+import BaseLayout from '@/layouts/BaseLayout';
+import CenteredLayout from '@/layouts/New/Centered';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyGlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   useMemo(() => captureException(error), [error]);
 
   return (
@@ -17,4 +23,31 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   );
 };
 
-export default GlobalErrorPage;
+const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
+  captureException(error);
+
+  return (
+    <html>
+      <body>
+        <BaseLayout>
+          <CenteredLayout>
+            <div className="glowingBackdrop" />
+
+            <main>
+              500
+              <h1 className="special -mt-4">Internal Server Error</h1>
+              <p className="-mt-4 max-w-sm text-center text-lg">
+                This page has thrown a non-recoverable error.
+              </p>
+              <Button href="/">Back to Home</Button>
+            </main>
+          </CenteredLayout>
+        </BaseLayout>
+      </body>
+    </html>
+  );
+};
+
+export default ENABLE_WEBSITE_REDESIGN
+  ? GlobalErrorPage
+  : LegacyGlobalErrorPage;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -199,6 +199,17 @@
         "weekly-updates": "Weekly Updates",
         "wg": "Working Groups"
       }
+    },
+    "error": {
+      "notFound": {
+        "title": "Page could not be found",
+        "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage."
+      },
+      "internalServerError": {
+        "title": "Internal Server Error",
+        "description": "This page has thrown a non-recoverable error."
+      },
+      "backToHome": "Back to Home"
     }
   },
   "pages": {

diff --git a/layouts/New/Centered.tsx b/layouts/New/Centered.tsx
@@ -0,0 +1,18 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+
+import styles from './layouts.module.css';
+
+const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <WithNavBar />
+
+    <div className={styles.centeredLayout}>{children}</div>
+
+    <WithFooter />
+  </>
+);
+
+export default CenteredLayout;
diff --git a/layouts/New/Home.tsx b/layouts/New/Home.tsx
@@ -1,22 +1,15 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import WithFooter from '@/components/withFooter';
-import WithNavBar from '@/components/withNavBar';
+import CenteredLayout from '@/layouts/New/Centered';
 
 import styles from './layouts.module.css';
 
 const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
-  <>
-    <WithNavBar />
+  <CenteredLayout>
+    <div className="glowingBackdrop" />
 
-    <div className={styles.homeLayout}>
-      <div className="glowingBackdrop" />
-
-      <main>{children}</main>
-    </div>
-
-    <WithFooter />
-  </>
+    <main className={styles.homeLayout}>{children}</main>
+  </CenteredLayout>
 );
 
 export default HomeLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
@@ -58,7 +58,7 @@
   }
 }
 
-.homeLayout {
+.centeredLayout {
   @apply flex
     w-full
     items-center
@@ -70,77 +70,80 @@
 
   main {
     @apply items-center
-      justify-center
-      gap-8
-      md:flex-row
-      md:gap-14
-      xl:gap-28
-      2xl:gap-32;
-
-    section {
-      &:nth-of-type(1) {
-        @apply flex
-          max-w-[500px]
-          flex-[1_0]
-          flex-col
-          gap-8;
-
-        > div {
-          @apply flex
-            max-w-[400px]
-            flex-col
-            gap-4;
-
-          p {
-            @apply text-base
-              md:text-lg;
-          }
+      justify-center;
+  }
+}
 
-          small {
-            @apply text-center
-              text-sm
-              text-neutral-800
-              xs:text-xs
-              dark:text-neutral-400;
-          }
-        }
-      }
+.homeLayout {
+  @apply gap-8
+    md:flex-row
+    md:gap-14
+    xl:gap-28
+    2xl:gap-32;
+
+  section {
+    &:nth-of-type(1) {
+      @apply flex
+        max-w-[500px]
+        flex-[1_0]
+        flex-col
+        gap-8;
 
-      &:nth-of-type(2) {
+      > div {
         @apply flex
-          max-w-md
-          flex-[1_1]
+          max-w-[400px]
           flex-col
-          items-center
-          gap-4
-          md:max-w-2xl
-          lg:max-w-3xl;
-
-        > div {
-          @apply w-fit;
-
-          div[data-state='active'] a {
-            @apply border-none
-              bg-neutral-900
-              px-3
-              py-1.5
-              text-sm
-              font-medium;
-
-            &:hover {
-              @apply bg-neutral-800;
-            }
-          }
+          gap-4;
+
+        p {
+          @apply text-base
+            md:text-lg;
         }
 
-        > p {
+        small {
           @apply text-center
             text-sm
             text-neutral-800
-            dark:text-neutral-200;
+            xs:text-xs
+            dark:text-neutral-400;
         }
       }
     }
+
+    &:nth-of-type(2) {
+      @apply flex
+        max-w-md
+        flex-[1_1]
+        flex-col
+        items-center
+        gap-4
+        md:max-w-2xl
+        lg:max-w-3xl;
+
+      > div {
+        @apply w-fit;
+
+        div[data-state='active'] a {
+          @apply border-none
+            bg-neutral-900
+            px-3
+            py-1.5
+            text-sm
+            font-medium;
+
+          &:hover {
+            @apply bg-neutral-800;
+          }
+        }
+      }
+
+      > p {
+        @apply text-center
+          text-sm
+          text-neutral-800
+          dark:text-neutral-200;
+      }
+    }
   }
 }
 

diff --git a/next.dynamic.constants.mjs b/next.dynamic.constants.mjs
@@ -15,8 +15,6 @@ import { defaultLocale } from './next.locales.mjs';
  * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
  */
 export const IGNORED_ROUTES = [
-  // This is used to ignore the 404 route for the static generation (/404)
-  ({ pathname }) => pathname === '404',
   // This is used to ignore all blog routes except for the English language
   ({ locale, pathname }) =>
     locale !== defaultLocale.code && /^blog\//.test(pathname),

diff --git a/pages/en/404.md b/pages/en/404.md
diff --git a/styles/new/markdown.css b/styles/new/markdown.css
@@ -73,6 +73,10 @@ main {
         dark:text-green-300;
     }
 
+    &[role='button'] {
+      @apply xs:no-underline;
+    }
+
     &:has(code) {
       @apply xs:decoration-neutral-800
         dark:xs:decoration-neutral-200;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,6 +8,7 @@ export default {
     './layouts/**/*.tsx',
     './.storybook/preview.tsx',
     './.storybook/main.ts',
+    './app/**/*.tsx',
   ],
   theme: {
     colors: {