@@ -1,2 +1,2 @@
-webInput
-webOutput
+/webInput
+/webOutput

@@ -8,6 +8,9 @@
 
 ## Example
 
+#### See the full example on https://github.com/arnaucode/konstrui/tree/master/example
+
+
 - Simple project structure example:
 
 ```

@@ -0,0 +1,59 @@
+.collection{
+    border: 0!important;
+}
+.collection-item{
+    background-color: rgba(0,0,0,0)!important;
+    border: 0px!important;
+}
+.collection-item:hover{
+    background-color: rgba(255,255,255,0.1)!important;
+}
+
+
+/* login */
+.o_loginBackground{
+    position: absolute;
+
+    height: 100%!important;
+    width: 100%;
+    min-height: auto;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+    background-position: center;
+    background-image: url('img/loginBackground.jpg');
+    text-align: center;
+    /*color: white;*/
+
+    /* Create the parallax scrolling effect */
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    color: #ffffff;
+
+}
+@font-face {
+    font-family: 'Otterly Adorable';
+    src: url('fonts/fourHand_TRIAL.ttf');
+}
+.o_loginBackground h1{
+    color: #ffffff!important;
+    margin: 10px;
+    font-family: 'Otterly Adorable'
+    /*font-weight: bold;*/
+}
+
+.o_floatRight{
+    float: right;
+}
+.o_textRight{
+    text-align: right;
+}
+.o_badge{
+    border-radius: 8px;
+    margin: 5px;
+    padding: 2px 5px;
+}

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>My First Heading</h1>
+<p>My first paragraph.</p>
+
+<konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>
+
+</body>
+</html>

@@ -0,0 +1,15 @@
+{
+    "title": "Prova web",
+    "author": "arnaucode",
+    "github": "github.com/arnaucode",
+    "website": "arnaucode.com",
+    "files": [
+        "index.html",
+        "projects.html",
+        "app.css"
+    ],
+    "repeatPages": [{
+        "htmlPage": "projectPage.html",
+        "data": "templates/projectTemplate.json"
+    }]
+}

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>{{title}} - {{author}}</title>
+<body>
+    <h1>Project individual page</h1>
+    <h2>{{title}}</h2>
+    <p>{{author}}</p>
+    <p>{{description}}</p>
+</body>
+
+</html>

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>Projects page</h1>
+
+<konstrui-template html="templates/projectTemplate.html" data="templates/projectTemplate.json"></konstrui-template>
+
+</body>
+</html>

@@ -0,0 +1,6 @@
+<div class="class1">
+    <div id="{{idAuthor}}" class="class2">Project {{title}}</div>
+    <div class="classAuthor">Developed by: {{author}}</div>
+    <div class="class3">{{description}}</div>
+    <a href="{{link}}" target="_blank">View project page</a>
+</div>

@@ -0,0 +1,33 @@
+[{
+        "title": "Smartphone App",
+        "idAuthor": "author1",
+        "author": "User1",
+        "description": "This is the first project",
+        "link": "https://github.com",
+        "pageName": "smartphoneApp"
+    },
+    {
+        "title": "Botnet",
+        "idAuthor": "author2",
+        "author": "User2",
+        "description": "This project is a botnet",
+        "link": "https://github.com",
+        "pageName": "botnet"
+    },
+    {
+        "title": "Webpage",
+        "idAuthor": "author3",
+        "author": "User1",
+        "description": "This project is a webpage",
+        "link": "https://github.com",
+        "pageName": "webpage"
+    },
+    {
+        "title": "Script",
+        "idAuthor": "author4",
+        "author": "User1",
+        "description": "This project is a script to save time",
+        "link": "https://github.com",
+        "pageName": "script"
+    }
+]

@@ -0,0 +1,5 @@
+<div class="class1" id="user[[i]]">
+    <div id="username[[i]]" class="class2">{{username}}</div>
+    <div id="description[[i]]" class="class2">{{description}}</div>
+    <div class="class2">{{phone}}</div>
+</div>

@@ -0,0 +1,16 @@
+[{
+        "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"
+    }
+]

@@ -0,0 +1,59 @@
+.collection{
+    border: 0!important;
+}
+.collection-item{
+    background-color: rgba(0,0,0,0)!important;
+    border: 0px!important;
+}
+.collection-item:hover{
+    background-color: rgba(255,255,255,0.1)!important;
+}
+
+
+/* login */
+.o_loginBackground{
+    position: absolute;
+
+    height: 100%!important;
+    width: 100%;
+    min-height: auto;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+    background-position: center;
+    background-image: url('img/loginBackground.jpg');
+    text-align: center;
+    /*color: white;*/
+
+    /* Create the parallax scrolling effect */
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    color: #ffffff;
+
+}
+@font-face {
+    font-family: 'Otterly Adorable';
+    src: url('fonts/fourHand_TRIAL.ttf');
+}
+.o_loginBackground h1{
+    color: #ffffff!important;
+    margin: 10px;
+    font-family: 'Otterly Adorable'
+    /*font-weight: bold;*/
+}
+
+.o_floatRight{
+    float: right;
+}
+.o_textRight{
+    text-align: right;
+}
+.o_badge{
+    border-radius: 8px;
+    margin: 5px;
+    padding: 2px 5px;
+}

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Botnet - User2</title>
+<body>
+    <h1>Project individual page</h1>
+    <h2>Botnet</h2>
+    <p>User2</p>
+    <p>This project is a botnet</p>
+</body>
+
+</html>

@@ -0,0 +1,16 @@
+<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p><div class="class1" id="user0">
+    <div id="username0" class="class2">Michaela Doe</div>
+    <div id="description0" class="class2">Hi, I'm here to code</div>
+    <div class="class2">456456456</div>
+</div>
+<div class="class1" id="user1">
+    <div id="username1" class="class2">John Doe</div>
+    <div id="description1" class="class2">Hi, I'm here</div>
+    <div class="class2">123456789</div>
+</div>
+<div class="class1" id="user2">
+    <div id="username2" class="class2">Myself</div>
+    <div id="description2" class="class2">How are you</div>
+    <div class="class2">no phone</div>
+</div>
+</body></html>

@@ -0,0 +1,25 @@
+<!DOCTYPE html><html><body><h1>Projects page</h1><div class="class1">
+    <div id="author1" class="class2">Project Smartphone App</div>
+    <div class="classAuthor">Developed by: User1</div>
+    <div class="class3">This is the first project</div>
+    <a href="https://github.com" target="_blank">View project page</a>
+</div>
+<div class="class1">
+    <div id="author2" class="class2">Project Botnet</div>
+    <div class="classAuthor">Developed by: User2</div>
+    <div class="class3">This project is a botnet</div>
+    <a href="https://github.com" target="_blank">View project page</a>
+</div>
+<div class="class1">
+    <div id="author3" class="class2">Project Webpage</div>
+    <div class="classAuthor">Developed by: User1</div>
+    <div class="class3">This project is a webpage</div>
+    <a href="https://github.com" target="_blank">View project page</a>
+</div>
+<div class="class1">
+    <div id="author4" class="class2">Project Script</div>
+    <div class="classAuthor">Developed by: User1</div>
+    <div class="class3">This project is a script to save time</div>
+    <a href="https://github.com" target="_blank">View project page</a>
+</div>
+</body></html>

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Script - User1</title>
+<body>
+    <h1>Project individual page</h1>
+    <h2>Script</h2>
+    <p>User1</p>
+    <p>This project is a script to save time</p>
+</body>
+
+</html>

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Smartphone App - User1</title>
+<body>
+    <h1>Project individual page</h1>
+    <h2>Smartphone App</h2>
+    <p>User1</p>
+    <p>This is the first project</p>
+</body>
+
+</html>

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Webpage - User1</title>
+<body>
+    <h1>Project individual page</h1>
+    <h2>Webpage</h2>
+    <p>User1</p>
+    <p>This project is a webpage</p>
+</body>
+
+</html>

@@ -12,8 +12,8 @@
 //dataEntry is the map used to create the array of maps, where the templatejson data is stored
 type dataEntry map[string]string
 
-func readFile(folderPath string, filename string) string {
-	dat, err := ioutil.ReadFile(folderPath + "/" + filename)
+func readFile(path string) string {
+	dat, err := ioutil.ReadFile(path)
 	check(err)
 	return string(dat)
 }
@@ -78,7 +78,8 @@ return templatePath, data
 }
 
 func useTemplate(templatePath string, dataPath string) string {
-	templateContent := readFile(rawFolderPath, templatePath)
+	filepath := rawFolderPath + "/" + templatePath
+	templateContent := readFile(filepath)
 	entries := getDataFromJson(rawFolderPath + "/" + dataPath)
 	generated := generateFromTemplateAndData(templateContent, entries)
 	return generated
@@ -107,3 +108,23 @@ func writeFile(path string, newContent string) {
 	err := ioutil.WriteFile(path, []byte(newContent), 0644)
 	check(err)
 }
+
+func generatePageFromTemplateAndData(templateContent string, entry dataEntry) string {
+	var entryContent string
+	entryContent = templateContent
+	//first, get the map keys
+	var keys []string
+	for key, _ := range entry {
+		keys = append(keys, key)
+	}
+	//now, replace the keys with the values
+	for j := 0; j < len(keys); j++ {
+		entryContent = strings.Replace(entryContent, "{{"+keys[j]+"}}", entry[keys[j]], -1)
+	}
+	return entryContent
+}
+func getHtmlAndDataFromRepeatPages(page RepeatPages) (string, []dataEntry) {
+	templateContent := readFile(rawFolderPath + "/" + page.HtmlPage)
+	data := getDataFromJson(rawFolderPath + "/" + page.Data)
+	return templateContent, data
+}

@@ -20,7 +20,8 @@ if extension == "html" {
 			fileContent := putTemplates(folderPath, f.Name())
 			writeFile(newDir+"/"+f.Name(), fileContent)
 		} else if extension == "css" {
-			fileContent := readFile(folderPath, f.Name())
+			path := folderPath + "/" + f.Name()
+			fileContent := readFile(path)
 			writeFile(newDir+"/"+f.Name(), fileContent)
 		}
 		if len(fileNameSplitted) == 1 {
@@ -42,8 +43,20 @@ if extension == "html" {
 			fileContent := putTemplates(folderPath, fName)
 			writeFile(newDir+"/"+fName, fileContent)
 		} else if extension == "css" {
-			fileContent := readFile(folderPath, fName)
+			path := folderPath + "/" + fName
+			fileContent := readFile(path)
 			writeFile(newDir+"/"+fName, fileContent)
+		}
+	}
+
+	c.Cyan("starting to generate Pages to repeat")
+	for i := 0; i < len(konstruiConfig.RepeatPages); i++ {
+		pageTemplate, data := getHtmlAndDataFromRepeatPages(konstruiConfig.RepeatPages[i])
+		for j := 0; j < len(data); j++ {
+			fmt.Println(j)
+			generatedPage := generatePageFromTemplateAndData(pageTemplate, data[j])
+			fmt.Println(data[j])
+			writeFile(newDir+"/"+data[j]["pageName"]+"Page.html", generatedPage)
 		}
 	}
 }

@@ -6,13 +6,20 @@ "fmt"
 	"io/ioutil"
 )
 
+//RepeatPages is from the json config, is an array inside KonstruiConfig
+type RepeatPages struct {
+	HtmlPage string `json:"htmlPage"`
+	Data     string `json:"data"`
+}
+
 //KonstruiConfig is the configuration from the file konstruiConfig.json, on the folder /webInput
 type KonstruiConfig struct {
-	Title   string   `json:"title"`
-	Author  string   `json:"author"`
-	Github  string   `json:"github"`
-	Website string   `json:"website"`
-	Files   []string `json:"files"`
+	Title       string   `json:"title"`
+	Author      string   `json:"author"`
+	Github      string   `json:"github"`
+	Website     string   `json:"website"`
+	Files       []string `json:"files"`
+	RepeatPages []RepeatPages
 }
 
 var konstruiConfig KonstruiConfig