‚̧Noiseless Peaceful Morning

    johannes

    0.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    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": "your@email.address",
        "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": "your@email.address",
        "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

    Keywords

    none

    Install

    npm i johannes

    DownloadsWeekly Downloads

    1

    Version

    0.0.0

    License

    MIT

    Unpacked Size

    8.04 kB

    Total Files

    3

    Last publish

    Collaborators

    • seanmcp