The avatar for @tomlarkworthy
Tom Larkworthy
Tech Lead at Taktile. Formerly Firebase, Google
Public
Edited
Jan 2
1 fork
2 stars
Insert cell
Insert cell
# Moldable Webpage (prototype)

(there is a better one [here](https://observablehq.com/@tomlarkworthy/moldable-webpage) now)
Insert cell
/*
If you are on the Observable website, you need to find the "Exporter" and click the "preview" button and this notebook will render itself to a tab that is still editable and re-searializable. When on the Observable webpage the layout is disabled because it makes editing impossible.
*/
Insert cell
Insert cell
Insert cell
Insert cell
source on [observablehq.com](https://observablehq.com/@tomlarkworthy/lopecode-webpage-template)
Insert cell
leftSidebarEndDelimiter = Symbol()
Insert cell
Insert cell
## Right sidebar
Insert cell
template on [observablehq.com](https://observablehq.com/@tomlarkworthy/lopecode-webpage-template)
Insert cell
## [Editor](https://observablehq.com/@tomlarkworthy/cell-editor)
Insert cell
viewof editor
Insert cell
## [Exporter](https://observablehq.com/@tomlarkworthy/exporter)
Insert cell
exporter({ headless: true })
Insert cell
<style>

:root {
--sidebar-size: 18rem;
}
.header {
background-color: #f1f1f1;
}
.sidebar {
width: var(--sidebar-size);
background-color: #f1f1f1;
}
.content {
max-width: calc(100vw - 2 * var(--sidebar-size));
};
</style>
Insert cell
visualizer(runtime, {
inspector: minicellInto,
invalidation
})
Insert cell
Insert cell
content = visualizer(runtime, {
inspector: Inspector.into,
invalidation,
detachNodes: true,
filter: (v, i) =>
i > symbolCellIndexes[rightSidebarEndDelimiter] &&
i < symbolCellIndexes[contentEndDelimiter],
classList: "content"
})
Insert cell
# Content

This webpage is a computational notebook that you can
- edit reactively
- download and use offline.
- upload to your own server

The underlying reactivity engine is [observablehq/runtime](https://github.com/observablehq/runtime). This implies
- the page executes unminified Javascript.
- you can use the browser's devtools.
- you can import from the npm ecosystem.
- you can implement complex programs.


Insert cell
## TODO

- Add cell should go to content page
- Minimap to see all cells
- Better retro theme look
- Drag cells across areas
- responsive design
Insert cell
Insert cell
Insert cell
apply_layout = {
console.log("apply_layout");
if (
location.href.includes("observableusercontent.com") &&
!location.href.includes("blob:")
)
return "Layout not applied when hosted on Observable";
const style = html`<style>
:root {
--header-size: 10rem;
}
.header {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: var(--header-size);
}
.sidebar {
top: 10rem;
position: fixed;
height: 100%;
overflow: auto;
}
.left {
left: 0;
}
.right {
right: 0;
}
.content {
margin-top: var(--header-size);
margin-left: auto;
margin-right: auto;
};
</style>`;
debugger;
document.body.appendChild(content);
document.body.appendChild(header);
document.body.appendChild(right_sidebar);
document.body.appendChild(left_sidebar);
document.body.appendChild(style);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more