Skip to content

Commit ff5d543

Browse files
justinhartmanjustinhartman
committed
🚀 releases version 1.1.0.
1 parent b2bafe4 commit ff5d543

31 files changed

+3792
-3981
lines changed

‎.gitignore‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
docs/
66

77
# Node packages. Not sure if this even helps.
8-
package.json
9-
package-lock.json
8+
#package.json
9+
#package-lock.json
10+
11+
# Hide the Node modules.
12+
node_modules/
1013

1114
# Third-party software
1215
html-minifier/

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,14 @@ Below is a detailed change-log, along with specific tasks completed, for each ve
99
- 520.html
1010
- 521.html
1111
- 533.html
12+
- Added `v1.0.0` of the `package.json` file which contains the dependencies for executing the `minify` script. You can run `$ npm install` from the project root folder and you _should_ have all the Node modules to run `$ ./scripts/minify`.
13+
- Added `postcss.config.js` to load the `cssnano` plugin.
1214
- [#enhancement](#enhancement)
1315
- Optimised the `minify` script to now compress the JavaScript contained in the file along with any CSS inputs.
16+
- Optimised the CSS minification by using `postcss.config.js` to load the `cssnano` plugin which now reduces all CSS to one line of code.
17+
- New, minified versions for the CSS and HTML files have been created. The HTML templates are now one line of code as is the same with the CSS templates. File size has been reduced as follows:
18+
- CSS files: from `61 KB` to `44 KB` (`27.87%` file size reduction).
19+
- HTML files: from `46.3 KB` to `24.1 KB` (`47.95%` file size reduction).
1420
- Updated `README.md` to include all available HTTP error codes when modifying `httpd.conf`.
1521
- [#bugfix](#bugfix)
1622
- Removed the commit of `html-minifier` to the project. This would prevent users from cloning the repo in order to run the minification script.

‎README.md‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ These Apache Error Pages project is a drop-in replacement of beautifully designe
2020
* [Minification Setup](#minification-setup)
2121
* [Dependencies](#dependencies)
2222
* [Installing html-minifier](#installing-html-minifier)
23+
* [Using Node to install the packages](#using-node-to-install-the-packages)
2324
* [Installing postcss](#installing-postcss)
25+
* [Installing uglify-js](#installing-uglify-js)
2426
* [Running the minify script](#running-the-minify-script)
2527
* [Contributing](#contributing)
2628
* [Code of Conduct](#code-of-conduct)
@@ -35,11 +37,13 @@ These Apache Error Pages project is a drop-in replacement of beautifully designe
3537

3638
## Features
3739

38-
* Fully responsive templates, works across desktop, tablet and mobile phones.
39-
* Animated text, creating the illusion of an error output on a Terminal console.
40-
* There are 27 templates, 20 exclusively for Apache with an additional 7 for other web-servers. Enjoy!
41-
* Each template, as well as all CSS files, have been minified to ensure the smallest file usage possible.
42-
* Font Awesome icons used in error messages.
40+
* **Completely off-line functionality**. There is no dependence on an Internet connection for these pages to work. Everything is self-contained in the distribution (`/dist/`) folder.
41+
* A compressed distribution **file size which totals only `78 KB`** (from `111 KB`) and includes Images, CSS, HTML and JavaScript. Total package size is `2.1 MB` with all the _Font Awesome_ and _Web Fonts_ included.
42+
* Fully responsive templates, **works across desktop, tablet and mobile** phones.
43+
* Animated text, **creating the experience of a terminal console**, outputting the respective error code to screen.
44+
* There are **27 templates**, 20 exclusively for Apache with an additional 7 for other web-servers. Enjoy!
45+
* Each template, as well as all CSS files, have been minified to ensure the **smallest file size possible**.
46+
* **Font Awesome icons** used in error messages.
4347

4448
[Installation instructions](#installation) are found below the previews. This shouldn't take you more than **5 minutes** to implement these hand-crafted, custom-designed Apache error pages.
4549

@@ -280,7 +284,7 @@ There is a `bash` script, found at [/src/scripts/minify][script] which runs the
280284

281285
### Dependencies
282286

283-
You will need to install both `html-minifier` as well as `postcss` before you can execute the minifaction script.
287+
You will need to install, `html-minifier`, `postcss` (and plugins) and `uglify-js` before you can execute the minifaction script. You can do this by following the commands below or by using the `package.json` file located at the root folder of the project repo. Either way, you will need to install `html-minifier` before using `Node` to get the required modules.
284288

285289
#### Installing html-minifier
286290

@@ -293,13 +297,30 @@ $ cd html-minifier
293297
$ npm link .
294298
```
295299

300+
#### Using Node to install the packages
301+
302+
As of version `v1.1.0` there is now a `package.json` file contained at the root of this project folder. This file contains all the dependencies required to execute the `./scripts/minify` script. You can run the following commands and it will install `postcss`, along with various plugins, as well as `uglify-js` which is used by `html-minifier`.
303+
304+
```bash
305+
$ npm install
306+
```
307+
308+
You will now have a new `/node_modules/` folder and you should be good to go to execute `./scripts/minify`. You can ignore `Installing postcss` and `Installing uglify-js`, in the steps below, as you will have these installed already.
309+
296310
#### Installing postcss
297311

298-
Once `html-minifier` is installed you can install `postcss` as follows. Make sure that you are in the `/html-minifier/` folder when running the below commands (i.e. `$ cd html-minifier/`).
312+
Once `html-minifier` is installed you can install `postcss` as follows.
313+
314+
```bash
315+
$ npm install postcss-import css-mqpacker cssnano@next postcss-cli --save-dev
316+
```
317+
318+
#### Installing uglify-js
319+
320+
While the `minify` script doesn't directly use `uglify-js` by way of any direct commands; it is required for the JavaScript compression when executing `html-minifier`. You can install `uglify-js` with the following.
299321

300322
```bash
301-
$ npm install cssnano --save
302-
$ npm install postcss-cli --global
323+
$ npm install uglify-js --save-dev
303324
```
304325

305326
### Running the minify script
@@ -311,7 +332,7 @@ $ cd src/
311332
$ ./scripts/minify
312333

313334
# expected output when executing `minify`:
314-
../dist folder reset
335+
The ../dist folder has been reset.
315336
400.html minified
316337
401.html minified
317338
403.html minified
@@ -332,11 +353,8 @@ $ ./scripts/minify
332353
503.html minified
333354
504.html minified
334355
505.html minified
335-
breakpoints.css minified
336-
fontawesome-all.css minified
337-
google-fonts.css minified
338-
main.css minified
339-
Minification complete!
356+
All the CSS files have now been minified.
357+
Minification Complete!
340358
```
341359

342360
There are no options for running this script. Executing this command will:
@@ -401,8 +419,8 @@ Thanks go out to the following for the inspiration, images, icons and, in some c
401419

402420
* [Computer SVG][vector] by Kameleon - License [CC BY 3.0][ccby30].
403421
* Icons by [Font Awesome][fontawesome] - License [CC BY 4.0][ccby40].
404-
* [html-minifier][html-min] - for compressing the `/src/` html files into the `/dist/` folder. License: [MIT][mit].
405-
* [PostCSS][postcss] - for compressing the `/src/` css files into the `/dist/` folder. License: [MIT][mit].
422+
* [html-minifier][html-min] - for compressing the `/src/*.html` files into the `/dist/*.html` folder. License: [MIT][mit].
423+
* [PostCSS][postcss] - for compressing the `/src/css/` css files into the `/dist/css/` folder. License: [MIT][mit].
406424
* [@maicong/ErrorPages][maicong] - for the terminal/console output code. License: [MIT][mit].
407425
* [@trimstray/http-error-pages][trimstray] - for giving me the inspiration to use icons as part of the design. License: [GPLv3][gpl].
408426
* [@jongha/httperrorpages][jongha] - for the error pages status message descriptions. License: [MIT][mit].

‎dist/400.html‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1 @@
1-
<!DOCTYPE html><meta charset="utf-8"><title>400 - Bad Request</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle orange"></i></div></div><div id="errormsg">:~$ Error 400!<br>Bad Request<br><br>The server cannot or will not process the request due to an apparent client error.</div><script>var charIndex = -1;
2-
var stringLength = 0;
3-
var inputText;
4-
function writeContent()
5-
{
6-
inputText = document.getElementById('errormsg').innerHTML;
7-
if (charIndex === -1) {
8-
charIndex = 0;
9-
stringLength = inputText.length;
10-
}
11-
var initString = document.getElementById('echoerror').innerHTML;
12-
initString = initString.replace(/<span.*$/gi,"");
13-
14-
var theChar = inputText.charAt(charIndex);
15-
var nextFourChars = inputText.substr(charIndex,4);
16-
17-
if (nextFourChars === '<br>') {
18-
theChar = '<br>';
19-
charIndex+=3;
20-
}
21-
22-
initString = initString + theChar + "<span id='blink'>▌</span>";
23-
document.getElementById('echoerror').innerHTML = initString;
24-
25-
time = 35;
26-
charIndex = charIndex/1 +1;
27-
if (charIndex <= stringLength) {
28-
setTimeout('writeContent(false)',time);
29-
}
30-
}
31-
writeContent();</script>
1+
<!DOCTYPE html><meta charset="utf-8"><title>400 - Bad Request</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle orange"></i></div></div><div id="errormsg">:~$ Error 400!<br>Bad Request<br><br>The server cannot or will not process the request due to an apparent client error.</div><script>var inputText,charIndex=-1,stringLength=0;function writeContent(){inputText=document.getElementById("errormsg").innerHTML,-1===charIndex&&(charIndex=0,stringLength=inputText.length);var e=document.getElementById("echoerror").innerHTML;e=e.replace(/<span.*$/gi,"");var n=inputText.charAt(charIndex);"<br>"===inputText.substr(charIndex,4)&&(n="<br>",charIndex+=3),e=e+n+"<span id='blink'>▌</span>",document.getElementById("echoerror").innerHTML=e,time=35,(charIndex=charIndex/1+1)<=stringLength&&setTimeout("writeContent(false)",time)}writeContent()</script>

‎dist/401.html‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1 @@
1-
<!DOCTYPE html><meta charset="utf-8"><title>401 - Unauthorized</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle red"></i></div></div><div id="errormsg">:~$ Error 401!<br>Unauthorized<br><br>The response must include a WWW-Authenticate header field containing a challenge applicable to the requested resource.</div><script>var charIndex = -1;
2-
var stringLength = 0;
3-
var inputText;
4-
function writeContent()
5-
{
6-
inputText = document.getElementById('errormsg').innerHTML;
7-
if (charIndex === -1) {
8-
charIndex = 0;
9-
stringLength = inputText.length;
10-
}
11-
var initString = document.getElementById('echoerror').innerHTML;
12-
initString = initString.replace(/<span.*$/gi,"");
13-
14-
var theChar = inputText.charAt(charIndex);
15-
var nextFourChars = inputText.substr(charIndex,4);
16-
17-
if (nextFourChars === '<br>') {
18-
theChar = '<br>';
19-
charIndex+=3;
20-
}
21-
22-
initString = initString + theChar + "<span id='blink'>▌</span>";
23-
document.getElementById('echoerror').innerHTML = initString;
24-
25-
time = 35;
26-
charIndex = charIndex/1 +1;
27-
if (charIndex <= stringLength) {
28-
setTimeout('writeContent(false)',time);
29-
}
30-
}
31-
writeContent();</script>
1+
<!DOCTYPE html><meta charset="utf-8"><title>401 - Unauthorized</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle red"></i></div></div><div id="errormsg">:~$ Error 401!<br>Unauthorized<br><br>The response must include a WWW-Authenticate header field containing a challenge applicable to the requested resource.</div><script>var inputText,charIndex=-1,stringLength=0;function writeContent(){inputText=document.getElementById("errormsg").innerHTML,-1===charIndex&&(charIndex=0,stringLength=inputText.length);var e=document.getElementById("echoerror").innerHTML;e=e.replace(/<span.*$/gi,"");var n=inputText.charAt(charIndex);"<br>"===inputText.substr(charIndex,4)&&(n="<br>",charIndex+=3),e=e+n+"<span id='blink'>▌</span>",document.getElementById("echoerror").innerHTML=e,time=35,(charIndex=charIndex/1+1)<=stringLength&&setTimeout("writeContent(false)",time)}writeContent()</script>

‎dist/403.html‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1 @@
1-
<!DOCTYPE html><meta charset="utf-8"><title>403 - Forbidden</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle red"></i></div></div><div id="errormsg">:~$ Error 403!<br>Forbidden<br><br>The request was valid, but the server is refusing action.<br>The user might not have the necessary permissions for a resource, or may need an account of some sort.</div><script>var charIndex = -1;
2-
var stringLength = 0;
3-
var inputText;
4-
function writeContent()
5-
{
6-
inputText = document.getElementById('errormsg').innerHTML;
7-
if (charIndex === -1) {
8-
charIndex = 0;
9-
stringLength = inputText.length;
10-
}
11-
var initString = document.getElementById('echoerror').innerHTML;
12-
initString = initString.replace(/<span.*$/gi,"");
13-
14-
var theChar = inputText.charAt(charIndex);
15-
var nextFourChars = inputText.substr(charIndex,4);
16-
17-
if (nextFourChars === '<br>') {
18-
theChar = '<br>';
19-
charIndex+=3;
20-
}
21-
22-
initString = initString + theChar + "<span id='blink'>▌</span>";
23-
document.getElementById('echoerror').innerHTML = initString;
24-
25-
time = 35;
26-
charIndex = charIndex/1 +1;
27-
if (charIndex <= stringLength) {
28-
setTimeout('writeContent(false)',time);
29-
}
30-
}
31-
writeContent();</script>
1+
<!DOCTYPE html><meta charset="utf-8"><title>403 - Forbidden</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-exclamation-triangle red"></i></div></div><div id="errormsg">:~$ Error 403!<br>Forbidden<br><br>The request was valid, but the server is refusing action.<br>The user might not have the necessary permissions for a resource, or may need an account of some sort.</div><script>var inputText,charIndex=-1,stringLength=0;function writeContent(){inputText=document.getElementById("errormsg").innerHTML,-1===charIndex&&(charIndex=0,stringLength=inputText.length);var e=document.getElementById("echoerror").innerHTML;e=e.replace(/<span.*$/gi,"");var n=inputText.charAt(charIndex);"<br>"===inputText.substr(charIndex,4)&&(n="<br>",charIndex+=3),e=e+n+"<span id='blink'>▌</span>",document.getElementById("echoerror").innerHTML=e,time=35,(charIndex=charIndex/1+1)<=stringLength&&setTimeout("writeContent(false)",time)}writeContent()</script>

‎dist/404.html‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1 @@
1-
<!DOCTYPE html><meta charset="utf-8"><title>404 - Resource not found</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-times-circle red"></i></div></div><div id="errormsg">:~$ Error 404!<br>Resource not found<br><br>The requested resource could not be found but may be available again in the future.</div><script>var charIndex = -1;
2-
var stringLength = 0;
3-
var inputText;
4-
function writeContent()
5-
{
6-
inputText = document.getElementById('errormsg').innerHTML;
7-
if (charIndex === -1) {
8-
charIndex = 0;
9-
stringLength = inputText.length;
10-
}
11-
var initString = document.getElementById('echoerror').innerHTML;
12-
initString = initString.replace(/<span.*$/gi,"");
13-
14-
var theChar = inputText.charAt(charIndex);
15-
var nextFourChars = inputText.substr(charIndex,4);
16-
17-
if (nextFourChars === '<br>') {
18-
theChar = '<br>';
19-
charIndex+=3;
20-
}
21-
22-
initString = initString + theChar + "<span id='blink'>▌</span>";
23-
document.getElementById('echoerror').innerHTML = initString;
24-
25-
time = 35;
26-
charIndex = charIndex/1 +1;
27-
if (charIndex <= stringLength) {
28-
setTimeout('writeContent(false)',time);
29-
}
30-
}
31-
writeContent();</script>
1+
<!DOCTYPE html><meta charset="utf-8"><title>404 - Resource not found</title><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="/ErrorPages/css/fontawesome-all.css"><link rel="stylesheet"href="/ErrorPages/css/main.css"><link rel="stylesheet"href="/ErrorPages/css/breakpoints.css"><div id="container"><div id="echoerror"><i class="fas fa-times-circle red"></i></div></div><div id="errormsg">:~$ Error 404!<br>Resource not found<br><br>The requested resource could not be found but may be available again in the future.</div><script>var inputText,charIndex=-1,stringLength=0;function writeContent(){inputText=document.getElementById("errormsg").innerHTML,-1===charIndex&&(charIndex=0,stringLength=inputText.length);var e=document.getElementById("echoerror").innerHTML;e=e.replace(/<span.*$/gi,"");var n=inputText.charAt(charIndex);"<br>"===inputText.substr(charIndex,4)&&(n="<br>",charIndex+=3),e=e+n+"<span id='blink'>▌</span>",document.getElementById("echoerror").innerHTML=e,time=35,(charIndex=charIndex/1+1)<=stringLength&&setTimeout("writeContent(false)",time)}writeContent()</script>

0 commit comments

Comments
 (0)