Skip to content

Commit a70e862

Browse files
MarketingPipMarketingPip
authored
Added README.md 📝
0 parents  commit a70e862

File tree

1 file changed

+153
-0
lines changed

1 file changed

+153
-0
lines changed

‎README.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# [Termino.js](https://github.com/MarketingPipeline/Termino.js/) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/MarketingPipeline/Termino.js/blob/main/LICENSE) [![Current version](https://img.shields.io/github/package-json/v/MarketingPipeline/Termino.js.svg?style=flat)](https://github.com/MarketingPipeline/Termino.js/releases) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/MarketingPipeline/Termino.js/blob/main/README.md#contributing-)
2+
3+
4+
5+
**[User Showcase](https://github.com/MarketingPipeline/Termino.js/blob/gh-pages/showcase.md)** | **[Live Demo](https://marketingpipeline.github.io/Termino.js/demo)** | **[Getting Started](https://github.com/MarketingPipeline/Termino.js/wiki/Getting-Started)** | **[Documentation](https://github.com/MarketingPipeline/Termino.js/wiki)** | **[GitHub](https://github.com/MarketingPipeline/Termino.js/)**
6+
7+
Termino.js is a highly customizable front-end component written in pure JavaScript that is great for making web based terminal animations, games & apps on any website including support for curses-based apps, custom functions on user commands, key-code & mouse events & much more!
8+
9+
_ie:_ You can use this JavaScript library to create web based terminals on any website.
10+
11+
[Learn how to use Termino.js in your project](https://github.com/MarketingPipeline/Termino.js/wiki/Getting-Started).
12+
13+
## Features <img height="20px" src="https://user-images.githubusercontent.com/86180097/196882869-d38fe649-8e33-44fe-ae91-b1f9cd5f1c3e.png">
14+
15+
- **Fast**: Termino.js is *lightweight* - being built in pure JavaScript
16+
- **Self-contained**: Requires zero dependencies to work.
17+
- **Great for animations**: You can make terminal animations with ease & bring your favourite typewriter library in or etc!
18+
- **Customizable**: Bring your own HTML, CSS & customize / create a terminal to your liking!
19+
- **Inputs**: Supports inputs for questions returned via a promised / await based value
20+
- **Multiple instances**: Create more than one custom terminal in a page!
21+
- **HTML support**: Add HTML elements such as links and more to your terminal!
22+
- **Custom functions**: Create your own custom functions with ease (including user-command functions, key-code functions & your own mouse event functions)
23+
- **And much more**: the options are endless!
24+
25+
## Termino.js is not <img height="20px" alt="Emoji hand pointing left" src="https://zefir.site/emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/lg/57/white-left-pointing-backhand-index_1f448.png">
26+
27+
- Termino.js is not a executable application that you can download and use on your computer. It is a JavaScript library you use in the **browser**.
28+
- Termino.js is not a `bash` emulator etc. Termino.js can be connected to processes like `bash` or a `SSH` instance via API etc or any process that lets you interact with them by providing input & receiving output.
29+
30+
## Documentation
31+
32+
> Note: this is a first **(v1.0.0 release)** - there is little to NO documentation. This project needs contributors like you to help improve documentation, usage & more!
33+
34+
You can find the Termino.js documentation [here](https://github.com/MarketingPipeline/Termino.js/wiki).
35+
36+
Check out the [Getting Started](https://github.com/MarketingPipeline/Termino.js/wiki/Getting-Started) for a quick overview.
37+
38+
You can improve it by sending pull requests to [this repository](https://github.com/MarketingPipeline/Termino.js).
39+
40+
## Example and usage
41+
42+
You can view a demo of Termino.js in use [here](https://marketingpipeline.github.io/Termino.js/demo).
43+
44+
How to use **_Termino.js_**:
45+
46+
```html
47+
<!doctype html>
48+
<html>
49+
<head>
50+
<title>Termino.js Basic Example</title>
51+
</head>
52+
<body>
53+
<div id="terminal">
54+
<pre><code class="termino-console"></code></pre>
55+
<textarea class="termino-input" rows="1" wrap="hard"></textarea>
56+
</div>
57+
<script type="module">
58+
import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/termino.min.js';
59+
let term= Termino(document.getElementById("terminal"))
60+
term.echo("Hello world from https://github.com/MarketingPipeline")
61+
</script>
62+
</body>
63+
</html>
64+
```
65+
66+
For more advanced usage such as adding your own commands, creating animations & etc. See the live examples [here](https://marketingpipeline.github.io/Termino.js/demo) or you can find the Termino.js documentation [here](https://github.com/MarketingPipeline/Termino.js/wiki).
67+
68+
<!--------------
69+
### Importing
70+
71+
The recommended way to load Termino.js is via the ES6 module syntax:
72+
73+
```javascript
74+
import { Termino } from 'termino';
75+
```
76+
------------>
77+
78+
<!------
79+
### Add your own commands
80+
If you want add your own commands to the terminal just pass a object using the *property* as your command and the *value* as the callback.
81+
82+
```js
83+
let term2= Termino(document.getElementById("test"), customkeys)
84+
85+
function print_hello_world(){
86+
term2.output("hello world")
87+
}
88+
89+
async function add_numbers(){
90+
let number1 = await term2.input("First number to add")
91+
let number2 = await term2.input("Second number to add")
92+
term2.output(Number(number1) + Number(number2))
93+
}
94+
95+
async function test_menu(){
96+
term2.output(`1. Print Hello Wolrd
97+
2. Add Two Numbers
98+
3. Exit` )
99+
term2.echo(`<pre style="color;red">`)
100+
let termvalue = await term2.input("What would you like to do?")
101+
if(termvalue === "1"){
102+
print_hello_world()
103+
}
104+
105+
if(termvalue === "2"){
106+
add_numbers()
107+
}
108+
109+
if(termvalue === "3"){
110+
term2.output("You chose option 3, exiting terminal")
111+
await term2.delay(2000)
112+
term2.kill()
113+
}
114+
115+
if(termvalue != "1" && termvalue != "2" && termvalue != "3"){
116+
term2.output("Invalid choice")
117+
}
118+
119+
120+
}
121+
test_menu()
122+
```
123+
124+
Now in your terminal could type your new commands:
125+
126+
```bash
127+
> help
128+
These shell commands are defined internally:
129+
flavour, ping, clear, help, version, wipe
130+
131+
> flavour
132+
There is only one flavour for your favorite🍦and it is vanilla.
133+
@soyjavi ❤️ vanilla >
134+
```
135+
----->
136+
137+
## Contributing [![GitHub contributors](https://badgen.net/github/contributors/MarketingPipeline/Termino.js)](https://github.com/MarketingPipeline/Termino.js/graphs/contributors/)
138+
139+
> The main purpose of this repository is to continue evolving Termino.js, making it faster and easier to use. Development of Termino.js happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements.
140+
141+
Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!
142+
143+
Looking for a task to work on? Check the tasks that need improved in the [to-do](https://github.com/MarketingPipeline/Termino.js/blob/main/src/termino.js#L10) list.
144+
145+
See also the list of
146+
[contributors](https://github.com/MarketingPipeline/Termino.js/graphs/contributors) who
147+
participate in this project.
148+
149+
## License [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/MarketingPipeline/Termino.js/blob/main/LICENSE)
150+
151+
This project is licensed under the MIT License - see the
152+
[LICENSE](https://github.com/MarketingPipeline/Termino.js/blob/main/LICENSE) file for
153+
details.

0 commit comments

Comments
 (0)