Add a terminal to the page

_includes/head.html

@@ -10,6 +10,8 @@
 
         <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
         <link rel="stylesheet" href="{{'/css/style.css' | prepend: site.baseurl}}">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.6.3/css/jquery.terminal.min.css" rel="stylesheet"/>
 
         <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.6.3/js/jquery.terminal.min.js"></script>

_layouts/default.html

@@ -42,6 +42,89 @@
 
          ga('create', 'UA-43569023-1', 'polonkai.eu');
          ga('send', 'pageview');
+
+         jQuery.extend_if_has = function(desc, source, array) {
+             for (var i=array.length;i--;) {
+                 if (typeof source[array[i]] != 'undefined') {
+                     desc[array[i]] = source[array[i]];
+                 }
+             }
+             return desc;
+         };
+
+         (function($) {
+             $.fn.tilda = function(eval, options) {
+                 if ($('body').data('tilda')) {
+                     return $('body').data('tilda').terminal;
+                 }
+                 this.addClass('tilda');
+                 options = options || {};
+                 eval = eval || function(command, term) {
+                     term.echo("you don't set eval for tilda");
+                 };
+                 var settings = {
+                     prompt: 'guest@gergely.polonkai.eu> ',
+                     name: 'tilda',
+                     height: 400,
+                     enabled: false,
+                     greetings: 'Welcome to my Terminal.  Type `help\' to list the available commands.\n\nPowered by http://terminal.jcubic.pl',
+                     keypress: function(e) {
+                         if (e.which == 96) {
+                             return false;
+                         }
+                     }
+                 };
+                 if (options) {
+                     $.extend(settings, options);
+                 }
+                 this.append('<div class="td"></div>');
+                 var self = this;
+                 self.terminal = this.find('.td').terminal(eval, settings);
+                 var focus = false;
+                 $(document.documentElement).keypress(function(e) {
+                     console.log(e);
+                     if (e.which == 96) {
+                         self.slideToggle('fast');
+                         self.terminal.focus(focus = !focus);
+                         self.terminal.attr({
+                             scrollTop: self.terminal.attr("scrollHeight")
+                         });
+                     }
+                 });
+                 $('body').data('tilda', this);
+                 this.hide();
+                 return self;
+             };
+         })(jQuery);
+
+         String.prototype.strip = function(char) {
+             return this.replace(new RegExp("^\\s*"), '')
+                        .replace(new RegExp("\\s*$"), '');
+         }
+
+         jQuery(document).ready(function($) {
+             $('#tilda').tilda(function(command, terminal) {
+                 command = command.strip();
+
+                 switch (command) {
+                     case 'help':
+                         terminal.echo('about  - Go to the about page');
+                         terminal.echo(' ');
+                         terminal.echo('More commands will follow soon!');
+
+                         break;
+                     case 'about':
+                         location = '{{ site_url }}/about/';
+
+                         break;
+                     default:
+                         terminal.echo(command + ': command not found');
+
+                         break;
+                 }
+             });
+         });
         </script>
+        <div id="tilda"></div>
     </body>
 </html>

css/style.sass

@@ -234,3 +234,6 @@ h3.tag
 
 h5
   font-weight: bold
+
+#tilda
+  z-index: 10000