🧪 lab-site: Add content for Lab 2 - while loops (#404)

Add content for Lab 2, while loops. We are slowly settling on a format it seems. Thanks for @phy1um and as always to @camh- for lots of thought and help polishing these contents. There are a couple of preparatory commits: * Replace all `colour` strings with `color`, we are aspiring to help people code internationally and American spelling is the defacto standard for international computing. * I have added a shortlink to https://evy.dev/send for people to submit their projects anonymously if they want. * There are a few clean-ups on Lab 1 as fall out of this PR * Add links to the Evy Lab playlist * Fix a regression bug with editor cursor disappearing introduced when adding clickable links in f5f3092 This merges the following commits: * play-site: Fix regression of missing editor cursor * all: Use American spelling * lab-site: Add lab walk-through YouTube playlist * apex: Add evy.dev/send redirect * lab-site: Tweak CSS styles * lab-site: Add Lab 2 contents Makefile | 14 +-- docs/talks-and-papers.md | 9 ++ firebase/firebase.json | 13 ++- frontend/docs/builtins.html | 1 + frontend/docs/index.html | 1 + frontend/docs/spec.html | 1 + frontend/docs/syntax-by-example.html | 1 + frontend/docs/talks-and-papers.html | 21 ++++ frontend/docs/talks-and-papers.htmlf | 17 +++ frontend/docs/usage.html | 1 + frontend/lab/css/overrides.css | 25 ++-- frontend/lab/samples/intro/coords.htmlf | 2 +- frontend/lab/samples/intro/helloworld.evy | 1 + frontend/lab/samples/intro/helloworld.htmlf | 10 ++ .../lab/samples/intro/img/circles-mali.evy | 6 +- frontend/lab/samples/intro/welcome.evy | 24 +++- frontend/lab/samples/intro/welcome.htmlf | 16 ++- frontend/lab/samples/intro/worm.htmlf | 2 +- frontend/lab/samples/loops/gradient-show.evy | 8 ++ .../lab/samples/loops/gradient-show.htmlf | 49 ++++++++ frontend/lab/samples/loops/gradient.evy | 7 ++ frontend/lab/samples/loops/gradient.htmlf | 44 +++++++ frontend/lab/samples/loops/hsl-code.evy | 1 + frontend/lab/samples/loops/hsl.evy | 2 + frontend/lab/samples/loops/hsl.htmlf | 41 +++++++ .../lab/samples/loops/img/gradient-line.evy | 3 + .../lab/samples/loops/img/gradient-line.svg | 10 ++ .../lab/samples/loops/img/gradient-thick.evy | 7 ++ .../lab/samples/loops/img/gradient-thick.svg | 108 ++++++++++++++++++ frontend/lab/samples/loops/img/lines.evy | 5 + frontend/lab/samples/loops/img/lines.svg | 21 ++++ frontend/lab/samples/loops/img/target.evy | 7 ++ frontend/lab/samples/loops/img/target.gif | Bin 0 -> 18634 bytes frontend/lab/samples/loops/img/target.svg | 21 ++++ frontend/lab/samples/loops/lines-show.evy | 10 ++ frontend/lab/samples/loops/lines-show.htmlf | 42 +++++++ frontend/lab/samples/loops/lines.evy | 8 ++ frontend/lab/samples/loops/lines.htmlf | 42 +++++++ frontend/lab/samples/loops/sequence.evy | 1 + frontend/lab/samples/loops/sequence.htmlf | 75 ++++++++++++ frontend/lab/samples/loops/string.evy | 6 + frontend/lab/samples/loops/string.htmlf | 39 +++++++ frontend/lab/samples/loops/target-show.evy | 7 ++ frontend/lab/samples/loops/target-show.htmlf | 16 +++ frontend/lab/samples/loops/target.evy | 7 ++ frontend/lab/samples/loops/target.htmlf | 28 +++++ frontend/lab/samples/samples.json | 20 +++- frontend/play/css/index.css | 2 + 48 files changed, 766 insertions(+), 36 deletions(-) Pull-request: #404
evylang · Aug 6, 2024 · 99987ee · 99987ee
2 parents 81374a9 + aa68da6
commit 99987ee
Show file tree

Hide file tree

Showing 48 changed files with 766 additions and 36 deletions.
diff --git a/Makefile b/Makefile
@@ -10,7 +10,7 @@ GOFILES = $(shell find . -name '*.go')
 ## Build, test, check coverage and lint
 all: build-full test lint
 	@if [ -e .git/rebase-merge ]; then git --no-pager log -1 --pretty='%h %s'; fi
-	@echo '$(COLOUR_GREEN)Success$(COLOUR_NORMAL)'
+	@echo '$(COLOR_GREEN)Success$(COLOR_NORMAL)'
 
 test: test-go test-tiny test-cli check-coverage
 
@@ -116,7 +116,7 @@ cover: test-go
 	go tool cover -html=$(COVERFILE)
 
 CHECK_COVERAGE = awk -F '[ \t%]+' '/^total:/ {print; if ($$3 < $(COVERAGE)) exit 1}'
-FAIL_COVERAGE = { echo '$(COLOUR_RED)FAIL - Coverage below $(COVERAGE)%$(COLOUR_NORMAL)'; exit 1; }
+FAIL_COVERAGE = { echo '$(COLOR_RED)FAIL - Coverage below $(COVERAGE)%$(COLOR_NORMAL)'; exit 1; }
 
 .PHONY: check-coverage cover test-cli test-go test-tiny
 
@@ -332,10 +332,10 @@ define NEXTTAG_CMD
 endef
 
 # --- Utilities ----------------------------------------------------------------
-COLOUR_NORMAL = $(shell tput sgr0 2>/dev/null)
-COLOUR_RED    = $(shell tput setaf 1 2>/dev/null)
-COLOUR_GREEN  = $(shell tput setaf 2 2>/dev/null)
-COLOUR_WHITE  = $(shell tput setaf 7 2>/dev/null)
+COLOR_NORMAL = $(shell tput sgr0 2>/dev/null)
+COLOR_RED    = $(shell tput setaf 1 2>/dev/null)
+COLOR_GREEN  = $(shell tput setaf 2 2>/dev/null)
+COLOR_WHITE  = $(shell tput setaf 7 2>/dev/null)
 
 help:
 	$(eval export HELP_AWK)
@@ -351,7 +351,7 @@ define HELP_AWK
 /^## / { desc = desc substr($$0, 3) }
 /^[A-Za-z0-9%_-]+:/ && desc {
 	sub(/::?$$/, "", $$1)
-	printf "$(COLOUR_WHITE)%s$(COLOUR_NORMAL)\t%s\n", $$1, desc
+	printf "$(COLOR_WHITE)%s$(COLOR_NORMAL)\t%s\n", $$1, desc
 	desc = ""
 }
 endef

diff --git a/docs/talks-and-papers.md b/docs/talks-and-papers.md
@@ -1,5 +1,14 @@
 # Talks and Papers
 
+### Evy Labs Playlist
+
+The [Evy Labs Playlist] is a step-by-step guide through the interactive coding labs on [lab.evy.dev].
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=PLSSU-Bb3IOxe-15D2NCvwtvvEDqZT-epV" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+[Evy Labs Playlist]: https://www.youtube.com/playlist?list=PLSSU-Bb3IOxe-15D2NCvwtvvEDqZT-epV
+[lab.evy.dev]: https://lab.evy.dev
+
 ### Introduction to Evy
 
 Lo-fi backstory to how Evy came to be

diff --git a/firebase/firebase.json b/firebase/firebase.json
@@ -25,8 +25,8 @@
           "type": 301
         },
         {
-          "source": "/l/circle-challenge",
-          "destination": "https://docs.google.com/presentation/d/1lpp6Mn7fdOqWe9kFAYxiyfy5b8HGrqlQHOvjBU_0xwk/edit#slide=id.g1f1a64b624b_0_57",
+          "source": "/send",
+          "destination": "https://docs.google.com/forms/d/e/1FAIpQLSeGSw3Ot3Ha-ElvVbu361MovzroNaGv1fjQq8geS1fs9Kookg/viewform",
           "type": 301
         }
       ],
@@ -47,7 +47,14 @@
     },
     {
       "target": "lab",
-      "public": "public/apex/lab"
+      "public": "public/apex/lab",
+      "redirects": [
+        {
+          "source": "/playlist",
+          "destination": "https://www.youtube.com/playlist?list=PLSSU-Bb3IOxe-15D2NCvwtvvEDqZT-epV",
+          "type": 301
+        }
+      ]
     },
     {
       "target": "learn",

diff --git a/frontend/docs/builtins.html b/frontend/docs/builtins.html
diff --git a/frontend/docs/index.html b/frontend/docs/index.html
diff --git a/frontend/docs/spec.html b/frontend/docs/spec.html
diff --git a/frontend/docs/syntax-by-example.html b/frontend/docs/syntax-by-example.html
diff --git a/frontend/docs/talks-and-papers.html b/frontend/docs/talks-and-papers.html
diff --git a/frontend/docs/talks-and-papers.htmlf b/frontend/docs/talks-and-papers.htmlf
diff --git a/frontend/docs/usage.html b/frontend/docs/usage.html
diff --git a/frontend/lab/css/overrides.css b/frontend/lab/css/overrides.css
@@ -3,13 +3,6 @@
   max-width: 84rem;
 }
 
-/* Reduce in-between white-space */
-@media (min-width: 768px) {
-  .main {
-    gap: 12px;
-    padding: 16px 12px;
-  }
-}
 /* --- Notes -------------------------------------------------------- */
 .notes {
   max-width: min(20rem, 25vw);
@@ -23,11 +16,14 @@
   padding: 8px 16px var(--editor-padding-bottom) 16px;
 }
 
-.notes:has(+ .editor-wrap.hidden) {
-  display: block;
-  width: var(--editor-width);
-  max-width: unset;
-  flex: 1;
+@media (min-width: 768px) {
+  .notes:has(+ .editor-wrap.hidden) {
+    max-width: min(60%, 32rem);
+  }
+  .main {
+    gap: 12px;
+    padding: 16px 12px;
+  }
 }
 
 .notes h1 {
@@ -61,7 +57,7 @@
 .notes summary {
   font-weight: 600;
 }
-.notes details.small {
+.notes p + details.small {
   margin-top: -8px;
   margin-bottom: 20px;
 }
@@ -91,7 +87,7 @@
 }
 
 .notes .starlist {
-  margin: 4px 12px;
+  margin: 4px 12px 12px;
   list-style-type: "⭐ ";
 }
 .notes > .starlist {
@@ -200,6 +196,7 @@
   }
   .notes:has(+ .editor-wrap.hidden) {
     display: block;
+    min-width: var(--editor-width);
   }
 }
 

diff --git a/frontend/lab/samples/intro/coords.htmlf b/frontend/lab/samples/intro/coords.htmlf
@@ -12,7 +12,7 @@
   <summary>Where is the code?</summary>
   <p>
     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">full example</a>.
+    take a peek at the <a href="#coords-code" target="_blank">full example</a>.
   </p>
 </details>
 

diff --git a/frontend/lab/samples/intro/helloworld.evy b/frontend/lab/samples/intro/helloworld.evy
@@ -0,0 +1 @@
+print "Hello, world! 👋🌏"
diff --git a/frontend/lab/samples/intro/helloworld.htmlf b/frontend/lab/samples/intro/helloworld.htmlf
@@ -0,0 +1,10 @@
+<h1>👋🌏 Hello World!</h1>
+<p>
+  Check out the program on the right 👉.<br />
+  Hit <strong>Run</strong> to see the result!
+</p>
+<p>Can you change the program to print <strong>your name</strong>? ⭐</p>
+<p>
+  Check out the docs for more info on the
+  <a href="/docs/builtins.html#print" target="_blank"><code>print</code></a> command.
+</p>
diff --git a/frontend/lab/samples/intro/img/circles-mali.evy b/frontend/lab/samples/intro/img/circles-mali.evy
@@ -1,14 +1,14 @@
 clear "turquoise"
 
-colour "red"
+color "red"
 move 20 50
 circle 30
 
-colour "orange"
+color "orange"
 move 50 80
 circle 30
 
-colour "yellow"
+color "yellow"
 move 80 50
 circle 30
 
diff --git a/frontend/lab/samples/intro/welcome.evy b/frontend/lab/samples/intro/welcome.evy
@@ -1 +1,23 @@
-print "Hello, world! 👋🌏"
+i := 1
+clear
+while i < 130
+    clear
+    move i 60
+    color "orange"
+    circle 8
+
+    move 100-i 40
+    color "red"
+    circle 8
+
+    move 40 i
+    color "purple"
+    circle 8
+
+    move 60 100-i
+    color "gold"
+    circle 8
+
+    i = i + 0.1
+    sleep 0.001
+end
diff --git a/frontend/lab/samples/intro/welcome.htmlf b/frontend/lab/samples/intro/welcome.htmlf
@@ -1,11 +1,17 @@
 <h1>👋 Welcome</h1>
 <p>Programming is for everyone!</p>
 <p>
-  Check out the program on the right 👉.<br />
-  Hit <strong>Run</strong> to see the result!
+  You don't need any special skills or background, just a willingness to learn. Anyone can do it
+  with a little curiosity and practice.
 </p>
-<p>Can you change the program to print <strong>your name</strong>? ⭐</p>
 <p>
-  Check out the docs for more info on the
-  <a href="/docs/builtins.html#print" target="_blank"><code>print</code></a> command.
+  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>Let's get started!</p>
diff --git a/frontend/lab/samples/intro/worm.htmlf b/frontend/lab/samples/intro/worm.htmlf
@@ -4,7 +4,7 @@
   <li>
     Can you change this program to draw a circle with:
     <ul class="starlist">
-      <li>Your favourite <strong>colour</strong>?</li>
+      <li>Your favorite <strong>color</strong>?</li>
       <li>A slightly different <strong>size</strong>?</li>
       <li>
         A different <strong>outline color</strong>? <br />Use the

diff --git a/frontend/lab/samples/loops/gradient-show.evy b/frontend/lab/samples/loops/gradient-show.evy
@@ -0,0 +1,8 @@
+width 0.2
+for i := range 0 100 0.2
+    color (hsl i+200)
+    move i 0
+    line i 100
+    sleep 0.001
+end
+
diff --git a/frontend/lab/samples/loops/gradient-show.htmlf b/frontend/lab/samples/loops/gradient-show.htmlf
@@ -0,0 +1,49 @@
+<h1>🌈📺 Gradient</h1>
+
+<p>Run the program to draw an animated color gradient.</p>
+
+<p>
+  This program was created using the
+  <a
+    href="https://docs.evy.dev/builtins.html#line"
+    target="_blank
+	"
+    ><code>line</code></a
+  >
+  and
+  <a
+    href="https://docs.evy.dev/builtins.html#width"
+    target="_blank
+	"
+    ><code>width</code></a
+  >
+  commands.
+</p>
+
+<details class="small">
+  <summary><code>line</code> and <code>width</code> commands 📖</summary>
+  <p>The following code draws a line from point <code>10 20</code> to point <code>80 50</code>:</p>
+
+  <pre><code class="language-evy">width 2
+move 10 20
+line 80 50
+</code></pre>
+
+  <p>Output:</p>
+
+  <img src="samples/loops/img/gradient-line.svg" alt="Line from 10 20 to 80 50" />
+</details>
+
+<h2>Implementation</h2>
+<p>How would you go about writing this program?</p>
+
+<details class="small">
+  <summary>💡 Some clues</summary>
+  <ul>
+    <li>Break down the problem into smaller bits.</li>
+    <li>Create a static image with line <code>width 10</code>:</li>
+    <img src="samples/loops/img/gradient-thick.svg" alt="thick vertical lines" />
+    <li>Animate the lines with the <code>sleep</code> command.</li>
+    <li>Reduce the line width, move, sleep and loop increment.</li>
+  </ul>
+</details>