viz support, search bug fix, hooks for sub-path link

#7 #9 #10 #11 #12

assets/sass/abstracts/_variables.scss

@@ -21,7 +21,7 @@ $code-font-stack: Consolas,
               Courier, 
               monospace !default;
 
-$z-indexes: ("drawer", "modal", "dropdown", "navbar", "header", "gtt", "clipboard", "grid", "search-btn", "search", "menu", "content", "footer", "taxo", "toc", "gallery-mask", "section-title", "highlight");
+$z-indexes: ("drawer", "modal", "dropdown", "navbar", "header", "gtt", "clipboard", "grid", "search-btn", "search", "menu", "content", "landing", "footer", "taxo", "toc", "gallery-mask", "section-title", "highlight");
 
 $breakpoints: (
   'xs': 0,

assets/sass/components/_drawer.scss

@@ -29,6 +29,9 @@
       @include flexbox();
       @include align-items(center);
       @include justify-content(flex-start);
+      @include themify($themes) {
+        color: themed('title-color');
+      }
     }
   }
 

assets/sass/components/_search.scss

@@ -6,19 +6,34 @@
   z-index: z('search'); 
   margin: 0 0.75rem;
 
+  &[data-bgimg="true"] {
+    @include themify($themes) {
+      border: 2px solid themed('search-border-color');
+      background-color: transparent;
+      &:focus-within {
+        background-color: themed("search-background-color");
+        border: 2px solid themed('search-border-active-color');
+        @include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
+      }
+    }
+  }
+
+  &[data-bgimg="false"] {
+    @include themify($themes) {
+      border: 2px solid themed('search-border-color');
+      background-color: themed("search-background-color");
+      &:focus-within {
+        border: 2px solid themed('search-border-active-color');
+        @include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
+      }
+    }
+  }
+
   @include box-shadow(0, 0, 0, 3px, transparent);
   @include transition(all, 0.2s, ease-in);
   @include flexbox();
   @include align-items(center);
   @include transition(all, 0.15s, ease);
-  @include themify($themes) {
-    border: 2px solid themed('search-border-color');
-    background-color: themed("search-background-color");
-    &:focus-within {
-      border: 2px solid themed('search-border-active-color');
-      @include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
-    }
-  }
 
   @media only screen and (max-width: 1280px) {
     width: 170px;

assets/sass/layout/_footer.scss

@@ -19,6 +19,9 @@
 
     &--wrapper {
       @include flexbox();
+      @media only screen and (max-width: 600px) {
+        @include flex-direction(column);
+      }
     }
 
     &--title {

assets/sass/layout/_navbar.scss

@@ -17,15 +17,22 @@
     right: 0;
     top: 0;
     z-index: z('navbar');
-    box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(60,65,70,0.1);
+    color: inherit;
+
+    &[data-bgimg="true"] {
+      background-color: transparent;
+    }
+
+    &[data-bgimg="false"] {
+      box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(60,65,70,0.1);
+      @include themify($themes) {
+        background-color: themed('navbar-background-color');
+      }
+    }
 
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);
-    @include themify($themes) {
-      color: inherit;
-      background-color: themed('navbar-background-color');
-    }
   }
 
   &__menu {

assets/sass/pages/_home.scss

@@ -13,10 +13,13 @@
 
     &--img {
       margin: 0.5rem;
+      z-index: z('landing');
     }
 
     &--txt {
       margin: 2.5rem 0.5rem;
+      z-index: z('landing');
+
       .title {
         font-size: 56px;
         font-weight: 900;

data/lib.toml

@@ -25,7 +25,13 @@
 [js.chart]
   sri = "sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI="
   url = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
+[js.viz]
+  sri = "" # no sri
+  url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.min.js"
 
+[js.viz_render]
+  sri = "sha256-Ogqs510LFnekr9o7OLdpelaaAmNss9egQRTyzCqV2NQ="
+  url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js"
 
 
 # css

layouts/_default/_markup/render-image.html

@@ -0,0 +1,3 @@
+<p class="md__image">
+  <img src="{{ .Destination | relURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+</p>

layouts/_default/_markup/render-link.html

@@ -0,0 +1 @@
+<a href="{{ .Destination | relURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>

layouts/partials/drawer/drawer.html

@@ -1,8 +1,8 @@
 <div id="myDrawer" class="drawer" style="{{ if eq ($.Param "languagedir") "rtl" }}right: -100%{{ end }}">
   <div class="drawer__header">
-    <div class="drawer__header--text">
+    <a href="/" class="drawer__header--text">
       {{ .Site.Params.logoText }}
-    </div>
+    </a>
     <div class="grow"></div>
     <div class="drawer__close">
       {{ partial "svgs/close.svg" (dict "width" 22 "height" 22) }}

layouts/partials/head/scripts.html

@@ -378,32 +378,36 @@
     
     {{ $enableSearchHighlight := ($.Param "enableSearchHighlight") }}
     var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
+    {{ $enableSearch := ($.Param "enableSearch") }}
+    var enableSearch = JSON.parse({{ $enableSearch | jsonify }});
 
     var fuse = null;
 
-    (function initFuse() {
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', permalink + "index.json");
-      xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
-      xhr.onload = function () {
-        if (xhr.status === 200) {
-          fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
-            keys: ['title', 'description', 'content'],
-            includeMatches: enableSearchHighlight,
-            shouldSort: true,
-            threshold: 0.4,
-            location: 0,
-            distance: 100,
-            maxPatternLength: 32,
-            minMatchCharLength: 1,
-          });
-        }
-        else {
-          console.error(`[${xhr.status}]Error:`, xhr.statusText);
-        }
-      };
-      xhr.send();
-    })();
+    if (enableSearch) {
+      (function initFuse() {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', permalink + "index.json");
+        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
+        xhr.onload = function () {
+          if (xhr.status === 200) {
+            fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
+              keys: ['title', 'description', 'content'],
+              includeMatches: enableSearchHighlight,
+              shouldSort: true,
+              threshold: 0.4,
+              location: 0,
+              distance: 100,
+              maxPatternLength: 32,
+              minMatchCharLength: 1,
+            });
+          }
+          else {
+            console.error(`[${xhr.status}]Error:`, xhr.statusText);
+          }
+        };
+        xhr.send();
+      })();
+    }
     
     function makeLi(ulElem, obj) {
       var li = document.createElement('li');
@@ -790,6 +794,7 @@
     var items = null;
     var searchContainerMaxHeight = 350;
 
+    searchElem ? 
     searchElem.addEventListener('keydown', function(e) {
       if (window.innerWidth < 770) {
         return null;
@@ -840,7 +845,7 @@
           searchResults.classList.remove('is-active');
         }
       }
-    });
+    }) : null;
 
     searchMobile ? 
     searchMobile.addEventListener('input', function(e) {

layouts/partials/main/landing/home-landing.html

@@ -2,6 +2,9 @@
 {{ $landing := . }}
 <div class="divider">
   <div class="lmr">
+    {{ with .backgroundImage }}
+      <div style="background-image: url('{{ .src | relURL }}'); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: -50px; left: 0; width: 100%; height: {{ .height }}px;"></div>
+    {{ end }}
     <div class="home__landing">
       {{ if .image }}
         <div class="home__landing--img">

layouts/partials/main/sections/list-menu.html

@@ -3,7 +3,7 @@
     {{ if .IsHome }}
       {{ .Site.Title }}
     {{ else }}
-      {{ .Type }}
+      {{ $.Param "Title" }}
     {{ end }}
   </h6>
   <ul>

layouts/partials/main/sections/single-menu.html

@@ -3,7 +3,7 @@
     {{ if .IsHome }}
       {{ .Site.Title }}
     {{ else }}
-      {{ .Type }}
+      {{ $.Param "Title" }}
     {{ end }}
   </h6>
   <ul>

layouts/partials/navbar/navbar.html

@@ -1,6 +1,6 @@
 {{ if .Site.Params.enableNavbar }}
 <nav class="nav">
-  <div class="navbar__wrapper">
+  <div class="navbar__wrapper" data-bgimg="{{ if $.Params.landing.backgroundImage }}true{{ else }}false{{ end }}">
     <div class="divider">
       <div class="navbar lmr">
         {{ partial "navbar/logo/navbar-logo.html" . }}

layouts/partials/navbar/search/site-search.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableSearch" }}
 
-<div class="search">
+<div class="search" data-bgimg="{{ if $.Params.landing.backgroundImage }}true{{ else }}false{{ end }}">
   <span class="icon">
     {{ partial "svgs/search.svg" (dict "width" 22 "height" 22) }}
   </span>

layouts/partials/script/single-script.html

@@ -27,6 +27,11 @@
   <script defer src="{{ $js.flowchartjs.url }}" integrity="{{ $js.flowchartjs.sri }}" crossorigin="anonymous"></script>
 {{ end }}
 
+{{ if in .Params.Libraries "viz" }}
+  <script defer src="{{ $js.viz.url }}" crossorigin="anonymous"></script>
+  <script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
+{{ end }}
+
 {{ if in .Params.Libraries "mathjax" }}
   <script type="text/javascript" async src="{{ $js.mathjax.url }}?config=TeX-AMS-MML_HTMLorMML">
     MathJax.Hub.Config({
@@ -181,6 +186,29 @@
       });            
     }
     // =================================================================
+
+
+    // ========================== viz diagram ==========================
+    if (lib && lib.includes('viz')) {
+      var vizPrefix = "language-viz-";
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        var engine;
+        x.getAttribute("class").split(" ").forEach(function (cls) {
+          if (cls.startsWith(vizPrefix)) {
+            engine = cls.substr(vizPrefix.length);
+          }
+        });
+        var viz = new Viz();
+        viz.renderSVGElement(x.innerText, { engine: engine })
+          .then(function (element) {
+            element.style.width = "100%";
+            x.parentNode.insertBefore(element, x);
+          })
+      });
+    }
+    // =================================================================
     
   });
 </script>