Introduction

Observablehq is an online notebook for tools like d3, threejs etc…

In order to display it in Fastpages blog . We need to add a display div element and some <script> from observablehq.


<div id='display'></div>


<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@rahuketu86/observable-demo.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into('#display'));

</script>

Here is a displayed notebook

Observable Demo

Table of Contents

Observable Fastpages Integration

This notebook will indicate how we can do a blog post by writing a notebook in Observable and adding the same inside a markdown file which is then rendered by Fastpages in a blog post

Steps involved in the process:

  • Add a blogpost in Observable notebook. Please take care of following guidelines for good looking post
    • Imports should be done at the bottom in a section called Appendix
    • For most of the notebook , it might be better to hide code cells by unpinning them
    • Integrating TOC can be useful. A function is defined at the bottom
    • Title cell "h1" can be dynamically hidden using style. as indicated at the bottom
    • Start everything with h2 or '##' for the heading . This will combine well with title of markdown which is set in Fastpages Frontmatter

Example of Tex

E=mc2E = mc^2 v=stv = \frac{s}{t}
∫01x2 dx \int_0^1 x^2\,dx

Example of Static Plot

Example of Dynamic Widget

count = 12

Example of SVG

Appendix

toc = ƒ(…)
height = 202
width = 640
margin = Object {top: 20, right: 0, bottom: 0, left: 30}
fruits = Array(8) [Object, Object, Object, Object, Object, Object, Object, Object]