Show what your CLI application can do using this terminal onboarding mock
cdn:
- styles: https://cdn.jsdelivr.net/npm/@kibibit/command-lime/dist/command-lime.min.css
- script: https://cdn.jsdelivr.net/npm/@kibibit/command-lime/dist/command-lime.min.js
This package depends on jquery.terminal and it should be included before the import of this package
At you HTML's head:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/css/jquery.terminal.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kibibit/command-lime/dist/command-lime.min.css">At the end of your HTML's body:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/js/jquery.terminal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@kibibit/command-lime/dist/command-lime.min.js"></script>npm install --save @kibibit/command-lime
<div id="term-demo" class="kb-om" data-title="demo CLI"></div>$('#term-demo').terminalOnboarding([{
name: 'demo CLI - create project',
greetings: 'Hello there! please run `mkdir` with a folder name to continue',
prompt: outputPrompt,
command: 'mkdir *',
output: outputMkdir
}, {
name: 'demo CLI - go into project',
greetings: () => `now that you created your folder, please go into it with "cd ${availableFolders[0]}"`,
prompt: outputPrompt,
command: 'cd *',
output: outputCd
}, {
name: 'demo CLI - initialize project',
greetings: 'please initialize your project with `npm init`',
prompt: outputPrompt,
command: 'npm init',
output: outputNpmInit
},
{
prompt: () => `name: (${folderName}) `,
command: '*',
output: outputNpmInitName
},
{
prompt: 'version: (1.0.0) ',
command: '*',
output: function (params) {
params = params.length ? params : ['1.0.0'];
if (!semverRegex().test(params.join(' '))) {
this.echo($.cliLit.txt.red('version must be in a semver schema'));
return false;
}
}
},
{
prompt: 'description: ',
command: ''
},
{
prompt: 'git repository: ',
command: ''
},
{
prompt: 'keywords: ',
command: ''
},
{
prompt: 'author: ',
command: ''
},
{
prompt: 'license: (ISC) ',
command: ''
},
{
prompt: `About to write to /Users/nkalman/Development/aaaaaaa/package.json:
{
"name": "my-thing",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {},
"description": ""
}
Is this ok? (yes) `,
command: ''
},
{
name: 'install project dependencies',
clear: false,
greetings: 'let\'s install our dependencies with `npm install`',
prompt: outputPrompt,
command: 'npm install *',
output: function (params) {
if (params.length > 2) {
this.echo('got these params: ' + params.toString());
this.echo($.cliLit.txt.red('please run npm install without any parameters'));
return false;
}
this.echo($.cliLit.txt.green(`all dependencies installed`));
this.echo($.cliLit.txt.blue(`\n~= Thank you for onboarding! =~`));
return true;
}
}], {
height: 150,
clearOnEveryStep: false
});See the examples folder for a variety of usage examples
Thanks goes to these wonderful people (emoji key):
Neil Kalman π» π π¨ π§ π |
This project follows the all-contributors specification. Contributions of any kind are welcome!
- Author - Neil Kalman
- Website - https://github.com/kibibit
- StackOverflow - thatkookooguy
- Twitter - @thatkookooguy
- Twitter - @kibibit_opensrc
