Add 2 interactive examples

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);

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>

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));
 

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>

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
+<InteractiveCode 
-// May return an Int or an Exception
+    code={`
-fun dangerous() -> Int!Exception
+    fun dangerous() -> Int!Exception
-{...}
+    {   // May throw randomly
+        return if Math.random() < 0.5 { 50 }
+        else { Exception("Unlucky") }
+    }
 
-fun run() -> !Exception
+    fun run() -> !Exception
-{
+    {   // If \`dangerous()\` throws, the function exits with the same error.
-    // Use a naked `try` to rethrow if there's an error
+        // Otherwise, continues
         val result = try dangerous()
-    // Here result is `Int`
+        print("The result is {result}")
-    print(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>
+
 
 In the previous example:
 

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