search keyword highlight support, some theme color changed, mermaid version update, chinese social icon added

README.ko.md

@@ -92,7 +92,7 @@ config.toml 파일이 보이신다면, 과감하게 지워주세요. 아래 단
 모두 그냥 복사, 붙여넣기 해서 파일을 만드시면 되는데, 귀찮으신 분들은 exampleSite 폴더에 있는 config 폴더를
 루트 디렉토리에 그냥 복사 붙여넣기 하셔도 됩니다.
  
-아래는 설정 파일 구조구요.
+아래는 설정 파일 구조구요. _default폴더의 _(언더스코어) 뺴먹지 마세요!
 
 ```bash
 root
@@ -226,6 +226,7 @@ enableThemeChange = true # site color theme
 enableBreadcrumb = true # breadcrumb for list, single page
 enablePhotoSwipe = true # image viewer for gallery, single page
 enableSearch = true # site search with fuse
+enableSearchHighlight = true # when true, search keyword will be highlighted
 enableGoToTop = true # scroll to top
 enableWhoami = true # at the end of single page
 summaryShape = "classic" # card, classic, compact
@@ -336,6 +337,8 @@ commento = false
   zhihu = ""
   gitlab = ""
   mastodon = ""
+  jianshu = ""
+  zhihu = ""
 
 [donationOptions] 
   enable = false # if set, the donation button will show up on the single page.
@@ -826,6 +829,10 @@ copyright = This is my {} copyright text
   copyrightLinkText = "copyright link text"
 ```
 
+### custom favicon
+
+root/static 폴더에 파비콘을 넣어서 테마의 favicon을 overriding 하시면 됩니다.
+
 ## External Library
 
 현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다.

README.md

@@ -84,7 +84,7 @@ hugo server --themesDir ../..
 
 0. From the root of your site: delete config.toml file and add the files below
 
-1. config folder structure
+1. config folder structure. Keep in mind the underscore on the `_default` folder
 
 ```bash
 root
@@ -218,6 +218,7 @@ enableThemeChange = true # site color theme
 enableBreadcrumb = true # breadcrumb for list, single page
 enablePhotoSwipe = true # image viewer for gallery, single page
 enableSearch = true # site search with Fuse
+enableSearchHighlight = true # when true, search keyword will be highlighted
 enableGoToTop = true # scroll to top
 enableWhoami = true # at the end of single page
 summaryShape = "classic" # card, classic, compact
@@ -328,6 +329,8 @@ commento = false
   zhihu = ""
   gitlab = ""
   mastodon = ""
+  jianshu = ""
+  zhihu = ""
 
 [donationOptions] 
   enable = false # if set, the donation button will show up on the single page.
@@ -550,7 +553,7 @@ It's a better idea not to modify the Zzo theme's folder if you want future suppo
 
 ### custom css
 
-1. Add this line of code to your params.toml file
+1. Add this line of code to your params.toml file.
 
 ```bash
 config/_default/params.toml
@@ -581,7 +584,7 @@ assets/scss/custom.scss or assets/css/custom.css
 
 ### custom js
 
-1. Add this line of code to your params.toml file
+1. Add this line of code to your params.toml file.
 
 ```bash
 config/_default/params.toml
@@ -823,6 +826,10 @@ The {} part will be your copyright link.
   copyrightLinkText = "copyright link text"
 ```
 
+### custom favicon
+
+Override the default favicon by adding your favicon at root/static folder
+
 ## External Library
 
 If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram. Just add some variable to a front-matter.

assets/sass/components/_pagination.scss

@@ -24,6 +24,7 @@
     }
     
     &.active {
+      font-weight: bold;
       a {
         @include themify($themes) {
           color: themed('link-hover');

assets/sass/components/_search.scss

@@ -46,6 +46,12 @@
       text-decoration: none !important;
     }
   }
+
+  &__highlight {
+    @include themify($themes) {
+      color: themed('search-highlight-color');
+    }
+  }
 }
 
 .menu-item {
@@ -61,10 +67,11 @@
 
   &__desc {
     font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+
     @include truncate($grid_main_side_width + $grid_main_side_unit);
     @include themify($themes) {
       color: themed('search-color');
-      opacity: 0.78;
     }
   }
 }
@@ -224,10 +231,11 @@
 
     &--desc {
       font-size: 0.9rem;
+      padding: 0.25rem 0.5rem;
+      
       @include truncate(960px);
       @include themify($themes) {
         color: themed('search-color');
-        opacity: 0.65;
       }
     }
     

assets/sass/themes/_custom.scss

@@ -7,12 +7,12 @@ $custom: (
   meta-color: hsl($custom_theme_primary_color, 40%, 40%),
   body-color: hsl($custom_theme_primary_color, 100%, 10%),
   hr-color: hsl($custom_theme_primary_color, 60%, 30%),
-  body-background-color: hsl($custom_theme_primary_color, 100%, 98.5%),
+  body-background-color: hsl($custom_theme_primary_color, 100%, 99%),
-  backdrop-background-color: hsl($custom_theme_primary_color, 100%, 99%),
+  backdrop-background-color: hsl($custom_theme_primary_color, 100%, 98.5%),
   dropdown-border-top-color: hsl($custom_theme_primary_color, 100%, 45%),
   dropdown-item-active-background-color: hsl($custom_theme_primary_color, 100%, 90%),
   dropdown-content-background-color: hsl($custom_theme_primary_color, 100%, 98%),
-  dropdown-item-hover-background-color: hsl($custom_theme_primary_color, 100%, 90%),
+  dropdown-item-hover-background-color: hsl($custom_theme_primary_color, 100%, 82%),
   dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
   dropdown-item-color: hsl($custom_theme_primary_color, 100%, 10%),
   navbar-border-bottom-color: hsl($custom_theme_primary_color, 65%, 32%),
@@ -23,7 +23,7 @@ $custom: (
   navbar-title-active-color: hsl($custom_theme_primary_color, 100%, 35%),
   navbar-menu-hover-background-color: hsl($custom_theme_primary_color, 100%, 90%),
   navbar-dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
-  sidebar-title-color: hsl($custom_theme_primary_color, 70%, 25%),
+  sidebar-title-color: hsl($custom_theme_primary_color, 50%, 25%),
   sidebar-li-color: hsl($custom_theme_primary_color, 85%, 30%),
   taxo-title-color: hsl($custom_theme_primary_color, 70%, 35%),
   taxo-num-color: hsl($custom_theme_primary_color, 100%, 10%),
@@ -67,11 +67,12 @@ $custom: (
   search-placeholder-color: hsl($custom_theme_primary_color, 65%, 65%),
   search-color: hsl($custom_theme_primary_color, 100%, 10%),
   search-icon-color: hsl($custom_theme_primary_color, 65%, 80%),
-  search-border-color: hsl($custom_theme_primary_color, 65%, 65%),
+  search-border-color: hsl($custom_theme_primary_color, 85%, 85%),
   search-content-color: hsl($custom_theme_primary_color, 100%, 10%),
   search-background-color: hsl($custom_theme_primary_color, 100%, 96%),
   search-content-background-color: hsl($custom_theme_primary_color, 100%, 99%),
   search-hover-background-color: hsl($custom_theme_primary_color, 100%, 95%),
+  search-highlight-color: #FF6188,
   selection-color: hsl($custom_theme_primary_color, 65%, 95%),
   selection-background-color: hsl($custom_theme_primary_color, 65%, 32%),
   archive-key-color: hsl($custom_theme_primary_color, 100%, 92%),

assets/sass/themes/_dark.scss

@@ -72,6 +72,7 @@ $dark: (
     search-background-color: #212121,
     search-content-background-color: lighten(#403E41, 5%),
     search-hover-background-color: #727072,
+    search-highlight-color: #FF6188,
     selection-color: #FCFCFA,
     selection-background-color: #FF6188,
     archive-key-color: #FCFCFA,

assets/sass/themes/_hacker.scss

@@ -72,6 +72,7 @@ $hacker: (
     search-content-color: #1FFF2A,
     search-content-background-color: lighten(#252526, 7%),
     search-hover-background-color: lighten(#252526, 14%),
+    search-highlight-color: red,
     selection-color: #FCFCFA,
     selection-background-color: #FF6188,
     archive-key-color: #FCFCFA,

assets/sass/themes/_light.scss

@@ -16,14 +16,14 @@ $light: (
     dropdown-item-hover-color: #FCFCFA,
     dropdown-item-color: #555,    
     navbar-border-bottom-color: #e0e0e0,
-    navbar-background-color: #eaeaea,
+    navbar-background-color: #cfd8dc,
     navbar-mobile-background-color: #f1f1f1,
     navbar-title-color: #555,
     navbar-title-hover-color: #607d8b,
     navbar-title-active-color: #FF6188,
     navbar-menu-hover-background-color: lighten(#eeeeee, 3%),
     navbar-dropdown-item-hover-color: #607d8b,
-    sidebar-title-color: #424242,
+    sidebar-title-color: #607d8b,
     sidebar-li-color: #424242,
     taxo-title-color: #607d8b,
     taxo-num-color: #424242,
@@ -72,6 +72,7 @@ $light: (
     search-content-color: #424242,
     search-content-background-color: #eeeeee,
     search-hover-background-color: darken(#eeeeee, 10%),
+    search-highlight-color: #FF6188,
     selection-color: #FCFCFA,
     selection-background-color: #FF6188,
     archive-key-color: #FCFCFA,

assets/sass/themes/_solarized.scss

@@ -1,10 +1,10 @@
 $solarized: (
     footer-background-color: #EEE8D5,
     footer-color: #424242,
-    link: #B58900,
+    link: #b58900,
-    link-hover: #FF6188,
+    link-hover: #268bd2,
-    title-color: #B58900,
+    title-color: #cb4b16,
-    meta-color: lighten(#B58900, 5%),
+    meta-color: #859900,
     body-color: #424242,
     hr-color: #ffb300,
     body-background-color: #FDF7E3,
@@ -23,16 +23,16 @@ $solarized: (
     navbar-title-active-color: #B58900,
     navbar-menu-hover-background-color: darken(#FBF1D1, 5%),
     navbar-dropdown-item-hover-color: #B58900,
-    sidebar-title-color: #ffb300,
+    sidebar-title-color: #2aa198,
     sidebar-li-color: #B58900,
     taxo-title-color: #B58900,
-    taxo-num-color: #B58900,
+    taxo-num-color: #268bd2,
     taxo-num-background-color: darken(#FBF1D1, 7%),
-    taxo-tags-background-color: darken(#e0f7fa, 4%),
+    taxo-tags-background-color: #fff9c4,
     taxo-tags-color: darken(#B58900, 7%),
-    taxo-series-background-color: darken(#fff3e0, 6%),
+    taxo-series-background-color: #dcedc8,
     taxo-series-color: darken(#B58900, 7%),
-    taxo-categories-background-color: darken(#ede7f6, 4%),
+    taxo-categories-background-color: #ffe0b2,
     taxo-categories-color: darken(#B58900, 7%),
     breadcrumb-item-color: #424242,
     breadcrumb-background-color: #FBF1D1,
@@ -43,14 +43,14 @@ $solarized: (
     single-hr-background-color: #bdbdbd,
     single-blockquote-border-color: #bdbdbd,
     single-header-title-color: #424242,
-    single-contents-title-color: #B58900,
+    single-contents-title-color: #cb4b16,
     related-header-title-color: #424242,
-    related-link-color: #ffb300,
+    related-link-color: #2aa198,
     content-box-border-color: #B58900,
     content-box-background-color: #FBF1D1,
     burger-menu-color: #B58900,
-    social-icon-color: lighten(#B58900, 5%),
+    social-icon-color: lighten(#586e75, 5%),
-    social-icon-hover-color: darken(#B58900, 5%),
+    social-icon-hover-color: darken(#586e75, 5%),
     pagination-link-color: #455a64,
     pagination-background-color: #FBF1D1,
     pagination-disabled-color: #bdbdbd,

data/lib.toml

@@ -1,7 +1,7 @@
 # js
 [js.mermaid]
-  sri = "sha256-yJ19uNiJfpYvIw0kAA8Io4TByKjEG2xX+7l9nItQw4o="
+  sri = "sha256-JEqEejGt4tR35L0a1zodzsV0/PJ6GIf7J4yDtywdrH8="
-  url = "https://cdn.jsdelivr.net/npm/mermaid@8.4.2/dist/mermaid.min.js"
+  url = "https://cdn.jsdelivr.net/npm/mermaid@8.4.4/dist/mermaid.min.js"
 
 [js.katex]
   sri = "sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc="

layouts/partials/head/scripts.html

@@ -28,6 +28,11 @@
 
     var searchResults = null;
     var searchMenu = null;
+    var searchText = null;
+    
+    {{ $enableSearchHighlight := ($.Param "enableSearchHighlight") }}
+    var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
+
     var fuse = null;
 
     function endsWith(str, suffix) {
@@ -47,7 +52,14 @@
       })
         .done(function (index) {
           fuse = new Fuse(index, {
-            keys: ['title', 'description', 'content']
+            keys: ['title', 'description', 'content'],
+            includeMatches: enableSearchHighlight,
+            shouldSort: true,
+            threshold: 0.8,
+            location: 0,
+            distance: 100,
+            maxPatternLength: 32,
+            minMatchCharLength: 1,
           });
         })
         .fail(function (jqxhr, textStatus, error) {
@@ -56,7 +68,7 @@
         });
     }
 
-    function renderSearchResults(results) {
+    function renderSearchResults(results) { // [{}, {}, ...] or [{item: {}, matches: []}, ...]
       searchResults = document.getElementById('search-results');
       searchMenu = document.getElementById('search-menu');
       searchResults.setAttribute('class', 'dropdown is-active');
@@ -87,6 +99,37 @@
       searchMenu.appendChild(content);
     }
 
+    function renderSearchHighlightResults(results) {      
+      searchResults = document.getElementById('search-results');
+      searchMenu = document.getElementById('search-menu');
+      searchResults.setAttribute('class', 'dropdown is-active');
+
+      var content = document.createElement('div');
+      content.setAttribute('class', 'dropdown-content search-content');
+
+      if (results.length > 0) {
+        results.forEach(function (result) {
+          var item = document.createElement('a');
+          item.setAttribute('href', result.item.uri);
+          item.setAttribute('class', 'dropdown-item');
+          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="menu-item__desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          content.appendChild(item);
+        });
+      } else {
+        var item = document.createElement('span');
+        item.setAttribute('class', 'dropdown-item');
+        item.innerText = 'No results found';
+        content.appendChild(item);
+      }
+
+      while (searchMenu.hasChildNodes()) {
+        searchMenu.removeChild(
+          searchMenu.lastChild
+        );
+      }
+      searchMenu.appendChild(content);
+    }
+
     function renderSearchResultsMobile(results) {
       searchResults = document.getElementById('search-mobile-results');
 
@@ -109,6 +152,48 @@
       searchResults.appendChild(content);
     }
 
+    function renderSearchHighlightResultsMobile(results) {
+      searchResults = document.getElementById('search-mobile-results');
+
+      var content = document.createElement('div');
+      content.setAttribute('class', 'mobile-search__content');
+
+      if (results.length > 0) {
+        results.forEach(function (result) {
+          var item = document.createElement('a');
+          item.setAttribute('href', result.item.uri);
+          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="mobile-search__item--desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          content.appendChild(item);
+        });
+      } else {
+        var item = document.createElement('span');
+        content.appendChild(item);
+      }
+
+      $('#search-mobile-results').empty();
+      searchResults.appendChild(content);
+    }
+
+    function generateHighlightedText(text, regions) {
+      if(!regions) return text;
+      
+      var content = '', nextUnhighlightedRegionStartingIndex = 0;
+
+      regions.forEach(function(region) {
+        content += '' +
+          text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
+          '<span class="search__highlight">' +
+            text.substring(region[0], region[1] + 1) +
+          '</span>' +
+        '';
+        nextUnhighlightedRegionStartingIndex = region[1] + 1;
+      });
+
+      content += text.substring(nextUnhighlightedRegionStartingIndex);
+
+      return content;
+    };
+
     initFuse();
 
     $("#search").on('input', function (e) {
@@ -121,8 +206,13 @@
         return null;
       } 
 
+      searchText = e.target.value;
       var results = fuse.search(e.target.value);
+      if (enableSearchHighlight) {
+        renderSearchHighlightResults(results);
+      } else {
         renderSearchResults(results);
+      }
     });
 
     $('#search').on('blur', function () {
@@ -142,8 +232,14 @@
         $('#search-results').attr('class', 'dropdown');
         return null;
       }
+      
+      searchText = e.target.value;
       var results = fuse.search(e.target.value);
+      if (enableSearchHighlight) {
+        renderSearchHighlightResults(results);
+      } else {
         renderSearchResults(results);
+      }
     });
 
     $('#search').on('keydown', function (e) {
@@ -172,8 +268,14 @@
         return null;
       }
 
+      searchText = e.target.value;
       var results = fuse.search(e.target.value);
       renderSearchResultsMobile(results);
+      if (enableSearchHighlight) {
+        renderSearchHighlightResultsMobile(results);
+      } else {
+        renderSearchResultsMobile(results);
+      }
     });
   }
 </script>

layouts/partials/svgs/social/jianshu.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}"><path fill="currentColor" d="M 6.8886719 1 C 6.4046719 1 6.0053906 1.3483125 5.9003906 1.8203125 C 5.6373906 2.9983125 4.7908438 5.0488437 2.5898438 6.0898438 C 2.2388438 6.2558437 2 6.5914688 2 6.9804688 L 2 7.0253906 C 2 7.6933906 2.6699687 8.1785 3.2929688 7.9375 C 3.7418759 7.7640455 4.1405134 7.5528964 4.5117188 7.3242188 A 1.0001 1.0001 0 0 0 4.7910156 8.2363281 C 4.7910156 8.2363281 5 8.3770193 5 9 A 1.0001 1.0001 0 1 0 7 9 C 7 7.6889807 6.2109375 6.8261719 6.2109375 6.8261719 A 1.0001 1.0001 0 0 0 5.5605469 6.5253906 C 6.0753568 6.0530628 6.4913817 5.5365138 6.8203125 5 L 7.3105469 5 C 7.623843 5.4287314 7.8943972 5.9150433 8.0332031 6.3222656 C 8.1712031 6.7272656 8.5554219 6.9921875 8.9824219 6.9921875 C 9.6734219 6.9921875 10.152453 6.3171562 9.9394531 5.6601562 C 9.869187 5.442609 9.7517566 5.2213533 9.6210938 5 L 11 5 C 11.552 5 12 4.552 12 4 C 12 3.448 11.552 3 11 3 L 7.703125 3 C 7.7849123 2.711735 7.8509558 2.4314303 7.8964844 2.1699219 C 8.0024844 1.5569219 7.5223906 1 6.9003906 1 L 6.8886719 1 z M 16.888672 1 C 16.404672 1 16.005391 1.3483125 15.900391 1.8203125 C 15.638391 2.9983125 14.790844 5.0488437 12.589844 6.0898438 C 12.238844 6.2558437 12 6.5914688 12 6.9804688 L 12 7.0253906 C 12 7.6933906 12.669969 8.1785 13.292969 7.9375 C 14.996474 7.2792779 16.101927 6.1717473 16.820312 5 L 17.310547 5 C 17.623843 5.4287314 17.894397 5.9150433 18.033203 6.3222656 C 18.171203 6.7272656 18.555422 6.9921875 18.982422 6.9921875 C 19.673422 6.9921875 20.152453 6.3171562 19.939453 5.6601562 C 19.869187 5.442609 19.751757 5.2213533 19.621094 5 L 21 5 C 21.552 5 22 4.552 22 4 C 22 3.448 21.552 3 21 3 L 17.703125 3 C 17.784912 2.711735 17.850956 2.4314303 17.896484 2.1699219 C 18.002484 1.5569219 17.522391 1 16.900391 1 L 16.888672 1 z M 9 8 A 1.0001 1.0001 0 1 0 9 10 L 18 10 L 18 19 C 18 19.56503 17.56503 20 17 20 L 16 20 A 1.0001 1.0001 0 1 0 16 22 L 17 22 C 18.64497 22 20 20.64497 20 19 L 20 9 A 1.0001 1.0001 0 0 0 19 8 L 9 8 z M 4.984375 10.986328 A 1.0001 1.0001 0 0 0 4 12 L 4 21 A 1.0001 1.0001 0 1 0 6 21 L 6 12 A 1.0001 1.0001 0 0 0 4.984375 10.986328 z M 9 12 A 1.0001 1.0001 0 0 0 8 13 L 8 19 A 1.0001 1.0001 0 0 0 9 20 L 13 20 C 14.64497 20 16 18.64497 16 17 L 16 16.167969 A 1.0001 1.0001 0 0 0 16 15.841797 L 16 13 A 1.0001 1.0001 0 0 0 15 12 L 9 12 z M 10 14 L 14 14 L 14 15 L 10 15 L 10 14 z M 10 17 L 14 17 C 14 17.56503 13.56503 18 13 18 L 10 18 L 10 17 z"/></svg>

layouts/partials/svgs/social/zhihu.svg

@@ -1 +1 @@
-<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="{{ .width }}" height="{{ .height }}"><path fill="currentColor" d="M 30.628906 8.9882812 C 30.263281 9.0304687 29.699219 9.1992188 29.699219 9.1992188 C 29.699219 9.1992188 21.499609 10.099219 18.099609 10.199219 C 18.199609 10.699219 18.500391 11.099219 18.900391 11.199219 C 19.600391 11.299219 20.100391 11.199219 21.400391 11.199219 C 22.600391 11.099219 23.599219 11.099609 24.199219 11.099609 L 24.199219 16 L 18 16 C 18 16 18.099219 17.199219 19.199219 17.199219 L 24.199219 17.199219 L 24.199219 20.599609 C 24.199219 21.299609 23.7 21.699219 23 21.699219 C 22.3 21.699219 21.8 21.599609 21 21.599609 C 21.1 21.799609 21.200391 22.299219 21.900391 22.699219 C 22.400391 22.899219 22.699219 23 23.199219 23 C 24.699219 23 25.5 22.099219 25.5 20.699219 L 25.5 17.199219 L 31.599609 17.199219 C 31.999609 17.199219 32.000391 15.999609 31.900391 16.099609 L 25.400391 16.099609 L 25.400391 11.199219 C 25.600391 11.199219 26 11.099609 26.5 11.099609 C 28.6 10.999609 30.000391 10.699219 30.900391 10.699219 C 30.900391 10.699219 31.500391 9.3 30.900391 9 C 30.850391 8.975 30.750781 8.9742188 30.628906 8.9882812 z M 3.3007812 9 C 3.3007813 9 2.0992188 8.9996094 1.6992188 10.099609 C 1.5992187 10.499609 0.9 12.100391 0 13.900391 C 0.3 13.900391 1.2007812 13.800781 1.8007812 12.800781 C 1.9007813 12.500781 2.2007812 12.300391 2.3007812 11.900391 L 3.8007812 11.900391 C 3.8007813 12.400391 3.6992188 15.500781 3.6992188 15.800781 L 1.0996094 15.800781 C 0.49960937 15.800781 0.30078125 17 0.30078125 17 L 3.5 17 C 3.3 19.4 2.1 21.100781 0 22.800781 C 1 23.100781 1.9996094 22.800391 2.5996094 22.400391 C 2.5996094 22.400391 3.8003906 21.499609 4.4003906 19.099609 L 6.9003906 22 C 6.9003906 22 7.3007812 20.6 6.8007812 20 C 6.4007813 19.5 5.5996094 18.599219 5.0996094 18.199219 L 4.4003906 18.800781 C 4.6003906 18.100781 4.8007812 17.7 4.8007812 17 L 8 17 C 8 17 7.9996094 15.800781 7.5996094 15.800781 L 4.9003906 15.800781 C 5.0003906 14.500781 5 13.000391 5 11.900391 L 7.4003906 11.900391 C 7.4003906 11.900391 7.5 10.800781 7 10.800781 L 2.5996094 10.800781 C 2.7996094 10.100781 3.0007813 9.7 3.3007812 9 z M 9 11 L 9 22 L 10.199219 22 L 10.599609 23.300781 L 12.699219 22 L 15 22 L 15 11 L 9 11 z M 29.287109 12.177734 C 29.118359 12.187109 28.950781 12.250391 28.800781 12.400391 L 27 14.800781 L 28 15.5 C 29.1 14.2 30.300781 12.599609 30.300781 12.599609 C 30.300781 12.599609 29.793359 12.149609 29.287109 12.177734 z M 10.199219 12.199219 L 13.699219 12.199219 L 13.699219 20.800781 L 12.5 20.800781 L 11.099609 21.699219 L 10.800781 20.800781 L 10.199219 20.800781 L 10.199219 12.199219 z M 20.128906 12.347656 C 19.707031 12.319531 19.199219 12.599609 19.199219 12.599609 C 19.199219 12.599609 21.200781 15.4 21.300781 15.5 L 22.300781 14.800781 C 22.300781 14.800781 21 13 20.5 12.5 C 20.4 12.4 20.269531 12.357031 20.128906 12.347656 z"/></svg>
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}"><path fill="currentColor" d="M 5.921875 2.9511719 C 5.5336094 2.9815469 5.1832344 3.2390625 5.0527344 3.6328125 L 3.6835938 7.7363281 C 3.5085938 8.2593281 3.7924062 8.825 4.3164062 9 C 4.8404063 9.175 5.4050781 8.8911875 5.5800781 8.3671875 L 6.0351562 7 L 6.9941406 7 L 6.9941406 10.222656 C 6.9941406 10.845846 6.9644144 11.431442 6.9199219 12 L 5 12 A 1.0001 1.0001 0 1 0 5 14 L 6.6367188 14 C 6.1575971 16.260332 5.1601574 17.989071 3.4179688 19.189453 C 2.9979688 19.479453 2.8798125 20.049188 3.1328125 20.492188 C 3.4258125 21.004188 4.0960781 21.153359 4.5800781 20.818359 C 6.0994455 19.769009 7.1700075 18.397613 7.8808594 16.720703 A 1.0001 1.0001 0 0 0 8.0449219 17.601562 L 9.5117188 19.59375 A 1.0002375 1.0002375 0 1 0 11.123047 18.408203 L 9.65625 16.416016 A 1.0001 1.0001 0 0 0 8.7929688 15.998047 A 1.0001 1.0001 0 0 0 7.9921875 16.472656 C 8.2917972 15.713486 8.5082238 14.883111 8.6699219 14 L 10 14 A 1.0001 1.0001 0 1 0 10 12 L 8.9316406 12 C 8.9726972 11.4285 8.9941406 10.836947 8.9941406 10.222656 L 8.9941406 7 L 10 7 A 1.0001 1.0001 0 1 0 10 5 L 6.7011719 5 L 6.9472656 4.2636719 C 7.1222656 3.7406719 6.8404063 3.175 6.3164062 3 C 6.1856563 2.95625 6.0512969 2.9410469 5.921875 2.9511719 z M 14 5 A 1.0001 1.0001 0 0 0 13 6 L 13 17 A 1.0001 1.0001 0 0 0 14 18 L 15 18 L 15 20 A 1.0001 1.0001 0 0 0 16.707031 20.707031 L 19.414062 18 L 21 18 A 1.0001 1.0001 0 0 0 22 17 L 22 6 A 1.0001 1.0001 0 0 0 21 5 L 14 5 z M 15 7 L 20 7 L 20 16 L 19 16 A 1.0001 1.0001 0 0 0 18.292969 16.292969 L 17 17.585938 L 17 17 A 1.0001 1.0001 0 0 0 16 16 L 15 16 L 15 7 z"/></svg>