I am looking to do a cool project like Killercoda for a kids learning group where I expose VMs via browser access using terminal access such as code-server IDE or theia IDE (which killercoda uses). I am able to spin up the VMS using kubernetes pods and expose them via an ingress resource.
However, what I can't seem to implement or wrap my head around is how killercoda or katacoda(now deprecated) have instructions on the left side of the browser execute commands on the terminal access (as seen in the picture attached).
The closest I could get is a markdown configuration of where the instructions are coming from such as the below:
### Single line code blocks can be copied by default
`copy me`
### It can also be disabled
`copying disabled`{{}}
### Execute a command per click
`ls -lh`{{exec}}
### Send Ctrl+c before execute
Run a blocking command:
`sleep 1d`{{exec}}
End it and run another:
`whoami`{{exec interrupt}}
How are the {{ exec }} commands placeholders passed to the terminal session and get executed.
There also have an index.json on the steps to run/execute from the instructions manual and then bunch of .md files in the directory. An exmaple given is:
{
"title": "Lab 1",
"description": "Everything Linux",
"details": {
"intro": {
"text": "intro.md"
},
"steps": [
{
"text": "step1.md"
},
{
"text": "step2.md"
},
{
"text": "step3.md"
}
],
"finish": {
"text": "finish.md"
}
},
"backend": {
"imageid": "ubuntu"
}
}
I just need a guide such as the tools or frameworks or resources or templates or languages on how that is down (execute commands from instructions to the terminal session). I know the project is (was) open-source to some extent that is why I think there's the support out there.
My current project tools are:
- Django Rest framework (api)
- Vuejs (frontend)
