Fix error pages

lib/generate/errors.ts

@@ -0,0 +1,20 @@
+import * as metadata from "../metadata";
+import layout from "../layout";
+import * as util from "../util";
+
+export default async function errors() {
+	await generate("404.html");
+	await generate("500.html");
+}
+
+async function generate(filename: string) {
+	const page = await metadata.get(`site/${filename}.ejs`);
+
+	page.text = util.render(page.text, {
+		metadata: page.metadata
+	}, `site/${filename}.ejs`);
+
+	page.text = await layout(page.text, page.metadata, page.metadata.layout!);
+
+	await util.write(filename, page.text);
+}

lib/generate/index.ts

@@ -1,8 +1,8 @@
 import categories from "./categories";
 import copy from "./copy";
 import css from "./css";
+import errors from "./errors";
 import homepage from "./homepage";
-import missing from "./missing";
 import posts from "./posts";
 import redirects from "./redirects";
 import rss from "./rss";
@@ -12,10 +12,10 @@ export = {
 	categories,
 	copy,
 	css,
+	errors,
 	homepage,
-	missing,
 	posts,
 	redirects,
 	rss,
 	tutorials
-};
+};

lib/generate/missing.ts

@@ -1,15 +0,0 @@
-import * as metadata from "../metadata";
-import layout from "../layout";
-import * as util from "../util";
-
-export default async function missing() {
-	const page = await metadata.get("site/404.html.ejs");
-
-	page.text = util.render(page.text, {
-		metadata: page.metadata
-	}, "site/404.html.ejs");
-
-	page.text = await layout(page.text, page.metadata, page.metadata.layout!);
-
-	util.write("404.html", page.text);
-}

lib/index.ts

@@ -14,7 +14,7 @@ import * as path from "path";
 async function generate(): Promise<Page[]> {
 	generators.copy();
 	generators.css();
-	generators.missing();
+	generators.errors();
 
 	const tutorials = await generators.tutorials();
 
@@ -74,6 +74,17 @@ async function generate(): Promise<Page[]> {
 	app.use(apRouter);
 	app.use(express.static("out"));
 
+	app.use((err, req, res, next) => {
+		res.status(500).sendFile("500.html", {
+			root: "out"
+		});
+	});
+	app.use((req, res, next) => {
+		res.status(404).sendFile("404.html", {
+			root: "out"
+		});
+	});
+
 	const port = process.env.PORT || 8083;
 	app.listen(port, () => {
 		console.log(`Listening on port ${port}`);

site/404.html.ejs

@@ -3,7 +3,7 @@ metadata.title = "Not Found"
 metadata.layout = "default.html.ejs"
 ```
 
-<div class="main search">
+<div class="main error-page">
 	<h1 class="page-heading">Unable to find what you were looking for.</h1>
 	<h3>Try searching:</h3>
 	<form action="https://www.google.com/search" method="GET">
@@ -11,4 +11,4 @@ metadata.layout = "default.html.ejs"
 		<input type="text" name="q" id="q" placeholder="Search...">
 		<input type="submit" value="Search">
 	</form>
-</div>
+</div>

site/500.html.ejs

@@ -0,0 +1,11 @@
+```
+metadata.title = "Not Found"
+metadata.layout = "default.html.ejs"
+```
+
+<div class="main error-page">
+	<h1 class="page-heading">Something went wrong.</h1>
+	<p>
+		Please try again later. If the error persists, please <a href="mailto:me@shadowfacts.net">contact me</a>.
+	</p>
+</div>

site/css/main.scss

@@ -195,8 +195,8 @@ article {
 	}
 }
 
-.search {
+.error-page {
-	margin: 100px auto;
+	margin: 0 auto;
 	text-align: center;
 
 	h3 {
@@ -205,7 +205,6 @@ article {
 		line-height: 1.3;
 		text-align: center;
 		margin: 0;
-		padding: 0 2rem;
 	}
 
 	input#q {