flowchart.js support, search multi language support

README.md

@@ -240,6 +240,7 @@ enableToc = true
 enableTocSwitch = true
 itemsPerCategory = 5
 enableSideSubscribe = false
+searchLanguages = ['en'] # checkout lunr.js supported language
 
 # comment
 enableComment = false

data/_config/_default/params.toml

@@ -24,6 +24,7 @@ enableToc = true
 enableTocSwitch = true
 itemsPerCategory = 5
 enableSideSubscribe = false
+searchLanguages = ['en']
 
 # footer
 showPoweredBy = true

data/flowchartjs.json

@@ -0,0 +1,58 @@
+{
+    "x": 0,
+    "y": 0,
+    "line-width": 3,
+    "line-length": 50,
+    "text-margin": 10,
+    "font-size": 14,
+    "font-color": "black",
+    "line-color": "black",
+    "element-color": "black",
+    "fill": "white",
+    "yes-text": "yes",
+    "no-text": "no",
+    "arrow-end": "block",
+    "scale": 1,
+    "symbols": {
+        "start": {
+            "font-color": "red",
+            "element-color": "green",
+            "fill": "yellow"
+        },
+        "end": {
+            "class": "end-element"
+        }
+    },
+    "flowstate": {
+        "past": {
+            "fill": "#CCCCCC",
+            "font-size": 12
+        },
+        "current": {
+            "fill": "yellow",
+            "font-color": "red",
+            "font-weight": "bold"
+        },
+        "future": {
+            "fill": "#FFFF99"
+        },
+        "request": {
+            "fill": "blue"
+        },
+        "invalid": {
+            "fill": "#444444"
+        },
+        "approved": {
+            "fill": "#58C4A3",
+            "font-size": 12,
+            "yes-text": "APPROVED",
+            "no-text": "n/a"
+        },
+        "rejected": {
+            "fill": "#C45879",
+            "font-size": 12,
+            "yes-text": "n/a",
+            "no-text": "REJECTED"
+        }
+    }
+}

data/lib.toml

@@ -23,3 +23,19 @@
 [css.katex]
   sri = "sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung="
   url = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
+
+# lunr languages
+[js.stemmer]
+  code = "stemmer"
+  sri = "sha256-LnITYFhGoYAU7HUJEMsYqKTGC7IyABA7P62e8nsQxwU="
+  url = "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/min/lunr.stemmer.support.min.js"
+
+[js.multi_language]
+  code = "multiLanguage"
+  sri = "sha256-l2H0da5582Qg/3FN+ZUO+yZO/8+SMO/VW1EaDeiZ6Xk="
+  url = "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/min/lunr.multi.min.js"
+
+[lunr.fr]
+  code = "fr"
+  sri = "sha256-TdVqolUedwrSbvS4UJLNMUR2ceDoSzlRQnhUf1QXc3c="
+  url = "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/min/lunr.fr.min.js"

exampleSite/config.toml

@@ -50,6 +50,7 @@ rssLimit = 100
   enableTocSwitch = true
   itemsPerCategory = 5
   enableSideSubscribe = false
+  searchLanguages = ['en']
   
   # footer
   showPoweredBy = true

layouts/archive/list.html

@@ -10,7 +10,7 @@
 </span>
 <main class="main archive">
   <div>
-    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate (.Site.Params.archiveGroupByDate | default 2006) }}
+    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate (.Site.Params.archiveGroupByDate | default "2006") }}
     <span class="archive__key">{{ .Key }}</span>
     <ul class="archive__ul">
       {{ range .Pages }}

layouts/partials/body/lib.html

@@ -43,13 +43,20 @@
 {{ end }}
 
 {{ if in .Params.Libraries "flowchartjs" }}
-  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"flowchartjs\"></script>" $js.flowchartjs.url $js.flowchartjs.sri | safeHTML }}
   {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"raphael\"></script>" $js.raphael.url $js.raphael.sri | safeHTML }}
-  <script>
-    var diagramContent = $('#diagram').text().trim();
-    $('#diagram').text('');
+  {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"flowchartjs\"></script>" $js.flowchartjs.url $js.flowchartjs.sri | safeHTML }}  
+  
+  <script>        
+    {{ $flowchartjs := .Site.Data.flowchartjs }}
+    var options = JSON.parse({{ $flowchartjs | jsonify }});
+
+    $('.diagram').each(function() {
+      var diagramContent = $(this).text(); 
+      $(this).text('');
+
+      var diagram = flowchart.parse(diagramContent);
+      diagram.drawSVG('diagram', options);
+    });    
 
-    // var diagram = flowchart.parse(diagramContent);
-    // diagram.drawSVG('diagram');    
   </script>
 {{ end }}

layouts/partials/sidebar/site-search.html

@@ -12,9 +12,20 @@
 </div>
 
 {{ partial "sidebar/site-mark" . }}
+
 {{ $lunr := resources.Get "js/lunr.min.js" | resources.Fingerprint }}
 <script defer src="{{ $lunr.RelPermalink }}"></script>
 
+{{ $stemmer := .Site.Data.lib.js.stemmer }}
+{{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"%s\"></script>" $stemmer.url $stemmer.sri $stemmer.code | safeHTML }}
+
+{{ $multi := .Site.Data.lib.js.multi_language }}
+{{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"%s\"></script>" $multi.url $multi.sri $multi.code | safeHTML }}
+
+{{ range .Site.Data.lib.lunr }}
+  {{ printf "<script defer src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\" title=\"%s\"></script>" .url .sri .code | safeHTML }}
+{{ end }}
+
 <script>
   {{ if .Site.IsMultiLingual }}
       var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
@@ -23,6 +34,13 @@
   {{ end }}  
   
   $(document).ready(function () {
+    {{ $searchLanguages := .Site.Params.searchLanguages }}
+    var searchLanguages = JSON.parse({{ $searchLanguages | jsonify }});
+
+    if (!searchLanguages) {
+      searchLanguages = ['en'];
+    }
+    
     var lunrIndex = null;
     var pagesIndex = null;
     var searchResults = null;
@@ -41,10 +59,11 @@
         .done(function (index) {
           pagesIndex = index;
           lunrIndex = lunr(function () {
+            this.use(lunr.multiLanguage(...searchLanguages));
             this.ref('uri');
             this.field('title');
             this.field('description');
-            //this.field('content');
+            this.field('content');
             //this.field('tags');
             //this.field('series');
             //this.field('categories');

layouts/shortcodes/flowchartjs.html

@@ -1,3 +1,3 @@
-<div id="diagram">
+<div id="diagram" class="diagram">
   {{- safeHTML .Inner -}}
 </div>