Create Custom Terminals With Pure JavaScript And CSS – shell.js

Category: Javascript | January 8, 2023
Author:davidecaruso
Views Total:407 views
Official Page:Go to website
Last Update:January 8, 2023
License:MIT

Preview:

Create Custom Terminals With Pure JavaScript And CSS – shell.js

Description:

The shell.js JavaScript library provides an easy way to create Ubuntu, OS X, Windows, and Custom style bash terminal on the web application.

Installation:

# Yarn
$ yarn add shell.js
# NPM
$ npm install shell.js --save

How to use it:

1. Import the shell.js into your web project.

<script src="/path/to/shell.js"></script>

2. Create a placeholder element for the terminal.

<div id="default"></div>

3. Generate a default terminal inside the element and define an array of commands as follows:

const myShell = Shell('#default', ['sudo -i', 'rm -rf /', 'exit']);
// type the commands.
myShell.type()

4. Set the styles of the terminal.

Shell('#default', commands, {
  style: {
    // "default"|"ubuntu"|"macos"|"windows" 
    engine: 'default', 
    responsive: true,
    shadow: true,
    // "dark"|"light"
    theme: 'dark',
  },
});

5. Set the user/host/path displayed in the terminal.

Shell('#default', commands, {
    user: 'guest',
    host: 'CSSSCRIPT',
    path: '/etc/',
});

6. You can also use the typed.js library to create a typing effect in the terminal.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
Shell('#default', commands, {
  typing: {
    // Typed.js instance
    ctor: null,
    // Typed.js options
    otps: {}
  },
});

7. Determine whether the current user is root. Default: false.

Shell('#default', commands, {
  root: true,
});

Changelog:

v4.3.3 (01/08/2023)

  • Added postcss dependency

v4.3.2 (01/07/2023)

  • Audit vulnerabilities
  • Added config file for postcss
  • Updated release workflow

v4.3.1 (09/04/2022)

  • Increased code coverage

v4.3.0 (09/04/2022)

  • Added commands parameter to type method
  • Added clear method to empty terminal
  • Removed commands parameter from constructor

v4.2.0 (08/20/2022)

  • Removed style key from config

v4.1.0 (08/16/2022)

  • Renamed exported library to Shell (formerly shell)
  • Fixes some CSS issue

v4.03 (08/07/2022)

  • Added feature to create custom input/output functions
  • Added function to trigger typing
  • Updated parameter names
  • Updated code using functional programming
  • Updated Webpack configuration
  • Updated folders structure
  • Removed support for Bower
  • Removed Shell constructor

v3.3.1 (09/18/2021)

  • Bumped dependencies versions to fix vulnerabilities
  • Refactored and reformatted code
  • Cleaned package from registries

v3.2.2 (09/13/2020)

  • Fixed vulnerabilities

v3.2.1 (08/22/2020)

  • Fixed vulnerabilities
  • Fixed statusbar buttons padding

v3.2.0 (04/28/2020)

  • Added commands input/output
  • Added multiple output
  • Fixed vulnerabilities

01/20/2020

  • v3.1.1: Fixed dependency vulnerabilities

10/12/2018

  • v3.1.0: Fix responsive behaviour

10/12/2018

  • v3.1.0: Fix responsive behaviour

07/04/2018

  • Inherit correct color for title

07/02/2018

  • Lots of fixes

06/13/2018

  • v3.0.0-rc.1

You Might Be Interested In:


Leave a Reply