lab-site: Generate notes from markdown (2/3)

Add hand-converted markdown files, taken from the originally
hand-written .htmlf files. Writing HTML by hand is hard! I only did it
because I was pressed for time and not sure if stock-standard md2html
will do the trick. Seems fine though. In a last follow up commit we
will actually generate the .htmlf files.

Commit-group: 2/3

frontend/lab/samples/intro/circles.md

@@ -0,0 +1,31 @@
+# 🇵🇼 Circles
+
+Run this program and read the code.
+
+⭐ Can you move the circle center to each corner?
+
+## [>] Result
+
+| ![Quarter circle top left](samples/intro/img/circles-top-left.svg)       | ![Quarter circle top right](samples/intro/img/circles-top-right.svg)       |
+| ------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| ![Quarter circle bottom left](samples/intro/img/circles-bottom-left.svg) | ![Quarter circle bottom right](samples/intro/img/circles-bottom-right.svg) |
+
+---
+
+⭐ Draw 2-4 circles that are partly or fully visible.
+
+## [>] Examples
+
+| ![Three circles of same size](samples/intro/img/circles-anika.svg) | ![Three large overlapping circles in warm colors](samples/intro/img/circles-mali.svg) |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
+| ![Overlapping circles](samples/intro/img/circles-camh.svg)         | ![Cloud made from circles](samples/intro/img/circles-kathi.svg)                       |
+
+---
+
+Which country has this flag? 🇵🇼
+
+## [>] Answer
+
+[Palau]
+
+[Palau]: https://en.wikipedia.org/wiki/Palau

frontend/lab/samples/intro/coords.md

@@ -0,0 +1,42 @@
+# 🎯 Coordinates
+
+Can you figure out the coordinates?
+
+1. **Run** this program.
+2. **Tap** the drawing area (canvas).
+3. What are the coordinates of the red dot? 🔴
+4. **Tap** the canvas again for a hint and the solution. 🎯
+
+## [>] Where is the code? 🔎
+
+The source code for this program is hidden, but if you're interested in how it works, you can
+take a peek at the <a href="#coords-code" target="_blank">full example</a>.
+
+## [>] Coordinates on the Evy Canvas 📖
+
+Imagine the canvas as a grid. Each point on this grid is identified by two numbers:
+
+- **x-coordinate**
+  How far the point is from the left edge of the canvas.
+- **y-coordinate**  
+  How far the point is from the bottom edge of the canvas.
+
+You write these coordinates together like this: `x y`.
+
+![Coordinates 30 60 on the Evy Canvas](samples/intro/img/coords-30-60.svg)
+[Image Source]
+
+[Image Source]: https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA
+
+The Evy canvas ranges from coordinates `0 0` to `100 100`. This means that
+the corners of the canvas have the following coordinates:
+
+| Corner       | Coordinates |
+| ------------ | ----------- |
+| Bottom left  | `0 0`       |
+| Bottom right | `100 0`     |
+| Top left     | `100 0`     |
+| Top right    | `100 100`   |
+
+The center of the canvas has the coordinates <code>50 50</code>. The point <code>30 60</code> is
+located 30 units from the left edge of the canvas and 60 units from the bottom edge.

frontend/lab/samples/intro/helloworld.md

@@ -0,0 +1,11 @@
+# 👋🌏 Hello World!
+
+Check out the program on the right 👉.
+
+Hit **Run** to see the result!
+
+Can you change the program to print **your name**? ⭐
+
+Check out the docs for more info on the [`print`] command.
+
+[`print`]: /docs/builtins.html#print

frontend/lab/samples/intro/loop.md

@@ -0,0 +1,27 @@
+# 💫 Loops
+
+Can you change this program to
+
+- ⭐️ `print` the numbers from `0` to `20`?
+- ⭐️ `sleep` only `0.2` seconds?
+- ⭐️ `print` even numbers only?
+- ⭐️ `print` odd numbers only?
+
+# [>] Understanding Loops 📖
+
+A loop in programming is a powerful way to automate repetitive tasks. In Evy, a loop is created
+using the `while` keyword.
+
+Here's the basic structure:
+
+```evy
+while loop_condition
+    loop_body
+    // …
+end
+```
+
+- `while`: Start of the loop.
+- **loop_condition**: As long as this condition is true, the loop repeats.
+- **loop_body**: Instructions to be repeated.
+- `end`: End of the loop.

frontend/lab/samples/intro/move.md

@@ -0,0 +1,87 @@
+<h1>🟣🚚 Moving Dot</h1>
+
+⭐ Can you draw 6 purple circles at x coordinates 0, 20, 40, 60, 80, and 100?
+
+## [>] Result
+
+![6 circles on horizontally center aligned](samples/intro/img/move-6circles.svg)
+
+---
+
+⭐ Can you draw these 6 purple circles using a loop?
+
+## [>] Loop structure
+
+```evy
+while loop_condition
+    loop_body
+    // …
+end
+```
+
+### [>] Code hint 🧚
+
+```evy
+x:num
+while x <= ❓
+    move x 50
+    circle 10
+    x = x + ❓
+end
+```
+
+---
+
+⭐ Can you change the program to make the circle move from left to right, using the
+[`clear`] and [`sleep`] commands?
+
+[`clear`]: /docs/builtins.html#clear
+[`sleep`]: /docs/builtins.html#sleep
+
+## [>] Result
+
+![one horizontally moving circle](samples/intro/img/1-circle.gif)
+
+### [>] Code hint 🧚
+
+```evy
+while // …
+   clear
+   // …
+   sleep 0.2
+end
+```
+
+---
+
+⭐ Make 2 circles move in opposite direction
+
+## [>] Result
+
+![two horizontally moving circles](samples/intro/img/2-circles.gif)
+
+### [>] Code hint 🧚
+
+```evy
+move x 40
+circle 10
+move 100-x 60
+// …
+```
+
+---
+
+⭐ Make 4 circles move in opposite direction
+
+## [>] Result
+
+![four moving circles](samples/intro/img/4-circles.gif)
+
+### [>] Code hint 🧚
+
+```evy
+move 100-x 60
+circle 10
+move  40 x
+// …
+```

frontend/lab/samples/intro/var.md

@@ -0,0 +1,30 @@
+# 🧮 Variables
+
+- ⭐️ _Don't run the code yet!_
+  What will the first two [`print`] commands show?
+- ⭐️ What about the last two?
+- ⭐️ Can you print your name and your age using variables?
+
+[`print`]: /docs/builtins.html#print
+
+## [>] Understanding Variables 📖
+
+In Evy, we create a variable and its type with the pattern:
+
+```evy
+name:type
+```
+
+Let's _declare_ the variable `x`, which can only store a number value:
+
+```evy
+x:num
+```
+
+Now we can _assign_ a value to it using the equality sign `=`:
+
+```evy
+x = 3 + 4
+```
+
+📌 A variable _must_ be declared before it can be used.

frontend/lab/samples/intro/welcome.md

@@ -0,0 +1,22 @@
+# 👋 Welcome
+
+Programming is for everyone – no special skills required, just curiosity and a willingness to
+learn.
+
+Let's dive in! Hit **Run** on the right 👉.
+
+That's what we'll build up to in this first lab—a bit of a whirlwind tour.
+
+## 🚀 Let's get started!
+
+There is also a step-by-step walk through video guide 🎬:
+
+<iframe
+  src="https://www.youtube-nocookie.com/embed/FBqyiU4iZNY"
+  title="YouTube video player for Introductory Lab Walk Through"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen
+  class="youtube"
+></iframe>

frontend/lab/samples/intro/worm.md

@@ -0,0 +1,13 @@
+# 🐛 Make a Worm
+
+1. **Run** this program.
+2. **Create** some cool output.
+3. **Change** this program to draw a circle with
+   - ⭐ your favorite **color**
+   - ⭐ a slightly different **size**
+   - ⭐ a different **outline color**.
+     Use the [`stroke`](/docs/builtins.html#stroke) command.
+
+## 🧪 Explore and experiment!
+
+You don't need to understand all the code to make changes.

frontend/lab/samples/loops/gradient-show.md

@@ -0,0 +1,32 @@
+# 🌈📺 Gradient
+
+**Run** the program to draw an animated color gradient.
+
+This program was created using the [`line`] and [`width`] commands.
+
+[`line`]: /docs/builtins.html#line
+[`width`]: /docs/builtins.html#width
+
+How would you go about writing this program?
+
+## [>]💡 Some tips
+
+- Break down the problem into smaller bits.
+- Create a static image with line `width 10`:
+  ![thick vertical lines](samples/loops/img/gradient-thick.svg)
+- Animate the lines with the `sleep` command.
+- Reduce the line width, move, sleep and loop increment.
+
+## [>] `line` and `width` commands 📖
+
+The following code draws a line from point `10 20` to point `80 50`:
+
+```evy
+width 2
+move 10 20
+line 80 50
+```
+
+Output:
+
+![Line from 10 20 to 80 50](samples/loops/img/gradient-line.svg)

frontend/lab/samples/loops/gradient.md

@@ -0,0 +1,51 @@
+# 🌈🫵 Gradient
+
+**Run** the program on the right and see if you understand its code.
+
+⭐ Can you replace the value `30` with a variable in 3 places?
+
+### [>] Code hint 🧚
+
+```evy
+x:num
+x = 30
+c = hsl ❓+200
+color c
+move ❓ 100
+// One more to replace
+```
+
+---
+
+⭐ Can you use this variable to create a loop from 0 to 100 with a step of 10?
+
+### [>] Code hint 🧚
+
+```evy
+while x <= ❓
+    c = hsl __
+    color c
+    move __
+    line __
+    x = x + ❓
+end
+```
+
+---
+
+⭐ Can you animate the lines with the `sleep` command?
+
+### [>] Code hint 🧚
+
+```evy
+while x <= __
+    // ...
+    sleep ❓
+    x = x + __
+end
+```
+
+---
+
+⭐ Can you reduce the line `width`, `sleep` and loop increment to create a
+smooth gradient?

frontend/lab/samples/loops/hsl.md

@@ -0,0 +1,35 @@
+# 🤹 HSL colors
+
+HSL stands for **Hue, Saturation, Lightness**.
+It's a way to describe how colors are created.
+
+## 🧪 Experiment!
+
+- **Run** the program.
+- **Tap** the canvas.
+- **Observe** how changing the HSL values affects the color.
+
+## [>] Where is the code? 🔎
+
+The source code for this program is hidden, but if you're interested in how it works, you can
+take a peek at the [full example].
+
+[full example]: #hsl-code
+
+## [>] Understanding HSL(A) 📖
+
+**Hue** is the color type, like red, green, or blue. It is a number between
+`0` and `360` degrees.
+
+**Saturation** is the intensity of the color. It is a number between
+`0` and `100` percent. Optional, default `100`.
+
+**Lightness** is the brightness of the color. It is a number between
+`0` and `100` percent. Optional, default `50`.
+
+**Alpha** is the transparency of the color. It is a number between
+`0` and `1`. Optional, default `1`.
+
+Explore the [HSL documentation] for more details.
+
+[HSL documentation]: /docs/builtins.html#hsl