About This Presentation

This presentation was made with ❤ using , , and .

Observable Notebooks

• The interactive widgets were all created using observablehq, a reactive notebook environment for javascript code
• In particular, the notebooks for this presentation derive from the following "electron ptychography" collection
• Each widget was imported in a clean notebook, see e.g. here, and exported using the option "Runtime with React"

React Components

• Each widget was then yarn-installed as a separate component and placed in the src directory, see e.g. here
• The only subtleties here are to make sure to remove the paragraph-tagged attribution banner, and ensure the correct pinned version of the notebook gets yarn-installed

Docusaurus Website

• The website interface was made using Docusaurus, a documentation-site builder using React and MDX
• A number of configuration options were used to make it look more "presentation-like":
• Hideable sidebar
• Hideable table-of-contents on each doc page
• Used css-styling to hide observable "inspector" cells
• Tabs and details elements were used to mimic slide animations
• Finally, the website was deployed and hosted on github pages