Merge pull request #838 from IABTechLab/ibg-CORPWEB-3437-404-page

ibg-CORPWEB-3437-404-page

Author: genwhittTTD

i18n/ja/code.json

@@ -36,17 +36,29 @@
     "description": "The title of the fallback page when the page crashed"
   },
   "theme.NotFound.title": {
-    "message": "ページが見つかりません",
+    "message": "ページが見つかりませんでした",
     "description": "The title of the 404 page"
   },
   "theme.NotFound.p1": {
-    "message": "お探しのページが見つかりませんでした",
+    "message": "お探しのページが見つかりませんでした。ページが移動したか、リンクにエラーがある可能性があります。",
     "description": "The first paragraph of the 404 page"
   },
   "theme.NotFound.p2": {
-    "message": "このページにリンクしているサイトの所有者にリンクが壊れていることを伝えてください",
+    "message": "以下の方法をお試しください:",
     "description": "The 2nd paragraph of the 404 page"
   },
+  "theme.NotFound.ListItem1": {
+    "message": "リンクを再度クリックしてください。",
+    "description": "The first list item of the 404 page"
+  },
+  "theme.NotFound.ListItem2": {
+    "message": "UID2 のページからタイトルやキーワードで検索してください。",
+    "description": "The second list item of the 404 page"
+  },
+  "theme.NotFound.ListItem3": {
+    "message": "UID2 ドキュメントホームページにアクセスしてください。",
+    "description": "The third list item of the 404 page"
+  },
   "theme.admonition.note": {
     "message": "注記",
     "description": "The default label used for the Note admonition (:::note)"

src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import clsx from "clsx";
+import Translate from "@docusaurus/Translate";
+import type { Props } from "@theme/NotFound/Content";
+import Heading from "@theme/Heading";
+import Link from "@docusaurus/Link";
+
+export default function NotFoundContent({ className }: Props): JSX.Element {
+  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"
+            >
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p>
+            <Translate
+              id="theme.NotFound.p1"
+              description="The first paragraph of the 404 page"
+            >
+              We couldn't find the page you were looking for. The page might
+              have been moved, or there was an error in the link.
+            </Translate>
+          </p>
+          <p>
+            <Translate
+              id="theme.NotFound.p2"
+              description="The 2nd paragraph of the 404 page"
+            >
+              Here are some things you can do:
+            </Translate>
+          </p>
+          <ul>
+            <li>
+              <Translate
+                id="theme.NotFound.ListItem1"
+                description="The first list item of the 404 page"
+              >
+                Go back and retry the link.
+              </Translate>
+            </li>
+            <li>
+              <Translate
+                id="theme.NotFound.ListItem2"
+                description="The second list item of the 404 page"
+              >
+                Search for the document by its title or keywords from any UID2
+                page.
+              </Translate>
+            </li>
+            <li>
+              <Link to="/docs/intro">
+                <Translate
+                  id="theme.NotFound.ListItem3"
+                  description="The third list item of the 404 page"
+                >
+                  Visit the UID2 documentation home page.
+                </Translate>
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  );
+}

src/theme/NotFound/index.tsx

@@ -0,0 +1,21 @@
+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(): JSX.Element {
+  const title = translate({
+    id: "theme.NotFound.title",
+    message: "Page Not Found",
+  });
+
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}