Skip to content

Creating Your First Website

Jump to bottom
astronomizedev edited this page Aug 30, 2019 · 4 revisions

Once you have LopJS installed(if you don't, see Getting Started), you can make your first website!

LopJS reads JSON and converts it into HTML, so the first thing you will need is a JSON file. I'm calling mine creating-your-first-website.json. In your JSON file, you will need 2 objects, one called imports, which stores all the data that would be in the <head> tag in HTML, and the uiObjects object, which stores all the visible items on the website.

So, with this in mind, this is what your JSON file should look like;

{
    "imports": {
    },

    "uiObjects": {
    }
}

Now, lets get started making some objects. I will be creating a header saying 'Hello, World!'

{
    "imports": {
    },

    "uiObjects": {
        "title": {
            "type": "h1",
            "value": "Hello, World!",
            "attributes": {
            }
        }
    }
}

type is the type of object, in this case it's h1, which would be <h1></h1> in HTML. value is the text of an object(aka innerHTML). Every object requires a type and value object. attributes is the attributes of an object. Attributes can be anything like id, class, or even events like onclick! Speaking of which, I am going to add an ID to my object.

{
    "imports": {
    },

    "uiObjects": {
        "title": {
            "type": "h1",
            "value": "Hello, World!",
            "attributes": {
                "id": "title"
            }
        }
    }
}

Now, in my imports I can add CSS like so:

{
    "imports": {
        "title": {
            "type": "style",
            "value": "#title { color: red }"
        }
    },

    "uiObjects": {
        "title": {
            "type": "h1",
            "value": "Hello, World!",
            "attributes": {
                "id": "title"
            }
        }
    }
}

You can add literally any object HTML supports, so get creative! Just make sure your objects have the type and value objects!

Oh yeah, I forgot to mention, lets use LopJS to translate our JSON to HTML. the command is lopjs [filename]. In my case, [filename] is replaced with creating-your-first-website.json, like this:

lopjs creating-your-first-website.json

LopJS generates a file called [filename].html, for me, again, its creating-your-first-website.html and this is the html it outputted:

<!-- Page generated by LopJS. -->
<!DOCTYPE html>
<html>
    <head>
        <style>#div { color: red; }</style>
    </head>
    
    <body>
        <div id="div">Hello, World!</div>
    </body>
</html>

If you have any issues or there's a feature you would like added, open an issue here!

Clone this wiki locally