Skip to content

Commit

Permalink
🚀 releases version 1.1.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
justinhartman committed May 14, 2018
1 parent b2bafe4 commit ff5d543
Show file tree
Hide file tree
Showing 31 changed files with 3,792 additions and 3,981 deletions.
7 changes: 5 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
docs/

# Node packages. Not sure if this even helps.
package.json
package-lock.json
#package.json
#package-lock.json

# Hide the Node modules.
node_modules/

# Third-party software
html-minifier/
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,14 @@ Below is a detailed change-log, along with specific tasks completed, for each ve
- 520.html
- 521.html
- 533.html
- 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`.
- Added `postcss.config.js` to load the `cssnano` plugin.
- [#enhancement](#enhancement)
- Optimised the `minify` script to now compress the JavaScript contained in the file along with any CSS inputs.
- Optimised the CSS minification by using `postcss.config.js` to load the `cssnano` plugin which now reduces all CSS to one line of code.
- 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:
- CSS files: from `61 KB` to `44 KB` (`27.87%` file size reduction).
- HTML files: from `46.3 KB` to `24.1 KB` (`47.95%` file size reduction).
- Updated `README.md` to include all available HTTP error codes when modifying `httpd.conf`.
- [#bugfix](#bugfix)
- Removed the commit of `html-minifier` to the project. This would prevent users from cloning the repo in order to run the minification script.
Expand Down
52 changes: 35 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ These Apache Error Pages project is a drop-in replacement of beautifully designe
* [Minification Setup](#minification-setup)
* [Dependencies](#dependencies)
* [Installing html-minifier](#installing-html-minifier)
* [Using Node to install the packages](#using-node-to-install-the-packages)
* [Installing postcss](#installing-postcss)
* [Installing uglify-js](#installing-uglify-js)
* [Running the minify script](#running-the-minify-script)
* [Contributing](#contributing)
* [Code of Conduct](#code-of-conduct)
Expand All @@ -35,11 +37,13 @@ These Apache Error Pages project is a drop-in replacement of beautifully designe

## Features

* Fully responsive templates, works across desktop, tablet and mobile phones.
* Animated text, creating the illusion of an error output on a Terminal console.
* There are 27 templates, 20 exclusively for Apache with an additional 7 for other web-servers. Enjoy!
* Each template, as well as all CSS files, have been minified to ensure the smallest file usage possible.
* Font Awesome icons used in error messages.
* **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.
* 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.
* Fully responsive templates, **works across desktop, tablet and mobile** phones.
* Animated text, **creating the experience of a terminal console**, outputting the respective error code to screen.
* There are **27 templates**, 20 exclusively for Apache with an additional 7 for other web-servers. Enjoy!
* Each template, as well as all CSS files, have been minified to ensure the **smallest file size possible**.
* **Font Awesome icons** used in error messages.

[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.

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

### Dependencies

You will need to install both `html-minifier` as well as `postcss` before you can execute the minifaction script.
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.

#### Installing html-minifier

Expand All @@ -293,13 +297,30 @@ $ cd html-minifier
$ npm link .
```

#### Using Node to install the packages

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`.

```bash
$ npm install
```

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.

#### Installing postcss

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/`).
Once `html-minifier` is installed you can install `postcss` as follows.

```bash
$ npm install postcss-import css-mqpacker cssnano@next postcss-cli --save-dev
```

#### Installing uglify-js

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.

```bash
$ npm install cssnano --save
$ npm install postcss-cli --global
$ npm install uglify-js --save-dev
```

### Running the minify script
Expand All @@ -311,7 +332,7 @@ $ cd src/
$ ./scripts/minify

# expected output when executing `minify`:
../dist folder reset
The ../dist folder has been reset.
400.html minified
401.html minified
403.html minified
Expand All @@ -332,11 +353,8 @@ $ ./scripts/minify
503.html minified
504.html minified
505.html minified
breakpoints.css minified
fontawesome-all.css minified
google-fonts.css minified
main.css minified
Minification complete!
All the CSS files have now been minified.
Minification Complete!
```

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

* [Computer SVG][vector] by Kameleon - License [CC BY 3.0][ccby30].
* Icons by [Font Awesome][fontawesome] - License [CC BY 4.0][ccby40].
* [html-minifier][html-min] - for compressing the `/src/` html files into the `/dist/` folder. License: [MIT][mit].
* [PostCSS][postcss] - for compressing the `/src/` css files into the `/dist/` folder. License: [MIT][mit].
* [html-minifier][html-min] - for compressing the `/src/*.html` files into the `/dist/*.html` folder. License: [MIT][mit].
* [PostCSS][postcss] - for compressing the `/src/css/` css files into the `/dist/css/` folder. License: [MIT][mit].
* [@maicong/ErrorPages][maicong] - for the terminal/console output code. License: [MIT][mit].
* [@trimstray/http-error-pages][trimstray] - for giving me the inspiration to use icons as part of the design. License: [GPLv3][gpl].
* [@jongha/httperrorpages][jongha] - for the error pages status message descriptions. License: [MIT][mit].
Expand Down
32 changes: 1 addition & 31 deletions dist/400.html
Original file line number Diff line number Diff line change
@@ -1,31 +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;
var stringLength = 0;
var inputText;
function writeContent()
{
inputText = document.getElementById('errormsg').innerHTML;
if (charIndex === -1) {
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('echoerror').innerHTML;
initString = initString.replace(/<span.*$/gi,"");

var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);

if (nextFourChars === '<br>') {
theChar = '<br>';
charIndex+=3;
}

initString = initString + theChar + "<span id='blink'>▌</span>";
document.getElementById('echoerror').innerHTML = initString;

time = 35;
charIndex = charIndex/1 +1;
if (charIndex <= stringLength) {
setTimeout('writeContent(false)',time);
}
}
writeContent();</script>
<!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>
32 changes: 1 addition & 31 deletions dist/401.html
Original file line number Diff line number Diff line change
@@ -1,31 +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;
var stringLength = 0;
var inputText;
function writeContent()
{
inputText = document.getElementById('errormsg').innerHTML;
if (charIndex === -1) {
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('echoerror').innerHTML;
initString = initString.replace(/<span.*$/gi,"");

var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);

if (nextFourChars === '<br>') {
theChar = '<br>';
charIndex+=3;
}

initString = initString + theChar + "<span id='blink'>▌</span>";
document.getElementById('echoerror').innerHTML = initString;

time = 35;
charIndex = charIndex/1 +1;
if (charIndex <= stringLength) {
setTimeout('writeContent(false)',time);
}
}
writeContent();</script>
<!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>
32 changes: 1 addition & 31 deletions dist/403.html
Original file line number Diff line number Diff line change
@@ -1,31 +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;
var stringLength = 0;
var inputText;
function writeContent()
{
inputText = document.getElementById('errormsg').innerHTML;
if (charIndex === -1) {
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('echoerror').innerHTML;
initString = initString.replace(/<span.*$/gi,"");

var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);

if (nextFourChars === '<br>') {
theChar = '<br>';
charIndex+=3;
}

initString = initString + theChar + "<span id='blink'>▌</span>";
document.getElementById('echoerror').innerHTML = initString;

time = 35;
charIndex = charIndex/1 +1;
if (charIndex <= stringLength) {
setTimeout('writeContent(false)',time);
}
}
writeContent();</script>
<!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>
32 changes: 1 addition & 31 deletions dist/404.html
Original file line number Diff line number Diff line change
@@ -1,31 +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;
var stringLength = 0;
var inputText;
function writeContent()
{
inputText = document.getElementById('errormsg').innerHTML;
if (charIndex === -1) {
charIndex = 0;
stringLength = inputText.length;
}
var initString = document.getElementById('echoerror').innerHTML;
initString = initString.replace(/<span.*$/gi,"");

var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);

if (nextFourChars === '<br>') {
theChar = '<br>';
charIndex+=3;
}

initString = initString + theChar + "<span id='blink'>▌</span>";
document.getElementById('echoerror').innerHTML = initString;

time = 35;
charIndex = charIndex/1 +1;
if (charIndex <= stringLength) {
setTimeout('writeContent(false)',time);
}
}
writeContent();</script>
<!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>
Loading

0 comments on commit ff5d543

Please sign in to comment.