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>

docs/.vitepress/theme/Playground.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, default: "Run this recipe against the real Yawn worker." },
+});
+
+const query = computed(() => encodeURIComponent(props.id));
+</script>
+
+<template>
+  <section class="yawn-playground">
+    <div class="yawn-playground__header">
+      <div>
+        <span>LIVE PLAYGROUND</span>
+        <strong>{{ title }}</strong>
+        <p>{{ description }}</p>
+      </div>
+      <a :href="`/playground/?recipe=${query}`">Edit and run ↗</a>
+    </div>
+    <ClientOnly>
+      <iframe
+        :src="`/playground/runner.html?recipe=${query}&embed=1`"
+        :title="`${title} live preview`"
+        loading="lazy"
+      />
+    </ClientOnly>
+  </section>
+</template>