Add 2 interactive examples

master
Araozu 2024-05-19 23:06:08 -05:00
parent 0d4aad83da
commit ea7889726c
6 changed files with 101 additions and 54 deletions

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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:

View File

@ -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