🧪 labsite: Rework Markdown source for Next button (#451)

Rework Markdown source for Next button. Previously we required a paragraph that only contained: [Next] This did not look great as rendered Markdown on GitHub. The Thematic Break or `<hr/>` is a more natural fit and has not used in any other way in the lab so far. This merges the following commits: * labsite: Remove future sample directory * labsite: Remove YouTube screenshot * labsite: Update markdown collapsible heading level * labsite: Rework Markdown source for Next button build-tools/labsite-gen/main.go | 20 ++------------- build-tools/labsite-gen/main_test.go | 7 ++--- frontend/lab/samples/forloops/bubble.md | 6 ++--- frontend/lab/samples/forloops/forcircles.md | 6 ++--- frontend/lab/samples/forloops/forsequence.md | 2 +- frontend/lab/samples/forloops/forwhile.htmlf | 1 - frontend/lab/samples/forloops/forwhile.md | 4 +-- frontend/lab/samples/forloops/lines-show.md | 2 +- frontend/lab/samples/forloops/lines.md | 14 +++++----- frontend/lab/samples/forloops/zebra.md | 10 ++++---- frontend/lab/samples/future/nested.evy | 27 -------------------- frontend/lab/samples/future/nested.htmlf | 5 ---- frontend/lab/samples/games/animate.md | 4 +-- frontend/lab/samples/games/bounce.md | 4 +-- frontend/lab/samples/games/coin.htmlf | 4 +-- frontend/lab/samples/games/coin.md | 8 +++--- frontend/lab/samples/games/events.md | 6 ++--- frontend/lab/samples/games/game.md | 12 ++++----- frontend/lab/samples/games/guess.md | 6 ++--- frontend/lab/samples/games/paint.md | 10 ++++---- frontend/lab/samples/ifs/alpha.md | 6 ++--- frontend/lab/samples/ifs/chat.md | 8 +++--- frontend/lab/samples/ifs/pi.md | 8 +++--- frontend/lab/samples/ifs/pulse.md | 10 ++++---- frontend/lab/samples/ifs/rectangles.md | 4 +-- frontend/lab/samples/ifs/stars.md | 18 ++++++------- frontend/lab/samples/ifs/welcome-ifs.md | 2 +- frontend/lab/samples/intro/circles.md | 12 ++++----- frontend/lab/samples/intro/coords.md | 4 +-- frontend/lab/samples/intro/loop.md | 4 +-- frontend/lab/samples/intro/move.md | 10 ++++---- frontend/lab/samples/intro/var.md | 4 +-- frontend/lab/samples/intro/welcome.htmlf | 8 +++--- frontend/lab/samples/intro/welcome.md | 6 ++--- frontend/lab/samples/loops/gradient-show.md | 4 +-- frontend/lab/samples/loops/gradient.md | 8 +++--- frontend/lab/samples/loops/hsl.md | 4 +-- frontend/lab/samples/loops/sequence.md | 8 +++--- frontend/lab/samples/loops/target-show.md | 2 +- frontend/lab/samples/loops/target.md | 8 +++--- 40 files changed, 122 insertions(+), 174 deletions(-) Pull-request: #451
evylang · Oct 24, 2024 · 76faf9b · 76faf9b
2 parents 9903803 + c334e7f
commit 76faf9b
Show file tree

Hide file tree

Showing 40 changed files with 122 additions and 174 deletions.
diff --git a/build-tools/labsite-gen/main.go b/build-tools/labsite-gen/main.go
@@ -18,8 +18,7 @@ import (
 )
 
 const (
-	detailsMarker    = "[>]"
-	nextButtonMarker = "[Next]"
+	detailsMarker = "[>]"
 )
 
 var nextButton = newNextButton()
@@ -98,27 +97,12 @@ func updateLabLinks(doc *markdown.Document) {
 
 func replaceNextButton(doc *markdown.Document) {
 	for i, block := range doc.Blocks {
-		if isNextButton(block) {
+		if _, ok := block.(*markdown.ThematicBreak); ok {
 			doc.Blocks[i] = nextButton
 		}
 	}
 }
 
-func isNextButton(block markdown.Block) bool {
-	paragraph, ok := block.(*markdown.Paragraph)
-	if !ok {
-		return false
-	}
-	if len(paragraph.Text.Inline) != 1 {
-		return false
-	}
-	plain, ok := paragraph.Text.Inline[0].(*markdown.Plain)
-	if !ok {
-		return false
-	}
-	return plain.Text == nextButtonMarker
-}
-
 func collapse(blocks []markdown.Block) []markdown.Block {
 	var result []markdown.Block
 	for idx := 0; idx < len(blocks); {

diff --git a/build-tools/labsite-gen/main_test.go b/build-tools/labsite-gen/main_test.go
@@ -113,18 +113,19 @@ var nextButtonTests = []struct {
 	},
 	{
 		name:     "single button",
-		in:       `[Next]`,
+		in:       `---`,
 		wantMD:   `<button class="next-btn">Next</button>` + "\n",
 		wantHTML: `<p><button class="next-btn">Next</button></p>` + "\n",
 	},
 	{
 		name: "multiple buttons",
 		in: `# Heading
-[Next]
+
+---
 
 paragraph
 
-[Next]`,
+---`,
 		wantMD: `
 # Heading
 

diff --git a/frontend/lab/samples/forloops/bubble.md b/frontend/lab/samples/forloops/bubble.md
@@ -6,7 +6,7 @@
 - increment the y-coordinate by `0.5`
 - animate it with a sleep for `0.02` seconds.
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 for y := range 0 110 ❓
@@ -17,15 +17,15 @@ for y := range 0 110 ❓
 end
 ```
 
-[Next]
+---
 
 ⭐ Add randomness to the x-coordinate of the bubble.
 
 Change the x-coordinate by a maximum of ± 2 of its previous value.
 
 ![Animated bubble](img/bubble.gif)
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 //...

diff --git a/frontend/lab/samples/forloops/forcircles.md b/frontend/lab/samples/forloops/forcircles.md
@@ -6,7 +6,7 @@
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ## ⭐ Circles with `for` Loops
 
@@ -31,15 +31,15 @@ Use `for` loops and circles to create your own unique drawing.
 [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](img/cat.gif)
 
-## [>] Hint
+### [>] Hint
 
 Wrap the whole cat drawing in a `for` loop and modify the `// eyes` block:
 

diff --git a/frontend/lab/samples/forloops/forsequence.md b/frontend/lab/samples/forloops/forsequence.md
@@ -8,7 +8,7 @@
 - `8`, `5`, `2`
 - `-1`, `-4`, `-7`
 
-## [>] Hint
+### [>] Hint
 
 You only need to find the correct `START`, `STOP` and `STEP` values in:
 

diff --git a/frontend/lab/samples/forloops/forwhile.htmlf b/frontend/lab/samples/forloops/forwhile.htmlf
diff --git a/frontend/lab/samples/forloops/forwhile.md b/frontend/lab/samples/forloops/forwhile.md
@@ -16,9 +16,7 @@ while x < ❓ // STOP
 end
 ```
 
-# [>] Docs
-
-## `for` loops
+### [>] Docs
 
 `for` loops, also known as **count-controlled** loops, are a shortcut for
 writing certain `while` loops (**condition-controlled** loops).

diff --git a/frontend/lab/samples/forloops/lines-show.md b/frontend/lab/samples/forloops/lines-show.md
@@ -6,7 +6,7 @@ For this program we need two **nested** `for` loops.
 
 ⭐ How would you go about writing this program?
 
-## [>] Hint
+### [>] Hint
 
 - Break down your problem into smaller bits.
 - Create a _static_ image with 10 lines (see picture below).

diff --git a/frontend/lab/samples/forloops/lines.md b/frontend/lab/samples/forloops/lines.md
@@ -4,11 +4,11 @@
 
 ![Static lines](img/lines.svg)
 
-[Next]
+---
 
 ⭐ Can you update the program with a single `for` loop to create same output?
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 for a := range 0 100 20
@@ -17,7 +17,7 @@ for a := range 0 100 20
 end
 ```
 
-[Next]
+---
 
 ⭐ Can you change the program to create the following outputs, with step `25`,
 `10`, `5`, and `2`.
@@ -31,11 +31,11 @@ end
 [20 Lines]: img/20-lines.svg "evy:edit"
 [50 Lines]: img/50-lines.svg "evy:edit"
 
-[Next]
+---
 
 ⭐ Can you declare a variable called `step` and use it with `range` and `line`?
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 step := 10
@@ -45,7 +45,7 @@ for a := range 0 100 step
 end
 ```
 
-[Next]
+---
 
 ## ⭐ Animate
 
@@ -57,7 +57,7 @@ Add a second, wrapping, outer loop that ranges over the `step` variable.
 - Use the `clear` command.
 - Use the `sleep 0.01` command.
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 for step := range ❓ ❓ ❓

diff --git a/frontend/lab/samples/forloops/zebra.md b/frontend/lab/samples/forloops/zebra.md
@@ -6,7 +6,7 @@
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ⭐ Can you change the program to use a `for` loop?
 
@@ -19,22 +19,22 @@ for y := range ❓ ❓ ❓
 end
 ```
 
-[Next]
+---
 
 ⭐ Can you _animate_ the stripes with `sleep 0.2`?
 
-[Next]
+---
 
 ⭐ Can you make the animation go the _opposite_ direction by changing the `range`
 values?
 
-[Next]
+---
 
 ⭐ Can you use `hsl` to create a green-to-red gradient animation like below?
 
 ![Animate rainbow zebra crossing](img/zebra.gif)
 
-## [>] Hint
+### [>] Hint
 
 ```evy
 for ❓ range 98 -1 -❓

diff --git a/frontend/lab/samples/future/nested.evy b/frontend/lab/samples/future/nested.evy
diff --git a/frontend/lab/samples/future/nested.htmlf b/frontend/lab/samples/future/nested.htmlf
diff --git a/frontend/lab/samples/games/animate.md b/frontend/lab/samples/games/animate.md
@@ -10,7 +10,7 @@ It lets you create animations and handle user input simultaneously.
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ## ⭐ Color and Trail
 
@@ -24,7 +24,7 @@ Consider updating `fill` and `stroke` color as well as `width`.
 
 Use `clear` at the beginning of the `animate` event handler.
 
-[Next]
+---
 
 ## ⭐ Fading Trail
 

diff --git a/frontend/lab/samples/games/bounce.md b/frontend/lab/samples/games/bounce.md
@@ -6,7 +6,7 @@
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ## ⭐ Bounce
 
@@ -27,7 +27,7 @@ if x < 10 or x > ❓
 end
 ```
 
-[Next]
+---
 
 ## ⭐ Move with Keys
 

diff --git a/frontend/lab/samples/games/coin.htmlf b/frontend/lab/samples/games/coin.htmlf
diff --git a/frontend/lab/samples/games/coin.md b/frontend/lab/samples/games/coin.md
@@ -6,7 +6,7 @@
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ## ⭐ Toss
 
@@ -32,7 +32,7 @@ on key guess:string
 
 There multiple variants that will get you to the same result, e.g. `rand 2`.
 
-[Next]
+---
 
 ## ⭐ Win or Lose?
 
@@ -44,9 +44,9 @@ If they match, print `"You win!"` otherwise print `"You lose!"`.
 
 ```evy
 if guess == ❓
-	print "You win!"
+    print "You win!"
 else
-	❓
+    ❓
 end
 sleep 1
 ```
diff --git a/frontend/lab/samples/games/events.md b/frontend/lab/samples/games/events.md
@@ -2,7 +2,7 @@
 
 In Evy, **event handlers** react to events like keyboard input (`on key`).
 
-## [>] Docs
+### [>] Docs
 
 An event handler starts with `on`, then the event type, parameters, code, and
 ends with `end`. This example prints the pressed key:
@@ -24,15 +24,15 @@ and `input`.
 
 **Run** the code. Was it what you expected?
 
-[Next]
+---
 
 ## ⭐ Update `down`
 
 Update the `down` event handler to draw a circle with radius `1` at `x y`.
 
 Can you see circles on click or tap?
 
-[Next]
+---
 
 ## ⭐ Update `key`