1# Konstrui [![Go Report Card](https://goreportcard.com/badge/github.com/arnaucode/konstrui)](https://goreportcard.com/report/github.com/arnaucode/konstrui)
  2
  3web templating engine for static websites, written in Go lang
  4
  5
  6![konstrui](https://raw.githubusercontent.com/arnaucode/konstrui/master/media/konstrui.png "konstrui")
  7
  8
  9## Example
 10
 11- Simple project structure example:
 12
 13```
 14webInput/
 15    konstruiConfig.json
 16    index.html
 17    templates/
 18        userTemplate.html
 19        userTemplate.json
 20```
 21
 22- Set the html file:
 23
 24```html
 25<!DOCTYPE html>
 26<html>
 27<body>
 28
 29<h1>My First Heading</h1>
 30
 31<p>My first paragraph.</p>
 32
 33<konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>
 34
 35</body>
 36</html>
 37
 38```
 39
 40
 41- Set the template file:
 42
 43```html
 44<div class="class1" id="user[[i]]">
 45    <div id="username[[i]]" class="class2">{{username}}</div>
 46    <div id="description[[i]]" class="class2">{{description}}</div>
 47    <div class="class2">{{phone}}</div>
 48</div>
 49```
 50
 51- Set the template data file:
 52
 53```json
 54[{
 55        "username": "Michaela Doe",
 56        "description": "Hi, I'm here to code",
 57        "phone": "456456456"
 58    },
 59    {
 60        "username": "John Doe",
 61        "description": "Hi, I'm here",
 62        "phone": "123456789"
 63    },
 64    {
 65        "username": "Myself",
 66        "description": "How are you",
 67        "phone": "no phone"
 68    }
 69]
 70```
 71
 72- Set the configuration file konstruiConfig.json in the webInput directory:
 73
 74```json
 75{
 76    "title": "Web example",
 77    "author": "arnaucode",
 78    "github": "github.com/arnaucode",
 79    "website": "arnaucode.com",
 80    "files": [
 81        "index.html",
 82        "projects.html",
 83        "app.css"
 84    ]
 85}
 86```
 87
 88
 89- Execute konstrui
 90
 91```
 92./konstrui
 93```
 94
 95- Output:
 96
 97```html
 98<!DOCTYPE html>
 99<html>
100
101<body>
102    <h1>Heading</h1>
103    <p>Paragraph.</p>
104    <div class="class1" id="user0">
105        <div id="username0" class="class2">Michaela Doe</div>
106        <div id="description0" class="class2">Hi, I'm here to code</div>
107        <div class="class2">456456456</div>
108    </div>
109    <div class="class1" id="user1">
110        <div id="username1" class="class2">John Doe</div>
111        <div id="description1" class="class2">Hi, I'm here</div>
112        <div class="class2">123456789</div>
113    </div>
114    <div class="class1" id="user2">
115        <div id="username2" class="class2">Myself</div>
116        <div id="description2" class="class2">How are you</div>
117        <div class="class2">no phone</div>
118    </div>
119</body>
120
121</html>
122```