Skip to content

Latest commit

 

History

History
63 lines (57 loc) · 2.18 KB

USAGE.md

File metadata and controls

63 lines (57 loc) · 2.18 KB
Raw

Usage

First, you want to include these in your HTML <head>:

<link rel='stylesheet' href='https://often.github.io/wt/css/wt.min.css' />
<script type='module'>
   import { WT } from 'https://often.github.io/wt/js/wt.min.js'
   
   const wt = WT({
      element: document.querySelector('.wt'),
      commands: {
         foo() { return 'bar' },
         bar() { return 'foo' }
      },
      help: true,
      clear: true,
      autofocus: true,
      banner: 'Welcome...'
   })
   wt.print('to wt!')
   wt.commands.hello = () => 'world'
   const world = () => 'hello'
   wt.addCommand(world)
   wt.addCommands({
      time() { return Date() },
      isAwesome(who) { return who === 'wt' ? 'yes' : 'no' }
   })
</script>

The stylesheet is optional, but highly recommended if you do not look forward to styling the terminal yourself. Once included though, you are able to control the terminal colors and other by using CSS variables. These are the default values:

.wt {
  --color-scheme: dark;
  --font-size: 16px;
  --font-family: 'Inconsolata', monospace;
  --text-color: #fff;
  --bg-color: #000;
  --padding: 10px;
  --input-width: 100%;
  --input-border: none;
  --input-outline: none;
  --input-box-sizing: border-box;
  --input-placeholder-color: #ccc;
  --output-max-height: 500px;
  --output-margin: 0 0 5px 0;
  --output-overflow: auto;
  --selection-text-color: #000;
  --selection-bg-color: #fff;
}

Feel free to customize it to your liking. Or, leave the defaults, if you like them.

Now, let's continue. If you pay attention to the HTML above, inside the <script> tag, and inside the WT function object, the element property has it's value set to document.querySelector('.wt'). This selects the first element that contains the wt class, and that is where we will initialize wt, in this case. To finalize this usage guide, add this to your HTML <body>:

<div class='wt'></div>

Voilà! You may now play around and do whatever you want with the terminal.

To read the API documentation, click here.

If you want to support this project, click here.

Happy wt'ing!