readme changed, new shortcodes, new param

new param
- wideViewAsDefault
new shortcode
- codeblock
- tab

11 files changed, 120 insertions, 62 deletions

diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 9addd52..daa712e 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -23,11 +23,13 @@
   </div>
 </div>
 
+{{ partial "script/codeblock-script.html" . }}
 {{ partial "script/single-script.html" . }}
+
 <script>
-  var listSide = document.getElementById('list-side');
-  var listMain = document.getElementById('list-main');
   var singleMenu = document.getElementById('single-menu');
+  var listMain = document.getElementById('list-main');
+  var listSide = document.getElementById('list-side');
   var wideViewAsDefault = JSON.parse({{ $wideViewAsDefault | jsonify }});
 
   enquire.register("screen and (max-width:1280px)", {
diff --git a/layouts/partials/head/scripts.html b/layouts/partials/head/scripts.html
index 13c9d5b..c6184c0 100644
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@@ -25,10 +25,13 @@
 <script>
   "use strict";
 
-  {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
-  var languagedir = JSON.parse({{ $languagedir | jsonify }});
-
   window.onload = function() {
+    {{ $languagedir := ($.Param "languagedir" | default "ltr") }}
+    var languagedir = JSON.parse({{ $languagedir | jsonify }});
+    {{ $baseurl := $.Site.BaseURL }}
+    var baseurl = JSON.parse({{ $baseurl | jsonify }});
+    {{ $permalink := .Permalink }}
+    var permalink = JSON.parse({{ $permalink | jsonify }});
 
     // ==================== toc visibility ========================
     var toggleSidebarElem = document.getElementById("toggle-sidebar");
@@ -255,13 +258,11 @@
 
         var parent = elem.parentNode;
         while (parent.classList.contains('menu__list') && parent.classList.contains('active')) {
-          console.log('parent');
           parent.style.maxHeight = 100 * parent.children.length + "px";
           parent = parent.parentNode;
         }
 
         if (content.style.maxHeight) {
-          console.log('null');
           content.style.maxHeight = null;
           content.classList.remove('active');
           menuTitleIcon.classList.add('right');
@@ -272,7 +273,6 @@
             menuTitleIcon.classList.remove('down');
           }
         } else {
-          console.log('scrollHeight');
           content.style.maxHeight = content.scrollHeight + "px";
           content.classList.add('active');
           menuTitleIcon.classList.remove('right');
@@ -554,10 +554,6 @@
 
 
   // ========================== search ==========================
-    {{ $baseurl := $.Site.BaseURL }}
-    var baseurl = JSON.parse({{ $baseurl | jsonify }});
-    {{ $permalink := .Permalink }}
-    var permalink = JSON.parse({{ $permalink | jsonify }});
     {{ $langprefix := $.Site.LanguagePrefix }}
     var langprefix = JSON.parse({{ $langprefix | jsonify }});
     var searchResults = null;
@@ -934,7 +930,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;
@@ -970,7 +965,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;
@@ -1057,7 +1051,6 @@
       var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
       dropdownItems ? dropdownItems.forEach(function (item) {
         item.addEventListener('mousedown', function (e) {
-          console.log('mousedown');
           e.target.click();
         });
       }) : null;
diff --git a/layouts/partials/main/component/toggle-menu.html b/layouts/partials/main/component/toggle-menu.html
index 365bff8..44c5212 100644
--- a/layouts/partials/main/component/toggle-menu.html
+++ b/layouts/partials/main/component/toggle-menu.html
@@ -1,5 +1,5 @@
 {{ if $.Param "enableWideBlogSwitch" }}
-  <label class="switch switch__abs">
+  <label class="switch switch__abs" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
     {{ if ($.Param "wideViewAsDefault") }}
       <input id="toggle-menu" aria-label="Toggle Menu Visibility" type="checkbox" />
       <span class="slider">
diff --git a/layouts/partials/main/component/toggle-sidebar.html b/layouts/partials/main/component/toggle-sidebar.html
index c06656f..c9f62ac 100644
--- a/layouts/partials/main/component/toggle-sidebar.html
+++ b/layouts/partials/main/component/toggle-sidebar.html
@@ -4,20 +4,20 @@
       <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" />

       <span class="slider">

         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}{{ else }}hide{{ end }}">

-          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}

+          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}

         </span>

         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}hide{{ end }}">

-          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}

+          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}

         </span>

       </span>

     {{ else }}

       <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" checked />

       <span class="slider">

         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}{{ else }}hide{{ end }}">

-          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}

+          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}

         </span>

         <span class="slider__icon {{ if (ne ($.Param "languagedir") "rtl") }}hide{{ end }}">

-          {{ partial "svgs/arrow-forward.svg" (dict "width" 20 "height" 20) }}

+          {{ partial "svgs/arrow-back.svg" (dict "width" 20 "height" 20) }}

         </span>

       </span>

     {{ end }}

diff --git a/layouts/partials/main/list.html b/layouts/partials/main/list.html
index 46c192e..caf16f6 100644
--- a/layouts/partials/main/list.html
+++ b/layouts/partials/main/list.html
@@ -1,3 +1,4 @@
+{{ $wideViewAsDefault := $.context.Param "wideViewAsDefault" }}
 <div class="mid">
   <div class="divider">
 
@@ -7,7 +8,7 @@
       {{ end }}
     </nav>
 
-    <article id="list-main" class="m" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+    <article id="list-main" class="{{ if $wideViewAsDefault }}mr{{ else }}m{{ end }}" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
       {{ partial "main/sections/list-main.html" .context }}
       {{ if .section_to_display }}
         {{ partial "main/sections/list-section.html" (dict "section_to_display" .section_to_display) }}
@@ -15,53 +16,73 @@
       {{ partial "main/component/pagination-single.html" .context }}
     </article>
 
-    <section id="list-side" class="r" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
+    <section id="list-side" class="{{ if $wideViewAsDefault }}hide{{ else }}r{{ end }}" data-dir="{{ $.context.Param "languagedir" | default "ltr" }}">
     </section>
 
   </div>
 </div>
 
 <script>
-  var listSide = document.getElementById('list-side');
-  var listMain = document.getElementById('list-main');
   var listMenu = document.getElementById('list-menu');
+  var listMain = document.getElementById('list-main');
+  var listSide = document.getElementById('list-side');
   var switchElem = document.querySelector('.switch');
+  var wideViewAsDefault = JSON.parse({{ $wideViewAsDefault | jsonify }});
 
   enquire.register("screen and (max-width:1280px)", {
     match: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listMain.className = 'm';
+        listSide.className = 'r';
+      }
     },
     unmatch: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listSide.className = 'r';
+        listMain.className = 'm';
+      }
     },
   }).register("screen and (max-width:960px)", {
     match: function () {
-      listSide.className = 'hide';
-      listMain.className = 'mr';
       listMenu.className = 'l';
+      listMain.className = 'mr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      listSide.className = 'r';
-      listMain.className = 'm';
-      listMenu.className = 'l';
+      if (wideViewAsDefault) {
+        listMenu.className = 'l';
+        listMain.className = 'mr';
+        listSide.className = 'hide';
+      } else {
+        listMenu.className = 'l';
+        listMain.className = 'm';
+        listSide.className = 'r';
+      }
+      
       switchElem.className = 'switch';
     },
   }).register("screen and (max-width:600px)", {
     match: function () {
-      listSide.className = 'hide';
-      listMain.className = 'lmr';
       listMenu.className = 'hide';
+      listMain.className = 'lmr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      listSide.className = 'hide';
-      listMain.className = 'mr';
       listMenu.className = 'l';
+      listMain.className = 'mr';
+      listSide.className = 'hide';
       switchElem.className = 'hide';
     },
   });
diff --git a/layouts/partials/main/sections/single-menu.html b/layouts/partials/main/sections/single-menu.html
index 9e5af25..5540a49 100644
--- a/layouts/partials/main/sections/single-menu.html
+++ b/layouts/partials/main/sections/single-menu.html
@@ -28,7 +28,7 @@
   {{ $active = or $active (in $currentURL $sectionName1) }}
   
   {{ if $ctx.Params.Collapsible }}
-  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}">
+  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}" data-permalink="{{ $ctx.Permalink }}">
     {{ $ctx.Title }}
     <span class="menu__title--icon {{ if $active }}{{ if eq ($root.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
       {{ if eq ($root.Param "languagedir") "rtl" }}
diff --git a/layouts/partials/main/single.html b/layouts/partials/main/single.html
index 1a62da7..7226afb 100644
--- a/layouts/partials/main/single.html
+++ b/layouts/partials/main/single.html
@@ -24,7 +24,9 @@
   </div>
 </div>
 
+{{ partial "script/codeblock-script.html" . }}
 {{ partial "script/single-script.html" . }}
+
 <script>
   var listSide = document.getElementById('list-side');
   var listMain = document.getElementById('list-main');
@@ -35,12 +37,10 @@
   enquire.register("screen and (max-width:1280px)", {
     match: function () {
       if (wideViewAsDefault) {
-        console.log(1);
         singleMenu.className = 'l';  
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(2);
         singleMenu.className = 'l';
         listMain.className = 'm';
         listSide.className = 'r';
@@ -48,12 +48,10 @@
     },
     unmatch: function () {
       if (wideViewAsDefault) {
-        console.log(3);
         singleMenu.className = 'l';
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(4);
         listSide.className = 'r';
         listMain.className = 'm';
         singleMenu.className = 'l';
@@ -61,7 +59,6 @@
     },
   }).register("screen and (max-width:960px)", {
     match: function () {
-      console.log(5);
       singleMenu.className = 'l';
       listMain.className = 'mr';
       listSide.className = 'hide';
@@ -69,12 +66,10 @@
     },
     unmatch: function () {
       if (wideViewAsDefault) {
-        console.log(6);
         singleMenu.className = 'l';
         listMain.className = 'mr';
         listSide.className = 'hide';
       } else {
-        console.log(7);
         singleMenu.className = 'l';
         listMain.className = 'm';
         listSide.className = 'r';
@@ -83,14 +78,12 @@
     },
   }).register("screen and (max-width:600px)", {
     match: function () {
-      console.log(8);
       listSide.className = 'hide';
       listMain.className = 'lmr';
       singleMenu.className = 'hide';
       switchElem.className = 'hide';
     },
     unmatch: function () {
-      console.log(9);
       listSide.className = 'hide';
       listMain.className = 'mr';
       singleMenu.className = 'l';
diff --git a/layouts/partials/script/codeblock-script.html b/layouts/partials/script/codeblock-script.html
new file mode 100644
index 0000000..df6ed91
--- /dev/null
+++ b/layouts/partials/script/codeblock-script.html
@@ -0,0 +1,37 @@
+<script>
+  'use strict';
+  // ====================== markdown code block ======================
+  function wrap(el, wrapper) {
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+  }
+
+  (function () {
+    var singleContentsElem = document.querySelector('.single__contents');
+    singleContentsElem ? 
+    singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
+      var dataLang = elem.getAttribute('data-lang');
+      var dataLangWrapper = document.createElement('div');
+      var code = null;
+      var codeTitle = null;
+
+      if (dataLang && dataLang.includes(':')) {
+        code = dataLang.split(':')[0];
+        codeTitle = dataLang.split(':')[1];
+
+        dataLangWrapper.className = 'language-' + code;
+        dataLangWrapper.setAttribute('data-lang', codeTitle);
+
+        elem.className = 'language-' + code;
+        elem.setAttribute('data-lang', codeTitle);
+        elem.setAttribute('id', codeTitle);
+      }
+
+      if (!dataLang || codeTitle) {
+        wrap(elem.parentNode, dataLangWrapper);
+      }
+
+    }) : null;
+  })();
+  // =================================================================
+</script>
\ No newline at end of file
diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html
index 599bef1..b1d400d 100644
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@@ -82,6 +82,30 @@
     }
     // =================================================================
 
+
+    // ================ codeblock line number to symbol ================
+    var dollarCodeElem = document.querySelectorAll('div.language-\\$');
+    var gtCodeElem = document.querySelectorAll('div.language-\\>');
+    
+    dollarCodeElem ?
+    dollarCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '$<br/>';
+      }) : null;
+    }) : null;
+
+    gtCodeElem ?
+    gtCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '><br/>';
+      }) : null;
+    }) : null;
+    // =================================================================
+
     
     // ============================ mermaid ============================
     {{ $lib := .Params.libraries }}
diff --git a/layouts/partials/side/toc.html b/layouts/partials/side/toc.html
deleted file mode 100644
index c7cd4ec..0000000
--- a/layouts/partials/side/toc.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<aside class="side">
-  <div class="toc__wrapper">
-    <div class="toc">
-      {{ .Content }}
-    </div>
-  </div>
-</aside>
\ No newline at end of file
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
index ed4f5bb..b707016 100644
--- a/layouts/shortcodes/alert.html
+++ b/layouts/shortcodes/alert.html
@@ -1,6 +1 @@
-<div class="alert{{- " " -}}{{- if .IsNamedParams -}}
-{{- with .Get "theme" -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
-{{- else -}}
-	{{- with .Get 0 -}}alert-{{.}}{{- else -}}alert-info{{- end -}}
-{{- end -}}
-" role="alert" data-dir="{{ with .Get "dir" }}{{.}}{{ else }}ltr{{ end }}">{{ .Inner | markdownify }}</div>
\ No newline at end of file
+<div class="alert {{ with .Get "theme" }}alert-{{.}}{{ end }}" role="alert" data-dir="{{ with .Get "dir" }}{{.}}{{ else }}ltr{{ end }}">{{ .Inner | markdownify }}</div>
\ No newline at end of file