diff --git a/_config_theme.yml b/_config_theme.yml index 9c79ffc4..8f390fda 100644 --- a/_config_theme.yml +++ b/_config_theme.yml @@ -72,6 +72,8 @@ site-css: site-js: - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.812.190302/dist/crowdin.js" - "/assets/js/crowdin-init.js" + - href: "https://cdn.jsdelivr.net/npm/lucide@1.41.0/dist/umd/lucide.min.js" + - "/assets/js/lucide-init.js" - "/assets/js/tabs.js" theme-switcher: true theme-switcher-style: 'button' diff --git a/_data/licenses.yml b/_data/licenses.yml index d77a4667..1a7107df 100644 --- a/_data/licenses.yml +++ b/_data/licenses.yml @@ -41,6 +41,12 @@ jekyll: name: Jekyll url: https://jekyllrb.com/ license: MIT +lucide: + name: Lucide + # renovate: datasource=npm depName=lucide + version: '1.41.0' + url: https://lucide.dev/ + license: ISC marked: name: Marked # renovate: datasource=cdnjs depName=marked packageName=marked/lib/marked.umd.min.js versioning=semver diff --git a/_includes/admonition.html b/_includes/admonition.html index 1eb2738f..13d1c03c 100644 --- a/_includes/admonition.html +++ b/_includes/admonition.html @@ -4,30 +4,34 @@ {% if include.type.size > 0 and include.body.size > 0 %} {% assign types = " - attention:Attention, - caution:Caution, - danger:Danger, - error:Error, - hint:Hint, - important:Important, - note:Note, - seealso:See also, - tip:Tip, - todo: TODO, - warning:Warning" | split: "," %} - {% assign title = include.title | default: "" %} - {% if title == "" %} - {% for type in types %} - {% assign typeKeyVal = type | split: ":" %} - {% assign typeKey = typeKeyVal[0] | strip %} - {% assign typeValue = typeKeyVal[1] | strip %} - {% if typeKey == include.type %} - {% assign title = typeValue %} + attention:Attention:triangle-alert, + caution:Caution:shield-alert, + danger:Danger:octagon-alert, + error:Error:circle-x, + hint:Hint:circle-question-mark, + important:Important:flame, + note:Note:pencil, + seealso:See also:book-open, + tip:Tip:lightbulb, + todo:TODO:list-checks, + warning:Warning:triangle-alert" | split: "," %} + {% assign title = include.title | default: "" %} + {% assign icon = "" %} + {% for type in types %} + {% assign typeKeyVal = type | split: ":" %} + {% assign typeKey = typeKeyVal[0] | strip %} + {% if typeKey == include.type %} + {% assign icon = typeKeyVal[2] | strip %} + {% if title == "" %} + {% assign title = typeKeyVal[1] | strip %} {% endif %} - {% endfor %} - {% endif %} + {% endif %} + {% endfor %}
-

{{ title }}

+

+ {% if icon != "" %}{% endif %} + {{ title }} +

{{ include.body | markdownify }}

diff --git a/_sass/admonition.scss b/_sass/admonition.scss index f0b59d64..8460e00d 100644 --- a/_sass/admonition.scss +++ b/_sass/admonition.scss @@ -33,19 +33,18 @@ $admonitions-dark: ; $admonitions: - //class (type), icon filename, icon/border color - // TODO: Can we use font-awesome directly without keeping the svg files in our repo? - ('attention', 'exclamation-triangle-solid.svg', '#ff5252') - ('caution', 'bolt-solid.svg', '#ff9100') - ('danger', 'bolt-solid.svg', '#ff5252') - ('error', 'times-circle-solid.svg', '#ff5252') - ('hint', 'question-circle-solid.svg', '#00c953') - ('important', 'fire-solid.svg', '#ff9100') - ('note', 'pen-solid.svg', '#00b0ff') - ('seealso', 'info-circle-solid.svg', '#00b0ff') - ('tip', 'info-circle-solid.svg', '#00c953') - ('todo', 'pen-solid.svg', '#9e9e9e') - ('warning', 'exclamation-triangle-solid.svg', '#ff9100') + // class (type), icon/border color + ('attention', '#ff5252') + ('caution', '#ff9100') + ('danger', '#ff5252') + ('error', '#ff5252') + ('hint', '#00c953') + ('important', '#ff9100') + ('note', '#00b0ff') + ('seealso', '#00b0ff') + ('tip', '#00c953') + ('todo', '#9e9e9e') + ('warning', '#ff9100') ; .admonition { margin: 1.5625em 0; @@ -71,28 +70,23 @@ $admonitions: color: #212529; } -.admonition-title::before { +.admonition .admonition-title svg { + color: $primary-color; + display: inline-block; margin-right: .5rem; width: 1.2rem; height: 1.2rem; - display: inline-block; - content: ''; - -webkit-mask-size: cover; - mask-size: cover; - background-color: $primary-color; vertical-align: text-bottom; } -@each $name, $icon, $icon-color in $admonitions { +@each $name, $icon-color in $admonitions { @if $icon-color { .admonition.#{$name} { border-left-color: #{$icon-color}; } } - .admonition.#{$name} .admonition-title::before { - -webkit-mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%; - mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%; + .admonition.#{$name} .admonition-title svg { @if $icon-color { - background-color: #{$icon-color}; + color: #{$icon-color}; } } } diff --git a/assets/img/icons/bolt-solid.svg b/assets/img/icons/bolt-solid.svg deleted file mode 100644 index 6c678998..00000000 --- a/assets/img/icons/bolt-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/exclamation-triangle-solid.svg b/assets/img/icons/exclamation-triangle-solid.svg deleted file mode 100644 index b670ed90..00000000 --- a/assets/img/icons/exclamation-triangle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/fire-solid.svg b/assets/img/icons/fire-solid.svg deleted file mode 100644 index 0f44e02f..00000000 --- a/assets/img/icons/fire-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/info-circle-solid.svg b/assets/img/icons/info-circle-solid.svg deleted file mode 100644 index 82942b5c..00000000 --- a/assets/img/icons/info-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/pen-solid.svg b/assets/img/icons/pen-solid.svg deleted file mode 100644 index 255e8ba6..00000000 --- a/assets/img/icons/pen-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/question-circle-solid.svg b/assets/img/icons/question-circle-solid.svg deleted file mode 100644 index 92455702..00000000 --- a/assets/img/icons/question-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/times-circle-solid.svg b/assets/img/icons/times-circle-solid.svg deleted file mode 100644 index f4fb9ffa..00000000 --- a/assets/img/icons/times-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/js/lucide-init.js b/assets/js/lucide-init.js new file mode 100644 index 00000000..e3540df2 --- /dev/null +++ b/assets/js/lucide-init.js @@ -0,0 +1,12 @@ +/** + * Replace Lucide icon placeholders with inline SVGs. + */ +(function() { + 'use strict'; + + if (!globalThis.lucide) { + return; + } + + globalThis.lucide.createIcons({ icons: globalThis.lucide.icons }); +})();