31:T60f,32:T467,default_mobile = ({ settings: { showMaximiseIcon: false, showPopoutIcon: false, showCloseIcon: true, hasHeaders: true }, content: [ { type: "column", content: [ { type: "stack", content: [ { type: "component", title: "title", componentName: "panel", componentState: { label: "header" } }, { type: "component", title: "nav", componentName: "panel", componentState: { label: "left_sidebar" } }, { type: "component", title: "edit", componentName: "panel", componentState: { label: "right_sidebar" } } ], height: 10 }, { type: "row", content: [ { type: "component", title: "content", componentName: "panel", componentState: { label: "content" } } ] } ] } ] })33:T44c,default_desktop = ({ settings: { showMaximiseIcon: false, showPopoutIcon: false, showCloseIcon: true, hasHeaders: true }, content: [ { type: "column", content: [ { type: "component", title: "title", componentName: "panel", componentState: { label: "header" }, height: 5 }, { type: "row", content: [ { type: "component", title: "nav", componentName: "panel", componentState: { label: "left_sidebar" }, width: 15 }, { title: "content", type: "component", componentName: "panel", componentState: { label: "content" }, width: 60 }, { type: "component", title: "edit", componentName: "panel", componentState: { label: "right_sidebar" }, width: 25 } ] } ] } ] })34:T48b,panel = function (container, component) { let node = undefined; if (component.label == "header") { node = header; } else if (component.label == "content") { node = content; } else if (component.label == "left_sidebar") { node = left_sidebar; } else if (component.label == "right_sidebar") { node = right_sidebar; } else if (component.label == "footer") { //node = footer; } // maintain scroll position in the state const c_element = container.getElement(); const element = c_element.appendChild(node); debugger; container.on("open", () => { // Ugly this requires 2 animation frames to settle :/ requestAnimationFrame(() => { requestAnimationFrame(() => { requestAnimationFrame(() => { // actually needs 3 for mobile :s if (component.scrollTop) c_element.scrollTop = component.scrollTop; if (component.scrollLeft) c_element.scrollLeft = component.scrollLeft; }); }); }); }); c_element.addEventListener("scroll", (event) => { container.extendState({ scrollTop: c_element.scrollTop, scrollLeft: c_element.scrollLeft }); }); }35:T984,# Decentralised Webfile Development ⚠️ This is out-of-date and half broken. The latest iteration is the [moldable-index](https://observablehq.com/@tomlarkworthy/moldable-index) This webpage looks kinda vanilla but it is **different**. First, it contains a live coding runtime, something analogous to a spreadsheet (the [observablehq/runtime](https://github.com/observablehq/runtime)). When the code changes, it updates instantly. Second, it bundles its own code editor, so you can change the page from within. Third, the page can serialize itself _and_ all its dependancies into a single HTML that can be run from the local filesystem. Its truly serverless in the sense of not requiring a webserver (not even a local one). Its offline-first in the sense you don't need an internet connection to run the file (which is a simple double click from your filesystem). The reactive runtime has the concept of modules, the software architecture is modular and assembled in userspace from orthogonal tools. [Editor](https://observablehq.com/@tomlarkworthy/editor) the cell editor. [Exporter](https://observablehq.com/@tomlarkworthy/exporter) the page serializer and [Visualizer](https://observablehq.com/@tomlarkworthy/visualizer) the cell renderer. You can add more tooling with importing from the [Observbalehq.com](https://observablehq.com/) ecosystem. There is actually an [AI](https://observablehq.com/@tomlarkworthy/robocoop) too, which helped write the complicated part, the ObservableJS compiler/decompiler [toolchain](https://observablehq.com/@tomlarkworthy/observablejs-toolchain). Amazingly this is around 1MB in size, for an entirely self-hosted, self-sustainable, recursively exportable, offline-first, file-first, hermetic, web-based programming substrate. This notebook is uploaded to [Github](https://github.com/tomlarkworthy/lopecode/blob/main/webpage.html) where it can be [served](https://tomlarkworthy.github.io/lopecode/webpage.html) directly using pages _without_ a build configuration. I made this to see if it was possible to have a zero tooling rapid development platform. This is probably not that *yet*, this is a proof-of-concept. There are some userspace parts missing, for example, static file upload (Serializer can serialize FileAttachments, but there is no way in userspace to upload them yet - you have to do that on [observablehq.com](https://observablehq.com/)).36:T420,## How to use You can drag cells around the page using the dotted square handle. You can click a cell to get make it editable in the editor, or click it on the minimap on the left. At the bottom of the editors cells chooser drop down is ``. This will add a new cell underneath the last click one. The header/sidepanel/content panels are resizable and dockable. The exporter has a "preview" button which exports the page to an ephemeral tab, and a "download" which copies the whole thing including the latest modifications to an offline-file. The editing experience is not there yet. Probably wiser to fork the [original Observable](https://observablehq.com/@tomlarkworthy/moldable-webpage) notebook if you seriously want to create a webpage. Observable is a single linear list of cells, we map those to different panel sections using `delimiter` cells. It is possible to create cells outside those delimiters, and then they will not appear in a panel. The left sidepanel has a complete list of cells which are also draggable and clickable.37:[{"id":"446c2d9ba6c33fce8b0637552a5626aeae40e260a1800db2f96a6dfca1b1f0fbc65c8c4614fcd6d64fd6ddff4b78601e992dc06610de2af8af641b1feb686252","href":"https://static.observableusercontent.com/files/446c2d9ba6c33fce8b0637552a5626aeae40e260a1800db2f96a6dfca1b1f0fbc65c8c4614fcd6d64fd6ddff4b78601e992dc06610de2af8af641b1feb686252","name":"graph (4).svg","type":"image/svg+xml","lastModified":1736102451939.182,"size":5253}] 2f:{"title":"Moldable Webpage (prototype II)","cells":[{"id":393,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":499,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":698,"value":"lopeviz_handle_css_ref = lopeviz_handle_css","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"minicellStyle_ref = minicellStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"base_css_ref = base_css","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"light_theme_css_ref = light_theme_css","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"mutable config = is_mobile ? default_mobile : default_desktop","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"is_mobile = width < 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"layout_state = layout.on(\n \"stateChanged\",\n () => (mutable config = gl.LayoutConfig.fromResolved(layout.toConfig()))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"layout = {\n const layout = new gl.GoldenLayout(mutable config, page);\n layout.registerComponent(\"panel\", panel);\n layout.init();\n invalidation.then(() => layout.destroy()); // avoid layouts stacking up\n return layout;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"isOnObservableCom = () => location.href.includes(\"observableusercontent.com\") &&\n !location.href.includes(\"blob:\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"apply_layout = {\n console.log(\"apply_layout\");\n if (isOnObservableCom())\n return \"Layout not applied when hosted on Observable\";\n\n document.body.appendChild(base_css);\n document.body.appendChild(light_theme_css);\n document.body.appendChild(page_style_css);\n document.body.appendChild(lopeviz_handle_css);\n document.body.appendChild(minicellStyle);\n document.body.appendChild(page);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"headerStartDelimiter = Symbol()","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"header = visualizer(runtime, {\n inspector: Inspector.into,\n invalidation,\n detachNodes: true,\n filter: between(headerStartDelimiter, headerEndDelimiter),\n classList: \"header\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"title = md`# Moldable Webfile (prototype II)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"headerEndDelimiter = Symbol()","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"left_sidebar = visualizer(runtime, {\n inspector: Inspector.into,\n invalidation,\n detachNodes: true,\n filter: between(headerEndDelimiter, leftSidebarEndDelimiter),\n classList: \"sidebar left\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"## Links","pinned":true,"hidden":false,"mode":"md"},{"id":291,"value":"source on [observablehq.com](https://observablehq.com/@tomlarkworthy/moldable-webpage)\n\nreplicated to [Github](https://github.com/tomlarkworthy/lopecode)\n\nhosted on [Moldable.app](https://tomlarkworthy.moldable.app/webpage.html)\n\n🦋 [@larkworthy.bsky.social](https://bsky.app/profile/larkworthy.bsky.social)","pinned":true,"hidden":false,"mode":"md"},{"id":687,"value":"## Main cells\n\nincludes all cells in the main module including those not in page panels.","pinned":true,"hidden":false,"mode":"md"},{"id":671,"value":"minimap = visualizer(runtime, {\n inspector: minicellInto,\n invalidation,\n detachNodes: false,\n classList: \"minimap\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"leftSidebarEndDelimiter = Symbol()","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"right_sidebar = visualizer(runtime, {\n inspector: Inspector.into,\n invalidation,\n detachNodes: true,\n filter: between(leftSidebarEndDelimiter, rightSidebarEndDelimiter),\n classList: \"sidebar right\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"## [Export](https://observablehq.com/@tomlarkworthy/exporter)","pinned":true,"hidden":false,"mode":"md"},{"id":35,"value":"exporter_ref = exporter({ headless: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"## [Edit](https://observablehq.com/@tomlarkworthy/cell-editor)","pinned":true,"hidden":false,"mode":"md"},{"id":38,"value":"editor_view = viewof editor","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"rightSidebarEndDelimiter = Symbol()","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"content = visualizer(runtime, {\n inspector: Inspector.into,\n invalidation,\n detachNodes: true,\n filter: between(rightSidebarEndDelimiter, contentEndDelimiter),\n classList: \"content\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"# [HYTRADBOI 2025?](https://www.hytradboi.com/2025)\n\n🤞 this is accepted for the online conference \"Have You Tried Rubbing a Database On It\" as an interesting programming language topic","pinned":true,"hidden":false,"mode":"md"},{"id":805,"value":"$36","pinned":true,"hidden":false,"mode":"md"},{"id":319,"value":"## TODO\n- On mobile clicking the apply button loses the editor focus. We should refocus it automatically (editor)\n- Editor does not load on safari :(","pinned":true,"hidden":false,"mode":"md"},{"id":31,"value":"contentEndDelimiter = Symbol()","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"footerEndDelimiter = Symbol()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"between = (symbolStart, symbolEnd) => (variable, index, state) => {\n if (variable._value === symbolStart) {\n state.between = true;\n } else if (variable._value === symbolEnd) {\n state.between = undefined;\n } else {\n return state.between;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1114,"value":"## Imports","pinned":true,"hidden":false,"mode":"md"},{"id":383,"value":"import {\n gl,\n base_css,\n light_theme_css\n} from \"@tomlarkworthy/golden-layout-2-6-0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n visualizer,\n Inspector,\n allVariables,\n cellMaps,\n lopeviz_handle_css\n} from \"@tomlarkworthy/visualizer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { exporter } from \"@tomlarkworthy/exporter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { viewof editor } from \"@tomlarkworthy/editor\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"import { runtime, main } from \"@mootari/access-runtime\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"import {\n into as minicellInto,\n style as minicellStyle\n} from \"@tomlarkworthy/minicell\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}