Merge pull request #131 from neherlab/docs/custom-404-page

docs: customize "not found" (404) page

Author: ivan-aksamentov

Diff for: docs/src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,37 @@
+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 could not find what you were looking for.
+            </Translate>
+          </p>
+          <p>
+            <Translate>{"If you believe it's a bug, please report it at "}</Translate>
+            <a href="https://github.com/neherlab/pangraph/issues" target="_blank" rel="noopener noreferrer">
+              github.com/neherlab/pangraph/issues
+            </a>
+          </p>
+
+          <Link to="/" className="button button--primary button--lg">
+            <Translate>{'Go to main page'}</Translate>
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

Diff for: docs/src/theme/NotFound/index.tsx

@@ -0,0 +1,30 @@
+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';
+
+/**
+ * Customized 404 page.
+ *
+ * Swizzled (ejected) from the original theme using:
+ *
+ * ```bash
+ * bun run swizzle --typescript --eject @docusaurus/theme-classic NotFound
+ * ```
+ *
+ * */
+export default function Index(): JSX.Element {
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  });
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}