feat: introduced not found / error layout

app/[locale]/not-found.tsx

@@ -1,16 +1,30 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
+import { getLocale } from 'next-intl/server';
 import type { FC } from 'react';
 
-const LocalizedNotFound: FC = () => {
-  const t = useTranslations();
+import { MDXRenderer } from '@/components/mdxRenderer';
+import WithLayout from '@/components/withLayout';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+import { dynamicRouter } from '@/next.dynamic.mjs';
+
+const LocalizedNotFound: FC = async () => {
+  const locale = await getLocale();
+
+  /** @deprecated replace the legacy page when website redesign is done */
+  const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'new-design/404' : '404';
+
+  // Retrieves the markdown source created for the not-found page
+  const { source, filename } = await dynamicRouter.getMarkdownFile(
+    locale,
+    notFoundSource
+  );
+
+  // Parses the source Markdown content and returns a React Component
+  const { MDXContent } = await dynamicRouter.getMDXContent(source, filename);
 
   return (
-    <div className="container">
-      <h2>{t('pages.404.title')}</h2>
-      <h3>{t('pages.404.description')}</h3>
-    </div>
+    <WithLayout layout="centered.hbs">
+      <MDXRenderer Component={MDXContent} />
+    </WithLayout>
   );
 };
 

components/withLayout.tsx

@@ -10,9 +10,9 @@ import LegacyIndexLayout from '@/layouts/IndexLayout';
 import LegacyLearnLayout from '@/layouts/LearnLayout';
 import AboutLayout from '@/layouts/New/About';
 import BlogLayout from '@/layouts/New/Blog';
+import CenteredLayout from '@/layouts/New/Centered';
 import DefaultLayout from '@/layouts/New/Default';
 import DocsLayout from '@/layouts/New/Docs';
-import HomeLayout from '@/layouts/New/Home';
 import LearnLayout from '@/layouts/New/Learn';
 import PostLayout from '@/layouts/New/Post';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
@@ -28,13 +28,14 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
+  'centered.hbs': LegacyDefaultLayout,
 } satisfies Record<LegacyLayouts, FC>;
 
 /** all the currently available layouts from website redesign */
 const redesignLayouts = {
   'about.hbs': AboutLayout,
   'docs.hbs': DocsLayout,
-  'home.hbs': HomeLayout,
+  'centered.hbs': CenteredLayout,
   'learn.hbs': LearnLayout,
   'page.hbs': DefaultLayout,
   'blog-post.hbs': PostLayout,

layouts/New/Home.tsx → layouts/New/Centered.tsx

@@ -5,11 +5,11 @@ import WithNavBar from '@/components/withNavBar';
 
 import styles from './layouts.module.css';
 
-const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
+const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <div className={styles.homeLayout}>
+    <div className={styles.centeredLayout}>
       <div className="glowingBackdrop" />
 
       <main>{children}</main>
@@ -19,4 +19,4 @@ const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
   </>
 );
 
-export default HomeLayout;
+export default CenteredLayout;

layouts/New/layouts.module.css

@@ -58,7 +58,7 @@
   }
 }
 
-.homeLayout {
+.centeredLayout {
   @apply flex
     w-full
     items-center
@@ -106,6 +106,24 @@
         }
       }
 
+      &:nth-of-type(1)[role='status'] {
+        @apply max-w-xl
+          items-center
+          gap-2
+          text-center;
+
+        [role='button'] {
+          @apply mt-4
+            flex
+            items-center
+            gap-2;
+
+          svg {
+            @apply w-5;
+          }
+        }
+      }
+
       &:nth-of-type(2) {
         @apply flex
           max-w-md

pages/en/new-design/404.mdx

@@ -0,0 +1,20 @@
+---
+layout: centered.hbs
+permalink: false
+title: 404
+---
+
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
+
+<section role='status'>
+404
+
+<h1 className="special">Page could not be found</h1>
+
+<div>
+  Sorry, we couldn’t find the page you’re after! Try starting again from the
+  homepage.
+</div>
+
+<Button href="/">Back to Home<ArrowRightIcon /></Button>
+</section>

pages/en/new-design/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Run JavaScript Everywhere
-layout: home.hbs
+layout: centered.hbs
 ---
 
 <section>

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;

types/layouts.ts

@@ -2,7 +2,7 @@
 export type Layouts =
   | 'about.hbs'
   | 'docs.hbs'
-  | 'home.hbs'
+  | 'centered.hbs'
   | 'learn.hbs'
   | 'page.hbs'
   | 'blog-category.hbs'
@@ -17,4 +17,5 @@ export type LegacyLayouts =
   | 'index.hbs'
   | 'docs.hbs'
   | 'download.hbs'
-  | 'page.hbs';
+  | 'page.hbs'
+  | 'centered.hbs';