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

updated to support caddy custom error pages

Browse source
This commit is contained in:
Adam Piontek 2021-11-25 15:02:50 -05:00
parent 77c68ef599
commit 8d5557880d
17 changed files with 41 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

19
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "@73kus/custom-rainbow-error-pages", "name": "@73kus/custom-rainbow-error-pages",
"version": "0.0.2", "version": "0.1.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@73kus/custom-rainbow-error-pages", "name": "@73kus/custom-rainbow-error-pages",
"version": "0.0.2", "version": "0.1.0",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.14.6", "@babel/core": "^7.14.6",
@ -23,7 +23,8 @@
"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",
@ -7290,6 +7291,12 @@
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true "dev": true
}, },
"node_modules/html-replace-webpack-plugin": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/html-replace-webpack-plugin/-/html-replace-webpack-plugin-2.6.0.tgz",
"integrity": "sha512-BL0DgtqIAef2C8+Dq8v3Ork7FWLPVVkuFkd3DpFB8XxI8hgXiWytvWhGTztSwdiIrPstUPahL5g7W8ts/vuERw==",
"dev": true
},
"node_modules/html-tags": { "node_modules/html-tags": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@ -20050,6 +20057,12 @@
} }
} }
}, },
"html-replace-webpack-plugin": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/html-replace-webpack-plugin/-/html-replace-webpack-plugin-2.6.0.tgz",
"integrity": "sha512-BL0DgtqIAef2C8+Dq8v3Ork7FWLPVVkuFkd3DpFB8XxI8hgXiWytvWhGTztSwdiIrPstUPahL5g7W8ts/vuERw==",
"dev": true
},
"html-tags": { "html-tags": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",

3
package.json
View file

@ -30,7 +30,8 @@
"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",

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'],