feat: introduced not found / error layout

[canerakdas]

Description

This PR introduces not found / error layout

Screenshot

Validation

• The not found page should work on local deployments with npm run serve:redesign
• The design must match with Figma

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 17, 2024 3:38pm

[ovflowd]

I'm not sure about the implementation of the content, whether it should be read from a markdown file or translated from a localization file, so I'm opening it as a draft PR

Ideally through a Markdown file. Realistically, it's complex (sorta) but doable

For static exports, once the Website Redesign is done, is imperative that the structure and content of 404.md are able to render what the Not Found Layout does, hence it'd might make sense to actually replace 404.md into 404.mdx and move the content over there. So you don't need en.json i18n strings.

But that has a few caveats:

• You'd need to import our MDX renderer and load the 404.mdx file from the not-found.tsx
  • Something like:

  const { MDXContent } =
    await dynamicRouter.getMDXContent(source, filename);
  
  <WithLayout layout="notFound">
    <MDXRenderer Component={MDXContent} />
  </WithLayout>

  • This allows you to add the layout to our WithLayout
  • You can make the Not Fund Component a Server Component (async) and do all this await inside the Component body.
  • FYI you might want for the meantime have a new file pages/en/new-design/404.mdx and have a conditional check of const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'pages/en/new-design/404.mdx' : 'pages/en/404.md';
• For the global error page, you can't really use a Markdown file, so you'd need to make i18n strings (this is the global error: https://github.com/nodejs/nodejs.org/blob/main/app/global-error.tsx)

[ovflowd]

cc @canerakdas ☝️ my comment above has a relevant solution.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟠 81	🟢 100	🟢 92	🟢 92	🔗
/en/about	🟢 100	🟢 97	🟢 92	🟢 92	🔗
/en/about/previous-releases	🟢 98	🟢 96	🟢 92	🟢 92	🔗
/en/download	🟢 100	🟢 97	🟢 92	🟢 92	🔗
/en/blog	🟢 100	🟢 97	🟢 92	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	87.19% (395/453)	77.33% (116/150)	79.54% (70/88)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
72	0 💤	0 ❌	0 🔥	4.401s ⏱️

[ovflowd]

LGTM! Awesome work here! ✨