https://github.com/code-crash/cc-terminal
Angular 4+ web terminal.
https://github.com/code-crash/cc-terminal
Last synced: 11 months ago
JSON representation
Angular 4+ web terminal.
- Host: GitHub
- URL: https://github.com/code-crash/cc-terminal
- Owner: Code-Crash
- Created: 2018-12-12T14:35:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T10:20:34.000Z (over 3 years ago)
- Last Synced: 2025-03-17T09:11:25.571Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://code-crash.github.io/cc-terminal/
- Size: 7.74 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CcTerminalApp
This project contain the source code for [CC Terminal](https://www.npmjs.com/package/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):
```sh
# 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
```javascript
// 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
]
})
```
``` html
```
### Customize Styling Example
```javascript
// 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'
}
};
}
}
```
```html
```
```
Note: There are more to come, please have patience! :)
```
## TODO:
- [x] Add classes/style to re design the terminal configuration from External Module
- [x] Add Terminal Configuration from External Module.
- [x] Add Feasibility to create a custom commands.
- [x] 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