Miroirs/waforth
1
0
Fork 0
mirror of https://github.com/remko/waforth synced 2024-11-17 07:48:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

notebook: Layout tweaks

Browse source
This commit is contained in:
Remko Tronçon 2022-11-20 20:22:30 +01:00
parent 29e0201355
commit fc3a66a7a1
3 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/notebook/examples/drawing-with-forth.wafnb
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 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 `.`:"
"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> ❕ This is not a real tutorial, but a demo of a [WAForth notebook](https://github.com/remko/waforth#notebooks), and perhaps a glimpse of what an interactive Forth tutorial using notebooks could look like. \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,

9
src/web/notebook/src/wafnb.css
View file

@ -15,7 +15,8 @@ body {
blockquote {
border-radius: 0.5em;
padding: 0.5em 0.5em;
padding: 0.5em 1em;
margin: 1em 0;
background-color: rgb(225, 242, 254);
color: rgb(23, 70, 127);
}
@ -56,10 +57,12 @@ code.raw-code-cell {
.code-cell {
display: flex;
flex-wrap: wrap;
gap: 0.25em;
}
.output {
.code-cell .output {
flex: 1 1 15em;
gap: 0.125em;
display: flex;
flex-direction: column;
@ -75,7 +78,7 @@ code.raw-code-cell {
}
.code-cell .editor {
flex: 1;
flex: 1 1 15em;
background-color: #eee;
box-sizing: content-box;
}

4
src/web/notebook/src/wafnb.tsx
View file

@ -50,6 +50,7 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
n.appendChild(editor.el);
const outputEl = <div class="output" />;
outputEl.style.display = "none";
n.appendChild(outputEl);
const setEnabled = (v: boolean) => {
@ -58,6 +59,7 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
setEnableds.push(setEnabled);
const clear = () => {
outputEl.style.display = "none";
outputEl.innerHTML = "";
clearEl.style.display = "none";
editor.el.style.borderColor = "#ced4da";
@ -81,9 +83,11 @@ for (const n of document.querySelectorAll("[data-hook=code-cell")) {
});
if (!result.isEmpty) {
outputEl.appendChild(worldEl);
outputEl.style.display = "flex";
}
if (consoleEl.childNodes.length > 0) {
outputEl.appendChild(consoleEl);
outputEl.style.display = "flex";
}
clearEl.style.display = "block";
editor.el.style.borderColor = isSuccess(result.result)