README updates

This commit is contained in:
Remko Tronçon 2022-11-20 19:43:21 +01:00
parent 1075c3f58e
commit 29e0201355
7 changed files with 18 additions and 8 deletions

4
.vscode/launch.json vendored
View file

@ -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"]
}

View file

@ -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>

View file

@ -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).

View file

@ -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,

View file

@ -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,

View file

@ -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>

View file

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