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 @@ - +
- UNICORN + UNICORN

Oh no! 403/404!

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 @@ - +
- UNICORN + UNICORN

K̷z̴z̶t̸.̶ ̷5̷0̵x̷ ̷E̷r̷r̶o̸r̸!̶

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 @@ - - - - - 40x Error! - - - - - - - -
- - UNICORN - -

Oh no! 403/404!

- -

You tried to get something you can't get!

- -

- - - - - -

- -

- (Unicorn image - Creative Commons 4.0 BY-NC - via pngimg.com) -

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