Static HTML

Today supports regular HTML, without any modification. All of the + features you'll see in these examples add on to the "normal experience". + For each example, you'll see the rendered result in the browser, plus + source files to show how that example is constructed. +

+ + + +

Sources for this example

+ + +

page.html

á¸!DOCTYPE htmlá³
+á¸htmlá³
+á¸headá³
+  á¸titleá³Example 1á¸/titleá³
+  á¸link rel="stylesheet" href="/style.css"á³
+á¸/headá³
+
+á¸bodyá³
+  á¸mainá³
+    á¸h1á³Static HTMLá¸/h1á³
+    á¸pá³Today supports regular HTML, without any modification. All of the
+      features you'll see in these examples add on to the "normal experience".
+      For each example, you'll see the rendered result in the browser, plus
+      source files to show how that example is constructed.
+    á¸/pá³
+
+    á¸h2á³Sources for this exampleá¸/h2á³
+    á¸!-- source-preview does not belong to the HTML specification, but elements
+      with - in the name are allowed! We're going to do something with this in
+      a second. --á³
+    á¸source-previewá³
+      á¸h3á³page.htmlá¸/h3á³
+      á¸preá³á¸codeá³...á¸/codeá³á¸/preá³
+    á¸/source-previewá³
+    á¸source-previewá³
+      á¸h3á³example.goá¸/h3á³
+      á¸preá³á¸codeá³...á¸/codeá³á¸/preá³
+    á¸/source-previewá³
+    á¸navá³
+      á¸a href="/ex02"á³Partsá¸/aá³
+      á¸a href="/"á³Back to Overviewá¸/aá³
+    á¸/navá³
+  á¸/mainá³
+á¸/bodyá³
+
+á¸/htmlá³

+ + +

example.go

// Copyright (C) 2024 early (LGPL)
+package ex01
+
+import (
+  "git.earlybird.gay/today-engine/page"
+)
+
+// Make a page like this, with page.New(name, file). Name doesn't matter much
+// for pages. File is a path to a file relative to *this Go file*, NOT the
+// working directory.
+// A Page is an http.Handler!
+var Page = page.New("ex01", "page.html")
+

+ +

Page with Parts

This page uses "parts" to create sections on the page. Parts are - HTML blocks that you can re-use. -

Parts

+ In the previous example, you saw a source-preview element, + which is not part of the HTML specification. However, custom elements with + a - in the name are allowed by the specification, because they are used + for the Web Components feature of the web platform. Today Engine borrows + this for use with server-side "parts". Examples will focus on these for + now, but we'll get into Web Components and how they're different later. +

+ Parts allow you to define custom elements that are rendered server-side, + before any content is sent to the user agent. Each part can execute some + behavior in Go, and decide how it is rendered based on the result. Here + is a part that generates a random number every time the page is reloaded. +

+ + + +

This isn't super useful.

Generating a random number doesn't do much.
We don't have any control over how the part chooses a number.
+ It has an h3, but what if we need an h4 because of where it is in the + document, or we want to change what the header says? +

+ Fortunately, these are solvable problems. In the next few examples, we'll + evaluate how to make replacable markup in parts using slots and pass data + using attributes. +

+ + + + +

Sources for this example

+ +

page.html

+ + +

example.go

+ +

Page with Parts

This page uses "parts" to create sections on the page. Parts are - HTML blocks that you can re-use. -

Template Data

Let's step back to talk about template data. Go provides templates - using "handlebars" notation to create server-side behavior on your - pages. For example, on this page, {{ `{{ .message }}` }} is - "{{ .message }}". -

You can also add functions, if the ones provided do not do everything - you need. On this page, {{ `{{ reverse "hello" }}`}} is - "{{ reverse "hello" }}". -

var index = page.New("index", "index.html", - page.OnLoad(func(data render.Data) error { - data.Set("message", "Hello, Today!") - return nil - }), - page.Funcs(template.FuncMap{ - "reverse": func(s string) string { - out := make([]byte, len(s)) - for i := range (len(s) + 1) / 2 { - j := len(s) - i - 1 - out[i] = s[j] - out[j] = s[i] - } - return string(out) - }, - }), -)

Passing Data to Parts

Sometimes, you may want to provide more data to a part than just the - HTML to include. To do this, write attributes on the part that start - with a colon ":". -

You can even do this with template fields by starting with a ".". - Unfortunately, full template pipelines aren't supported this way - right now. You can only pass a string or a value contained in the - parent data. -

Static HTML

Static HTML

Sources for this example

page.html

example.go

Page with Parts

Section

Parts

Sources for this example

page.html

example.go

Oh wow, a random number.

Page with Parts

Section with Named Slots

Section with a Subsection

Subsection

Section

Template Data

Passing Data to Parts

Web Components

Page preview: