JSFiddle - React, Tailwind, and code Playground

by Neil Kalman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/css/jquery.terminal.min.css">
<script src="https://fonts.googleapis.com/css?family=Ubuntu+Mono"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.17.0/js/jquery.terminal.min.js"></script>
<div class="wrapper" data-title="demo CLI">
  <div id="term_demo"></div>
</div>
<div id="test">

</div>
<!-- currently, this returns a value to the following commands: -->
<!-- cd newfolder -->
<!-- write-it -h -->
<!-- git -h -->

SCSS

$br: 7px;
$s: 12px;
body,
html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #212121;
  overflow: hidden;
}

.terminal {
  --color: #b9b5b8;
  --background: #0f3642;
}

.wrapper {
  --background: #0f3642;
  background-color: #0f3642;
  overflow-y: visible;
  padding-bottom: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 30px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 10px;
  border-radius: 0 0 $br $br;
  margin-top: 35px;
  &::before {
    border-radius: $br $br 0 0;
    position: absolute;
    content: attr(data-title);
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    padding: 0 80px;
    white-space: nowrap;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #4c3436;
    font-size: 1em;
    background: linear-gradient(0deg, #d8d8d8, #ececec);
    top: -25px;
    left: 0;
    font-family: "PT Sans", sans-serif;
  }
  &::after {
    content: "";
    position: absolute;
    top: -18px;
    left: 10px;
    width: $s;
    height: $s;
    background: #f95c5b;
    border-radius: 100%;
    box-shadow: 0 0 0 1px #da3d42, ($s+10px) 0 0 0 #fabe3b, ($s+10px) 0 0 1px #ecb03e, ($s+10px)*2 0 0 0 #38cd46, ($s+10px)*2 0 0 1px #2eae32;
  }
}

.terminal,
.cmd,
.terminal .terminal-output div div,
.cmd .prompt {
  font-size: 16px;
  line-height: 20px;
  font-family: 'Ubuntu Mono', monospace;
}

JavaScript

const BLUE = '#209cee';
const COLORS = {};
const txt = {
  blue: (text) => colored('#209cee', text),
  red: (text) => colored('#ff3860', text),
  yellow: (text) => colored('#ffdd57', text),
  green: (text) => colored('#23d160', text)
};

(function($) {

  $.fn.terminalOnboarding = function(stepsArray) {
    let currentStep = 0;

    this.terminal(runStep, {
      greetings: stepsArray[currentStep].greetings,
      prompt: stepsArray[currentStep].prompt,
      name: `step ${currentStep}`,
      height: 400
    });

    $('#test').text('this is what I got! ' + JSON.stringify(stepsArray));

    return this;

    function runStep(command) {
      if (stepsArray[currentStep] && command === stepsArray[currentStep].command) {
        this.echo(stepsArray[currentStep].output || '');
        currentStep++;

        if (currentStep !== 0 && stepsArray[currentStep] &&
          stepsArray[currentStep].greetings) {
          this.echo(stepsArray[currentStep].greetings);
        }

        if (stepsArray[currentStep]) {
          this.push(runStep, {
            greetings: stepsArray[currentStep].greetings,
            prompt: stepsArray[currentStep].prompt,
            name: `step ${currentStep}`,
            height: 250
          });
        }
      } else {
        this.echo(txt.red(`command not found: ${command}`));
      }
    }
  };

}(jQuery));

jQuery(function($, undefined) {
  $('#term_demo').terminalOnboarding([{
    greetings: 'Hello there! please run `mkdir folder` to continue',
    prompt: txt.red('~') + txt.green(' > '),
    command: 'mkdir folder',
    output: 'very nice!'
  }, {
    greetings: 'now that you created your folder, please go into it',
    prompt: txt.red('~') + txt.green(' > '),
    command: 'cd folder'
  },
  {
    greetings: 'let\'s install our dependencies with `npm install`',
    prompt: txt.red('~/folder') + txt.green(' > '),
    command: 'npm install',
    output: 'finished!'
  }]);
  /*   $('#term_demo').terminal(function(command) {
     ...