From 61c6602918efb6ce773bc737fc1f755abe461291 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Mon, 2 Aug 2021 17:48:22 -0400
Subject: [PATCH] fixed asset paths
---
README.md | 26 ++++++++++++
src/40x.html | 4 +-
src/50x.html | 4 +-
.../content/404_rainbow.jpg | Bin
.../content/404_unicorn.png | Bin
.../content/50x_rainbow.jpg | Bin
.../content/50x_unicorn.png | Bin
src/{images => err_images}/favicon.ico | Bin
src/{js => err_js}/app.js | 0
src/index.html | 38 ------------------
webpack.config.js | 13 +++---
11 files changed, 37 insertions(+), 48 deletions(-)
rename src/{images => err_images}/content/404_rainbow.jpg (100%)
rename src/{images => err_images}/content/404_unicorn.png (100%)
rename src/{images => err_images}/content/50x_rainbow.jpg (100%)
rename src/{images => err_images}/content/50x_unicorn.png (100%)
rename src/{images => err_images}/favicon.ico (100%)
rename src/{js => err_js}/app.js (100%)
delete mode 100644 src/index.html
diff --git a/README.md b/README.md
index 5f5fcd5..8b2f038 100644
--- a/README.md
+++ b/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;
+}
+```
diff --git a/src/40x.html b/src/40x.html
index 21afc8d..7fe65f2 100644
--- a/src/40x.html
+++ b/src/40x.html
@@ -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>
diff --git a/src/50x.html b/src/50x.html
index 7437660..ac602c9 100644
--- a/src/50x.html
+++ b/src/50x.html
@@ -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>
diff --git a/src/images/content/404_rainbow.jpg b/src/err_images/content/404_rainbow.jpg
similarity index 100%
rename from src/images/content/404_rainbow.jpg
rename to src/err_images/content/404_rainbow.jpg
diff --git a/src/images/content/404_unicorn.png b/src/err_images/content/404_unicorn.png
similarity index 100%
rename from src/images/content/404_unicorn.png
rename to src/err_images/content/404_unicorn.png
diff --git a/src/images/content/50x_rainbow.jpg b/src/err_images/content/50x_rainbow.jpg
similarity index 100%
rename from src/images/content/50x_rainbow.jpg
rename to src/err_images/content/50x_rainbow.jpg
diff --git a/src/images/content/50x_unicorn.png b/src/err_images/content/50x_unicorn.png
similarity index 100%
rename from src/images/content/50x_unicorn.png
rename to src/err_images/content/50x_unicorn.png
diff --git a/src/images/favicon.ico b/src/err_images/favicon.ico
similarity index 100%
rename from src/images/favicon.ico
rename to src/err_images/favicon.ico
diff --git a/src/js/app.js b/src/err_js/app.js
similarity index 100%
rename from src/js/app.js
rename to src/err_js/app.js
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 21afc8d..0000000
--- a/src/index.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 25f8603..33b7f5b 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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'],