Epic: Tip Page

[farskid]

Plans for the tip page:

Each tip should:

• be a directory under /data/tips (e.g. /data/tips/[demo-name])
• have an index.md for the content (e.g. /data/tips/[demo-name]/index.md)
• have a statechart.js file containing the final model of the example tip
• embed Xstate visualizer
• come with demo files to showcase a running example alongside debug values

Demos

Each demo will have to have at least a demo.html and demo.js. The JS file can be a single bundle of demo's framework of choice if needs be. This JS file will also contain some boilerplate code for tip page and demo frame communication.

Demo files should live under /static/[demo-name]/ directory.

Demo and Tip communication bridge

The bridge is a global variable defined on the tip page window. This variable will contain the frame's interpreter info so that we could extract current state and context to be shown as debug values on the tip page.

Tip compilation process

• Render the markdown content
• Create a Github gist with statechart.js that can be pulled into the visualizer later

Tip page layout

[farskid]

@jamestthompson3 Let's keep this issue as the master and split off subtasks into separate issues.

[github-actions[bot]]

This issue is marked as stale due to inactivity.