fixed asset paths

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

View file

@ -7,3 +7,29 @@ Builds html & css that can be used as custom error pages with, e.g., nginx.
## NOTE
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;
}
```

View file

@ -8,11 +8,11 @@
<meta name="description" content="You tried to get something thats 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);">
<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="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>

View file

@ -8,11 +8,11 @@
<meta name="description" content="You tried to get something thats 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/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">
<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>

View file

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 146 KiB

View file

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 335 KiB

View file

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 178 KiB

View file

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 241 KiB

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

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 thats 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>

View file

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