Giter Club home page Giter Club logo

termly.js's Introduction

Simple, Extensible, Hackable and Lightweight Browser Terminal Simulator!

Want to showcase your new shiny CLI Tool you just released?
Want to write HowTos on how some commands behaves?
Want to create a simulated sandbox of linux-like commands to help people learn?
You want to have fun (as I had) making your personal website readable from a fake terminal?
Doit interactively!

Use inside a nice wrapper

Or calling directly to the class and building your own wrapper

Documentation

Installing

Get the zip Package directly or better:

npm install termly.js
# OR
yarn add termly.js
# OR
bower install termly.js

Getting Started

You can choose to use one of the two bundle coming with Termly.js, the main package have the shell only and all it's utilities you can use it as you wish, the prompt bundle is a simple DOM Wrapper that handles inputs and outputs and DOM manipulation, for the sake of simplicity with this you only have to attach a container and Style your terminal

<!-- Get the Shell only package -->
<script src="node_modules/termly.js/dist/termly.min.js"></script>

<!-- OR Get the Shell + a Prompt I/O wrapper -->
<script src="node_modules/termly.js/dist/termly-prompt.min.js"></script>

Or get directly from the sources (Babel+Bundler workflow)

// With a bundler
// @NB ES6 Classes are exported
const Shell = require('termly.js'); // Shell only
// OR
const Prompt = require('termly.js/bin/classes/Prompt'); // Init with a Prompt IO Wrapper

Read the docs to know the differences

Basic Usage

Both the Shell and the Prompt wrapper can get parameters at instantiation whose most important are a custom Filesystem and a set of custom commands, both fall back to defaults if not provided.

Using the Prompt Wrapper

You can attach Termly.js to a DOM container and have it do the work of creating and setting up input/output field and handlers and only care of styling it:

<script src="dist/termly-prompt.min.js"></script>
<script>
  // Documentation for options in the next section
  var shell = new TermlyPrompt('#container', {
    /* options object */
  });
</script>

Read the docs at website for all the options

Using the Shell Class

A more advanced approach to build something custom that suites your needs would be to use Termly.js Shell Class, thus extending it with a wrapper and handle yourself all the DOM Input/Output in the way you desire it to behave.

<script src="dist/termly.min.js"></script>
<script>
  // Documentation for options in the next section
  var shell = new Termly({
    /* options object */
  });
  shell.run('help');
  //> 'Commands available: help, whoami, about, arguments, cd, ls, cat, man, http'
</script>

Read the docs at website for all the options

Changelog

2.6.0 - stable

  • History: Added command history in localStorage, history command, and clear flag history -c to reset it.
    • Added arrow to navigate history from Prompt Wrapper

2.5.6

  • Prompt.js: Array output returned from commands execution now stringified

2.5.5

  • Fixed Filesystem methods cd-ing into files bug which cames with the change in how filesystem got inited some patch ago.

2.5.4

  • Fixed ENV object not getting the defaults if empty object

2.5.3

  • fixed printnev to print obejcts

2.5.2

  • added pwd command

2.5.1

  • Filesystem root dir structure instantialized as an instance of File()

2.5.0

  • Added Commands printenv and export
  • Added env object in shell class
    • You can provide an env: {} with all the variables you want set in shell.env at instantiation
    • You can see current session variables calling printenv
    • You can set a variable during runtime with export VAR=value or export var='long value'
  • fake user and hostname are taken from the provided env (or from default), no more in the options object

Contributing

Actually this fits my needs and it works as expected, but as someone pointed to my this can be useful so if you have nice ideas and you want to contribute get your copy and fiddle with!

If you have to open a PR if possible squash your commits before sending, so I can give it a look more easily.

If there are any issue let me know, I'll give it a look when I can.

Authors

Acknowledgments

minimist Got inspiration to write my command parser

Promise Polyfill

Fetch API Polyfill

Some CSS I got here and there for the demo because I get bored styling, I really don't remember from who sorry :( Thank you anyway

License

This project is licensed under the GNU GPL v3 License - see the LICENSE.md file for details

termly.js's People

Contributors

dependabot[bot] avatar simonecorsi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

termly.js's Issues

Styling output with html-tags

I've tried several approaches to style my command-output with html-tags.
Since they are outputted as tags, I would request a feature where you can pass a pre-styled markup to the shell.

i.e.
this.shell.printHtml("<h1>foo</h1>")

Customizing prompt.

Sadly there I've found now way to customize the bash-prompt.
Currently the only way is to manipulate classes/Prompt.js and change


<span class="terminal-info">${this.env.USER}@${this.env.HOSTNAME} - ${this.fs.getCurrentDirectory()} โžœ </span>

to whatever we need.

A nice feature would be to customize (at least) the delimiters via the options.

Command History

Would it be possible to store entered commands in local storage of the browser to switch to them via arrow keys?

type:"usr" commands as pseudo-files in /usr/local/bin

A nice feature would be to create pseudo-files in /usr/local/bin for every type:"usr" command.

As a quick hack it would be sufficient to add something like the following codeblock before
https://github.com/Kirkhammetz/termly.js/blob/5a7740303afe131ccecd673dc98c86d8657deb9e/bin/classes/Shell.js#L28

var usrlocalbin = {usr:{local:{bin:{}}}}
Object.keys(commands).map((key) => {
    const cmd = Blueprints[key]
    if (cmd.type === "usr"){
         usrlocalbin.usr.local.bin[key] = "<binary content ommited>"
    }
})
filesystem = Object.assign(filesystem,usrlocalbin)

This way, the "usr" commands would be present in /usr/local/bin as they would be in a real *nix environment. Alternatively one could use the prototype of the command as "filecontent".

Variable support

It would be nice to have shell variable support, maybe even predefined environment variables

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.