Merge pull request #29 from victorvoid/flexibility_menu_links

creating a sections field to insert new links on menu navigation
victorvoid · Dec 30, 2017 · b5de2f6 · b5de2f6
2 parents dd4a0b3 + c6b4cf8
commit b5de2f6
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 85 deletions.
diff --git a/_config.yml b/_config.yml
@@ -3,6 +3,7 @@ title: Lorem Ipsum - Web Developer
 description: "A blog about lorem ipsum ..."
 baseurl: "/space-jekyll-template" # for test: remove string '/space-jekyll-template' to ''
 url: "http://victorvoid.github.io/space-jekyll-template/" # for test: remove string 'http://victorvoid.github.io' to '' but in production: 'https://yourusername.githu.io'
+
 # User settings
 username: lorem ipsum
 user_title: Lorem Ipsum - FrontEnd
@@ -19,7 +20,6 @@ markdown: kramdown
 highlighter: rouge
 permalink: /:title/
 
-
 # html minify
 compress_html:
   clippings: all
@@ -29,23 +29,42 @@ compress_html:
 
 # Links to include in menu navigation
 links:
-  - title: home
-    url: /
-  - title: my posts
-    url: /posts
-  - title: series
-    url: /series
-  - title: tags
-    url: /tags
-  - title: about me
-    url: /about
+  section_1:
+    - title: home
+      url: /
+      key_trigger: 1
+    - title: my posts
+      url: /posts
+      key_trigger: 2
+    - title: series
+      url: /series
+      key_trigger: 3
+    - title: tags
+      url: /tags
+      key_trigger: 4
+    - title: about me
+      url: /about
+      key_trigger: 5
+  section_2:
+    - title: github
+      url: http://www.github.com/victorvoid
+      new_tab: true
+      key_trigger: g
+    - title: twitter
+      url: http://www.twitter.com/victorvoid
+      key_trigger: t
+    - title: search
+      url: ""
+      key_trigger: s #WARNING: search only works with "s"
+
 # projects in header index
 projects:
-  - name: asciilang
-    url: https://github.com/victorvoid/asciilang
+  - name: fluany
+    url: https://github.com/fluany/fluany
   - name: vim-frontend
     url: https://github.com/victorvoid/vim-frontend
   - name: generator-capybara
     url: https://github.com/victorvoid/generator-capybara 
+
 # exclude my node related stuff
 exclude: ['package.json', 'src', 'node_modules']
diff --git a/_includes/menu-search.html b/_includes/menu-search.html
@@ -18,7 +18,10 @@
 
 <aside id="sidebar">
   <div id="topmenu">
-    {% assign filename = page.url | replace_first: '/', '' | replace: '/', '-'  | replace: '.html', '.md' %}
+    {% assign filename = page.url
+                         | replace_first: '/', ''
+                         | replace: '/', '-'
+                         | replace: '.html', '.md' %}
     <ul>
       <li><span>1</span></li>
       <li><span> {{page.url}}</span></li>
@@ -34,30 +37,26 @@
   </div>
 
   <nav id="navigation" role="navigation">
-    <ul>
-      {% assign counter=1 %}
-      {% for link in site.links %}
-      {% if link.external %}
-        <li>
-          <a href="{{ link.url }}">{{ link.title }}</a>
-        </li>
-      {% else %}
-        <li>
-          <span class="counter-menu">{{counter}}</span>
-          <svg viewBox="0 0 50 50" class="icon-arrow-menu"><use xlink:href="#icon-right-arrow"></use></svg>
-          <a href="{{ site.url }}{{ link.url }}"> {{ link.title }}</a>
-        </li>
-      {% endif %}
-
-      {% assign counter=counter | plus:1 %}   
+    {% for section in site.links %}
+      <ul>
+      {% for link in section[1] %}
+        {% if link.external %}
+            <li>
+                <a href="{{ link.url }}">{{ link.title }}</a>
+            </li>
+        {% else %}
+            <li>
+                <span class="counter-menu">{{link.key_trigger}}</span>
+                <svg viewBox="0 0 50 50" class="icon-arrow-menu">
+                    <use xlink:href="#icon-right-arrow"></use>
+                </svg>
+                <a key-trigger={{ link.key_trigger }}
+                    href="{{ site.url }}{{ link.url }}"> {{ link.title }}</a>
+            </li>
+        {% endif %}
       {% endfor %}
-    </ul>
-
-    <ul>
-      <li><span class="counter-menu">g</span><svg viewBox="0 0 50 50" class="icon-arrow-menu"><use xlink:href="#icon-right-arrow"></use></svg><a title="Show my projects on GitHub"  target="_blank" href="http://github.com/{{site.github_username}}" class="search">github</a></li>
-      <li><span class="counter-menu">s</span><svg viewBox="0 0 50 50" class="icon-arrow-menu"><use xlink:href="#icon-right-arrow"></use></svg><a id="searching" title="Search for a post" class="search">search</a></li>
-      <li><span class="counter-menu">t</span><svg viewBox="0 0 50 50" class="icon-arrow-menu"><use xlink:href="#icon-right-arrow"></use></svg><a title="Follow me in Twitter" target="_blank" href="http://twitter.com/{{site.twitter_username}}">twitter</a></li>
-    </ul>
+      </ul>
+    {% endfor %}
   </nav>
 </aside>
 

diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/src/js/zmain.js b/src/js/zmain.js
@@ -21,17 +21,16 @@
         return false;
     }
   };
-  
-  // Search panel mouse click event suppport
+
+  // Search panel mouse click event support
   $('#searching').click(function(){
     $('#fade').trigger('click');
     $("#search").trigger('click');
   })
-  
+
   //Keys
   $(document).keydown(function(e){
-    // console.log(e.key);
-    if(! $('.search-form').hasClass('active')){
+    if(!$('.search-form').hasClass('active')){
       switch(e.key) {
         case " ":
           $('a#slide').trigger('click');
@@ -41,56 +40,32 @@
           break;
       }
     }
-    //sidebar active
+
     if($('#sidebar').hasClass('slide')){
-      switch(e.key) {
-        case "1":
-          $("#sidebar ul:first-child li:first-child a").trigger('click');
-          break;
-        case "2":
-          $("#sidebar ul:first-child li:nth-child(2) a").trigger('click');
-          break;
-        case "3":
-          $("#sidebar ul:first-child li:nth-child(3) a").trigger('click');
-          break;
-        case "4":
-          $("#sidebar ul:first-child li:nth-child(4) a").trigger('click');
-          break;
-        case "5":
-          $("#sidebar ul:first-child li:nth-child(5) a").trigger('click');
-          break;
-        case "g":
-          $("#sidebar ul:nth-child(2) li:first-child a").trigger('click');
-          break;
-        case "s":
-          $('#fade').trigger('click');
-          $("#search").trigger('click');
-          break;
-         case "t":
-          $("#sidebar ul:nth-child(2) li:nth-child(3) a").trigger('click');
-          break;
+      if(e.key === "s"){
+        $('#fade').trigger('click');
+        $("#search").trigger('click');
+      } else {
+        $("#sidebar ul").find("[key-trigger='" + e.key + "']").trigger('click');
       }
     }
-    //use esc key to close search panel: typo fixed
-    if($('.search-form').hasClass('active')){
-      switch(e.key) {
-        case "Escape":
-          $('.icon-remove-sign').trigger('click');
-          break;
-      }
+
+    if($('.search-form').hasClass('active') && e.key === "Escape"){
+      $('.icon-remove-sign').trigger('click');
     }
   });
-  
+
   //Key release
-  //Fix : extra character 's' is entered to the input field when switching to the search form by using keypress
+  //Fix : extra character 's' is entered to the input field when s
+  //      witching to the search form by using keypress
   $(document).keyup(function(e){
     if($('.search-form').hasClass('active')){
       $(".search-form").find('input').focus();
     }else{
       $(".search-form").find('input').blur();
     }
   });
-  
+
   // Search
   var bs = {
     close: $(".icon-remove-sign"),
@@ -102,8 +77,9 @@
   bs.dothis.on('click', function() {
     $('.search-wrapper').toggleClass('active');
     bs.searchform.toggleClass('active');
-    // Only focus the form after key release, prvent the character 's' entered immediately after key enter
-    //bs.searchform.find('input').focus();     
+    // Only focus the form after key release, prvent the character 's'
+    // entered immediately after key enter
+    // bs.searchform.find('input').focus();
     bs.canvas.toggleClass('search-overlay');
     $('.search-field').simpleJekyllSearch();
   });

diff --git a/src/styl/_header.styl b/src/styl/_header.styl
@@ -21,7 +21,6 @@ $bg
 		img
 			size(130, 130)
 			border-radius 100%
-			margin-bottom 80px
 	.recent
 		+below(320px)
 			&:last-child
@@ -47,7 +46,6 @@ $bg
 	.site-title
 		font-size rem(30px)
 		line-height 1
-		margin-top -80px
 		display block
 		letter-spacing 9px
 		+above(cut)