Johannes

🖨 A simple JSON to HTML printer

Project Board

Documentation

Johannes prints a valid, mobile-first, and responsive HTML page based on some simple JSON input. All you need is a data.json file and an index.html referencing Johannes' index.js and styles.css.

Overview

Johannes looks for a single data.json file from which to build a static site. That file contains basic information for building sections of content, or blocks, of the website. There are only two requirements for adding a new block to a website: type and data.

{
    "type": "blockType",
    "data": { ...blockData }
}

To add a new block to a site, simply add a new object like the one above content array in data.json. See the API below for specific data requirements for each block type.

Requirements

Favicons

Johannes looks for two PNG favicons in an assets/ directory: 16x16, and 32x32. They can be generated here.

assets/
 +-- favicon-16x16.png
 +-- favicon-32x32.png

Block types

Address

Street address.

Data:

"data": {
    "heading": "Address",
    "address": ["P. Sherman", "42 Wallaby Way", "Sydney"]
}

Options:

• backgroundColor: valid HTML color
• map: embed iframe src from Google Maps
• textAlign: enum('center', 'left', 'right')

Button

A link that looks like a button

"data": {
    "heading": "Heading",
    "text": "Button text",
    "href": "https://action.button/destination"
}

Options:

• buttonColor: valid HTML color (default: primaryColor variable)
• buttonTextColor: valid HTML color (default: white)
• textAlign: enum('center', 'left', 'right') (default: left)
• textColor: valid HTML color (default: inherit)

Contact

A list of contact options

Data:

"data": {
    "heading": "Contact us",
    "address": "100 Street Address, City, State 000001",
    "email": "[email protected]",
    "phone": "(555) 867-5309"
}

Options:

• alignment: enum('center', 'inline', 'inline-center') (default: inline left)
• backgroundColor: valid HTML color (default: contentBackground)
• icons: boolean (default: false)
• textColor: valid HTML color (default: contentBackground)

Form

A simple contact form that uses mailto: to trigger an email.

Data:

"data": {
    "email": "[email protected]",
    "heading": "Header",
    "message": "Message below the header"
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• buttonColor: valid HTML color (default: primaryColor variable)
• buttonTextColor: valid HTML color (default: white)
• textAlign: HEADER, BUTTON ONLY - enum('center', 'left', 'right') (default: left)

Gallery

A simple photo gallery. Technically the number of images supported is unlimited, but keep it to 5-10.

Data:

"data": {
    "heading": "Gallery",
    "images": [
        {
            "src": "assets/gallery/image1.jpg",
            "description": "Image 1"
        },
        {
            "src": "assets/gallery/image2.jpg",
            "description": "Image 2"
        }
    ]
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• textAlign: HEADER ONLY - enum('left', 'center', 'right') (default: left)
• textColor: valid HTML color (default: inherit)

Hero

Background image with text, call-to-action

"data": {
    "background": "https://path.to/image",
    "heading": "Heading",
    "body": ["Paragraph One", "Paragraph Two"],
    "action": {
        "text": "Button text",
        "href": "https://action.button/destination"
    }
}

Options:

• buttonColor: valid HTML color (default: primaryColor variable)
• buttonTextColor: valid HTML color (default: white)
• textAlign: enum('center', 'left', 'right') (default: left)
• textColor: valid HTML color (default: inherit)

Hours

A table of business hours

Data:

"data": {
    "heading": "Hours",
    "sunday": "Closed",
    "monday": "9:00-5:00",
    "tuesday": "9:00-5:00",
    "wednesday": "11:00-7:00",
    "thursday": "9:00-5:00",
    "friday": "9:00-5:00",
    "saturday": "10:00-2:00"
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• mode: enum('light', 'dark')
• textAlign: HEADER ONLY - enum('center', 'left', 'right') (default: left)

Html

HTML string containing elements.

Data:

"data": {
    "innerHTML": "<h1>Hello!</h1>"
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• textColor: valid HTML color (default: inherit)
• textAlign: enum('center', 'left', 'right') (default: left)

Image

A full-width image that optionally links externally.

Data:

"data": {
    "heading": "Bear",
    "src": "https://placebear.com/g/800/400",
    "description": "A bear doing bear things",
    "href": "https://path.to/destination"
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• caption: boolean (default: false)
• polaroid: boolean (default: false)
• textColor: valid HTML color (default: inherit)
• textAlign: enum('center', 'left', 'right') (default: left)

Logo

Displays a logo image, a title, and a tagline.

Data:

"data": {
    "src": "url",
    "heading": "Johannes Ltd. Co.",
    "tagline": "Printing for everyone."
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• centerContent: boolean (default: false)
• textColor: valid HTML color (default: inherit)

Social

Social media icons

Data:

"data": {
    "platforms": {
        "twitter": "https://twitter.com/mcpcodes",
        "linkedin": "https://linkedin.com/company/mcpdesign",
        "instagram": "https://instagram.com/mcp.design",
        "facebook": "https://facebook.com/mcpdesignga"
    }
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• mode: enum('light', 'dark')
• size: enum('lg', '2x', '3x', 4x')

Text

A heading (h1) followed by a number of paragraphs. Both are optional.

Data:

"data": {
    "heading": "Hello!",
    "paragraphs": [
        "Each string in the array becomes a paragraph.",
        "So this text block will have two."
    ]
}

Options:

• backgroundColor: valid HTML color (default: contentBackground)
• textColor: valid HTML color (default: inherit)
• textAlign: enum('center', 'left', 'right') (default: left)

Window

Image banner, no text

Data:

"data": {
    "url": "https://placebear.com/g/800/800"
}

Options:

• height: value in pixels (default: 10rem, ~160px)
• parallax: boolean

Content options

The following are available for all content types:

• stacked: boolean (removes padding-top on block)

Resources

• Autoprefixer
• Favic-o-matic