Jekylls docs keyboard tooltip

.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910

@@ -0,0 +1 @@
+I"�{"source"=>"/Users/sahand/Desktop/shortkey-parser", "destination"=>"/Users/sahand/Desktop/shortkey-parser/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>[".sass-cache", ".jekyll-cache", "gemfiles", "Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>nil, "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>"1..6", "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "serving"=>false}:ET

.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/63/7e252fa8460c2278df772e6dfbf4934329e2f03a9174070b70d0883886b435

@@ -0,0 +1,11 @@
+I"<p>This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at <a href="https://jekyllrb.com/">jekyllrb.com</a></p>
+
+<p>You can find the source code for Minima at GitHub:
+<a href="https://github.com/jekyll">jekyll</a> /
+<a href="https://github.com/jekyll/minima">minima</a></p>
+
+<p>You can find the source code for Jekyll at GitHub:
+<a href="https://github.com/jekyll">jekyll</a> /
+<a href="https://github.com/jekyll/jekyll">jekyll</a></p>
+
+:ET

.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/fd/aa4200cef2544ec568b25970b3a49cf9b4f3d7015485506ccda914caf9c5b9

@@ -0,0 +1,19 @@
+I"�<p>You’ll find this post in your <code class="highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
+
+<p>Jekyll requires blog post files to be named according to the following format:</p>
+
+<p><code class="highlighter-rouge">YEAR-MONTH-DAY-title.MARKUP</code></p>
+
+<p>Where <code class="highlighter-rouge">YEAR</code> is a four-digit number, <code class="highlighter-rouge">MONTH</code> and <code class="highlighter-rouge">DAY</code> are both two-digit numbers, and <code class="highlighter-rouge">MARKUP</code> is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>
+
+<p>Jekyll also offers powerful support for code snippets:</p>
+
+<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
+  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
+<span class="k">end</span>
+<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
+<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>
+
+<p>Check out the <a href="https://jekyllrb.com/docs/home">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href="https://talk.jekyllrb.com/">Jekyll Talk</a>.</p>
+
+:ET

docs/_includes/keyboard-layout.html

@@ -1,7 +1,7 @@
 <!-- Image Map Generated by http://www.image-map.net/ -->
 <div style="position: relative;">
     <img src="./assets/keyboard-layout.png" usemap="#keyboard-layout-map">
-    <div id="keyboard-layout-keyinfo" style="position: absolute; top: 0; right: 0; width: 20%; white-space: nowrap; text-align: center; padding: 10px 0; color: #069; font-weight: bold;"></div>
+    <div id='keysTooltip' style="position: absolute; display: none; background: #6C7989; padding: 2px 4px; color: white; text-align: center; border: 1px solid #393939; border-radius: 3px; min-width: 80px; min-height: 20px; box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px; transition:all ease 100ms;"></div>
 </div>
 
 <map name="keyboard-layout-map">
@@ -115,11 +115,45 @@
     $('document').ready(function(){
         imageMapResize();
 
-        $("map[name=keyboard-layout-map] > area").click(function(e) {
+        var tooltip = $('#keysTooltip')
+        var keys = $("map[name=keyboard-layout-map] > area");
+        var image = $("img[usemap='#keyboard-layout-map']");
+
+        function showTooltip(e) {
             var keyElem = e.currentTarget;
-            var key = $(keyElem).attr('href');
+            var $keyElem = $(keyElem);
+
+            var key = $keyElem.attr('href');
+            var coords = $keyElem.attr('coords')
+                            .split(',')
+                            .map(function(v) { return parseInt(v) });
+
+            var position = {
+                left: (coords[0] + coords[2])/2,
+                top: (coords[1] + coords[3])/2
+            };
+
+            var OFFSET = {
+                left: -40,
+                top: Math.abs(coords[1] - coords[3])/2 + 5
+            }
+
+            tooltip.css({left: position.left + OFFSET.left, top: position.top + OFFSET.top })
+            tooltip.html(key)
+            tooltip.show();
+        }
+
+        image.mouseleave(function() {
+            tooltip.hide();
+        });
+
+        keys.mouseenter(function(e) {
+            showTooltip(e);
+        });
 
-            $('#keyboard-layout-keyinfo').html(`${key}`);
+        keys.click(function(e) {
+            tooltip.hide();
+            showTooltip(e);
 
             e.preventDefault();
         });

package.json

@@ -13,7 +13,7 @@
     "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "publish": "np",
     "jekyll:start": "cross-env BUNDLE_GEMFILE='./docs/Gemfile' bundle exec jekyll serve -w -o -s ./docs -d ./docs/_site",
-    "jekyll:build": "cross-env BUNDLE_GEMFILE='./docs/Gemfile' bundle exec jekyll build -d ./docs/_site"
+    "jekyll:build": "cross-env BUNDLE_GEMFILE='./docs/Gemfile' bundle exec jekyll build -s ./docs -d ./docs/_site"
   },
   "keywords": [
     "shortkey",