From ea7889726cd93180bec259f01fb1fe1b8da14525 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Sun, 19 May 2024 23:06:08 -0500
Subject: [PATCH] Add 2 interactive examples

---
 public/css/pages.css                          |  2 +-
 src/components/InteractiveCode.astro          |  6 +-
 src/layouts/PagesLayout.astro                 |  2 +-
 src/pages/learn/basics/hello-world.mdx        | 33 ---------
 .../learn/error-handling/{try.md => try.mdx}  | 68 +++++++++++++++----
 src/pages/learn/{index.md => index.mdx}       | 44 +++++++++++-
 6 files changed, 101 insertions(+), 54 deletions(-)
 rename src/pages/learn/error-handling/{try.md => try.mdx} (66%)
 rename src/pages/learn/{index.md => index.mdx} (84%)

diff --git a/public/css/pages.css b/public/css/pages.css
index 3e8fe0d..f96cf3c 100644
--- a/public/css/pages.css
+++ b/public/css/pages.css
@@ -42,7 +42,7 @@
     padding: 0.5rem 0;
 }
 
-.markdown pre {
+.markdown > pre {
     margin: 0.5em 0;
     padding: 0.75em 0.75em;
     color: var(--code-theme-color);
diff --git a/src/components/InteractiveCode.astro b/src/components/InteractiveCode.astro
index b39811c..37d612d 100644
--- a/src/components/InteractiveCode.astro
+++ b/src/components/InteractiveCode.astro
@@ -99,7 +99,7 @@ function highlightCode(lines: Array<string>): string {
 const codeHtml = highlightCode(trimAndDedent(code));
 ---
 
-<div class="bg-black text-white rounded"
+<div class="bg-black text-white rounded px-1"
     x-data={`{
         line: 0,
         stdout: "",
@@ -110,12 +110,12 @@ const codeHtml = highlightCode(trimAndDedent(code));
     }`}
 >
     <span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span>
-    <pre class="language-thp" style="margin: 0; border-top-left-radius: 0;" data-disabled><code set:html={codeHtml}></code></pre>
+    <pre class="language-thp" style="margin: 0;" data-disabled><code set:html={codeHtml}></code></pre>
     <div class="grid grid-cols-2 font-mono text-sm">
         <div>
             <div class="p-1 border-b border-r border-white">stdout</div>
             <div class="h-24 p-1 border-r border-white">
-                <code class="bg-black" x-text="stdout"></code>
+                <pre><code class="bg-black" x-text="stdout"></code></pre>
             </div>
         </div>
         <div>
diff --git a/src/layouts/PagesLayout.astro b/src/layouts/PagesLayout.astro
index 2efb4f1..4f5b102 100644
--- a/src/layouts/PagesLayout.astro
+++ b/src/layouts/PagesLayout.astro
@@ -9,7 +9,7 @@ const { frontmatter, headings } = Astro.props;
 const posts = await Astro.glob("../pages/learn/**/*.{md,mdx}");
 
 // The index.md page must have a `pagesLayout` frontmatter, which declares the order of all the pages.
-const indexSubpath = `/learn/index.md`;
+const indexSubpath = `/learn/index.mdx`;
 
 const indexPage = posts.find((post) => post.file.endsWith(indexSubpath));
 
diff --git a/src/pages/learn/basics/hello-world.mdx b/src/pages/learn/basics/hello-world.mdx
index ba6f9e3..11c7b3d 100644
--- a/src/pages/learn/basics/hello-world.mdx
+++ b/src/pages/learn/basics/hello-world.mdx
@@ -14,36 +14,3 @@ print("Hello, world!")
 
 Then run `thp hello.thp`
 
-## Try
-
-<InteractiveCode 
-    code={`
-    val x = 322
-    var y = 322
-
-    fun f(Int a, Int b) {
-        print("hello {a} {b}")
-    }
-
-    f(x, y)
-    `}
-    steps={`[
-        [["line", 1]],
-        [
-            ["line", 2],
-            ["set", "x", "322"]
-        ],
-        [
-            ["line", 8],
-            ["set", "y", "322"]
-        ],
-        [["line", 4]],
-        [["line", 5]],
-        [
-            ["out", "gaaaa 322 322"],
-            ["line", 6]
-        ],
-        [["line", 8]],
-        [["line", 0]]
-    ]`}
-></InteractiveCode>
diff --git a/src/pages/learn/error-handling/try.md b/src/pages/learn/error-handling/try.mdx
similarity index 66%
rename from src/pages/learn/error-handling/try.md
rename to src/pages/learn/error-handling/try.mdx
index e84b8ab..9a8435f 100644
--- a/src/pages/learn/error-handling/try.md
+++ b/src/pages/learn/error-handling/try.mdx
@@ -2,6 +2,7 @@
 layout: ../../../layouts/PagesLayout.astro
 title: Try/Exceptions
 ---
+import InteractiveCode from "../../../components/InteractiveCode.astro";
 
 # Try/exceptions
 
@@ -62,21 +63,62 @@ via try expressions:
 
 ### Naked try
 
-Use a naked `try` when you want to rethrow an error, if any.
+Use a naked `try` when you want to rethrow an error, if there is any.
 
-```thp
-// May return an Int or an Exception
-fun dangerous() -> Int!Exception
-{...}
+<InteractiveCode 
+    code={`
+    fun dangerous() -> Int!Exception
+    {   // May throw randomly
+        return if Math.random() < 0.5 { 50 }
+        else { Exception("Unlucky") }
+    }
+
+    fun run() -> !Exception
+    {   // If \`dangerous()\` throws, the function exits with the same error.
+        // Otherwise, continues
+        val result = try dangerous()
+        print("The result is {result}")
+    }
+
+    val res1 = run() // First, without error
+    val res2 = run() // Then, an example with error
+    `}
+    steps={`[
+        [["line", 14]],
+        [["line", 7]],
+        [["line", 10]],
+        [["line", 1]],
+        [["line", 3]],
+        [
+            ["line", 10],
+            ["set", "result", 50]
+        ],
+        [["line", 11]],
+        [
+            ["line", 14],
+            ["out", "The result is 50\\n"],
+        ],
+        [
+            ["line", 15],
+            ["set", "res1", "<empty>"],
+        ],
+        [["line", 7]],
+        [["line", 10]],
+        [["line", 1]],
+        [["line", 3]],
+        [["line", 4]],
+        [
+            ["line", 10],
+            ["set", "result", "Exception(\\"Unlucky\\")"]
+        ],
+        [["line", 15]],
+        [
+            ["line", 0,],
+            ["set", "res2", "Exception(\\"Unlucky\\")"],
+        ]
+    ]`}
+></InteractiveCode>
 
-fun run() -> !Exception
-{
-    // Use a naked `try` to rethrow if there's an error
-    val result = try dangerous()
-    // Here result is `Int`
-    print(result)
-}
-```
 
 In the previous example:
 
diff --git a/src/pages/learn/index.md b/src/pages/learn/index.mdx
similarity index 84%
rename from src/pages/learn/index.md
rename to src/pages/learn/index.mdx
index 08ef69e..64435e5 100644
--- a/src/pages/learn/index.md
+++ b/src/pages/learn/index.mdx
@@ -46,8 +46,9 @@ pagesLayout:
   - path: interfaces
   - path: anonymous
   - path: magic
-
 ---
+import InteractiveCode from "../../components/InteractiveCode.astro";
+
 
 # Welcome
 
@@ -57,12 +58,49 @@ THP is a new programming language that compiles to PHP.
 
 ![Accurate visual description of THP](/img/desc_thp.jpg)
 
-<br>
 
 This page discusses some of the design decitions of the language,
 if you want to install THP go to the [installation guide](install)
 
-If you want to learn the language, go to the learn section.
+
+## Interactive execution
+
+The documentation contains snippets of interactive THP code, like this:
+
+<InteractiveCode 
+    code={`
+    val x = "android"
+    var y = 17
+
+    fun f(Int a, Int b) {
+        print("hello, {a} {b}")
+    }
+
+    f(x, y)
+    `}
+    steps={`[
+        [["line", 1]],
+        [
+            ["line", 2],
+            ["set", "String x", "\\"android\\""]
+        ],
+        [
+            ["line", 8],
+            ["set", "Int y", "17"]
+        ],
+        [["line", 4]],
+        [["line", 5]],
+        [
+            ["out", "hello, android 17"],
+            ["line", 6]
+        ],
+        [["line", 8]],
+        [["line", 0]]
+    ]`}
+></InteractiveCode>
+
+Use the `Step` and `Reset` buttons to emulate the execution of a
+THP program!
 
 ## Goals