Interactive documentation

[micuat]

As discussed for COSA - currently testing here https://naotohieda.com/hydra/

todo

• [x] make the placeholder attachment stuff modular using torus
• [x] spacing before load in order to have proper spacing before afterEach is called
  • not perfect but .markdown-section pre[data-lang=javascript] { margin-top: 512px; } will do
• [x] automatically test the code and if it has error (e.g., ones with patchbay/p5 - missing lib) then prompt to open the "real" editor
• [x] lazy load the scripts
• [x] "reset code" button
• [ ] internationalization - not only the contents but the torus element needs translation
• [ ] and work on the contents!
• [x] and make PR!!
• [ ] find a new domain - maybe on https://js.org/ ?

[ffd8]

This looks greeat. One suggestion after loading it just now, it immediately gave a popup asking for my screenshare + webcam.. might be a bit scary upon first visit. Makes me wonder if each example should have a 'run' button for on demand? Or toggle at the start to activate for use in demos below?

[micuat]

@ffd8 thanks for the comment - added to the list (in fact I had that in mind, too!) then I fixed it!

[micuat]

this is more about the content but the word "output", "buffer" and "render" can be confusing. One might ask, what is to render to o0 (as in .out(o0)) and what's the difference to render(o0) ? We might need to define some terms (which was also brought up in the discussion) @ojack @flordefuego

edit: words like the followings need clarification

• input / output
• base (texture)
• buffer
• render
• texture
• visuals
• graphics