Animated Terminal Session For Linkbox API

animated-terminal-session.markdown

Animated Terminal Session

Animated terminal session with scriptable output.

A Pen by Todd Birchard on CodePen.

License.

index.html

<div class="terminal-window">
  <header>
    <div class="button green"></div>
    <div class="button yellow"></div>
    <div class="button red"></div>
  </header>
  <section class="terminal">
    <div class="history"></div>
    $&nbsp;<span class="prompt"></span>
    <span class="typed-cursor"></span>
    
  </section>
</div>
<!-- data -->
  <div class="terminal-data mimik-run-output">
{
<div class="pair"><span class="key">"author"</span>: <span class="value">"Victoria Sweet",</span></div>
<div class="pair"><span class="key">"feeds"</span>: [<span class="listitem">"https://www.theatlantic.com/feed/all/",</span>
<span class="listitem">"https://www.theatlantic.com/feed/best-of/"</span>
],</div>
<div class="pair"><span class="key">"image"</span>: <span class="value">"https://cdn.theatlantic.com/assets/media/img/2018/04/_BarbaraEhrenreich_FINAL_RVB/facebook.png?1523295067",</span></div>
<div class="pair"><span class="key">"postOrigin"</span>: <span class="value">"https://hackersandslackers.com/lynx-roundup-april-22nd",</span></div>
<div class="pair"><span class="key">"publishDate"</span>: <span class="value">"2018-04-10T08:00:00+00:00",</span></div>
<div class="pair"><span class="key">"summary"</span>: <span class="value">"I went to medical school, at least in part, to get to know death and perhaps to make my peace with it. One day—usually when you’re young, though sometimes later—the thought hits you: You really are going to die.</span></div>
<div class="pair"><span class="key">"tags"</span>: [
<span class="listitem">"cancer cells",</span>
<span class="listitem">"ever-rising cost",</span>
<span class="listitem">"Natural Causes",</span>
<span class="listitem">"finally unevadable death",</span>
<span class="listitem">"new science",</span>
<span class="listitem">"immune system—and"</span>
<span class="listitem">"immediate health-care costs",</span>
],</div>
<div class="pair"><span class="key">"title"</span>: <span class="value">"Your Body Is a Teeming Battleground",</span></div>
<div class="pair"><span class="key">"url"</span>: <span class="value">"https://www.theatlantic.com/magazine/archive/2018/05/barbara-ehrenreich-natural-causes/556859/",</span></div>
}
<div class="key">"videos"</span>: []</div>
}
</div>

script.js

$(function() {
  var data = [
  { 
    action: 'type',
    strings: ["curl https://linkbox.link?url=https://example.com/article"],
    output: $('.mimik-run-output').html()
  },
  { 
    action: 'type',
    strings: ["that was easy!", ''],
    postDelay: 2000
  }
  
];
  runScripts(data, 0);
});

function runScripts(data, pos) {
    var prompt = $('.prompt'),
        script = data[pos];
    if(script.clear === true) {
      $('.history').html(''); 
    }
    switch(script.action) {
        case 'type':
          // cleanup for next execution
          prompt.removeData();
          $('.typed-cursor').text('');
          prompt.typed({
            strings: script.strings,
            typeSpeed: 30,
            callback: function() {
              var history = $('.history').html();
              history = history ? [history] : [];
              history.push('$ ' + prompt.text());
              if(script.output) {
                history.push(script.output);
                prompt.html('');
                $('.history').html(history.join('<br>'));
              }
              // scroll to bottom of screen
              $('section.terminal').scrollTop($('section.terminal').height());
              // Run next script
              pos++;
              if(pos < data.length) {
                setTimeout(function() {
                  runScripts(data, pos);
                }, script.postDelay || 1000);
              }
            }
          });
          break;
        case 'view':

          break;
    }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.mattboldt.com/demos/typed-js/js/typed.custom.js"></script>

style.css

body {
  background: #6D7074;
}


.terminal-window {
  text-align: left;
  width: 800px;
  height: 450px;
  border-radius: 10px;
  margin: auto;
  position: relative;
}

.key {
  color: #9391ff;
}

.value {
  color: #b7e1ca;
  width: 100%;
}

.listitem {
  color: #9ad3df;
  display: block;
  margin-left: 15px;
  width: 100%;
}

.pair { margin-bottom: 5px }

.terminal-window header {
  background: #E0E8F0;
  height: 30px;
  border-radius: 8px 8px 0 0;
  padding-left: 10px;
}

.terminal-window header .button {
  width: 12px;
  height: 12px;
  margin: 10px 4px 0 0;
  display: inline-block;
  border-radius: 8px;
}

.terminal-window header .button.green {
  background: #3BB662;
}

.terminal-window header .button.yellow {
  background: #E5C30F;
}

.terminal-window header .button.red {
  background: #E75448;
}

.terminal-window section.terminal {
  color: white;
  font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
  font-size: 11pt;
  background: #233445;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0;
  overflow: auto;
}

.terminal-window section.terminal .typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.terminal-data { display: none; }
.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}