davidecaruso / shell.js

:zap: A JavaScript library to create HTML terminals in web pages.

Hi, I'm Davide

$ davidecaruso --help

Usage:  davidecaruso [OPTIONS]

Options:
  -a, --architectures   CQRS, DDD, Clean Architecture, Microservices, MVC, MVVM
  -c, --challenges      Learn new stuff everyday, discover the world
  -m, --methodologies   Agile, Lean, Kaizen
  -p, --paradigms       Functional programming, Object-oriented programming, Scripting
  -s, --standards       Design Patterns, SOLID Principles, RESTful, KISS, DRY, BEM
  -v, --version         Latest

Languages

Libraries

Systems

shell.js's Issues

Scrollbars, max window height

Currently, (depending on screen viewport width - especially on a narrow mobile) the shell.js window height may not be sufficiently large initially to contain all the commands that will be displayed by shell.js.

Hence, as typed.js continues filling the screen, this may cause in the window height shifting towards the end of the commands. Cumulative layout shift would then present an issue with google pagerank. Adding scrollbars could fix this issue. Is it possible to have a max-window-height with scrollbar options, or perhaps to define a min-window-height (and no scrollbars)?

shell__content css specification currently are given as

.shell__content {\n font-family: monospace; }\n\n.shell {\n font-weight: 400; }\n\n.shell {\n width: 400px;\n height: 300px;\n display: -webkit-box;\n display: **-ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n** flex-wrap: wrap;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n text-align: left;\n color: #F1F1F1;\n **overflow: hidden**;\n font-weight: 300;\n -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.5);\n

Flexbox will cause the size of the box to increase as needed - this is not best practice for inclusion on a webpage though, as it will negatively impact google pagerank if layout shift occurs.

Perhaps a modification can be made to

• remove flexbox specification
• add overflow-y: scroll

Implement filesystem structure

Hi David, thanks for the great project! Is there any way to implement some kind of function to handle cd commands? If one of the commands requests a change of directory, then ideally this would update the path of the emulator in the main window and the title bar.

Or perhaps even simpler: in the commands argument, accept a key:value pair of something like:

commands = {
['input': 'cd mydir'],
['input':'ls', 'output', 'subdir1 subdir2', 'path': '~/mydir/']
}

adding 'path' as an optional parameter for each command allows the user to override the path being displayed for each command, and makes it not necessary to keep track of the filesystem by any other means.

add text to shell screen without command input

Hi

I would like to use your script like a terminal screen but want ti add texts after initialize

is is possible to add more commands after initialize without user input?

something like:

const shell = Shell("#shell", ["Hello, world!"], { "user": "root", "host": "ctb", "responsive": true, "shadow": true,  }).type();
shell.write('additional output will be here').type();

is it possible?

Title should be in the center of free space

Title is in the center of the window and I think it should be in the center of free space so not including the buttons because when window is small (width 250 + windows 10 + "C:\windows" title)

You can see this in this demo https://codepen.io/jcubic/pen/WZvYGj just edit the resizable width and then change type to windows and resize the window.

Can i use it with user input?

Hi! Can i use it with user input?

For example i want to create few commands and give an ability to user type it with keyboard, but now i can't understand how to do it, because according to Docs all i can to do - this is invoke type(['command']) so user can't type it directly in terminal?
Thanks.

Js Callback

Is there a function where you can get a callback when a certain command is executed?
EDIT: Add a function to use the console as a normal console