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

This commit is contained in:
zzossig 2019-12-30 21:38:02 +09:00
parent 6704205fab
commit d88ae4069a
15 changed files with 165 additions and 35 deletions

View File

@ -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에 값을 넣어주시면 해당 라이브러리가 로드됩니다.

View File

@ -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.

View File

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

View File

@ -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;
}
}

View File

@ -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%),
backdrop-background-color: hsl($custom_theme_primary_color, 100%, 99%),
body-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%),

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -1,10 +1,10 @@
$solarized: (
footer-background-color: #EEE8D5,
footer-color: #424242,
link: #B58900,
link-hover: #FF6188,
title-color: #B58900,
meta-color: lighten(#B58900, 5%),
link: #b58900,
link-hover: #268bd2,
title-color: #cb4b16,
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-hover-color: darken(#B58900, 5%),
social-icon-color: lighten(#586e75, 5%),
social-icon-hover-color: darken(#586e75, 5%),
pagination-link-color: #455a64,
pagination-background-color: #FBF1D1,
pagination-disabled-color: #bdbdbd,

View File

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

View File

@ -10,7 +10,7 @@
{{ end }}
<li {{ if eq .p1 .p2 }} class="is-active" {{ end }}>
{{ if eq (len .p1.Title) 0 }}
<a href="{{ .p1.Permalink }}">{{ .p1.Site.Title }}</a>
<a href="{{ .p1.Permalink }}">{{ .p1.Site.Title }}</a>
{{ else }}
<a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a>
{{ end }}

View File

@ -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);
renderSearchResults(results);
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);
renderSearchResults(results);
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>

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -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>

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB