stdlib-js
[Idea]: Make code blocks on website documentation interactive
Idea
Currently, all code blocks in the documentation at https://stdlib.io/docs/api/latest are static. To make example code more useful and engaging, it would be nice to have interactive code shells on the website that could be edited and would provide real-time return annotations.
Some initial brainstorming has been done to inform how this would work, but, at minimum, we'd need to
- convert READMEs to structured data to allow for more straightforward transformation
- support dynamic loading of relevant stdlib packages used in example code blocks
- lazily integrate a code editor into documentation pages
- implement security measures to prevent malicious usage
Expected Outcomes
Improved user experience on the website, as the code examples would become editable and interactive. Return annotations would have to update in real-time, and additional contextual help could be provided via overlays etc. Another outcome would be to make it easy to switch between ES5 and ES6 for code blocks.
Involved Software
No other software is necessary.
Prerequisite Knowledge
JavaScript, HTML/CSS, React + JSX
Difficulty
Hard.
Project Length
350 hours.
Potential Mentors
@kgryte @Planeshifter @steff456
Any proposal wanting to address this idea, should include wireframes and mockups. Please spend some time reading and understanding the code for the website which is located in the stdlib-js/www repo.
