README updates

.vscode/launch.json

@@ -9,7 +9,7 @@
       "runtimeExecutable": "${execPath}",
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}/src/web/vscode-extension",
-        "${workspaceFolder}/src/web/vscode-extension/examples"
+        "${workspaceFolder}/src/web/notebook/examples"
       ],
       "outFiles": ["${workspaceFolder}/src/web/vscode-extension/dist/*.js"]
     },
@@ -22,7 +22,7 @@
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}/src/web/vscode-extension",
         "--extensionDevelopmentKind=web",
-        "${workspaceFolder}/src/web/vscode-extension/examples"
+        "${workspaceFolder}/src/web/notebook/examples"
       ],
       "outFiles": ["${workspaceFolder}/src/web/vscode-extension/dist/*.js"]
     }

README.md

@@ -155,13 +155,16 @@ forth.interpret(`
 `);
 ```
 
-## Visual Studio Code Notebooks
+## Notebooks
 
 The [WAForth Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=remko.waforth-vscode-extension) adds support
 for interactive Forth notebooks powered by WAForth. You can execute both text-based Forth code, as well as [Thurtle](https://mko.re/thurtle/) graphics.
 
 Because it is powered by WebAssembly, this extension works both in the desktop version of Visual Studio Code and in [the browser version of Visual Studio Code](https://code.visualstudio.com/docs/editor/vscode-web) (e.g. https://github.dev, https://vscode.dev).
 
+You can also convert the notebook into a lightweight self-contained page using [`wafnb2html`](https://github.com/remko/waforth/tree/master/src/web/notebook).
+An example can be seen [here](https://mko.re/wafnb/drawing-with-forth).
+
 <div align="center">
 <div>
 <a href="https://github.dev/remko/waforth/blob/master/src/web/notebook/examples/drawing-with-forth.wafnb"><img src="https://raw.githubusercontent.com/remko/waforth/master/src/web/vscode-extension/doc/notebook.gif" alt="WAForth notebook"></a>

src/web/notebook/README.md

@@ -0,0 +1,7 @@
+# WAForth Notebooks
+
+A scripts to convert a WAForth Notebook 
+(created using the [WAForth Visual Studio Extension](https://marketplace.visualstudio.com/items?itemName=remko.waforth-vscode-extension))
+into a static HTML page.
+
+You can see an example in action [here](https://mko.re/wafnb/drawing-with-forth).

src/web/notebook/examples/drawing-with-forth.wafnb

@@ -3,7 +3,7 @@
     {
       "kind": 1,
       "language": "markdown",
-      "value": "# Drawing with Forth\n\nIn this tutorial, you'll learn basic Forth by drawing graphics with a turtle.\n\n> 💡 Click on the *Run* button next to the examples to run the code.\n\n## The stack\n\nForth is a stack-based language. Numbers are put on the stack, and words pop them off the stack (and put new ones on the stack) again.\nFor example, to take the sum of 8 and 14, put both numbers on the stack, and call `+`. To pop the result of the stack and print it out, use `.`:"
+      "value": "# Drawing with Forth\n\nIn this tutorial, you'll learn basic Forth by drawing graphics with a turtle.\n\n> 💡 Click the *Run* button next to the examples to run the code, or click the *Run* button at the top to run all the code on this page.\n\n## The stack\n\nForth is a stack-based language. Numbers are put on the stack, and words pop them off the stack (and put new ones on the stack) again.\nFor example, to take the sum of 8 and 14, put both numbers on the stack, and call `+`. To pop the result of the stack and print it out, use `.`:"
     },
     {
       "kind": 2,
@@ -88,7 +88,7 @@
     {
       "kind": 2,
       "language": "waforth",
-      "value": "730 CONSTANT LENGTH\n6   CONSTANT DEPTH\n\n: SIDE ( length depth -- )\n  DUP 0= IF \n    DROP FORWARD EXIT \n  THEN\n  SWAP 3 / SWAP 1-\n  2DUP RECURSE\n  60 LEFT 2DUP RECURSE\n  120 RIGHT 2DUP RECURSE\n  60 LEFT RECURSE\n;\n\n: SNOWFLAKE ( -- )\n  3 0 DO \n    LENGTH DEPTH SIDE\n    120 RIGHT\n  LOOP\n;\n\n1 SETPENSIZE\nSNOWFLAKE"
+      "value": "730 CONSTANT LENGTH\n3   CONSTANT DEPTH\n\n: SIDE ( length depth -- )\n  DUP 0= IF \n    DROP FORWARD EXIT \n  THEN\n  SWAP 3 / SWAP 1-\n  2DUP RECURSE\n  60 LEFT 2DUP RECURSE\n  120 RIGHT 2DUP RECURSE\n  60 LEFT RECURSE\n;\n\n: SNOWFLAKE ( -- )\n  3 0 DO \n    LENGTH DEPTH SIDE\n    120 RIGHT\n  LOOP\n;\n\n1 SETPENSIZE\nSNOWFLAKE"
     },
     {
       "kind": 1,

src/web/notebook/src/generator.ts

@@ -88,7 +88,7 @@ export async function generate({
   out.push("</div>");
 
   out = [
-    `<html><head><meta charset="utf-8"><title>${escapeHTML(
+    `<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${escapeHTML(
       title ?? ""
     )}</title>`,
     style,

src/web/vscode-extension/README.md

@@ -8,7 +8,7 @@ Logo-like Forth Turtle graphics.
 
 <div align="center">
 <div>
-<a href="https://github.dev/remko/waforth/blob/master/src/web/notebook/examples/drawing-with-forth.wafnb"><img src="https://raw.githubusercontent.com/remko/waforth/master/src/web/notebook/doc/notebook.gif" alt="WAForth notebook"></a>
+<a href="https://github.dev/remko/waforth/blob/master/src/web/notebook/examples/drawing-with-forth.wafnb"><img src="https://raw.githubusercontent.com/remko/waforth/master/src/web/vscode-extension/doc/notebook.gif" alt="WAForth notebook"></a>
 </div>
 <figcaption><em><a href="https://github.dev/remko/waforth/blob/master/src/web/notebook/examples/drawing-with-forth.wafnb">WAForth notebook</a></em></figcaption>
 </div>

src/web/vscode-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waforth-vscode-extension",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "displayName": "WAForth",
   "description": "WAForth interactive notebooks",
   "categories": [