create 404.tsx and update index.ts

.gitignore

@@ -1,3 +1,4 @@
 build
 node_modules
 .DS_Store
+firebase-debug.log

src/public/404.tsx

@@ -0,0 +1,31 @@
+import * as ReactDom from "react-dom";
+import * as React from "react";
+import TopBar from "./components/TopBar";
+import { ACTIVE_PAGES } from "./Config";
+import Splash from "./components/Splash";
+import Footer from "./components/Footer";
+
+class Main extends React.Component {
+    constructor() {
+        super({});
+        this.state = {};
+    }
+
+    public render() {
+        return (
+            <>
+                <TopBar links={ACTIVE_PAGES}></TopBar>
+                <Splash
+                    cta="Page Not Found"
+                    delay={2000}
+                    backgrounds={["/assets/img/backgrounds/fa21qp.webp"]}
+                ></Splash>
+                <Footer></Footer>
+            </>
+        );
+    }
+}
+
+ReactDom.render(<Main></Main>, document.getElementById("root"));
+
+export default {};

src/util/index.ts

@@ -12,6 +12,7 @@ interface Website {
     cssfile: string;
     themecolor: string;
     path?: string;
+    filename?: string;
 }
 
 const APP = express();
@@ -53,6 +54,16 @@ const WEBSITES = [
         cssfile: "/assets/css/styles.css",
         themecolor: "",
     },
+    {
+        sitename: "404",
+        title: "Page Not Found",
+        description: "404 Page Not Found",
+        jsfile: "/assets/js/404.js",
+        cssfile: "/assets/css/styles.css",
+        themecolor: "",
+        path: "/",
+        filename: "404.html",
+    },
 ] as Website[];
 
 const PORT = process.env.PORT ?? 9000;
@@ -118,8 +129,7 @@ function generateFilePages() {
             path.join(
                 __dirname,
                 "../public/",
-                site.path ?? site.sitename,
-                "/index.html"
+                site.filename ?? (site.path ?? site.sitename) + "/index.html"
             ),
             html
         );