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

fixed asset paths

Browse source
This commit is contained in:
Adam Piontek 2021-08-02 17:48:22 -04:00
parent e8b2b5656e
commit 61c6602918
11 changed files with 37 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
README.md
View file

@ -7,3 +7,29 @@ Builds html & css that can be used as custom error pages with, e.g., nginx.
## 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 app.js script tags from the built files, just to optimize things further.
### nginx example
This could probably be optimized but it's working:
```
# 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;
}
```

4
src/40x.html
View file

@ -8,11 +8,11 @@
<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! 404!">
</head> </head>
<body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(images/content/404_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="images/content/404_unicorn.png" class="unicorn" alt="UNICORN"> <img src="/err_images/content/404_unicorn.png" class="unicorn" alt="UNICORN">
<h1 class="text-5xl leading-normal">Oh no! 403/404!</h1> <h1 class="text-5xl leading-normal">Oh no! 403/404!</h1>

4
src/50x.html
View file

@ -8,11 +8,11 @@
<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! 404!">
</head> </head>
<body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(images/content/50x_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="images/content/50x_unicorn.png" class="unicorn" alt="UNICORN"> <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> <h1 class="text-5xl leading-normal">K̷z̴z̶t̸.̶ ̷5̷0̵x̷ ̷E̷r̷r̶o̸r̸!̶</h1>

0
src/images/content/404_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/images/content/404_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/images/content/50x_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/images/content/50x_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

0
src/images/favicon.ico → src/err_images/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
src/js/app.js → src/err_js/app.js
View file

38
src/index.html
View file

@ -1,38 +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!">
</head>
<body class="h-screen w-screen bg-cover bg-center grid grid-cols-1 place-content-center" style="background-image: url(images/content/404_rainbow.jpg);">
<div class="grid justify-items-center text-gray-900">
<img src="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>

13
webpack.config.js
View file

@ -21,16 +21,17 @@ const htmlPluginEntries = templateFiles.map((template) => new HTMLWebpackPlugin(
hash: false, hash: false,
filename: template, filename: template,
template: path.resolve(environment.paths.source, template), template: path.resolve(environment.paths.source, template),
favicon: path.resolve(environment.paths.source, 'images', 'favicon.ico'), favicon: path.resolve(environment.paths.source, 'err_images', 'favicon.ico'),
})); }));
module.exports = { module.exports = {
entry: { entry: {
app: path.resolve(environment.paths.source, 'js', 'app.js'), app: path.resolve(environment.paths.source, 'err_js', 'app.js'),
}, },
output: { output: {
filename: 'js/[name].js', filename: 'err_js/[name].js',
path: environment.paths.output, path: environment.paths.output,
publicPath: '/',
}, },
module: { module: {
rules: [ rules: [
@ -73,7 +74,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'css/[name].css', filename: 'err_css/[name].css',
}), }),
new ImageMinimizerPlugin({ new ImageMinimizerPlugin({
test: /\.(jpe?g|png|gif|svg)$/i, test: /\.(jpe?g|png|gif|svg)$/i,
@ -96,8 +97,8 @@ module.exports = {
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [ patterns: [
{ {
from: path.resolve(environment.paths.source, 'images', 'content'), from: path.resolve(environment.paths.source, 'err_images', 'content'),
to: path.resolve(environment.paths.output, 'images', 'content'), to: path.resolve(environment.paths.output, 'err_images', 'content'),
toType: 'dir', toType: 'dir',
globOptions: { globOptions: {
ignore: ['*.DS_Store', 'Thumbs.db'], ignore: ['*.DS_Store', 'Thumbs.db'],