15 files changed, 209 insertions, 241 deletions
diff --git a/docusaurus/src/components/ButtonLink.tsx b/docusaurus/src/components/ButtonLink.tsx
index 12fc559..5fd69e1 100644
--- a/docusaurus/src/components/ButtonLink.tsx
+++ b/docusaurus/src/components/ButtonLink.tsx
@@ -1,25 +1,26 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-import React from "react";
+import Button from "@mui/material/Button";
 import Link from "@docusaurus/Link";
-import { Button } from "@mui/material";
+import React from "react";
 
-const ButtonLink = ({ to = String(), text = String() }) => (
-  <Link to={to}>
-    <Button size="large" sx={{ textTransform: "capitalize" }}>
-      <strong>{text}</strong>
-      &nbsp; »
-    </Button>
-  </Link>
+export default ({
+  to = "",
+  text = "",
+}: Readonly<{
+  to: string;
+  text: string;
+}>): React.JSX.Element => (
+  <p>
+    <Link to={to}>
+      <Button size="large" sx={{ textTransform: "capitalize" }}>
+        <strong>{text}</strong>
+        &nbsp; »
+      </Button>
+    </Link>
+  </p>
 );
 
-export default ButtonLink;
-
 // Typography - MUI System
 // https://mui.com/system/typography/
 
diff --git a/docusaurus/src/components/FormCTA.tsx b/docusaurus/src/components/FormCTA.tsx
index 1b5a81e..0912dec 100644
--- a/docusaurus/src/components/FormCTA.tsx
+++ b/docusaurus/src/components/FormCTA.tsx
@@ -1,23 +1,20 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
+import InputMathProblems from "./InputMathProblems";
 import React from "react";
+import SubmitButton from "./SubmitButton";
 import submitMathInputForm from "../functions/submitMathInputForm";
-import InputMathProblems from "./InputMathProblems";
-import ShowStepButton from "./ShowStepButton";
 
-const FormCTA = ({ autoFocus = Boolean() }) => (
+export default ({
+  autoFocus = false,
+  submitText = "",
+}: Readonly<{
+  autoFocus: boolean;
+  submitText: string;
+}>): React.JSX.Element => (
   <form onSubmit={submitMathInputForm}>
+    <InputMathProblems autoFocus={autoFocus} defaultValue="" />
     <p></p>
-    <InputMathProblems autoFocus={autoFocus} />
-    <p></p>
-    <ShowStepButton />
-    <p></p>
+    <SubmitButton text={submitText} />
   </form>
 );
-
-export default FormCTA;
diff --git a/docusaurus/src/components/FormQuickStart.tsx b/docusaurus/src/components/FormQuickStart.tsx
deleted file mode 100644
index 60589fb..0000000
--- a/docusaurus/src/components/FormQuickStart.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
-
-import React from "react";
-import submitMathInputForm from "../functions/submitMathInputForm";
-import InputMathProblems from "./InputMathProblems";
-import ShowStepButton from "./ShowStepButton";
-
-const FormQuickStart = () => (
-  <form onSubmit={submitMathInputForm}>
-    <ol>
-      <li>
-        <p>Type your math problem in the text box.</p>
-        <InputMathProblems defaultValue="y'=y" />
-      </li>
-      <li>
-        <p>
-          Click the "Show Steps" button.
-        </p>
-        <ShowStepButton />
-      </li>
-      <li>
-        <p>
-          Explore the step-by-step solution provided. 🎉
-        </p>
-      </li>
-    </ol>
-  </form>
-);
-
-export default FormQuickStart;
diff --git a/docusaurus/src/components/InputMathProblems.tsx b/docusaurus/src/components/InputMathProblems.tsx
index c7b49ce..27313d2 100644
--- a/docusaurus/src/components/InputMathProblems.tsx
+++ b/docusaurus/src/components/InputMathProblems.tsx
@@ -1,19 +1,15 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
 import React from "react";
 import TextField from "@mui/material/TextField";
-// TextField API - Material UI
-// https://mui.com/material-ui/api/text-field/
 
-const InputMathProblems = ({
-  autoFocus = Boolean(),
-  defaultValue = String(),
-}) => (
+export default ({
+  autoFocus = false,
+  defaultValue = "",
+}: Readonly<{
+  autoFocus: boolean;
+  defaultValue: string;
+}>): React.JSX.Element => (
   <TextField
     name="i"
     type="search"
@@ -30,4 +26,8 @@ const InputMathProblems = ({
   />
 );
 
-export default InputMathProblems;
+// TextField API - Material UI
+// https://mui.com/material-ui/api/text-field/
+
+// <input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
diff --git a/docusaurus/src/components/ShowStepButton.tsx b/docusaurus/src/components/ShowStepButton.tsx
deleted file mode 100644
index 3ae7ba3..0000000
--- a/docusaurus/src/components/ShowStepButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
-
-import React from "react";
-import { Button } from "@mui/material";
-
-const ShowStepButton = () => (
-  <Button
-    type="submit"
-    size="large"
-    variant="contained"
-    sx={{ textTransform: "capitalize" }}
-  >
-    Show Steps
-  </Button>
-);
-
-export default ShowStepButton;
-
-// Typography - MUI System
-// https://mui.com/system/typography/
diff --git a/docusaurus/src/components/SubmitButton.tsx b/docusaurus/src/components/SubmitButton.tsx
new file mode 100644
index 0000000..e9b1c72
--- /dev/null
+++ b/docusaurus/src/components/SubmitButton.tsx
@@ -0,0 +1,22 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+import Button from "@mui/material/Button";
+import React from "react";
+
+export default ({
+  text = "",
+}: Readonly<{ text: string }>): React.JSX.Element => (
+  <p>
+    <Button
+      type="submit"
+      size="large"
+      variant="contained"
+      sx={{ textTransform: "capitalize" }}
+    >
+      {text}
+    </Button>
+  </p>
+);
+
+// Typography - MUI System
+// https://mui.com/system/typography/
diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css
index a027863..ce621e1 100644
--- a/docusaurus/src/css/custom.css
+++ b/docusaurus/src/css/custom.css
@@ -1,15 +1,51 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+.markdown {
+    --ifm-h2-vertical-rhythm-top: 4;
+}
 
 :root {
     --ifm-menu-link-padding-vertical: calc(var(--ifm-menu-link-padding-horizontal) * 1.5);
+    --ifm-toc-padding-vertical: calc(var(--ifm-toc-padding-horizontal) * 2);
     --ifm-color-primary: blue;
-    --ifm-color-gray-900: var(--ifm-color-gray-900);
-    --ifm-color-secondary-contrast-foreground: var(--ifm-color-gray-900);
+    --ifm-color-gray-700: black;
+    --ifm-color-gray-800: black;
+    --ifm-color-gray-900: black;
+    --ifm-color-secondary-contrast-foreground: black;
+    --ifm-color-content-secondary: black;
+}
+
+.markdown>h1 {
+    /* Style the <h1> on http://localhost/source */
+    margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading));
+}
+
+:root {
+    --wolfree-heading-zoom: 0.75;
+}
+
+h1 {
+    font-size: calc(max(1rem, var(--ifm-h1-font-size) * var(--wolfree-heading-zoom)));
+}
+
+h2 {
+    font-size: calc(max(1rem, var(--ifm-h2-font-size) * var(--wolfree-heading-zoom)));
+}
+
+h3 {
+    font-size: calc(max(1rem, var(--ifm-h3-font-size) * var(--wolfree-heading-zoom)));
+}
+
+h4 {
+    font-size: calc(max(1rem, var(--ifm-h4-font-size) * var(--wolfree-heading-zoom)));
+}
+
+h5 {
+    font-size: calc(max(1rem, var(--ifm-h5-font-size) * var(--wolfree-heading-zoom)));
+}
+
+h6 {
+    font-size: calc(max(1rem, var(--ifm-h6-font-size) * var(--wolfree-heading-zoom)));
 }
 
 .footer__link-item {
diff --git a/docusaurus/src/functions/submitMathInputForm.ts b/docusaurus/src/functions/submitMathInputForm.ts
new file mode 100644
index 0000000..cf3294b
--- /dev/null
+++ b/docusaurus/src/functions/submitMathInputForm.ts
@@ -0,0 +1,23 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+import React from "react";
+
+export default (event: React.FormEvent<HTMLFormElement>): void => {
+  event.preventDefault();
+  const htmlFormElement = event.currentTarget;
+  const formData = new FormData(htmlFormElement);
+  const i = formData.get("i");
+
+  const url = new URL("/input/", window.location.href);
+
+  if (typeof i === "string") {
+    url.searchParams.set("i", i);
+  } else if (i instanceof File) {
+    console.warn({ i });
+  } else {
+    const typescriptExhaustivenessCheck: never = i;
+    console.warn({ typescriptExhaustivenessCheck });
+  }
+
+  window.location.assign(url);
+};
diff --git a/docusaurus/src/functions/submitMathInputForm.tsx b/docusaurus/src/functions/submitMathInputForm.tsx
deleted file mode 100644
index a90894e..0000000
--- a/docusaurus/src/functions/submitMathInputForm.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
-
-import { FormEventHandler } from "react";
-
-const submitMathInputForm: FormEventHandler<HTMLFormElement> = (event) => {
-  event.preventDefault();
-  const form = event.currentTarget;
-  const formData = new FormData(form);
-
-  const i = formData.get("i") || "";
-  if (i instanceof File) return;
-
-  const url = new URL("/input/", window.location.href);
-  url.searchParams.set("i", i);
-  window.location.href = url.href;
-};
-
-export default submitMathInputForm;
diff --git a/docusaurus/src/functions/typescriptNever.ts b/docusaurus/src/functions/typescriptNever.ts
new file mode 100644
index 0000000..42becd5
--- /dev/null
+++ b/docusaurus/src/functions/typescriptNever.ts
@@ -0,0 +1,10 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+export default (typescriptNeverValue: never): never => {
+  console.warn({ typescriptNeverValue });
+
+  return typescriptNeverValue;
+};
+
+// How do I check that a switch block is exhaustive in TypeScript? - Stack Overflow
+// https://stackoverflow.com/questions/39419170/how-do-i-check-that-a-switch-block-is-exhaustive-in-typescript
diff --git a/docusaurus/src/theme/Footer/InputPreloader.tsx b/docusaurus/src/theme/Footer/InputPreloader.tsx
index 325f8a7..2ba2e19 100644
--- a/docusaurus/src/theme/Footer/InputPreloader.tsx
+++ b/docusaurus/src/theme/Footer/InputPreloader.tsx
@@ -1,35 +1,31 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
-
-import React, { useEffect, useState } from "react";
-
-const InputPreloader = () => {
-  const [showIframe, setShowIframe] = useState(false);
-
-  useEffect(() => {
-    const handleIframeLoad = () => {
-      // Show the iframe after a 3000ms delay
-      const timerId = setTimeout(() => setShowIframe(true), 3000);
-      // Cleanup the timer when the component unmounts
-      return () => clearTimeout(timerId);
-    };
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-    window.scroll(0, 0);
+import React from "react";
+
+export default (): React.JSX.Element => {
+  const [insertIframe, setInsertIframe] = React.useState(false);
+
+  React.useEffect((): (() => void) => {
+    const handleIframeLoad = (): (() => void) => {
+      // Insert the iframe after a 3000ms delay.
+      const timerId = setTimeout((): void => setInsertIframe(true), 3000);
+
+      // Cleanup the timer when the component unmounts.
+      return (): void => clearTimeout(timerId);
+    };
 
     window.addEventListener("load", handleIframeLoad);
 
-    // Cleanup the event listener when the component unmounts
-    return () => window.removeEventListener("load", handleIframeLoad);
-  }, []); // Empty dependency array means the effect runs only once after initial render
+    window.scroll(0, 0);
+
+    // Cleanup the event listener when the component unmounts.
+    return (): void => window.removeEventListener("load", handleIframeLoad);
+  }, []); // Empty dependency array means the effect runs only once after initial render.
 
   return (
     <>
       {/* Use a descriptive title for accessibility */}
-      {showIframe && (
+      {insertIframe && (
         <iframe
           title="Input Page Preloader"
           src="/input/"
@@ -39,5 +35,3 @@ const InputPreloader = () => {
     </>
   );
 };
-
-export default InputPreloader;
diff --git a/docusaurus/src/theme/Footer/index.tsx b/docusaurus/src/theme/Footer/index.tsx
index 2edef40..e4063c5 100644
--- a/docusaurus/src/theme/Footer/index.tsx
+++ b/docusaurus/src/theme/Footer/index.tsx
@@ -1,21 +1,14 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-import React from "react";
 import Footer from "@theme-original/Footer";
 import InputPreloader from "./InputPreloader";
+import React from "react";
 
-const FooterWrapper = (props: React.JSX.IntrinsicAttributes) => {
-  return (
-    <>
-      <Footer {...props} />
-      <InputPreloader />
-    </>
-  );
-};
-
-export default FooterWrapper;
+export default (
+  props: React.JSX.ElementAttributesProperty
+): React.JSX.Element => (
+  <>
+    <Footer {...props} />
+    <InputPreloader />
+  </>
+);
diff --git a/docusaurus/src/theme/NotFound/DDoSProtection.tsx b/docusaurus/src/theme/NotFound/DDoSProtection.tsx
index 6cd8c04..b861669 100644
--- a/docusaurus/src/theme/NotFound/DDoSProtection.tsx
+++ b/docusaurus/src/theme/NotFound/DDoSProtection.tsx
@@ -1,19 +1,14 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
 import React from "react";
 
-const DDoSProtection = () => (
+export default (): React.JSX.Element => (
   <center
     style={{
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      height: 100 + "vh",
+      height: "99vh",
     }}
   >
     <center>
@@ -30,5 +25,3 @@ const DDoSProtection = () => (
     </center>
   </center>
 );
-
-export default DDoSProtection;
diff --git a/docusaurus/src/theme/NotFound/redirectInput.tsx b/docusaurus/src/theme/NotFound/Redirection.tsx
index 4e29b4a..3fe2d6d 100644
--- a/docusaurus/src/theme/NotFound/redirectInput.tsx
+++ b/docusaurus/src/theme/NotFound/Redirection.tsx
@@ -1,41 +1,30 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
-
-import { useEffect } from "react";
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-const redirectInput = () => {
-  useEffect(() => {
-    const redirectToInputPage = () => {
-      const pathname = window.location.pathname;
+import React from "react";
+import typescriptNever from "../../functions/typescriptNever";
 
-      const isExample = pathname.includes("/example");
-      if (!isExample) {
-        window.location.href = "/";
-        return;
-      }
+export default (): React.JSX.Element => {
+  React.useEffect((): void => {
+    const pathname = window.location.pathname;
 
-      const filename = pathname.split("/").pop();
-      if (!filename) {
-        window.location.href = "/";
-        return;
-      }
+    const isExample = pathname.includes("/example");
 
-      const topic = "topic " + filename.replace(/-/g, " ");
+    if (isExample === true) {
+      const topic = "topic " + pathname.split("/").pop().replace(/-/g, " ");
       const url = new URL("/input/", window.location.href);
       url.searchParams.set("i", topic);
-      window.location.href = url.href;
-    };
-
-    redirectToInputPage();
-  }, []); // The effect runs only once on mount
+      window.location.replace(url);
+    } else if (isExample === false) {
+      window.location.replace("/");
+    } else {
+      window.location.replace("/");
+      typescriptNever(isExample);
+    }
+  }, []); // Empty dependency array means the effect runs only once after initial render.
+
+  return <></>;
 };
 
-export default redirectInput;
-
 /*
  * test case:
  *
diff --git a/docusaurus/src/theme/NotFound/index.tsx b/docusaurus/src/theme/NotFound/index.tsx
index d5e0208..15e9fe6 100644
--- a/docusaurus/src/theme/NotFound/index.tsx
+++ b/docusaurus/src/theme/NotFound/index.tsx
@@ -1,28 +1,21 @@
-/**
- * @license
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * This file is part of Wolfree.
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
- */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-import React from "react";
-import NotFound from "@theme-original/NotFound";
-import redirectInput from "./redirectInput";
 import DDoSProtection from "./DDoSProtection";
+import NotFound from "@theme-original/NotFound";
+import React from "react";
+import Redirection from "./Redirection";
 
-const NotFoundWrapper = (props: React.JSX.IntrinsicAttributes) => {
-  redirectInput();
-  return (
-    <>
-      <DDoSProtection />
-      <div style={{ display: "none" }}>
-        <NotFound {...props} />
-      </div>
-    </>
-  );
-};
-
-export default NotFoundWrapper;
+export default (
+  props: React.JSX.ElementAttributesProperty
+): React.JSX.Element => (
+  <>
+    <Redirection />
+    <DDoSProtection />
+    <div style={{ display: "none" }}>
+      <NotFound {...props} />
+    </div>
+  </>
+);
 
 // How can I customize the 404 page? · facebook/docusaurus · Discussion #6030
 // https://github.com/facebook/docusaurus/discussions/6030