Add tutorial docs and interactive playgrounds

Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
2026-08-19 14:20:59 +00:00
parent 6bbf8039e4
commit d34722d66d
57 changed files with 5063 additions and 767 deletions
@@ -0,0 +1,43 @@
+import { createPlaygroundRuntime } from "./runtime.js";
+import { playgroundRecipe } from "./recipes.js";
+
+const status = document.querySelector("#status");
+const canvas = document.querySelector("#scene");
+const parentOrigin = location.origin;
+const parameters = new URLSearchParams(location.search);
+const embedded = parameters.has("embed");
+document.body.dataset.embed = String(embedded);
+let started = false;
+
+function report(message, error = false) {
+  status.textContent = message;
+  document.body.dataset.error = String(error);
+  parent.postMessage({ type: error ? "playground-error" : "playground-status", message }, parentOrigin);
+}
+
+async function execute(source) {
+  if (started) return;
+  started = true;
+  try {
+    const yawn = createPlaygroundRuntime(canvas, report);
+    const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+    await new AsyncFunction("yawn", `"use strict";\n${source}`)(yawn);
+    document.documentElement.dataset.yawnReady = "true";
+    parent.postMessage({ type: "playground-ready" }, parentOrigin);
+  } catch (error) {
+    console.error(error);
+    report(error?.stack ?? error?.message ?? String(error), true);
+  }
+}
+
+addEventListener("message", (event) => {
+  if (event.origin !== parentOrigin || event.data?.type !== "playground-run") return;
+  void execute(event.data.source);
+});
+
+const recipeId = parameters.get("recipe");
+if (embedded) {
+  void execute(playgroundRecipe(recipeId).source);
+} else {
+  parent.postMessage({ type: "playground-runner-ready" }, parentOrigin);
+}