JSON Defined HTML Page

Used to quickly create small and simple content pages. All the content is defined in the index.json file. Since version 1.1.0 it's possible to define the content in index.js, so the page content data is loaded together with the html and not only after the page has been loaded. For backwards compatibility the JSON file is loaded if the page data object is not defined or the JS file is not found.

Examples

Common Source Code Modifications

index.html head section: title and favicon

index.js Specification

A const object has to be defined. The structure of it is the same as for the JSON file.

const pageData =
{
    content: [ /* ... */ ],
    footer: [ /* ... */ ]
};

index.json Specification

The main object contains two arrays named content and footer, each containing content defining objects.

Optionally the config and/or the defaultStyle objects can be added.

Content Defining Objects

Each object must provide the type key. Types are:

titleX

Where X can be 1, 2, or 3.

Key	Value Type	Description
`text`	string
`htmlStyle`	string	optional

text

Key	Value Type	Description
`text`	string
`htmlStyle`	string	optional

link

Key	Value Type	Description
`url`	string
`text`	string	optional If not specified the display text will be the same as the url.
`download`	bool	optional
`newTab`	bool	optional
`htmlStyle`	string	optional

spacer

Key	Value Type	Description
`value`	number
`htmlStyle`	string	optional

list

Key	Value Type	Description
`items`	array of objects	Contains content defining objects
`htmlStyle`	string	optional

List items are normal content defining objects, which can have additional optional keys:

Key	Value Type	Description
`comment`	string	optional
`liHtmlStyle`	string	optional

html

Key	Value Type	Description
`text`	string	The whole html element

Configuration

object, optional

Key	Value Type	Default Value	Description
`maxWidth`	string	not set	optional Max width of `#mainContainer`
`color1`	string	`#d3d3d3`	optional Color scheme
`color2`	string	`#b3b3b3`	optional Color scheme
`color3`	string	`#424242`	optional Color scheme
`colorText`	string	`#424242`	optional Color scheme
`colorHighlight`	string	`#4b84ff`	optional Color scheme
`fontFamily`	string	`Helvetica, sans-serif`	optional
`center`	bool	not set	optional Only relevant, if `maxWidth` is smaller than the window width

Default Styles

array, optional

The array contains the following objects:

Key	Value Type	Description
`type`	string	One of the content defining objects `type`
`css`	string	The css style string

An additional type is listItem, which affects each object in the list.items array.

Does neither affect childs of a list item nor the footer.

oblaser/json-defined-html-page