🧪 lab-site: Improve various unrelated aspects of the first labs (#407)

* Improve the HSL example to work with drag and flicker less
* Add a video embed
* Fix broken links to docs sites

This merges the following commits:
* build-tools: Re-write "/SUBDOMAIN/..." links in .htmlf files
* lab-site: Rework interactive hsl example
* lab: Add embedded and styled YouTube player to welcome page
* lab-site: Ensure all links from notes open in new tab

     build-tools/site-gen/main.go             | 19 +++---
     frontend/lab/css/overrides.css           |  9 +++
     frontend/lab/samples/intro/circles.htmlf |  2 +-
     frontend/lab/samples/intro/coords.htmlf  |  1 +
     frontend/lab/samples/intro/welcome.htmlf | 15 +++--
     frontend/lab/samples/loops/hsl.evy       | 73 +++++++++++++++++-------
     6 files changed, 83 insertions(+), 36 deletions(-)

Pull-request: #407

build-tools/site-gen/main.go

@@ -3,22 +3,23 @@
 // Usage: site-gen <src-dir> <dest-dir> <domain>
 //
 // When deploying to firebase (any other hosting site), we need to make a few
-// changes to the HTML, CSS and JS files in the site:
+// changes to the HTML, CSS, JS and WASM files in the site (HTML files have
+// extensions .html and .htmlf):
 //   - Replace href/values with leading paths of /SUBDOMAIN, path with /, e.g. for
 //     SUBDOMAIN "learn" /learn/banana becomes /banana. Replace all paths to subdomain
 //     as above for "apex" subdomain.
 //   - Rename .css, .js and .wasm files to include a short-sha of the SHA256 of the
-//     contents of the file and update any references to those files in .html
+//     contents of the file and update any references to those files in HTML
 //     files to include the filename with the short-sha. This is to perform
 //     cache busting when the files change.
-//   - Update the importmap in .html files to include the short-sha in the
+//   - Update the importmap in HTML files to include the short-sha in the
 //     javascript imports.
 //     e.g. "./module/editor.js": "./module/editor.js"
 //     becomes "./module/editor.js": "./module/editor.1a2b3c4d.js"
 //   - Copy .js files with their original filename so that clients that do
 //     not support import map can still import the .js files. They miss out
 //     on cache busting and may need to sometimes force-reload.
-//   - Update the wasmImports map in .html files to include the short-sha in
+//   - Update the wasmImports map in HTML files to include the short-sha in
 //     wasm imports. The wasmImports allows for cache busting hashed filenames
 //     for wasm files. The replacements are of the same form as the importmap.
 //
@@ -50,7 +51,7 @@ type app struct {
 	SrcDir    string `arg:"" required:""`
 	DestDir   string `arg:"" required:""`
 
-	skippedFiles []string
+	htmlFiles    []string
 	renamedFiles map[string]string
 }
 
@@ -136,16 +137,16 @@ func checkSymlink(srcfile string) error {
 
 // handleFile checks the extension of filename and processes it according
 // to the rules of this program:
-// - Record .html filename for later processing.
+// - Record HTML files for later processing.
 // - Copy .js, .css and .wasm files with a hash in their name.
 // - Copy .js and all other files with their original name.
 func (a *app) handleFile(filename string) error {
 	srcfile := filepath.Join(a.SrcDir, filename)
 	destfile := filepath.Join(a.DestDir, filename)
 	ext := filepath.Ext(filename)
 
-	if ext == ".html" {
-		a.skippedFiles = append(a.skippedFiles, filename)
+	if ext == ".html" || ext == ".htmlf" {
+		a.htmlFiles = append(a.htmlFiles, filename)
 		return nil
 	}
 	if a.CacheBust && (ext == ".js" || ext == ".css" || ext == ".wasm") {
@@ -172,7 +173,7 @@ func (a *app) handleFile(filename string) error {
 }
 
 func (a *app) copyHTMLFiles() error {
-	for _, filename := range a.skippedFiles {
+	for _, filename := range a.htmlFiles {
 		in, out, err := openInOut(filepath.Join(a.SrcDir, filename), filepath.Join(a.DestDir, filename))
 		if err != nil {
 			return err

frontend/lab/css/overrides.css

@@ -190,6 +190,15 @@
   max-width: 80%;
 }
 
+.youtube {
+  margin: 32px auto;
+  display: block;
+  width: 400px;
+  height: 225px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+}
+
 @media (max-width: 767px) {
   .notes {
     display: none;

frontend/lab/samples/intro/circles.htmlf

@@ -49,5 +49,5 @@
 <p>Which country has this flag? 🇵🇼</p>
 <details class="small">
   <summary>Answer</summary>
-  <p><a href="https://en.wikipedia.org/wiki/Palau">Palau</a></p>
+  <p><a href="https://en.wikipedia.org/wiki/Palau" target="_blank">Palau</a></p>
 </details>

frontend/lab/samples/intro/coords.htmlf

@@ -34,6 +34,7 @@
       Coordinates of the Evy Canvas.<br />
       <a
         href="https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA"
+        target="_blank"
         >Image Source</a
       >
     </figcaption>

frontend/lab/samples/intro/welcome.htmlf

@@ -8,10 +8,15 @@
   Hit <strong>Run</strong> on the right 👉. <br />
   That's what we'll build up to in this first lab—a bit of a whirlwind tour!
 </p>
-<p>
-  There is also a step-by-step
-  <a href="https://youtu.be/FBqyiU4iZNY?si=9vFayb_R2rAgEMbX" target="_blank">video guide</a> if you
-  need help..
-</p>
+<p>There is also a step-by-step video guide:</p>
+<iframe
+  src="https://www.youtube.com/embed/FBqyiU4iZNY"
+  title="YouTube video player for Lab 1 walk through"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen
+  class="youtube"
+></iframe>
 
 <p>Let's get started!</p>

frontend/lab/samples/loops/hsl.evy

@@ -10,40 +10,54 @@ y0 := 35
 l := 40
 cx := 25
 cy := 55
+drag := false
 
 draw
 
 func draw
     clear background
+    drawText
+    drawColorBox
     drawWheel
     drawSquare
-    drawText
-    //gridn 10 "grey"
 end
 
 on down x:num y:num
+    drag = true
+    update x y
+    draw
+end
+
+on up
+    drag = false
+end
+
+on move x:num y:num
+    if drag
+        update x y
+        draw
+    end
+end
+
+func update x:num y:num
     th := 3.5
-    dx := abs cx-x
-    dy := abs cy-y
+    dx := cx - x
+    dy := cy - y
     if (abs x-x0) < th and y - y0 > 0 and y - y0 < l
         sat = (y - y0) / l * 100
     else if (abs y-y0) < th and x - x0 > 0 and x - x0 < l
         light = (x - x0) / l * 100
     else if x >= x0 and x <= (x0 + l) and y >= y0 and y <= (y0 + l)
         sat = (y - y0) / l * 100
         light = (x - x0) / l * 100
-    else if (sqrt (dx * dx + dy * dy)) <= 20
-        hue = ((atan2 cx-x cy-y) * 180 / pi) + 180
-    else
-        return
+    else if (sqrt (dx * dx + dy * dy)) <= 20 + th
+        hue = ((atan2 dx dy) * 180 / pi) + 180
     end
-
-    draw
 end
 
 func drawText
-    x := 28
-    y := 12
+    x := 31
+    y := 8
     font {size:5 style:"normal" family:"Fira Code, monospace"}
     width 0.2
     fill (hsl 27 100 74) // orange
@@ -64,7 +78,7 @@ func drawText
     end
 
     y = 78
-    move 20 y
+    move 21 y
     text "Hue"
 
     move 62 y-52
@@ -80,6 +94,22 @@ func drawText
     end
 end
 
+func drawColorBox
+    x := 10
+    y := 7
+    w := 16
+
+    width 0.5
+    stroke "white"
+    fill background
+    move x y
+    rect w w
+
+    color (hsl hue sat light)
+    move x+1 y+1
+    rect w-2 w-2
+end
+
 func drawWheel
     width 0.4
     for i := range 360
@@ -113,13 +143,14 @@ func drawHue
 end
 
 func drawSquare
-    for s := range 100
-        y := y0 + 40 * 0.01 * s
-        for l := range 100
-            x := x0 + 40 * 0.01 * l
+    steps := 20
+    for ys := range steps
+        y := y0 + ys / steps * l
+        for xs := range steps
+            x := x0 + xs / steps * l
+            color (hsl hue ys/steps*100 xs/steps*100)
             move x+1 y+1
-            color (hsl hue s l)
-            circle 0.1
+            rect l/steps l/steps
         end
     end
 
@@ -133,7 +164,7 @@ func drawSquare
 end
 
 func drawSat
-    move x0 y0+40*0.01*sat
+    move x0 y0+l*0.01*sat
     stroke "white"
     fill background
     circle 3.5
@@ -142,7 +173,7 @@ func drawSat
 end
 
 func drawLight
-    move x0+40*0.01*light y0
+    move x0+l*0.01*light y0
     stroke "white"
     fill background
     circle 3.5