fixed asset paths
26
README.md
|
|
@ -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;
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
<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);">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
<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/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>
|
||||
|
||||
|
|
|
|||
|
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 |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -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>
|
||||
|
|
@ -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'],
|
||||
|
|
|
|||