The extendible Unix shell for the web
(It's the black bar on the very bottom of this window)
On Github DownloadTo be included in Kickstrap 2.0
Just include the JS and CSS file. No markup needed.
<link rel="stylesheet" href="style.css" /> <script src="main.js" />
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.
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>
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%)
-h
-r
-l
-v
--split
--tetrad
--triad
--mono
--analog
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.
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.
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.
Like a real unix shell, each command is stored in an array and can be retrieved by hitting the up or down arrow keys.
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!