Merge pull request #5 from mbStavola/html-styling

Html styling

SLY.md

@@ -47,6 +47,8 @@ There is also a fixed set of attributes which you can define. They are as follow
     - the font of a text block. Must be a string value.
 - fontColor
     - the font color of a text block. Can be either the name of a color (ex: "black") or a color literal.
+- fontSize
+    - the font size of a text block. Must be an integer value.
 - justify
     - the justification for a text block. Accepted values are "left", "center", or "right".
 

examples/basic.sly

@@ -18,6 +18,7 @@ tealBlue = (78, 205, 196);
 @backgroundColor = coolGray;
 
 @font = "Fira Code";
+@fontSize = 42;
 @fontColor = tealBlue;
 @justify = "center";
 
@@ -29,6 +30,7 @@ This is an example of Slydes
 
 [First Slide]
 @font = "Fira Code";
+@fontSize = 42;
 @fontColor = tealBlue;
 @justify = "center";
 
@@ -39,16 +41,14 @@ Title Text
 [[Body - Point 1]]
 @justify = "left";
 @font = "Times New Roman";
+@fontSize = 32;
 @fontColor = paleGreen;
 
 ---
 - This is my first point
 ---
 
 [[Body - Point 2]]
-@justify = "left";
-@font = "Times New Roman";
-@fontColor = paleGreen;
 
 ---
 - This is my second point

pkg/lang/compile.go

@@ -143,6 +143,26 @@ func (comp DefaultCompiler) Compile(statements []Statement) (types.Show, error)
 
 					block.Style.Color = c
 				}
+
+				break
+			case "fontSize":
+				switch value := attribute.value.(type) {
+				case VariableReference:
+					size, ok := variables[value.reference].(uint8)
+					if !ok {
+						return show, tokenErrorInfo(statement.token, "Font size attribute must be an integer")
+					}
+
+					block.Style.Size = size
+
+					break
+				case uint8:
+					block.Style.Size = value
+
+					break
+				default:
+					return show, tokenErrorInfo(statement.token, "Font size attribute must be an integer")
+				}
 			}
 		}
 	}

pkg/types/types.go

@@ -56,12 +56,14 @@ func NewBlock() Block {
 type Style struct {
 	Color         color.Color
 	Font          string
+	Size          uint8
 	Justification Justification
 }
 
 func NewStyle() Style {
 	return Style{
 		Color: color.Black,
 		Font:  "Times New Roman",
+		Size:  12,
 	}
 }

render/html/render.go

@@ -1,8 +1,10 @@
 package html
 
 import (
+	"fmt"
 	"github.com/mbStavola/slydes/pkg/types"
 	"html/template"
+	"image/color"
 	"os"
 )
 
@@ -11,22 +13,49 @@ func Render(show types.Show) error {
 		"count": func(slides []types.Slide) int {
 			return len(slides) - 1
 		},
+		"style": func(style types.Style) template.CSS {
+			fontColor := fontColorStyle(style.Color)
+			styleText := fmt.Sprintf(
+				"font-size: %dpx; font-family: %s; text-align: %s; color: %s;",
+				style.Size,
+				style.Font,
+				style.Justification,
+				fontColor,
+			)
+			return template.CSS(styleText)
+		},
+		"color": fontColorStyle,
 	}
 	slideshow, err := template.New("slideshow").Funcs(helpers).Parse(`
-<h1>Slideshow</h1>
 <div class="content">
     {{range $i, $slide := .Slides}}
-		<div class="slide hide" id="slide-{{ $i }}">
+		<div class="slide hide" id="slide-{{ $i }}" style="background-color: {{ color $slide.Background }};">
 			{{range $j, $block := $slide.Blocks}}
-				<div class="block" id="slide-{{ $i }}-block-{{ $j }}">
-					{{ $block.Words }}
+				<div class="block" id="slide-{{ $i }}-block-{{ $j }}" style="{{ style $block.Style }}">
+					<span>{{ $block.Words }}</span>
 				</div>
 			{{end}}
         </div>
     {{end}}
 </div>
 
 <style>
+	body, html {
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	.slide {
+		width: 100%;
+		height: 100%;
+		padding: 2em;
+	}
+
+	.block > * {
+		white-space: pre-line;
+	}
+
 	.hide {
 		display: none;
 	}
@@ -78,3 +107,16 @@ func Render(show types.Show) error {
 
 	return slideshow.Execute(os.Stdout, show)
 }
+
+func fontColorStyle(color color.Color) template.CSS {
+	r, g, b, a := color.RGBA()
+	convert := func(x uint32) uint8 {
+		return uint8((float32(x) / 65535.0) * 255.0)
+	}
+
+	// Place rgba values in a range of 0 to 255
+	r2, g2, b2, a2 := convert(r), convert(g), convert(b), convert(a)
+	colorStyle := fmt.Sprintf("rgba(%d, %d, %d, %d)", r2, g2, b2, a2)
+
+	return template.CSS(colorStyle)
+}