Skip to content

README.md

Latest commit

 

History

History
118 lines (89 loc) · 2.59 KB

README.md

File metadata and controls

118 lines (89 loc) · 2.59 KB

Error Pages

In this repo we intend to save our error pages

Installing requirements

npm install

Building error pages

npm run build

Modifying the pages

HTML

To change the html content for the pages you have to modify the data/vauxoo.json file. That file contains a json object with a key called pages, where every key inside that represents a directory, which in turn is another object with every key representing an html file.

So if you have:

{
  "pages": {
    "dir1": {
      "page1": {

      },
      "page1": {

      }
    },
    "dir2": {
      "page3": {

      }
    }
  }
}

The script will generate 3 pages:

  1. dir1/page1.html
  2. dir1/page2.html
  3. dir2/page3.html

Each page object must contain the following attributes:

  • code (string|int) The error code for the page
  • msg (string) The title message for the page
  • emoji (string) The emoji code (you can get them from http://emojisymbols.com/emojilist.php)
  • content (array) An array with the content blocks, that are objects with:
    • type (string) "details" or "details small" or "links"
    • text (string) (if type is "details" or "details small") The content for the block
    • links (array) (if type is "links") An array with each key representing a link label and its value an url

Something like:

{
  "code": 404,
  "msg": "Page not found",
  "emoji": "😵",
  "content": [
    {
      "type": "details",
      "text": "Incorrect page"
    },
    {
      "type": "details small",
      "text": "The page you are looking for is not here. Try:"
    },
    {
      "type": "links",
      "links": {
        "Home": "http://somesite.domain/",
        "About us": "http://somesite.domain/about"
      }
    }
  ]
}

Will get you something like this:

image

CSS

To modify the style of the pages go to the src/less/style.less and modify the values for the colors in the section titled /* Variables */.

Those variables are:

  • bgcolor: background color.
  • fontcolor: the general font color.
  • fontcolor-light: the color for the text in the footer section.
  • hlcolor: highlight color for the links and emoji.
  • separator: the color for the separator after the title msg.

So, setting them like:

@bgcolor: #333333;
@fontcolor: #F9F9F9;
@fontcolor-light: #DDDDDD;
@hlcolor: #3AFF7A;
@separator: #DDDDDD;

Will get you:

image