Add auto-refreshing error page on indexing error

Problem: The indexing message is being thrown as an error, which is
pasted as plaintext, so we can't do a page refresh. This is frustrating
when you're waiting for the indexes to finish because you have to
manually refresh a bunch while you wait.

Solution: Use the prototype from @justinabrahms to add an HTML message
for the indexing error and automatically refresh the page every ten
seconds.

src/index.js

@@ -145,6 +145,7 @@ const {
   authorView,
   commentView,
   editProfileView,
+  errorView,
   extendedView,
   latestView,
   likesView,
@@ -774,10 +775,10 @@ const middleware = [
     const percent = Math.floor((totalCurrent / totalTarget) * 1000) / 10;
     const mebibyte = 1024 * 1024;
 
-    if (true || left > mebibyte) {
-      ctx.response.body = "<h1>Hey Christian, put the error message nicely here.</h1>"
-      // throw new Error(`Sorry, Oasis has only processed ${percent}% of the messages and needs to catch up.
-      //  Thanks for your patience, please wait for a moment and refresh this page to try again.`);
+    if (left > mebibyte) {
+      ctx.response.body = errorView({
+        message: `Oasis has only processed ${percent}% of the messages and needs to catch up. This page will refresh every 10 seconds. Thanks for your patience! ❤`
+      });
     } else {
       await next();
     }

src/views/index.js

@@ -1028,3 +1028,38 @@ exports.hashtagView = ({ messages, hashtag }) => {
     messages.map(msg => post({ msg }))
   );
 };
+
+exports.indexingView = ({ percent }) => {
+  return template(
+    section(
+      p(
+        `Sorry, Oasis has only processed ${percent}% of the messages and needs to catch up. Thanks for your patience, please wait for a moment and refresh this page to try again.`
+      )
+    )
+  );
+};
+
+exports.errorView = ({ message }) => {
+  const nodes = html(
+    { lang: "en" },
+    head(
+      title("Oasis -- Error"),
+      link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }),
+      meta({ charset: "utf-8" }),
+      meta({
+        name: "description",
+        content: i18n.oasisDescription
+      }),
+      meta({
+        name: "viewport",
+        content: toAttributes({ width: "device-width", "initial-scale": 1 })
+      }),
+      meta({ "http-equiv": "refresh", content: 10 })
+    ),
+    body(main({ id: "content" }, p(message)))
+  );
+
+  const result = doctypeString + nodes.outerHTML;
+
+  return result;
+};