Skip to content

Kibibit/command-lime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

49 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

@kibibit/command-lime

Build All Contributors

Show what your CLI application can do using this terminal onboarding mock


cdn:

Installation

Include the style and script

This package depends on jquery.terminal and it should be included before the import of this package

CDN

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

npm install --save @kibibit/command-lime

Usage

<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
});

Examples

See the examples folder for a variety of usage examples

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Neil Kalman

πŸ’» πŸ“– 🎨 🚧 πŸš‡ ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!

Stay in touch