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

@@ -22,26 +22,109 @@
 {% endif %}
         </div>
         <script type="text/javascript">
-            $(document).ready(function() {
+         $(document).ready(function() {
-                $('#tagcloud-button').click(function() {
+             $('#tagcloud-button').click(function() {
-                    $('#tag-cloud').toggle('slow');
+                 $('#tag-cloud').toggle('slow');
-                });
+             });
-            });
+         });
 
-            (function() {
+         (function() {
-                var po = document.createElement('script');
+             var po = document.createElement('script');
-                po.type = 'text/javascript';
+             po.type = 'text/javascript';
-                po.async = true;
+             po.async = true;
-                po.src = 'https://apis.google.com/js/client:plusone.js?onload=start';
+             po.src = 'https://apis.google.com/js/client:plusone.js?onload=start';
 
-                var s = document.getElementsByTagName('script')[0];
+             var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(po, s);
+             s.parentNode.insertBefore(po, s);
-            })();
+         })();
 
-            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-            ga('create', 'UA-43569023-1', 'polonkai.eu');
+         ga('create', 'UA-43569023-1', 'polonkai.eu');
-            ga('send', 'pageview');
+         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