🧪 labsite: Re-write relative URLs (#450)

Re-write img and link URLs in labsite-gen tool from correct location of relative to source .md file to correct relative location to lab/index.html file when deployed. This change improves readability and generation of Markdown lab source files. In a preparatory step mark `lab/**/*.htmlf` as generated for linguist and PR reviews. This merges the following commits: * lab: Mark .htmlf as generated in linguist * labsite: Re-write img URLs * labsite: Re-write links to other labs * cli: Add --svg-width and --svg-height flags .gitattributes | 3 +- Makefile | 2 +- build-tools/labsite-gen/main.go | 45 +++++++++++++++++++ docs/usage.md | 27 ++++++----- frontend/docs/usage.html | 25 ++++++----- frontend/docs/usage.htmlf | 27 ++++++----- frontend/lab/samples/forloops/bubble.md | 2 +- frontend/lab/samples/forloops/forcircles.md | 10 ++--- .../lab/samples/forloops/img/10-lines.svg | 2 + .../lab/samples/forloops/img/20-lines.svg | 2 + frontend/lab/samples/forloops/img/4-lines.svg | 2 + .../lab/samples/forloops/img/50-lines.svg | 2 + frontend/lab/samples/forloops/img/bubble.svg | 2 + .../lab/samples/forloops/img/circle-cat.svg | 2 + .../samples/forloops/img/circle-outline.svg | 2 + .../lab/samples/forloops/img/circle-rand.svg | 2 + .../lab/samples/forloops/img/circle-wig.svg | 2 + frontend/lab/samples/forloops/img/lines.svg | 2 + frontend/lab/samples/forloops/img/zebra.svg | 2 + frontend/lab/samples/forloops/lines-show.md | 2 +- frontend/lab/samples/forloops/lines.md | 10 ++--- frontend/lab/samples/forloops/zebra.md | 2 +- frontend/lab/samples/ifs/alpha.md | 6 +-- frontend/lab/samples/ifs/bounce-show.md | 2 +- frontend/lab/samples/ifs/bounce.md | 13 +++--- frontend/lab/samples/ifs/img/2-squares.svg | 2 + frontend/lab/samples/ifs/img/apartments.svg | 2 + frontend/lab/samples/ifs/img/bauhaus.svg | 2 + frontend/lab/samples/ifs/img/blue-pattern.svg | 2 + frontend/lab/samples/ifs/img/bwrect.svg | 2 + frontend/lab/samples/ifs/img/grass.svg | 2 + frontend/lab/samples/ifs/img/house.svg | 2 + frontend/lab/samples/ifs/img/mondrian.svg | 2 + frontend/lab/samples/ifs/img/monster.svg | 2 + frontend/lab/samples/ifs/img/perspective.svg | 2 + frontend/lab/samples/ifs/img/pulse-step-1.svg | 2 + frontend/lab/samples/ifs/img/pulse-step-2.svg | 2 + .../ifs/img/quarter-circle-triangle.svg | 2 + .../lab/samples/ifs/img/quarter-circle.svg | 2 + frontend/lab/samples/ifs/img/randrect.svg | 2 + .../ifs/img/red-dot-two-squares-alpha.svg | 2 + .../samples/ifs/img/red-dot-two-squares.svg | 2 + .../lab/samples/ifs/img/red-green-squares.svg | 2 + frontend/lab/samples/ifs/img/stripes.svg | 2 + frontend/lab/samples/ifs/img/target-blue.svg | 2 + frontend/lab/samples/ifs/img/tetris.svg | 2 + frontend/lab/samples/ifs/img/warm-squares.svg | 2 + frontend/lab/samples/ifs/img/window.svg | 2 + frontend/lab/samples/ifs/pi.md | 4 +- frontend/lab/samples/ifs/pulse.md | 10 ++--- frontend/lab/samples/ifs/rectangles.md | 28 ++++++------ frontend/lab/samples/intro/circles.md | 16 +++---- frontend/lab/samples/intro/coords.md | 2 +- .../lab/samples/intro/img/circles-anika.svg | 2 + .../samples/intro/img/circles-bottom-left.svg | 2 + .../intro/img/circles-bottom-right.svg | 2 + .../lab/samples/intro/img/circles-camh.svg | 2 + .../lab/samples/intro/img/circles-kathi.svg | 2 + .../lab/samples/intro/img/circles-mali.svg | 2 + .../samples/intro/img/circles-top-left.svg | 2 + .../samples/intro/img/circles-top-right.svg | 2 + .../lab/samples/intro/img/coords-30-60.svg | 2 + .../lab/samples/intro/img/move-6circles.svg | 2 + frontend/lab/samples/intro/move.md | 10 ++--- frontend/lab/samples/loops/gradient-show.md | 4 +- .../lab/samples/loops/img/gradient-line.svg | 2 + .../lab/samples/loops/img/gradient-thick.svg | 2 + frontend/lab/samples/loops/img/target.svg | 2 + frontend/lab/samples/loops/target-show.md | 2 +- frontend/lab/samples/loops/target.md | 2 +- learn/pkg/learn/renderer.go | 2 +- main.go | 4 +- pkg/cli/runtime.go | 4 +- pkg/cli/runtime_test.go | 2 +- 74 files changed, 255 insertions(+), 105 deletions(-) Pull-request: #450
evylang · Oct 17, 2024 · 1b66162 · 1b66162
2 parents cf80a31 + 5bc0483
commit 1b66162
Show file tree

Hide file tree

Showing 74 changed files with 255 additions and 105 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,5 +1,4 @@
+/frontend/**/*.htmlf linguist-generated=true
 /frontend/docs/**/*.html linguist-generated=true
-/frontend/docs/**/*.htmlf linguist-generated=true
 /frontend/learn/**/*.html linguist-generated=true
-/frontend/learn/**/*.htmlf linguist-generated=true
 /frontend/learn/index.html linguist-generated=false
diff --git a/Makefile b/Makefile
@@ -202,7 +202,7 @@ FLAGS_frontend/lab/samples/ifs/img/grass.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/bubble.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/circle-rand.svg = --rand-seed=1
 %.svg: %.evy | $(NODELIB)
-	go run . run --svg-out "$@" $(FLAGS_$@) "$<"
+	go run . run --svg-width "200px" --svg-height "200px" --svg-out "$@" $(FLAGS_$@) "$<"
 	$(PRETTIER) --write "$@"
 
 %.htmlf: %.md | $(NODELIB)

diff --git a/build-tools/labsite-gen/main.go b/build-tools/labsite-gen/main.go
@@ -7,10 +7,13 @@ package main
 import (
 	"bytes"
 	"fmt"
+	"net/url"
 	"os"
+	"path/filepath"
 	"strings"
 	"unicode"
 
+	"evylang.dev/evy/pkg/md"
 	"rsc.io/markdown"
 )
 
@@ -39,6 +42,8 @@ func run(mdFile, htmlfFile string) error {
 		return err
 	}
 	doc := parse(string(md))
+	updateImgURL(doc, mdFile)
+	updateLabLinks(doc)
 	replaceNextButton(doc)
 	doc.Blocks = collapse(doc.Blocks)
 	html := markdown.ToHTML(doc)
@@ -51,6 +56,46 @@ func parse(md string) *markdown.Document {
 	return p.Parse(md)
 }
 
+// Change relative links to work for frontend lab root which is where it will be
+// requested from on https://lab.evy.dev. The generated .htmlf files are loaded
+// as fragments and image links relative to these fragments do not work, they need
+// to be relative to the initially loaded frontend/lab/index.html site.
+func updateImgURL(doc *markdown.Document, mdFile string) {
+	md.Walk(doc, func(n md.Node) {
+		img, ok := n.(*markdown.Image)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(img.URL)
+		if err != nil || u.IsAbs() {
+			return
+		}
+		// change img/circle.svg to samples/ifs/img/circle.svg
+		u.Path = updateIMGPath(mdFile, u.Path)
+		img.URL = u.String()
+	})
+}
+
+func updateIMGPath(mdPath, imgPath string) string {
+	labDir := filepath.Base(filepath.Dir(mdPath))
+	return "samples/" + labDir + "/" + imgPath
+}
+
+func updateLabLinks(doc *markdown.Document) {
+	md.Walk(doc, func(n md.Node) {
+		link, ok := n.(*markdown.Link)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(link.URL)
+		if err != nil || u.IsAbs() || !strings.HasSuffix(u.Path, ".md") {
+			return
+		}
+		// change ../loops/hsl.md and hsl.md to #hsl
+		link.URL = "#" + strings.TrimSuffix(filepath.Base(u.Path), ".md")
+	})
+}
+
 func replaceNextButton(doc *markdown.Document) {
 	for i, block := range doc.Blocks {
 		if isNextButton(block) {

diff --git a/docs/usage.md b/docs/usage.md
@@ -60,18 +60,21 @@ You can also get help for each subcommand by running it with the
       [<source>]    Source file. Default: stdin.
 
     Flags:
-      -h, --help                Show context-sensitive help.
-      -V, --version             Print version information
-
-          --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-          --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-          --svg-style=STYLE     Style of top-level SVG element.
-      -s, --no-test-summary     Do not print test summary, only report failed tests.
-          --fail-fast           Stop execution on first failed test.
-      -t, --txtar=MEMBER        Read source from txtar file and select select given
-                                filename
-          --rand-seed=INT-64    Seed for random number generation (0 means random
-                                seed).
+      -h, --help                 Show context-sensitive help.
+      -V, --version              Print version information
+
+          --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+          --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+          --svg-style=STYLE      Style of top-level SVG element.
+          --svg-width=WIDTH      Width of SVG file.
+          --svg-height=HEIGHT    Height of SVG file.
+      -s, --no-test-summary      Do not print test summary, only report failed
+                                 tests.
+          --fail-fast            Stop execution on first failed test.
+      -t, --txtar=MEMBER         Read source from txtar file and select select given
+                                 filename
+          --rand-seed=INT-64     Seed for random number generation (0 means random
+                                 seed).
 
 <!-- genend -->
 

diff --git a/frontend/docs/usage.html b/frontend/docs/usage.html
diff --git a/frontend/docs/usage.htmlf b/frontend/docs/usage.htmlf
diff --git a/frontend/lab/samples/forloops/bubble.md b/frontend/lab/samples/forloops/bubble.md
@@ -23,7 +23,7 @@ end
 
 Change the x-coordinate by a maximum of ± 2 of its previous value.
 
-![Animated bubble](samples/forloops/img/bubble.gif)
+![Animated bubble](img/bubble.gif)
 
 ## [>] Hint
 

diff --git a/frontend/lab/samples/forloops/forcircles.md b/frontend/lab/samples/forloops/forcircles.md
@@ -26,18 +26,18 @@ Use `for` loops and circles to create your own unique drawing.
 | -------------------------------- | ---------------------- |
 | ![Circle with random radius]     | ![Cat made of circles] |
 
-[Circle with different outline]: samples/forloops/img/circle-outline.svg "evy:edit"
-[Circle in wig shape]: samples/forloops/img/circle-wig.svg "evy:edit"
-[Circle with random radius]: samples/forloops/img/circle-rand.svg "evy:edit"
-[Cat made of circles]: samples/forloops/img/circle-cat.svg "evy:edit"
+[Circle with different outline]: img/circle-outline.svg "evy:edit"
+[Circle in wig shape]: img/circle-wig.svg "evy:edit"
+[Circle with random radius]: img/circle-rand.svg "evy:edit"
+[Cat made of circles]: img/circle-cat.svg "evy:edit"
 
 [Next]
 
 ## ⭐ Move the Cat Eyes 👀
 
 Use the code from the cat sample above and make its eyes move:
 
-![Black cat with moving yellow eyes](samples/forloops/img/cat.gif)
+![Black cat with moving yellow eyes](img/cat.gif)
 
 ## [>] Hint
 

diff --git a/frontend/lab/samples/forloops/img/10-lines.svg b/frontend/lab/samples/forloops/img/10-lines.svg
diff --git a/frontend/lab/samples/forloops/img/20-lines.svg b/frontend/lab/samples/forloops/img/20-lines.svg
diff --git a/frontend/lab/samples/forloops/img/4-lines.svg b/frontend/lab/samples/forloops/img/4-lines.svg
diff --git a/frontend/lab/samples/forloops/img/50-lines.svg b/frontend/lab/samples/forloops/img/50-lines.svg
diff --git a/frontend/lab/samples/forloops/img/bubble.svg b/frontend/lab/samples/forloops/img/bubble.svg
diff --git a/frontend/lab/samples/forloops/img/circle-cat.svg b/frontend/lab/samples/forloops/img/circle-cat.svg
diff --git a/frontend/lab/samples/forloops/img/circle-outline.svg b/frontend/lab/samples/forloops/img/circle-outline.svg
diff --git a/frontend/lab/samples/forloops/img/circle-rand.svg b/frontend/lab/samples/forloops/img/circle-rand.svg
diff --git a/frontend/lab/samples/forloops/img/circle-wig.svg b/frontend/lab/samples/forloops/img/circle-wig.svg
diff --git a/frontend/lab/samples/forloops/img/lines.svg b/frontend/lab/samples/forloops/img/lines.svg
diff --git a/frontend/lab/samples/forloops/img/zebra.svg b/frontend/lab/samples/forloops/img/zebra.svg
diff --git a/frontend/lab/samples/forloops/lines-show.md b/frontend/lab/samples/forloops/lines-show.md
@@ -12,4 +12,4 @@ For this program we need two **nested** `for` loops.
 - Create a _static_ image with 10 lines (see picture below).
 - What needs to change to turn the static image into an animation?
 
-  ![Static lines](samples/forloops/img/10-lines.svg)
+  ![Static lines](img/10-lines.svg)
diff --git a/frontend/lab/samples/forloops/lines.md b/frontend/lab/samples/forloops/lines.md
@@ -2,7 +2,7 @@
 
 ⭐ Can you complete the program create this output?
 
-![Static lines](samples/forloops/img/lines.svg)
+![Static lines](img/lines.svg)
 
 [Next]
 
@@ -26,10 +26,10 @@ end
 | ----------- | ----------- |
 | ![20 Lines] | ![50 Lines] |
 
-[4 Lines]: samples/forloops/img/4-lines.svg "evy:edit"
-[10 Lines]: samples/forloops/img/10-lines.svg "evy:edit"
-[20 Lines]: samples/forloops/img/20-lines.svg "evy:edit"
-[50 Lines]: samples/forloops/img/50-lines.svg "evy:edit"
+[4 Lines]: img/4-lines.svg "evy:edit"
+[10 Lines]: img/10-lines.svg "evy:edit"
+[20 Lines]: img/20-lines.svg "evy:edit"
+[50 Lines]: img/50-lines.svg "evy:edit"
 
 [Next]
 

diff --git a/frontend/lab/samples/forloops/zebra.md b/frontend/lab/samples/forloops/zebra.md
@@ -32,7 +32,7 @@ values?
 
 ⭐ Can you use `hsl` to create a green-to-red gradient animation like below?
 
-![Animate rainbow zebra crossing](samples/forloops/img/zebra.gif)
+![Animate rainbow zebra crossing](img/zebra.gif)
 
 ## [>] Hint
 

diff --git a/frontend/lab/samples/ifs/alpha.md b/frontend/lab/samples/ifs/alpha.md
@@ -12,7 +12,7 @@
 
 Complete the code to create the following drawing:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares.svg)
 
 [Next]
 
@@ -21,11 +21,11 @@ Complete the code to create the following drawing:
 Tweak the Alpha parameter to the [`hsl`] function, its fourth parameter, to make
 the bottom left quadrant grey:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares-alpha.svg)
 
 ## [>] Docs
 
-In the interactive [`hsl`] function [color explorer](#hsl) we learned how hsl
+In the interactive [`hsl`] function [color explorer](../loops/hsl.md) we learned how hsl
 takes three values: hue, saturation, lightness values to create a color.
 
 There is an optional fourth value called **alpha** that controls the

diff --git a/frontend/lab/samples/ifs/bounce-show.md b/frontend/lab/samples/ifs/bounce-show.md
@@ -9,4 +9,4 @@ Hit **Run** and watch the ball bounce!
 - How is the fading effect created?
 - What concepts from previous labs are being used here?
 
-Let's explore further in the interactive [Bounce Challenge](#bounce).
+Let's explore further in the interactive [Bounce Challenge](bounce.md).