Compare commits
5 Commits
cecf452254
...
09b773ca65
| Author | SHA1 | Date |
|---|---|---|
 Adam Piontek
|
09b773ca65 | |
|
Adam Piontek
|
8d5557880d | |
|
Adam Piontek
|
77c68ef599 | |
|
Adam Piontek
|
5cef3d699e | |
|
Adam Piontek
|
a0e947be50 |
44
README.md
44
README.md
|
|
@ -2,34 +2,34 @@
|
|||
|
||||
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
|
||||
|
||||
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
|
||||
location /err_css {
|
||||
root /var/www/err;
|
||||
autoindex off;
|
||||
expires max;
|
||||
}
|
||||
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;
|
||||
(err) {
|
||||
root /err_css/* /www/err
|
||||
root /err_images/* /www/err
|
||||
respond /unknown_error_not_4xx_not_5xx "{http.error.status_code} {http.error.status_text}"
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ module.exports = {
|
|||
output: path.resolve(__dirname, '../dist/'),
|
||||
},
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
host: '127.0.0.1',
|
||||
port: 4000,
|
||||
},
|
||||
limits: {
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@ module.exports = merge(webpackConfiguration, {
|
|||
|
||||
/* Development Server Configuration */
|
||||
devServer: {
|
||||
contentBase: environment.paths.output,
|
||||
watchContentBase: true,
|
||||
publicPath: '/',
|
||||
static: {
|
||||
directory: environment.paths.output,
|
||||
staticOptions: {},
|
||||
publicPath: "/",
|
||||
serveIndex: true,
|
||||
watch: true,
|
||||
},
|
||||
open: true,
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
overlay: true,
|
||||
hot: false,
|
||||
watchOptions: {
|
||||
poll: 300,
|
||||
},
|
||||
...environment.server,
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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 +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…</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>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"author": "Adam Piontek <adam@73k.us> (https://73k.us)",
|
||||
"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",
|
||||
"homepage": "https://git.73k.us/73kus-err.git",
|
||||
"browserslist": [
|
||||
|
|
@ -20,17 +20,18 @@
|
|||
"@babel/preset-env": "^7.14.7",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"css-loader": "^5.2.6",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"copy-webpack-plugin": "^10.0.0",
|
||||
"css-loader": "^6.5.1",
|
||||
"css-minimizer-webpack-plugin": "^3.0.2",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-airbnb": "^18.2.1",
|
||||
"eslint": "^8.3.0",
|
||||
"eslint-config-airbnb": "^19.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"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",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
"webpack": "^5.44.0",
|
||||
"webpack-bundle-analyzer": "^4.4.2",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2",
|
||||
"webpack-dev-server": "^4.5.0",
|
||||
"webpack-merge": "^5.8.0"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -2,21 +2,21 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>40x Error!</title>
|
||||
<title>@@errcode@@ 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!">
|
||||
<meta name="author" content="Oh no! @@errcode@@!">
|
||||
</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">
|
||||
|
||||
<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">
|
||||
<a class="text-5xl hover:text-gray-800 filter hover:drop-shadow-md" title="Home" href="https://73k.us/" target="_blank">
|
||||
|
|
@ -2,19 +2,19 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>40x Error!</title>
|
||||
<title>@@errcode@@ 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!">
|
||||
<meta name="author" content="Kzzt! @@errcode@@!">
|
||||
</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">
|
||||
|
||||
<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̵!̷ — <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…</p>
|
||||
|
||||
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 146 KiB |
|
Before Width: | Height: | Size: 335 KiB After Width: | Height: | Size: 335 KiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
|
@ -9,7 +9,7 @@ const HTMLWebpackPlugin = require('html-webpack-plugin');
|
|||
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const { extendDefaultPlugins } = require('svgo');
|
||||
const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
|
||||
|
||||
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({
|
||||
verbose: true,
|
||||
cleanOnceBeforeBuildPatterns: ['**/*', '!stats.json'],
|
||||
|
|
|
|||
Loading…
Reference in New Issue