diff --git a/.gitignore b/.gitignore index ded83dbc..49f1e43d 100644 --- a/.gitignore +++ b/.gitignore @@ -42,6 +42,8 @@ /public/css /public/webfonts /assets/typescript/*.d.ts +/public/errors.css +/public/error-*.html # Google /public/robots.txt diff --git a/assets/errors.css/main.css b/assets/errors.css/main.css new file mode 100644 index 00000000..673041eb --- /dev/null +++ b/assets/errors.css/main.css @@ -0,0 +1,146 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; +} + +html, +body { + width: 100%; + height: 100%; +} + +html { + scrollbar-color: #8559a5; + scrollbar-color: var(--error-colour, #8559a5) #111; +} + +body { + color: #fff; + font-size: 16px; + line-height: 25px; + font-family: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; + background-color: #8559a5; + background-color: var(--error-colour, #8559a5); + background-image: url('/images/clouds.png'); + background-blend-mode: multiply; + position: static; + display: flex; + flex-direction: column; +} + +.error { + display: flex; + flex-direction: column; + flex: 1 0 auto; + margin-bottom: 10px; +} + +.error-wrapper { + display: flex; + flex: 1 0 auto; + padding: 10px; + width: 100%; + align-items: center; + justify-content: center; +} + +.error-container { + max-width: 700px; + width: 100%; + margin: 0 auto; + padding: 4px; + background-color: #111; + box-shadow: 0 2px 4px #000; + overflow: hidden; + word-wrap: break-word; +} + +.error-top { + display: flex; + align-items: center; + gap: 4px; + padding-bottom: 4px; + border-bottom: 1px solid #444; +} + +.error-top a { + color: #fff; + text-decoration: none; +} +.error-top a:hover, +.error-top a:focus { + text-decoration: underline; +} + +.error-logo { + width: 50px; + height: 50px; +} + +.error-logo a { + color: inherit !important; + text-decoration: none !important; +} + +.error-logo img { + width: 100%; + height: 100%; + vertical-align: middle; + border-width: 0; + object-fit: contain; +} + +.error-home { + font-size: 1.5em; + line-height: 1.4em; +} + +.error-nav { + margin-left: auto; /* lmao */ + display: flex; + gap: 8px; + padding: 4px; +} + +.error-body { + text-align: center; + height: 300px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.error-icon { + font-size: 4em; + line-height: 1.4em; +} + +.error-blerb { + margin: 10px auto; + font-size: .9em; + line-height: 1.4em; +} + +.error-footer { + text-align: center; + font-size: 12px; + line-height: 1.4em; + color: #888; + border-top: 1px solid #444; + padding-top: 4px; +} + +.error-footer a { + color: #88a; + text-decoration: underline; + text-decoration-style: dotted; +} +.error-footer a:hover, +.error-footer a:focus { + text-decoration-style: solid; +} +.error-footer a:active { + color: #a88; +} diff --git a/build.js b/build.js index c54b79be..8965136a 100644 --- a/build.js +++ b/build.js @@ -22,8 +22,19 @@ const fs = require('fs'); { source: 'redir-fedi.js', target: '/assets', name: 'redir-fedi.{hash}.js', }, ], css: [ + { source: 'errors.css', target: '/', name: 'errors.css', }, { source: 'misuzu.css', target: '/assets', name: 'misuzu.{hash}.css', }, ], + twig: [ + { source: 'errors/400', target: '/', name: 'error-400.html', }, + { source: 'errors/401', target: '/', name: 'error-401.html', }, + { source: 'errors/403', target: '/', name: 'error-403.html', }, + { source: 'errors/404', target: '/', name: 'error-404.html', }, + { source: 'errors/405', target: '/', name: 'error-405.html', }, + { source: 'errors/500', target: '/', name: 'error-500.html', }, + { source: 'errors/502', target: '/', name: 'error-502.html', }, + { source: 'errors/503', target: '/', name: 'error-503.html', }, + ], }; const files = await assproc.process(env, tasks); diff --git a/public/index.php b/public/index.php index ea0c0201..c86b3b73 100644 --- a/public/index.php +++ b/public/index.php @@ -22,7 +22,7 @@ else ob_clean(); header('Content-Type: text/html; charset=utf-8'); - echo file_get_contents(MSZ_TEMPLATES . '/500.html'); + header('X-Accel-Redirect: /error-500.html'); exit; }); @@ -35,10 +35,8 @@ ob_start(); if(is_file(MSZ_ROOT . '/.migrating')) { http_response_code(503); - if(!filter_has_var(INPUT_GET, '_check')) { - header('Content-Type: text/html; charset=utf-8'); - echo file_get_contents(MSZ_TEMPLATES . '/503.html'); - } + header('Content-Type: text/html; charset=utf-8'); + header('X-Accel-Redirect: /error-503.html'); exit; } diff --git a/src/Routing/RoutingErrorHandler.php b/src/Routing/RoutingErrorHandler.php index 972a8995..406ca222 100644 --- a/src/Routing/RoutingErrorHandler.php +++ b/src/Routing/RoutingErrorHandler.php @@ -12,15 +12,10 @@ class RoutingErrorHandler extends HtmlHttpErrorHandler { return; } - if($code === 500 || $code === 503) { + $path = sprintf('/error-%03d.html', $code); + if(is_file(MSZ_PUBLIC . $path)) { $response->setTypeHTML(); - $response->content = file_get_contents(sprintf('%s/%03d.html', MSZ_TEMPLATES, $code)); - return; - } - - if($code === 401 || $code === 403 || $code === 404) { - $response->setTypeHTML(); - $response->content = Template::renderRaw(sprintf('errors.%03d', $code)); + $response->accelRedirect($path); return; } diff --git a/templates/500.html b/templates/500.html deleted file mode 100644 index 4903f046..00000000 --- a/templates/500.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Error 500 - - - -

Error 500

-

Something went very wrong. Please report what you were doing to a developer.

- - diff --git a/templates/503.html b/templates/503.html deleted file mode 100644 index 10f05829..00000000 --- a/templates/503.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Error 503 - - - -

Error 503

-

The site is currently unavailable due to ongoing updates. It should be back shortly!

-

The page will refresh when the site becomes available again.

-

Retry

- - - diff --git a/templates/errors/400.twig b/templates/errors/400.twig index 6fd61d10..de767311 100644 --- a/templates/errors/400.twig +++ b/templates/errors/400.twig @@ -2,7 +2,6 @@ {% set error_code = 400 %} {% set error_text = 'Bad Request' %} - -{% block error_message %} -

Whatever you tried to do, you probably shouldn't.

-{% endblock %} +{% set error_icon = 'fas fa-ellipsis-h' %} +{% set error_blerb = "Make sure you're sending the right data." %} +{% set error_colour = '#b07200' %} diff --git a/templates/errors/401.twig b/templates/errors/401.twig index 92e1b4f6..ea11b309 100644 --- a/templates/errors/401.twig +++ b/templates/errors/401.twig @@ -1,8 +1,7 @@ {% extends 'errors/master.twig' %} {% set error_code = 401 %} -{% set error_text = 'Unauthorised!' %} - -{% block error_message %} -

You must log in to view this page.

-{% endblock %} +{% set error_text = 'Unauthorized' %} +{% set error_icon = 'fas fa-exclamation-circle' %} +{% set error_blerb = 'You must be logged in to view this page.' %} +{% set error_colour = '#be411e' %} diff --git a/templates/errors/403.twig b/templates/errors/403.twig index a0e5b238..486a86b9 100644 --- a/templates/errors/403.twig +++ b/templates/errors/403.twig @@ -1,8 +1,7 @@ {% extends 'errors/master.twig' %} {% set error_code = 403 %} -{% set error_text = 'Access Denied!' %} - -{% block error_message %} -

You aren't allowed to be here. Try logging in, if you haven't yet.

-{% endblock %} +{% set error_text = 'Forbidden' %} +{% set error_icon = 'fas fa-lock' %} +{% set error_blerb = 'You are not supposed to be here.' %} +{% set error_colour = '#83758d' %} diff --git a/templates/errors/404.twig b/templates/errors/404.twig index 7f8405a9..a447cc35 100644 --- a/templates/errors/404.twig +++ b/templates/errors/404.twig @@ -1,8 +1,7 @@ {% extends 'errors/master.twig' %} {% set error_code = 404 %} -{% set error_text = 'Not Found!' %} - -{% block error_message %} -

Couldn't find what you were looking for. Check the spelling in the URL or go back to the previous page.

-{% endblock %} +{% set error_text = 'Not Found' %} +{% set error_icon = 'fas fa-question-circle' %} +{% set error_blerb = "What you're looking for is no longer here or might not have been here at all." %} +{% set error_colour = '#8559a5' %} diff --git a/templates/errors/405.twig b/templates/errors/405.twig new file mode 100644 index 00000000..d86de8df --- /dev/null +++ b/templates/errors/405.twig @@ -0,0 +1,7 @@ +{% extends 'errors/master.twig' %} + +{% set error_code = 405 %} +{% set error_text = 'Method Not Allowed' %} +{% set error_icon = 'fas fa-question-circle' %} +{% set error_blerb = "What you're trying to do is not supported." %} +{% set error_colour = '#8f3417' %} diff --git a/templates/errors/500.twig b/templates/errors/500.twig new file mode 100644 index 00000000..a8bd6bf6 --- /dev/null +++ b/templates/errors/500.twig @@ -0,0 +1,7 @@ +{% extends 'errors/master.twig' %} + +{% set error_code = 500 %} +{% set error_text = 'Server Error' %} +{% set error_icon = 'fas fa-dizzy' %} +{% set error_blerb = 'Something went very wrong. Please report what you were trying to do to a developer.' %} +{% set error_colour = '#99061d' %} diff --git a/templates/errors/502.twig b/templates/errors/502.twig new file mode 100644 index 00000000..eccebf1d --- /dev/null +++ b/templates/errors/502.twig @@ -0,0 +1,7 @@ +{% extends 'errors/master.twig' %} + +{% set error_code = 502 %} +{% set error_text = 'Bad Gateway' %} +{% set error_icon = 'fas fa-tired' %} +{% set error_blerb = 'Something went very wrong. Please report what you were trying to do to a developer.' %} +{% set error_colour = '#dd6427' %} diff --git a/templates/errors/503.twig b/templates/errors/503.twig new file mode 100644 index 00000000..fa1c0e7d --- /dev/null +++ b/templates/errors/503.twig @@ -0,0 +1,7 @@ +{% extends 'errors/master.twig' %} + +{% set error_code = 503 %} +{% set error_text = 'Temporarily Unavailable' %} +{% set error_icon = 'fas fa-tools' %} +{% set error_blerb = 'The website is currently unavailable, it will likely be back soon!' %} +{% set error_colour = '#354e97' %} diff --git a/templates/errors/master.twig b/templates/errors/master.twig index bcfa0864..2c264bc8 100644 --- a/templates/errors/master.twig +++ b/templates/errors/master.twig @@ -1,22 +1,60 @@ -{% extends 'master.twig' %} +{% extends 'html.twig' %} {% from 'macros.twig' import container_title %} -{# fuck it #} -{% set http_code = http_code|default(error_code) %} +{% set error_string = '%03d %s'|format(error_code, error_text) %} +{% set html_title = error_string ~ ' :: ' ~ globals.site_info.name %} -{% block content %} -
- {{ container_title((title|default(error_code|default(http_code) >= 400 ? ' Error' : ' Information')) ~ ' ' ~ (error_code|default(http_code >= 400 ? http_code : '')) ~ (error_text is defined ? ' - ' ~ error_text : '')) }} +{% block html_head %} + + + + +{% endblock %} -
- {% if message is defined %} -

{{ message }}

- {% else %} - {% block error_message %} -

Try again later, perhaps.

- {% endblock %} - {% endif %} +{% block html_body %} +
+
+
+ +
+
+ +
+

{{ error_string }}

+

{{ error_blerb }}

+
+ +
{% endblock %} -