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

Compare commits

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

5 commits
cecf452254 ... 09b773ca65

Author SHA1 Message Date
Adam Piontek
09b773ca65 finished README update with caddy config 2021-11-25 15:04:11 -05:00
Adam Piontek
8d5557880d updated to support caddy custom error pages 2021-11-25 15:02:50 -05:00
Adam Piontek
77c68ef599 increment version & update README partway for caddy 2021-11-25 14:31:32 -05:00
Adam Piontek
5cef3d699e updated more deps, major versions 2021-11-25 14:30:01 -05:00
Adam Piontek
a0e947be50 updated deps minor versions 2021-11-25 13:46:29 -05:00
20 changed files with 4236 additions and 7799 deletions
Show stats Expand all files Collapse all files

44
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 pages with, e.g., nginx. Builds html & css that can be used as custom error page templates with caddy.
## NOTE ## NOTE
After production build, optionally remove the app.js script tags from the built files, just to optimize things further. After production build, optionally remove the empty, 0-byte app.js script tags from the built files, just to optimize things further.
### nginx example ### caddy example
This could probably be optimized but it's working: With this snippet in the Caddyfile, for a site one can `import err` to handle errors for that site.
``` ```
# Custom Unicorn Rainbow error pages (err) {
location /err_css { root /err_css/* /www/err
root /var/www/err; root /err_images/* /www/err
autoindex off; respond /unknown_error_not_4xx_not_5xx "{http.error.status_code} {http.error.status_text}"
expires max;
} handle_errors {
location /err_images { @4xx expression `{http.error.status_code} >= 400 && {http.error.status_code} < 500`
root /var/www/err; @5xx expression `{http.error.status_code} >= 500 && {http.error.status_code} < 600`
autoindex off;
expires max; root * /www/err
} encode zstd gzip
error_page 403 404 /40x.html; file_server
location = /40x.html {
root /var/www/err; rewrite @4xx /4xx.html
} rewrite @5xx /5xx.html
error_page 500 502 503 504 /50x.html; rewrite * /unknown_error_not_4xx_not_5xx
location = /50x.html { templates
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: '0.0.0.0', host: '127.0.0.1',
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: {
contentBase: environment.paths.output, static: {
watchContentBase: true, directory: environment.paths.output,
publicPath: '/', staticOptions: {},
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
View file

@ -1 +0,0 @@
<!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
View file

@ -1 +0,0 @@
<!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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 137 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 334 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 153 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 220 KiB

0
dist/err_js/app.js vendored
View file

11928
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.0.2", "version": "0.1.0",
"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,17 +20,18 @@
"@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": "^3.0.0", "clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^9.0.1", "copy-webpack-plugin": "^10.0.0",
"css-loader": "^5.2.6", "css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.0.2", "css-minimizer-webpack-plugin": "^3.0.2",
"eslint": "^7.30.0", "eslint": "^8.3.0",
"eslint-config-airbnb": "^18.2.1", "eslint-config-airbnb": "^19.0.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-webpack-plugin": "^5.3.2", "html-replace-webpack-plugin": "^2.6.0",
"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",
@ -50,7 +51,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": "^3.11.2", "webpack-dev-server": "^4.5.0",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
}, },
"engines": { "engines": {

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

@ -2,21 +2,21 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>40x Error!</title> <title>@@errcode@@ 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! 404!"> <meta name="author" content="Oh no! @@errcode@@!">
</head> </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);"> <body class="bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/4xx_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/404_unicorn.png" class="unicorn" alt="UNICORN"> <img src="/err_images/content/4xx_unicorn.png" class="unicorn" alt="UNICORN">
<h1 class="text-5xl leading-normal">Oh no! 403/404!</h1> <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>
<p class="text-info font-serif leading-loose">You tried to get something you can't get!</p> <p class="text-info font-serif leading-loose">You tried to get something that can't be got!</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/50x.html → src/5xx.html
View file

@ -2,19 +2,19 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>40x Error!</title> <title>@@errcode@@ 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! 404!"> <meta name="author" content="Kzzt! @@errcode@@!">
</head> </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);"> <body class="bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(/err_images/content/5xx_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/50x_unicorn.png" class="unicorn" alt="UNICORN"> <img src="/err_images/content/5xx_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> <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>
<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/404_rainbow.jpg → src/err_images/content/4xx_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/404_unicorn.png → src/err_images/content/4xx_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/50x_rainbow.jpg → src/err_images/content/5xx_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/50x_unicorn.png → src/err_images/content/5xx_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 { extendDefaultPlugins } = require('svgo'); const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
const environment = require('./configuration/environment'); const environment = require('./configuration/environment');
@ -90,6 +90,16 @@ 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'],