Try adding a 404 page

banga · Jan 13, 2024 · 00a1939 · 00a1939
1 parent 0347991
commit 00a1939
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/lib/build.tsx b/src/lib/build.tsx
@@ -24,6 +24,7 @@ import {
 import { ResumePage } from "../pages/ResumePage.js";
 import { ProjectsPage } from "../pages/ProjectsPage.js";
 import { verifyLinkedRelativePathsExist } from "../components/Link.js";
+import { ErrorPage } from "../pages/ErrorPage.js";
 
 function renderElementToFile({
   element,
@@ -44,10 +45,14 @@ function renderElementToFile({
 
 function writePage(
   buildContext: BuildContextType,
+  // If the path is a directory, the page is written index.html in the directory
   pagePath: string,
   element: ReactElement
 ) {
-  const outputPath = path.join(OUTPUT_DIR, pagePath, "index.html");
+  let outputPath = path.join(OUTPUT_DIR, pagePath);
+  if (outputPath.endsWith("/")) {
+    outputPath = path.join(outputPath, "index.html");
+  }
   renderElementToFile({
     element,
     outputPath,
@@ -120,6 +125,7 @@ export async function buildAsync(buildContext: BuildContextType) {
 
   writePage(buildContext, RESUME_PATH, <ResumePage />);
   writePage(buildContext, PROJECTS_PATH, <ProjectsPage />);
+  writePage(buildContext, "404.html", <ErrorPage />);
   writePage(buildContext, "/", <HomePage />);
 
   writeBuildHash(buildContext);

diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { BuildContext } from "../components/BuildContext.js";
+import { CSS_FILE_PATH } from "../consts.js";
+import { Link } from "../components/Link.js";
+import { AutoReloadScript } from "../lib/auto-reload.js";
+
+export function ErrorPage() {
+  return (
+    <BuildContext.Consumer>
+      {({ baseUrl, cssCacheBuster, shouldAutoReload }) => (
+        <html lang="en" style={{ height: "100%" }}>
+          <head>
+            <meta charSet="utf-8" />
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1"
+            />
+            <title>Page not found</title>
+            <link
+              rel="stylesheet"
+              type="text/css"
+              href={`/${CSS_FILE_PATH}?${cssCacheBuster}`}
+            />
+            {shouldAutoReload && <AutoReloadScript />}
+          </head>
+          <body style={{ height: "100%" }} className="flex-col space-around">
+            <div className="m1 flex-col align-center gap-1">
+              <div className="font-large">404</div>
+              <div>This page does not seem to exist.</div>
+              <div>
+                Click <Link href={baseUrl}>here</Link> to visit the home page.
+              </div>
+            </div>
+          </body>
+        </html>
+      )}
+    </BuildContext.Consumer>
+  );
+}