theme: customize the 404 page

Swizzle the 404 page and customize to match the 404 page on Golioth.io

Signed-off-by: Mike Szczys <[email protected]>

Author: szczys

src/theme/NotFound/Content/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+//Encoding command:
+//ffmpeg -i Echo-Coding-loop.gif -c:v libvpx -an -s 272x288 -auto-alt-ref 0 Echo-Coding-loop.webm
+import EchoCodingWEBM from '@site/static/img/Echo-Coding-loop.webm';
+
+export default function NotFoundContent({className}) {
+  return (
+    <main className={clsx(`container margin-vert--xl ${styles.notfound_container}`, className)}>
+      <div className="row">
+        <div className={`col col--8 col--offset-2 ${styles.notfound}`}>
+          <div className={styles.notfound_videobox}>
+            <video autoPlay loop muted>
+              <source src={EchoCodingWEBM} type="video/webm" />
+            </video>
+          </div>
+          <div>
+            <Heading as="h1" className="hero__title">
+              <Translate
+                id="theme.NotFound.title"
+                description="The title of the 404 page">
+                Oops! This page was bricked.
+              </Translate>
+            </Heading>
+            <p>
+              <Translate
+                id="theme.NotFound.p1"
+                description="The first paragraph of the 404 page">
+                We’re working on it. Can we help you with something else?
+              </Translate>
+            </p>
+          </div>
+        </div>
+        <div className={`col col--8 col--offset-2 ${styles.notfound_search}`}>
+          <form action="/search">
+              <input type="text" name="q" placeholder="Search Golioth for IoT Stuff..." />
+              <input type="submit" value=">" />
+          </form>
+        </div>
+      </div>
+    </main>
+  );
+}

src/theme/NotFound/Content/styles.module.css

@@ -0,0 +1,63 @@
+.notfound {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (max-width: 576px) {
+  .notfound_container {
+    margin-top: 10px !important;
+  }
+
+  .notfound {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .notfound_videobox {
+    margin: 0 auto;
+  }
+  .notfound h1 {
+    font-size: var(--ifm-h1-font-size);
+  }
+}
+
+.notfound_search form {
+  display: flex;
+  flex-direction: row;
+}
+
+.notfound_search input {
+  border: none;
+  background-color: var(--golioth-color-concrete);
+  min-height: 3rem;
+  padding: .5rem 1rem;
+  font-size: var(--ifm-font-size-base);
+  width: 100%;
+}
+
+.notfound_search input[type="text"] {
+  flex-grow: 4;
+}
+
+.notfound_search input::placeholder {
+  font-weight: 100;
+  opacity: 0.7;
+}
+
+.notfound_search input[type="submit"] {
+  max-width: 3rem;
+  min-height: 3rem;
+}
+
+html[data-theme="dark"] .notfound_search input {
+  background-color: var(--golioth-color-charcoal);
+}
+
+.notfound_search input:focus {
+  outline: none;
+}
+
+.notfound_search form:focus-within {
+  outline: 1px solid var(--golioth-color-coral);
+}

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>
+    </>
+  );
+}