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,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="Edit and run Yawn render graph examples." />
+    <title>Yawn Playground</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header>
+      <a class="brand" href="/docs/">YAWN<span>.</span></a>
+      <div class="recipe-meta">
+        <strong id="recipe-title">Playground</strong>
+        <span id="recipe-package"></span>
+      </div>
+      <label>
+        <span>Example</span>
+        <select id="recipe-select" aria-label="Playground example"></select>
+      </label>
+      <button id="run" class="primary" type="button">▶ Run</button>
+      <button id="reset" type="button">Reset</button>
+      <button id="copy" type="button">Copy link</button>
+      <a id="docs-link" class="button" href="/docs/">Docs ↗</a>
+    </header>
+    <main>
+      <section class="code-pane" aria-label="Code editor">
+        <div class="pane-title"><span>JavaScript</span><kbd>Ctrl</kbd> + <kbd>Enter</kbd> to run</div>
+        <textarea id="editor" spellcheck="false" aria-label="Playground code"></textarea>
+      </section>
+      <section class="preview-pane" aria-label="Live preview">
+        <iframe id="preview" title="Yawn playground preview"></iframe>
+        <output id="status" aria-live="polite">Preparing playground…</output>
+      </section>
+    </main>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>