CcTerminalApp

This project contain the source code for CC Terminal.

Try to enter help or 10+10 or even alert("Hello World") :P

Demo

1. Simple Integration: https://codesandbox.io/s/03w0sg
2. Custom Prompt and Register Custom Commands: https://codesandbox.io/s/hidden-fog-57lnwh

How to Install?

Step 1 (Install Library):

# Please run following command in your terminal, before running this, make sure you already have installed Node, npm and angular cli.

npm install cc-terminal

Step 2 (To Get the assets from cc-terminal library to your project):

1. Open angular.json
2. Copy/Paste follows config into your architect > build > options > assets:

{
  "glob": "**/*",
  "input": "./node_modules/cc-terminal/lib/assets/",
  "output": "./assets"
}

Example: 

"assets": [
  // ... Other assets like "src/favicon.ico", "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/cc-terminal/lib/assets/",
    "output": "./assets"
  }
]

How to Use?

Simple Example to use existing functionality

// Step 1. In your app.module.ts, first you need to import cc-module and then, you need to add it in imports, please see as below:

... // Other imports Here

import { CcTerminalModule } from 'cc-terminal';

@NgModule({
  declarations: [
    ... // Your other declarations
  ],
  imports: [
    ... // Your other imports
    CcTerminalModule
  ],
  providers: [
    ... // Your other providers
  ],
  bootstrap: [
    ... // Your bootstrap component
  ]
})

<!-- Step 2. To use this in you components, you need to just a tag use as follows: -->

<!-- In your any component html file or template style, add follows line, in my case its app.component.html -->

<cc-terminal ></cc-terminal>

Customize Styling Example

// Step 1: Add style in your application component

// ... Other imports

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // ... other declaration
  _styles: any; // declaration of a property which will assign to ccStyle in template
  constructor() {
    // custom styling definition
    this._styles = {
      section: {
        color: 'lightgreen', background: 'black' // To Modify Default Width and Height, Add in Section
      },
      viewport: {
        color: 'yellow', background: 'black'
      },
      input: {
        color: 'red', background: 'black'
      },
      cursor: {
        color: 'green', background: 'black'
      }
    };
  }
}

<!-- Step 2: Add ccStyle property with the defined model in your component -->
<cc-terminal [ccStyle]="_styles"></cc-terminal>

Note: There are more to come, please have patience! :)

TODO:

• Add classes/style to re design the terminal configuration from External Module
• Add Terminal Configuration from External Module.
• Add Feasibility to create a custom commands.
• Add centralize command registry for simplicity. [High Priority]
• Print commands from command Queue sequentially. [In Progress]
• Add support for custom welcome message
• Add support to execute callback command and result command simultaneously.
• Try to add support for complex commands
• Add Test Cases
• Add Support For ASCII Characters on Terminal Output
• Add Support For Images on Terminal Output
• Add Support For Videos on Terminal Output
• Add Support For Custom Design (Graphic or Canvas) on Terminal Output