treehouse/template/sandbox.hbs
liquidex 523a364fa9 switch the layout to a wider one that leans slightly to the left of the page
this is to make space on the right for a nice background in the future
2024-10-30 23:02:47 +01:00

61 lines
1.7 KiB
Handlebars

<!DOCTYPE html>
<html>
<head>
<title>treehouse iframe sandbox</title>
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
width: fit-content;
height: fit-content;
}
canvas {
display: block;
}
</style>
<script type="importmap">{{{ include_static 'generated/import-map.json' }}}</script>
<script type="module">
import { evaluate, domConsole, jsConsole } from "treehouse/components/literate-programming/eval.js";
import { internals as sandboxInternals } from "treehouse/sandbox.js";
globalThis.console = domConsole;
addEventListener("message", async event => {
let message = event.data;
if (message.action == "eval") {
evaluate(message.input, {
error() {
sandboxInternals.body.replaceChildren();
},
newOutput(currentOutputIndex) {
if (currentOutputIndex == window.treehouseSandboxInternals.outputIndex) {
document.body.replaceChildren(...sandboxInternals.body.childNodes);
postMessage({
kind: "resize",
outputIndex: currentOutputIndex,
});
}
sandboxInternals.resetBody();
},
});
}
});
postMessage({ kind: "ready" });
</script>
</head>
<body></body>
</html>