[5/?] Add ability to run code examples in the playground: Run code samples inline

.github/linters/.markdown-lint.yml

@@ -1,5 +1,6 @@
 {
   "MD007": { "indent": 4 },
   "MD013": false,
-  "MD026": false
+  "MD026": false,
+  "MD042": false
 }

.spelling-wordlist.txt

@@ -28,6 +28,7 @@ FFI
 filesystem
 finaliser
 finalisers
+fontawesome
 forgeable
 GC
 GDB

docs/assets/snippets.js

@@ -0,0 +1,32 @@
+/**
+ * @param {MouseEvent} evt 
+ */
+async function runSnippetInline(evt) {
+    evt.preventDefault();
+    const snippetRes = await fetch(`https://raw.githubusercontent.com/ponylang/pony-tutorial/main/code-samples/${evt.target.dataset.snippet}`)
+    const snippetCode = await snippetRes.text()
+    const evaluateRes = await fetch('https://playground.ponylang.io/evaluate.json', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            "code": snippetCode,
+            "separate_output": true,
+            "color": true,
+            "branch": "release"
+        })
+    })
+    const json = await evaluateRes.json()
+    evt.target.previousElementSibling.querySelector('pre').append(Object.assign(document.create('pre'), {
+        innerHTML: json.success ? json.stdout : json.compiler,
+    }))
+}
+
+document$.subscribe(function() {
+    const inlineRunButtons = document.querySelectorAll('.md-button[data-snippet]')
+
+    for (const button of inlineRunButtons) {
+        button.addEventListener('click', runSnippetInline)
+    }
+})

docs/getting-started/hello-world.md

@@ -21,6 +21,8 @@ In your file, put the following code:
 --8<-- "hello-world-main.pony"
 ```
 
+[:fontawesome-solid-play: Run inline](#){ .md-button .md-button--primary data-snippet="hello-world-main.pony" }
+
 ## Compiling the program
 
 Now compile it:

mkdocs.yml

@@ -6,6 +6,9 @@ repo_url: https://github.com/ponylang/pony-tutorial/
 site_url: https://tutorial.ponylang.io/
 use_directory_urls: false
 
+extra_javascript:
+  - assets/snippets.js
+
 extra:
   generator: false
   social:
@@ -25,6 +28,10 @@ markdown_extensions:
   - pymdownx.snippets:
       base_path: ['code-samples']
       check_paths: true
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  - attr_list
   - smarty
   - toc:
       permalink: true