fix compilation and organize

web/components/carousel/example.v

@@ -0,0 +1,29 @@
+module carousel
+
+pub const example_heroscript="
+
+	!!intro1.new name:'myintro' 
+
+	!!intro1.myintro_add
+		title: 'Sepia'
+		description: '
+					Made for photographers, photo studios, design agencies.
+					Create your own unique and beautiful photography website!
+				'
+		subtitle: 'Photography Portfolio Theme'
+		background_image: 'assets/img/intro/intro-10.jpg'
+		button_primary_text: 'Buy It Now!'
+		button_primary_url: 'https://example.com/learn-more'
+		button_secondary_text: 'Discover More'
+		button_secondary_url: 'albums-grid-fluid-2.html'
+
+	!!intro1.myintro_add
+		title: 'Sepia 2'
+		description: 'Made for photographers 2, photo studios, design agencies.<br>Create your own unique and beautiful photography website!'
+		subtitle: 'Photography Portfolio Theme'
+		background_image: 'assets/img/intro/intro-10.jpg'
+		button_primary_text: 'Buy It Now!'
+		button_primary_url: 'https://example.com/learn-more'
+		button_secondary_text: 'Discover More'
+		button_secondary_url: 'albums-grid-fluid-2.html'
+"

web/components/carousel/html.v

@@ -0,0 +1,5 @@
+module carousel
+
+pub fn (carousel Carousel) html() string {
+	return $tmpl("templates/main.html")
+}

web/components/carousel/model.v

@@ -0,0 +1,24 @@
+module carousel
+
+@[heap]
+pub struct Carousel {
+pub mut:
+    items []Item
+}
+
+pub struct Item {
+pub mut:
+    title            string
+    subtitle         string
+    description      string
+    background_image string
+    button_primary   Button
+    button_secondary Button
+}
+
+pub struct Button {
+pub mut:
+    text string
+    url  string
+}
+

web/components/carousel/play.v

@@ -0,0 +1,60 @@
+module carousel
+
+import freeflowuniverse.crystallib.core.playbook {PlayBook}
+
+@[params]
+pub struct PlayParams{
+pub mut:
+	args map[string]string
+	defaults bool
+}
+
+//will have all the results, key is in this case intro1.${name}
+//this allows us to feed e.g. markdown to all renderers and then we get the data filled in what is found on page
+pub fn play(mut plbook PlayBook, params PlayParams) !map[string]Carousel{
+	mut result:=map[string]Carousel{}
+
+	if plbook.actions.len == 0 && params.defaults {
+		plbook = playbook.new(text: example_heroscript)!
+	}
+
+	actions0 := plbook.find(filter: 'intro1.new')!
+	for action0 in actions0{
+		mut p0 := action0.params
+		name := p0.get_default('name','default')!
+		key:="intro1.${name}"
+		carousel := play_carousel(mut plbook, name)!
+		println('carousel ${name}\n${carousel}')
+		result[key]=carousel
+	}
+
+    return result
+}
+
+pub fn play_carousel(mut plbook PlayBook, name string) !Carousel {
+	mut carousel := Carousel{}
+	
+	// Process add_item actions
+	actions := plbook.find(filter: 'intro1.${name}_add')!
+	for action in actions {
+		mut p := action.params
+
+		item := Item{
+			title: p.get('title')!
+			subtitle: p.get('subtitle')!
+			description: p.get('description')!.replace("\n","<br>")
+			background_image: p.get('background_image')!
+			button_primary: Button{
+				text: p.get('button_primary_text')!
+				url: p.get('button_primary_url')!
+			}
+			button_secondary: Button{
+				text: p.get('button_secondary_text')!
+				url: p.get('button_secondary_url')!
+			}
+		}
+
+		carousel.items << item
+	}
+	return carousel
+}

web/components/carousel/templates/main.html

@@ -45,7 +45,7 @@
                     data-dots-speed="800"................(milliseconds)
             -->
             <div class="owl-carousel cc-height-5 cursor-grab dots-right bg-dark" data-items="1" data-loop="true" data-nav="true" data-nav-speed="500" data-dots-speed="500" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-speed="500" data-autoplay-hover-pause="true">
-                @for item in data.items
+                @for item in carousel.items
                 <!-- Begin carousel item -->
                 <div class="cc-item">
                     <!-- Element cover -->

web/components/contact/html.v

@@ -0,0 +1,5 @@
+module contact
+
+fn (c ContactPage) html() string {
+	return $tmpl('./contact.html')
+}

web/components/contact/model.v

@@ -0,0 +1,15 @@
+module contact
+
+struct ContactPage {
+	address string
+	phone   string
+	email   string
+}
+
+fn default_contact_page() ContactPage {
+	return ContactPage{
+		address: '121 King Street, Melbourne, Australia'
+		phone: '+123 456 789 000'
+		email: 'company@email.com'
+	}
+}

web/components/contact/templates/contact.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Contact Page</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/theme.css">
+</head>
+<body>
+
+<section id="contact-section">
+    <div class="contact-section-inner tt-wrap">
+        <div class="split-box">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-6 col-lg-height col-lg-middle bg-image">
+                        <div class="cover"></div>
+                        <div class="split-box-content text-left no-padding-left no-padding-right">
+                            <div class="contact-info-wrap">
+                                <div class="contact-info">
+                                    <p><i class="fas fa-home"></i> Address: @{address}</p>
+                                    <p><i class="fas fa-phone"></i> Phone: @{phone}</p>
+                                    <p><i class="fas fa-envelope"></i> Email: <a href="mailto:@{email}">@{email}</a></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-6 col-lg-height col-lg-middle no-padding">
+                        <div class="split-box-content">
+                            <form id="contact-form">
+                                <div class="contact-form-inner text-left">
+                                    <div class="form-group">
+                                        <input type="text" class="form-control" name="name" placeholder="Your Name" required>
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="email" class="form-control" name="email" placeholder="Your Email" required>
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="text" class="form-control" name="subject" placeholder="Subject" required>
+                                    </div>
+                                    <div class="form-group">
+                                        <textarea class="form-control" name="message" rows="4" placeholder="Your Message" required></textarea>
+                                    </div>
+                                    <button type="submit" class="btn btn-primary btn-lg margin-top-40">Send Message</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script src="assets/vendor/jquery/jquery.min.js"></script>
+<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
+<script src="assets/js/theme.js"></script>
+
+</body>
+</html>

web/components/intro/render.v

@@ -1,114 +0,0 @@
-module intro
-
-import freeflowuniverse.crystallib.core.playbook
-
-pub struct Item {
-pub mut:
-    title            string
-    subtitle         string
-    description      string
-    background_image string
-    button_primary   Button
-    button_secondary Button
-}
-
-pub struct Button {
-pub mut:
-    text string
-    url  string
-}
-
-pub struct Data {
-pub mut:
-    items []Item
-}
-
-
-const example_heroscript="
-
-	!!intro1.new name:'myintro' 
-
-	!!intro1.myintro_add
-		title: 'Sepia'
-		description: '
-					Made for photographers, photo studios, design agencies.
-					Create your own unique and beautiful photography website!
-				'
-		subtitle: 'Photography Portfolio Theme'
-		background_image: 'assets/img/intro/intro-10.jpg'
-		button_primary_text: 'Buy It Now!'
-		button_primary_url: 'https://example.com/learn-more'
-		button_secondary_text: 'Discover More'
-		button_secondary_url: 'albums-grid-fluid-2.html'
-
-	!!intro1.myintro_add
-		title: 'Sepia 2'
-		description: 'Made for photographers 2, photo studios, design agencies.<br>Create your own unique and beautiful photography website!'
-		subtitle: 'Photography Portfolio Theme'
-		background_image: 'assets/img/intro/intro-10.jpg'
-		button_primary_text: 'Buy It Now!'
-		button_primary_url: 'https://example.com/learn-more'
-		button_secondary_text: 'Discover More'
-		button_secondary_url: 'albums-grid-fluid-2.html'
-"
-
-@[params]
-pub struct RenderArgs{
-pub mut:
-	text string
-	args map[string]string
-	defaults bool
-}
-
-//will have all the results, key is in this case intro1.${name}
-//this allows us to feed e.g. markdown to all renderers and then we get the data filled in what is found on page
-
-pub fn render(args_ RenderArgs) !map[string]string{
-	mut args:=args_
-
-	mut result:=map[string]string{}
-
-	if args.text =="" && args.defaults{
-		args.text = example_heroscript
-	}
-
- 	mut plbook := playbook.new(text: args.text)!
-    mut data := Data{}
-
-	actions0 := plbook.find(filter: 'intro1.new')!
-	for action0 in actions0{
-		mut p0 := action0.params
-		name := p0.get_default('name','default')!
-		key:="intro1.${name}"
-		
-		// Process add_item actions
-		actions := plbook.find(filter: 'intro1.${name}_add')!
-		for action in actions {
-			mut p := action.params
-
-			item := Item{
-				title: p.get('title')!
-				subtitle: p.get('subtitle')!
-				description: p.get('description')!.replace("\n","<br>")
-				background_image: p.get('background_image')!
-				button_primary: Button{
-					text: p.get('button_primary_text')!
-					url: p.get('button_primary_url')!
-				}
-				button_secondary: Button{
-					text: p.get('button_secondary_text')!
-					url: p.get('button_secondary_url')!
-				}
-			}
-
-			data.items << item
-		}
-
-		result[key]=$tmpl("templates/main.html")
-
-	}
-
-    return result	
-
-
-}

web/render.v

@@ -0,0 +1,75 @@
+module web
+
+import freeflowuniverse.crystallib.core.playbook
+import veb
+import web.components.carousel
+import freeflowuniverse.crystallib.ui.console
+import os
+
+pub fn render(mut ctx Context) !map[string]string {
+	mut components := map[string]string{}
+	
+	mut plbook := playbook.new(text: carousel.example_heroscript)!
+	carousels := carousel.play(mut plbook)!
+
+	for key, carousel in carousels {
+		if key in components {
+			panic('this should never happen')
+		}
+		components[key] = carousel.html()
+	}
+
+	//todo: here we need to add all renders we support
+	// if true{
+	// 	println(res)
+	// 	exit(1)
+	// }
+
+	return components
+}
+
+pub fn template_render(path string, content map[string]string)!string {
+	mut name:=os.base(path).to_lower()
+	name=name.all_before_last(".html")
+	c := match name{
+		"index"{
+			$tmpl('./templates/index.html')
+		}"blog-list-classic"{
+			$tmpl('./templates/blog-list-classic.html')		
+		}else{
+			return error("can't find template with name: ${name}")
+		}
+	}
+	//TODO: NEED to add the other templates, its a pitty we can't do this dynamic
+	return c
+}
+
+pub fn (mut app App) index(mut ctx Context) veb.Result {
+	return app.index2(mut ctx ,"")
+}
+
+@['/:path']    
+pub fn (mut app App) index2(mut ctx Context,path string) veb.Result {
+	mut templpath:="${path}"
+	if templpath==""{
+		templpath="index"
+	}
+	println(templpath)
+	console.print_debug("templpath : '${templpath}'")
+	
+	content:=render(mut ctx) or { 
+		ctx.res.set_status(.unknown)
+		return ctx.html('<h1>ERROR!</h1>${err}')
+	}
+	// mut tmp_var := map[string]dtm.DtmMultiTypeMap{}
+	// for key,val in content{
+	// 	tmp_var[key] = val
+	// }
+	//t:=app.dtm.expand(templpath,placeholders:&tmp_var)
+	t:= template_render(templpath,content)or { 
+		ctx.res.set_status(.unknown)
+		return ctx.html('<h1>ERROR TEMPLATE!</h1>${err}')
+	}
+	return ctx.html(t)
+}
+

web/templates/albums-archive.html

@@ -36,16 +36,16 @@
 		<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css"> <!-- bootstrap CSS (http://getbootstrap.com) -->
 
 		<!-- Libs and Plugins CSS -->
-		<link rel="stylesheet" href="assets/vendor/animsition/css/animsition.min.css"> <!-- Animsition CSS (http://git.blivesta.com/animsition/) -->
+		<link rel="stylesheet" href="/assets/vendor/animsition/css/animsition.min.css"> <!-- Animsition CSS (http://git.blivesta.com/animsition/) -->
-		<link rel="stylesheet" href="assets/vendor/fontawesome/css/fontawesome-all.min.css"> <!-- Font Icons CSS (https://fontawesome.com) Free version! -->
+		<link rel="stylesheet" href="/assets/vendor/fontawesome/css/fontawesome-all.min.css"> <!-- Font Icons CSS (https://fontawesome.com) Free version! -->
-		<link rel="stylesheet" href="assets/vendor/lightgallery/css/lightgallery.min.css"> <!-- lightGallery CSS (http://sachinchoolur.github.io/lightGallery) -->
+		<link rel="stylesheet" href="/assets/vendor/lightgallery/css/lightgallery.min.css"> <!-- lightGallery CSS (http://sachinchoolur.github.io/lightGallery) -->
-		<link rel="stylesheet" href="assets/vendor/owl-carousel/css/owl.carousel.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
+		<link rel="stylesheet" href="/assets/vendor/owl-carousel/css/owl.carousel.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
-		<link rel="stylesheet" href="assets/vendor/owl-carousel/css/owl.theme.default.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
+		<link rel="stylesheet" href="/assets/vendor/owl-carousel/css/owl.theme.default.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
-		<link rel="stylesheet" href="assets/vendor/ytplayer/css/jquery.mb.YTPlayer.min.css"> <!-- YTPlayer CSS (more info: https://github.com/pupunzi/jquery.mb.YTPlayer) -->
+		<link rel="stylesheet" href="/assets/vendor/ytplayer/css/jquery.mb.YTPlayer.min.css"> <!-- YTPlayer CSS (more info: https://github.com/pupunzi/jquery.mb.YTPlayer) -->
 
 		<!-- Template master CSS -->
-		<link rel="stylesheet" href="assets/css/helper.css">
+		<link rel="stylesheet" href="/assets/css/helper.css">
-		<link rel="stylesheet" href="assets/css/theme.css">
+		<link rel="stylesheet" href="/assets/css/theme.css">
 
 		<!-- Template dark style CSS (just uncomment line below to enable dark style) -->
 			<!-- <link rel="stylesheet" href="assets/css/dark-style.css"> -->

web/view.v

@@ -1,86 +1,21 @@
 module web
 
-//import freeflowuniverse.crystallib.osal
 import veb
-import web1.components.intro
+import web.components.carousel
 import freeflowuniverse.crystallib.ui.console
-// import rand
+import freeflowuniverse.crystallib.core.playbook
 import os
-// import json
-// import freeflowuniverse.crystallib.webserver.auth.jwt
-// import time
-//import x.templating.dtm
 
-pub fn render(mut ctx Context) !map[string]string {
+pub fn (app &App) carousel(mut ctx Context) veb.Result {
-	mut res:=map[string]string{}
+	mut plbook := playbook.new(text: carousel.example_heroscript) or {
-	res=intro.render(defaults:true)!
+		return ctx.server_error(err.str())
-	//todo: here we need to add all renders we support
-	// if true{
-	// 	println(res)
-	// 	exit(1)
-	// }
-
-	return res
-}
-
-pub fn template_render(path string, content map[string]string)!string {
-	mut name:=os.base(path).to_lower()
-	name=name.all_before_last(".html")
-	c := match name{
-		"index"{
-			$tmpl('./templates/index.html')
-		}"blog-list-classic"{
-			$tmpl('./templates/blog-list-classic.html')		
-		}else{
-			return error("can't find template with name: ${name}")
-		}
 	}
-	//TODO: NEED to add the other templates, its a pitty we can't do this dynamic
+	components := carousel.play(mut plbook) or {
-	return c
+		return ctx.server_error(err.str())
-}
-
-pub fn (mut app App) index(mut ctx Context) veb.Result {
-	return app.index2(mut ctx ,"")
-}
-
-@['/:path']    
-pub fn (mut app App) index2(mut ctx Context,path string) veb.Result {
-	mut templpath:="${path}"
-	if templpath==""{
-		templpath="index"
 	}
-	println(templpath)
+	return ctx.html(components['intro1.myintro'].html())
-	console.print_debug("templpath : '${templpath}'")
-	
-	content:=render(mut ctx) or { 
-		ctx.res.set_status(.unknown)
-		return ctx.html('<h1>ERROR!</h1>${err}')
-	}
-	// mut tmp_var := map[string]dtm.DtmMultiTypeMap{}
-	// for key,val in content{
-	// 	tmp_var[key] = val
-	// }
-	//t:=app.dtm.expand(templpath,placeholders:&tmp_var)
-	t:= template_render(templpath,content)or { 
-		ctx.res.set_status(.unknown)
-		return ctx.html('<h1>ERROR TEMPLATE!</h1>${err}')
-	}
-	return ctx.html(t)
 }
 
-// @['/api/connection-details'; get]
-// pub fn (app &App) participant_endpoint(mut ctx Context) veb.Result {
-
-// @['/blogs/']
-// pub fn (app &App) room(mut ctx Context) veb.Result {
-// 	return ctx.html($tmpl('./templates/room.html'))
-// }
-
-// pub fn (app &App) custom(mut ctx Context) veb.Result {
-// 	dollar := '$'
-// 	return ctx.html($tmpl('./templates/blog-list-grid.html'))
-// }
-
 // // Custom 404 handler
 pub fn (mut ctx Context) not_found() veb.Result {
 	ctx.res.set_status(.not_found)