adam/73kus-err
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: adam:09b773ca650b01427cea140d405298c14eba5fd2
Branches Tags
adam:master
adam:dev
..
compare: adam:cecf4522543aa4fc08af30dd5140bdfe021eb006
Branches Tags
adam:dev
adam:master

No commits in common. "09b773ca650b01427cea140d405298c14eba5fd2" and "cecf4522543aa4fc08af30dd5140bdfe021eb006" have entirely different histories.
09b773ca65 ... cecf452254

20 changed files with 7790 additions and 4227 deletions
Show stats Expand all files Collapse all files

42
README.md
View file

@ -2,34 +2,34 @@
Based off [frontend-webpack-boilerplate](https://github.com/WeAreAthlon/frontend-webpack-boilerplate) with TailwindCSS added. Based off [frontend-webpack-boilerplate](https://github.com/WeAreAthlon/frontend-webpack-boilerplate) with TailwindCSS added.
Builds html & css that can be used as custom error page templates with caddy. Builds html & css that can be used as custom error pages with, e.g., nginx.
## NOTE ## NOTE
After production build, optionally remove the empty, 0-byte app.js script tags from the built files, just to optimize things further. After production build, optionally remove the app.js script tags from the built files, just to optimize things further.
### caddy example ### nginx example
With this snippet in the Caddyfile, for a site one can `import err` to handle errors for that site. This could probably be optimized but it's working:
``` ```
(err) { # Custom Unicorn Rainbow error pages
root /err_css/* /www/err location /err_css {
root /err_images/* /www/err root /var/www/err;
respond /unknown_error_not_4xx_not_5xx "{http.error.status_code} {http.error.status_text}" autoindex off;
expires max;
handle_errors {
@4xx expression `{http.error.status_code} >= 400 && {http.error.status_code} < 500`
@5xx expression `{http.error.status_code} >= 500 && {http.error.status_code} < 600`
root * /www/err
encode zstd gzip
file_server
rewrite @4xx /4xx.html
rewrite @5xx /5xx.html
rewrite * /unknown_error_not_4xx_not_5xx
templates
} }
location /err_images {
root /var/www/err;
autoindex off;
expires max;
}
error_page 403 404 /40x.html;
location = /40x.html {
root /var/www/err;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/www/err;
} }
``` ```

2
configuration/environment.js
View file

@ -9,7 +9,7 @@ module.exports = {
output: path.resolve(__dirname, '../dist/'), output: path.resolve(__dirname, '../dist/'),
}, },
server: { server: {
host: '127.0.0.1', host: '0.0.0.0',
port: 4000, port: 4000,
}, },
limits: { limits: {

14
configuration/webpack.dev.config.js
View file

@ -12,17 +12,17 @@ module.exports = merge(webpackConfiguration, {
/* Development Server Configuration */ /* Development Server Configuration */
devServer: { devServer: {
static: { contentBase: environment.paths.output,
directory: environment.paths.output, watchContentBase: true,
staticOptions: {}, publicPath: '/',
publicPath: "/",
serveIndex: true,
watch: true,
},
open: true, open: true,
historyApiFallback: true, historyApiFallback: true,
compress: true, compress: true,
overlay: true,
hot: false, hot: false,
watchOptions: {
poll: 300,
},
...environment.server, ...environment.server,
}, },

1
dist/40x.html vendored Normal file
View file

@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>40x Error!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="description" content="You tried to get something that’s not there!"><meta name="author" content="Oh no! 404!"><link rel="icon" href="/favicon.ico"><link href="/err_css/app.css" rel="stylesheet"></head><body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/404_rainbow.jpg);"><div class="grid justify-items-center text-gray-900"><img src="/err_images/content/404_unicorn.png" class="unicorn" alt="UNICORN"><h1 class="text-5xl leading-normal">Oh no! 403/404!</h1><p class="text-info font-serif leading-loose">You tried to get something you can't get!</p><p class="icon-link mt-0 sm:mt-2 md:mt-6"><a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank"><svg class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg></a></p><p class="text-copy text-gray-200 mt-3 sm:mt-6 md:mt-8">(Unicorn image <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="text-gray-100 underline">Creative Commons 4.0 BY-NC</a> via <a href="http://pngimg.com/download/24891" class="text-gray-100 underline">pngimg.com</a>)</p></div></body></html>

1
dist/50x.html vendored Normal file
View file

@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>40x Error!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="description" content="You tried to get something that’s not there!"><meta name="author" content="Oh no! 404!"><link rel="icon" href="/favicon.ico"><link href="/err_css/app.css" rel="stylesheet"></head><body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/50x_rainbow.jpg);"><div class="grid justify-items-center text-gray-900"><img src="/err_images/content/50x_unicorn.png" class="unicorn" alt="UNICORN"><h1 class="text-5xl leading-normal">K̷z̴z̶t̸.̶ ̷5̷0̵x̷ ̷E̷r̷r̶o̸r̸!̶</h1><p class="text-info font-serif leading-loose">Something went wrong. Try going home&hellip;</p><p class="icon-link mt-0 sm:mt-2 md:mt-6"><a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank"><svg class="h-12 w-12" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg></a></p><p class="text-copy text-gray-200 mt-3 sm:mt-6 md:mt-8">(Unicorn image <a href="https://creativecommons.org/licenses/by-nc/4.0/" class="text-gray-100 underline">Creative Commons 4.0 BY-NC</a> via <a href="http://pngimg.com/download/24891" class="text-gray-100 underline">pngimg.com</a>)</p></div></body></html>

2
dist/err_css/app.css vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/err_images/content/404_rainbow.jpg vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
dist/err_images/content/404_unicorn.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
dist/err_images/content/50x_rainbow.jpg vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
dist/err_images/content/50x_unicorn.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

0
dist/err_js/app.js vendored Normal file
View file

11838
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

17
package.json
View file

@ -1,7 +1,7 @@
{ {
"author": "Adam Piontek <adam@73k.us> (https://73k.us)", "author": "Adam Piontek <adam@73k.us> (https://73k.us)",
"name": "@73kus/custom-rainbow-error-pages", "name": "@73kus/custom-rainbow-error-pages",
"version": "0.1.0", "version": "0.0.2",
"description": "Simple but pretty unicorn rainbow error pages for webserver 40x/50x HTTP errors", "description": "Simple but pretty unicorn rainbow error pages for webserver 40x/50x HTTP errors",
"homepage": "https://git.73k.us/73kus-err.git", "homepage": "https://git.73k.us/73kus-err.git",
"browserslist": [ "browserslist": [
@ -20,18 +20,17 @@
"@babel/preset-env": "^7.14.7", "@babel/preset-env": "^7.14.7",
"autoprefixer": "^10.3.1", "autoprefixer": "^10.3.1",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^10.0.0", "copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.5.1", "css-loader": "^5.2.6",
"css-minimizer-webpack-plugin": "^3.0.2", "css-minimizer-webpack-plugin": "^3.0.2",
"eslint": "^8.3.0", "eslint": "^7.30.0",
"eslint-config-airbnb": "^19.0.1", "eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-jsx-a11y": "^6.4.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-replace-webpack-plugin": "^2.6.0", "html-webpack-plugin": "^5.3.2",
"html-webpack-plugin": "^5.5.0",
"image-minimizer-webpack-plugin": "^2.2.0", "image-minimizer-webpack-plugin": "^2.2.0",
"imagemin-gifsicle": "^7.0.0", "imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0", "imagemin-jpegtran": "^7.0.0",
@ -51,7 +50,7 @@
"webpack": "^5.44.0", "webpack": "^5.44.0",
"webpack-bundle-analyzer": "^4.4.2", "webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.5.0", "webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
}, },
"engines": { "engines": {

12
src/4xx.html → src/40x.html
View file

@ -2,21 +2,21 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>@@errcode@@ Error!</title> <title>40x Error!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="You tried to get something that’s not there!"> <meta name="description" content="You tried to get something that’s not there!">
<meta name="author" content="Oh no! @@errcode@@!"> <meta name="author" content="Oh no! 404!">
</head> </head>
<body class="bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/4xx_rainbow.jpg);"> <body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/404_rainbow.jpg);">
<div class="grid justify-items-center text-gray-900"> <div class="grid justify-items-center text-gray-900">
<img src="/err_images/content/4xx_unicorn.png" class="unicorn" alt="UNICORN"> <img src="/err_images/content/404_unicorn.png" class="unicorn" alt="UNICORN">
<h1 class="text-5xl leading-normal text-center">Oh no! <a class="hover:underline hover:text-gray-800 font-bold" href="https://httpstatuses.com/@@errcode@@">@@errcode@@, @@errtext@@</a></h1> <h1 class="text-5xl leading-normal">Oh no! 403/404!</h1>
<p class="text-info font-serif leading-loose">You tried to get something that can't be got!</p> <p class="text-info font-serif leading-loose">You tried to get something you can't get!</p>
<p class="icon-link mt-0 sm:mt-2 md:mt-6"> <p class="icon-link mt-0 sm:mt-2 md:mt-6">
<a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank"> <a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank">

10
src/5xx.html → src/50x.html
View file

@ -2,19 +2,19 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>@@errcode@@ Error!</title> <title>40x Error!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="You tried to get something that’s not there!"> <meta name="description" content="You tried to get something that’s not there!">
<meta name="author" content="Kzzt! @@errcode@@!"> <meta name="author" content="Oh no! 404!">
</head> </head>
<body class="bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/5xx_rainbow.jpg);"> <body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/50x_rainbow.jpg);">
<div class="grid justify-items-center text-gray-900"> <div class="grid justify-items-center text-gray-900">
<img src="/err_images/content/5xx_unicorn.png" class="unicorn" alt="UNICORN"> <img src="/err_images/content/50x_unicorn.png" class="unicorn" alt="UNICORN">
<h1 class="text-5xl leading-normal text-center">K̸z̴z̷t̵!̷ &mdash; <a class="hover:underline hover:text-gray-800 font-bold" href="https://httpstatuses.com/@@errcode@@">@@errcode@@, {{placeholder "http.error.status_text"}}</a></h1> <h1 class="text-5xl leading-normal">K̷z̴z̶t̸.̶ ̷5̷0̵x̷ ̷E̷r̷r̶o̸r̸!̶</h1>
<p class="text-info font-serif leading-loose">Something went wrong. Try going home&hellip;</p> <p class="text-info font-serif leading-loose">Something went wrong. Try going home&hellip;</p>

0
src/err_images/content/4xx_rainbow.jpg → src/err_images/content/404_rainbow.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 146 KiB

0
src/err_images/content/4xx_unicorn.png → src/err_images/content/404_unicorn.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 335 KiB

0
src/err_images/content/5xx_rainbow.jpg → src/err_images/content/50x_rainbow.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 178 KiB

0
src/err_images/content/5xx_unicorn.png → src/err_images/content/50x_unicorn.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 241 KiB

12
webpack.config.js
View file

@ -9,7 +9,7 @@ const HTMLWebpackPlugin = require('html-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin') const { extendDefaultPlugins } = require('svgo');
const environment = require('./configuration/environment'); const environment = require('./configuration/environment');
@ -90,16 +90,6 @@ module.exports = {
], ],
}, },
}), }),
new HtmlReplaceWebpackPlugin([
{
pattern: '@@errcode@@',
replacement: '{{placeholder "http.error.status_code"}}'
},
{
pattern: '@@errtext@@',
replacement: '{{placeholder "http.error.status_text"}}'
}
]),
new CleanWebpackPlugin({ new CleanWebpackPlugin({
verbose: true, verbose: true,
cleanOnceBeforeBuildPatterns: ['**/*', '!stats.json'], cleanOnceBeforeBuildPatterns: ['**/*', '!stats.json'],