#11 Handle unknown paths with 404 page

1 year ago · 051ff1871a
--- a/public/static/404.html
+++ b/public/static/404.html
@ -0,0 +1,29 @@
 <!DOCTYPE html>
 <html lang="en-US">

 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Page not found - AO Coverage</title>
  <link rel="stylesheet" type="text/css" href="/static/index.css" />
 </head>

 <body>
  <div id="top-half">
    <div id="container">
      <div id="logo"><img src="/favicon.ico" alt="logo" /></div>
      <h1 id="tagline">404</h1>
    </div>
  </div>
  <div id="bottom-half">
    <div id="container">
      <div id="smallcontent">
        <p>Oops! The page you are looking for does not exist.</p>
        <p><a href="/">Visit the front page</a></p>
      </div>
    </div>
  </div>
 </body>

 </html>
--- a/public/static/index.css
+++ b/public/static/index.css
@ -39,6 +39,10 @@ div#content p {
  padding: 0 10px;
 }

 div#smallcontent p {
  text-align: center;
 }

 .code-container-container {
  margin: 24px;
 }
--- a/src/routes.ts
+++ b/src/routes.ts
@ -217,5 +217,10 @@ export default (metadata: Metadata): Router => {
    retrieveFile(res, identity, "index.html");
  });

  router.use((_, res) => {
    res.status(404);
    res.sendFile(path.join(__dirname, "..", "public", "static", "404.html"));
  });

  return router;
 };