konstrui

How to use

Simple example:

Simple project structure example:

webInput/
    konstruiConfig.json
    index.html
    templates/
        userTemplate.html
        userTemplate.json

Simple output project structure example:

webOutput/
        index.html

Set the html file:

<!DOCTYPE html>
    <html>
    <body>

    <konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>

    </body>
    </html>

Set the template file:

<div class="class1">
        <div class="class2">{{username}}</div>
        <div class="class2">{{description}}</div>
        <div class="class2">{{phone}}</div>
    </div>

Set the template data file:

[{
            "username": "Michaela Doe",
            "description": "Hi, I'm here to code",
            "phone": "456456456"
        },
        {
            "username": "John Doe",
            "description": "Hi, I'm here",
            "phone": "123456789"
        },
        {
            "username": "Myself",
            "description": "How are you",
            "phone": "no phone"
        }
    ]

Set the configuration file konstruiConfig.json in the webInput directory:

{
        "title": "Web example",
        "author": "arnaucube",
        "github": "github.com/arnaucube",
        "website": "arnaucube.com",
        "files": [
            "index.html",
            "projects.html",
            "app.css"
        ]
    }

Execute konstrui

./konstrui

Output:

<!DOCTYPE html>
<html>

<body>
    <div class="class1">
        <div class="class2">Michaela Doe</div>
        <div class="class2">Hi, I'm here to code</div>
        <div class="class2">456456456</div>
    </div>
    <div class="class1">
        <div class="class2">John Doe</div>
        <div class="class2">Hi, I'm here</div>
        <div class="class2">123456789</div>
    </div>
    <div class="class1">
        <div class="class2">Myself</div>
        <div class="class2">How are you</div>
        <div class="class2">no phone</div>
    </div>
</body>

</html>