New HTTP error pages.

public/errors.css

@@ -0,0 +1,89 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+    outline-style: none;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    background-color: #7b96c4;
+    background-color: var(--error-colour, #7b96c4);
+}
+
+.http-error {
+    padding: 10px 0;
+}
+
+.http-error-container {
+    max-width: 700px;
+    width: 100%;
+    height: 100%;
+    font-family: IPAMonaPGothic, 'IPA モナー Pゴシック', Monapo, Mona, 'MS PGothic', 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', monospace;
+    margin: 0 auto;
+    background-color: #fff;
+    border: 4px solid #060300;
+    border-top-width: 0;
+}
+
+a, a:visited { color: #66f; text-decoration: none; }
+a:hover, a:focus { text-decoration: underline; }
+
+.http-error-top {
+    display: flex;
+    justify-content: space-between;
+    background-color: #000;
+    color: #fff;
+}
+.http-error-home a {
+    padding: 2px;
+    display: inline-block;
+    color: #7b96c4;
+    color: var(--error-colour, #7b96c4);
+    font-weight: 700;
+}
+
+.http-error-nav a {
+    padding: 2px;
+    display: inline-block;
+}
+
+.http-error-body {
+    margin: 10px;
+    color: #7b96c4;
+    color: var(--error-colour, #7b96c4);
+}
+
+.http-error-header {
+    font-size: 2em;
+    line-height: 1.2em;
+}
+
+.http-error-image {
+    text-align: center;
+}
+.http-error-image img {
+    max-width: 512px;
+    width: 100%;
+    vertical-align: middle;
+}
+
+.http-error-blerb {
+    text-align: center;
+    font-size: 1.2em;
+    line-height: 1.5em;
+}
+
+.http-error-footer {
+    font-size: .7em;
+    line-height: 1.3em;
+    text-align: center;
+    color: #999;
+    padding: 4px 0;
+    border-top: 2px solid #000;
+}

public/index.php

@@ -14,10 +14,16 @@ set_exception_handler(function(\Throwable $ex) {
     }
 
     header('Content-Type: text/html; charset=utf-8');
-    echo file_get_contents(MKI_DIR_TEMPLATES . '/500.html');
+    echo file_get_contents(MKI_DIR_TEMPLATES . '/errors/500.html');
     exit;
 });
 
+if(file_exists(MKI_ROOT . '/.migrating')) {
+    http_response_code(503);
+    echo file_get_contents(MKI_DIR_TEMPLATES . '/errors/503.html');
+    exit;
+}
+
 $makai->startCSRFP(
     $cfg['csrfp'] ?? 'meow',
     (string)filter_input(INPUT_SERVER, 'REMOTE_ADDR')

src/RoutingContext.php

@@ -21,19 +21,18 @@ class RoutingContext {
         return $this->router;
     }
 
-    private function defaultErrorHandler($response, $request, $code, $text): void {
-        $name = sprintf('errors/%s', $code);
-        if(!is_file(sprintf('%s/%s.twig', MKI_DIR_TEMPLATES, $name)))
-            $name = 'errors/master';
-
-        $response->setContent($this->templating->render($name, [
-            'http_error_code' => $code,
-            'http_error_title' => $text,
-        ]));
-    }
-
     public function registerDefaultErrorPages(): void {
-        $this->router->setDefaultErrorHandler($this->defaultErrorHandler(...));
+        $this->router->get('/error-401.html', fn() => $this->templating->render('errors/401'));
+        $this->router->get('/error-403.html', fn() => $this->templating->render('errors/403'));
+        $this->router->get('/error-404.html', fn() => $this->templating->render('errors/504'));
+        $this->router->get('/error-500.html', fn() => $this->templating->render('errors/500'));
+        $this->router->get('/error-503.html', fn() => $this->templating->render('errors/503'));
+
+        $this->router->addErrorHandler(401, fn($resp) => $resp->setContent($this->templating->render('errors/401')));
+        $this->router->addErrorHandler(403, fn($resp) => $resp->setContent($this->templating->render('errors/403')));
+        $this->router->addErrorHandler(404, fn($resp) => $resp->setContent($this->templating->render('errors/404')));
+        $this->router->addErrorHandler(500, fn($resp) => $resp->setContent(file_get_contents(MKI_DIR_TEMPLATES . '/errors/500.html')));
+        $this->router->addErrorHandler(503, fn($resp) => $resp->setContent(file_get_contents(MKI_DIR_TEMPLATES . '/errors/503.html')));
     }
 
     public function register(IRouteHandler $handler): void {

templates/500.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Error 500</title>
-        <style type="text/css">
-            body {
-                font: 12px/20px Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
-            }
-        </style>
-    </head>
-    <body>
-        <h1>Error 500</h1>
-        <p>Something went very wrong. Please let me know about this.</p>
-    </body>
-</html>

templates/errors/401.twig

@@ -0,0 +1,7 @@
+{% extends 'errors/master.twig' %}
+
+{% set error_code = 401 %}
+{% set error_text = 'Unauthorized' %}
+{% set error_image = '/images/k401.jpg' %}
+{% set error_blerb = 'You must be logged in to view this page.' %}
+{% set error_colour = '#87448d' %}

templates/errors/403.twig

@@ -1,4 +1,7 @@
 {% extends 'errors/master.twig' %}
 
-{% set http_error_image = '/images/403.jpg' %}
+{% set error_code = 403 %}
-{% set http_error_desc = 'You are not supposed to be here.' %}
+{% set error_text = 'Forbidden' %}
+{% set error_image = '/images/k403.jpg' %}
+{% set error_blerb = 'You are not supposed to be here.' %}
+{% set error_colour = '#387982' %}

templates/errors/404.twig

@@ -1,4 +1,7 @@
 {% extends 'errors/master.twig' %}
 
-{% set http_error_image = '/images/404.jpg' %}
+{% set error_code = 404 %}
-{% set http_error_desc = 'Whatever you\'re looking for is no longer here, or might not have been here in the first place.' %}
+{% set error_text = 'Not Found' %}
+{% set error_image = '/images/k404.jpg' %}
+{% set error_blerb = 'What you\'re looking for is no longer here or might not have been here at all.' %}
+{% set error_colour = '#7854c1' %}

templates/errors/405.twig

@@ -1,4 +0,0 @@
-{% extends 'errors/master.twig' %}
-
-{% set http_error_image = '/images/405.jpg' %}
-{% set http_error_desc = 'You\'re up to something, aren\'t you?' %}

templates/errors/500.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>HTTP 500 Internal Server Error // flash.moe</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <meta name="description" content="Something happened that caused the server to be unable to complete the request.">
+        <link href="/errors.css" type="text/css" rel="stylesheet">
+    </head>
+    <body style="--error-colour: #3a5794">
+        <div class="http-error">
+            <div class="http-error-container">
+                <nav class="http-error-top">
+                    <div class="http-error-home"><a href="/">flash.moe</a></div>
+                    <div class="http-error-nav">
+                        <a href="mailto:contact@flash.moe" rel="noopener" target="_blank">E-mail</a>
+                        <a href="https://bsky.app/profile/flash.moe" rel="noopener" target="_blank">Bluesky</a>
+                    </div>
+                </nav>
+                <article class="http-error-body">
+                    <h1 class="http-error-header">HTTP 500 Internal Server Error</h1>
+                    <div class="http-error-image">
+                        <img src="/images/k500.jpg" alt="500">
+                    </div>
+                    <p class="http-error-blerb">Something happened that caused the server to be unable to complete the request.</p>
+                </article>
+                <footer class="http-error-footer">
+                    <p>flash.moe is the personal website of flashwave</p>
+                    <p><a href="https://vndb.org/v33" rel="noopener" target="_blank">KANON</a> is &copy; 1999 <a href="https://visual-arts.jp/" rel="noopener" target="_blank">VirtualArts</a>/<a href="https://key.visualarts.gr.jp/" rel="noopener" target="_blank">Key</a></p>
+                    <p>KANON HTTP Error illustrations are &copy; Woody-RINN</p>
+                </footer>
+            </div>
+        </div>
+    </body>
+</html>

templates/errors/500.twig

@@ -0,0 +1,7 @@
+{% extends 'errors/master.twig' %}
+
+{% set error_code = 500 %}
+{% set error_text = 'Internal Server Error' %}
+{% set error_image = '/images/k500.jpg' %}
+{% set error_blerb = 'Something happened that caused the server to be unable to complete the request.' %}
+{% set error_colour = '#3a5794' %}

templates/errors/503.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>HTTP 503 Service Temporarily Unavailable // flash.moe</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <meta name="description" content="The website is currently unavailable, it will likely be back soon!">
+        <link href="/errors.css" type="text/css" rel="stylesheet">
+    </head>
+    <body style="--error-colour: #4c4cad">
+        <div class="http-error">
+            <div class="http-error-container">
+                <nav class="http-error-top">
+                    <div class="http-error-home"><a href="/">flash.moe</a></div>
+                    <div class="http-error-nav">
+                        <a href="mailto:contact@flash.moe" rel="noopener" target="_blank">E-mail</a>
+                        <a href="https://bsky.app/profile/flash.moe" rel="noopener" target="_blank">Bluesky</a>
+                    </div>
+                </nav>
+                <article class="http-error-body">
+                    <h1 class="http-error-header">HTTP 503 Service Temporarily Unavailable</h1>
+                    <div class="http-error-image">
+                        <img src="/images/k503.jpg" alt="503">
+                    </div>
+                    <p class="http-error-blerb">The website is currently unavailable, it will likely be back soon!</p>
+                </article>
+                <footer class="http-error-footer">
+                    <p>flash.moe is the personal website of flashwave</p>
+                    <p><a href="https://vndb.org/v33" rel="noopener" target="_blank">KANON</a> is &copy; 1999 <a href="https://visual-arts.jp/" rel="noopener" target="_blank">VirtualArts</a>/<a href="https://key.visualarts.gr.jp/" rel="noopener" target="_blank">Key</a></p>
+                    <p>KANON HTTP Error illustrations are &copy; Woody-RINN</p>
+                </footer>
+            </div>
+        </div>
+    </body>
+</html>

templates/errors/503.twig

@@ -0,0 +1,7 @@
+{% extends 'errors/master.twig' %}
+
+{% set error_code = 503 %}
+{% set error_text = 'Service Temporarily Unavailable' %}
+{% set error_image = '/images/k503.jpg' %}
+{% set error_blerb = 'The website is currently unavailable, it will likely be back soon!' %}
+{% set error_colour = '#4c4cad' %}

templates/errors/master.twig

@@ -1,11 +1,38 @@
-{% extends 'master-2021.twig' %}
+{% extends 'master.twig' %}
 
-{% block container %}
+{% set error_string = 'HTTP %03d %s'|format(error_code, error_text) %}
+{% set master_title = error_string ~ ' // flash.moe' %}
+
+{% block master_head %}
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="description" content="{{ error_blerb }}">
+{% endblock %}
+
+{% set styles = ['/errors.css'] %}
+{% set master_body_attrs = {'style': '--error-colour: ' ~ error_colour} %}
+
+{% block master_body %}
     <div class="http-error">
-        <h2 class="http-error-head">{{ http_error_title|default('Unknown Error #' ~ http_error_code) }}</h2>
+        <div class="http-error-container">
-        {% if http_error_image is defined %}
+            <nav class="http-error-top">
-            <img src="{{ http_error_image }}" alt="{{ http_error_image }}" class="http-error-image">
+                <div class="http-error-home"><a href="/">flash.moe</a></div>
-        {% endif %}
+                <div class="http-error-nav">
-        <div class="http-error-desc">{{ http_error_desc|default('No additional information is available.') }}</div>
+                    <a href="mailto:contact@flash.moe" rel="noopener" target="_blank">E-mail</a>
+                    <a href="https://bsky.app/profile/flash.moe" rel="noopener" target="_blank">Bluesky</a>
+                </div>
+            </nav>
+            <article class="http-error-body">
+                <h1 class="http-error-header">{{ error_string }}</h1>
+                <div class="http-error-image">
+                    <img src="{{ error_image }}" alt="{{ '%03d'|format(error_code) }}">
+                </div>
+                <p class="http-error-blerb">{{ error_blerb }}</p>
+            </article>
+            <footer class="http-error-footer">
+                <p>flash.moe is the personal website of flashwave</p>
+                <p><a href="https://vndb.org/v33" rel="noopener" target="_blank">KANON</a> is &copy; 1999 <a href="https://visual-arts.jp/" rel="noopener" target="_blank">VirtualArts</a>/<a href="https://key.visualarts.gr.jp/" rel="noopener" target="_blank">Key</a></p>
+                <p>KANON HTTP Error illustrations are &copy; Woody-RINN</p>
+            </footer>
+        </div>
     </div>
 {% endblock %}