feat(404): improve 404 page (#253)

Author: krisjdev

i18n/en/code.json

@@ -1,16 +1,24 @@
 {
   "theme.NotFound.title": {
-    "message": "Page Not Found",
+    "message": "404 :(",
     "description": "The title of the 404 page"
   },
   "theme.NotFound.p1": {
-    "message": "We could not find what you were looking for.",
-    "description": "The first paragraph of the 404 page"
+    "message": "Sorry, the page doesn't exist or has moved.",
+    "description": "The 1st paragraph of the 404 page"
   },
   "theme.NotFound.p2": {
-    "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
+    "message": "Let's go back to the {homepage}.",
     "description": "The 2nd paragraph of the 404 page"
   },
+  "theme.NotFound.homepageLink": {
+    "message": "homepage",
+    "description": "Label for the link to the homepage"
+  },
+  "theme.NotFound.p3": {
+    "message": "Wokwi is an online electronics simulator, which can be used to simulate {Arduino}, {ESP32}, {STM32} & {Pico} projects, with support for many other popular boards and components. Get started for free at {wokwiWebsite}.",
+    "description": "A paragraph describing what Wokwi offers"
+  },
   "theme.AnnouncementBar.closeButtonAriaLabel": {
     "message": "Close",
     "description": "The ARIA label for close button of announcement bar"

src/theme/NotFound/Content/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+
+import WokwiCat from '/static/img/wokwi-cat.svg';
+
+export default function NotFoundContent({className}) {
+  return (
+    <main className={clsx('container margin-vert--xl', className)}>
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate
+              id="theme.NotFound.title"
+              description="The title of the 404 page">
+              404 :(
+            </Translate>
+          </Heading>
+          <p>
+            <Translate
+              id="theme.NotFound.p1"
+              description="The 1st paragraph of the 404 page">
+              Sorry, the page doesn't exist or has moved.
+            </Translate>
+            &nbsp;
+            <Translate
+              id="theme.NotFound.p2"
+              description="The 2nd paragraph of the 404 page"
+              values={{
+                homepage: (
+                  <Link to="/">
+                    <Translate
+                      id="theme.NotFound.homepageLink"
+                      description="Label for the link to the homepage">
+                      homepage
+                    </Translate>
+                  </Link>
+                )
+              }}>
+              Let's go back to the homepage.
+            </Translate>
+          </p>
+          <p>
+            <Translate
+              id="theme.NotFound.p3"
+              description="A paragraph describing what Wokwi offers"
+              values={{
+                Arduino: <Link to="https://wokwi.com/arduino">Arduino</Link>,
+                ESP32: <Link to="https://wokwi.com/esp32">ESP32</Link>,
+                STM32: <Link to="https://wokwi.com/stm32">STM32</Link>,
+                Pico: <Link to="https://wokwi.com/pi-pico">Pico</Link>,
+                wokwiWebsite: <Link to="https://wokwi.com">wokwi.com</Link>
+              }}>
+            </Translate>
+          </p>
+
+          <div style={{display: 'flex', justifyContent: 'center'}}>
+            <WokwiCat style={{fill: 'currentColor'}}/>
+          </div>
+
+        </div>
+      </div>
+    </main>
+  );
+}

src/theme/NotFound/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+export default function Index() {
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  });
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}