Kbash

The extendible Unix shell for the web

(It's the black bar on the very bottom of this window)

On Github Download

To be included in Kickstrap 2.0

Github | Twitter | Adam Kochanowicz

Install

Just include the JS and CSS file. No markup needed.

<link rel="stylesheet" href="style.css" />
<script src="main.js" />

Demo it

Look for the black bar at the bottom of this screen.

Try out these commands

say hello
say hello -v --polite
colorme magenta
colorme white
color orange
color red white blue
color #f00 -rvl
color lavender --triad -h

Keep in mind, these are just some demos I created in a couple minutes. Kbash is extendible. If you can write a JavaScript function, you can extend kbash to do anything you could do in JavaScript.

(See Extending to learn more)

Color Me

While kbash extensions can be as complex as any JS library could be, colorme is shows how basic they can be. At one line of code, Color Me lets you change the background of this page with a simple syntax.

colorme [color]

For example,

colorme orange

Writing this extension was pretty easy too.

kbash.colorme = function (args, flags, opts, props) { $('body').css('background-color', args[0]) }

Then, it was just included after main.js

  ...  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="main.js"></script>
  <script src="extensions/say.js"></script>
  <script src="extensions/colorme.js"></script>
</body>

Color

Convert colors and generate schemes

The color command allows you to seamlessly move between plain english color names and hex, hsl, hsv, and rgb.

> color red -h
red
hex: #f00

Can output multiple colors/formats as well.

> color red green -hrv
red
hex: #f00
rgb: rgb(255, 0, 0)
hsv: hsv(0, 100%, 100%)
 
green
hex: #008000
rgb: rgb(0, 128, 0)
hsv: hsv(120, 100%, 50%)

Generate schemes from any color. For example, split complement:

> color lavender --split
 
lavender
hsl(240, 67%, 94%)
 
hsl(240, 67%, 94%)
 
hsl(96, 67%, 94%)
 
hsl(96, 67%, 94%)

Flags

-h
display hex
-r
display rgb
-l
display hsl
-v
display hsv

Options

--split
Generate split complement
--tetrad
Generate tetrad
--triad
Generate triad
--mono
Generate monochromatic scheme
--analog
Generate analogous scheme

Say

Test kbash's organization of flags, options, and arguments.

Say is another "hello world" kind of app, but demonstrates how shell extensions can interface with unix flags, options, and arguments.

Try this out by just typing "say hello"

> say hello
Hi

Add the tag -v for "verbose"

> say hello -v
Hello. It is very good to see you this fine day.

Add the options --rude or --polite (or both) to modify the message

> say hello -v --rude
Hello. It is very good to see you this fine day...you big dumb jerk.

Notice how the flags and options can be rearranged.

> say --rude -v hello
Hello. It is very good to see you this fine day...you big dumb jerk.

About

Command-line JavaScript

Kbash is the command-line tool in the future Kickstrap 2.0. However, it can be used with jQuery alone.

The idea is to provide unix-style debugging which is library-specific.

For example, a command like this...

say -v hello --rude --polite

...turns into this object...

{
  rootCommand: 'say',
  args: ['hello'],
  flags: ['v'],
  opts: ['rude', 'polite']
}

...and gets passed to the kbash.say() function, thus displaying this:

Hello. It is very good to see you this fine day...my good sir/madaam...you big dumb jerk.

Extending

And here is all the developer needed to write to extend the shell.

kbash.say = function(args, flags, opts, props) {
  if (props.empty == true) { console.kbash('Please supply an argument') }
  else {
    var msg = ''
    if (args.have('hello')) {
      msg = (flags.have('v') ? 'Hello, it is very good to see you this fine day' : 'Hi')
      if (opts.have('polite')) msg = msg + ('...good sir/madaam')
      if (opts.have('rude')) msg = msg + ('...you big dumb jerk')
    }
    else { msg = ('I don\'t know how to say that. Ask me to say "hello"') }
    console.kbash(msg)
  }
}

Why is this good? At the end of the day, commands are routed to plain old JavaScript. This means you can build all kinds of awesome CLI tools that do pretty much anything you can do with JavaScript.


Other Options

History

Like a real unix shell, each command is stored in an array and can be retrieved by hitting the up or down arrow keys.

Forgiveness

You can also mix up flags as you would in Unix. So all of the following would be read the same:

say hello -v -a -l
say hello -val
say -v hello -al
say -a -l hello -v

This is all still experimental and has its quirks. If you like this project, consider helping to get this to 100% by contributing to the Github repo!