From 29fa3ec5227ad5e767053edd41668222fbae25bc Mon Sep 17 00:00:00 2001 From: daudix Date: Fri, 5 Jul 2024 03:00:38 +0300 Subject: [PATCH] Add GitHub-styled alerts --- content/demo/index.md | 38 +++++++++++ i18n/ar.toml | 5 ++ i18n/en.toml | 5 ++ i18n/ru.toml | 5 ++ sass/_alerts.scss | 113 ++++++++++++++++++++++++++++++++ sass/_article-list.scss | 16 ++--- sass/_comments.scss | 12 ++-- sass/_statements.scss | 4 +- sass/_variables.scss | 20 +++--- sass/style.scss | 1 + templates/shortcodes/alert.html | 34 ++++++++++ 11 files changed, 227 insertions(+), 26 deletions(-) create mode 100644 sass/_alerts.scss create mode 100644 templates/shortcodes/alert.html diff --git a/content/demo/index.md b/content/demo/index.md index f2eb5c4..fe90674 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -169,6 +169,44 @@ Alright now that the generic (slightly extended) ~~Jekyll~~ Zola demo page have Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks. +#### Alerts + +[GitHub-style](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look. + +Available alert types: + +- `note`: Useful information that users should know, even when skimming content. +- `tip`: Helpful advice for doing things better or more easily. +- `important`: Key information users need to know to achieve their goal. +- `warning`: Urgent info that needs immediate user attention to avoid problems. +- `caution`: Advises about risks or negative outcomes of certain actions. + +```jinja2 +{%/* alert(note=true) */%} +-> Alert text <- +{%/* end */%} +``` + +{% alert(note=true) %} +Useful information that users should know, even when skimming content. +{% end %} + +{% alert(tip=true) %} +Helpful advice for doing things better or more easily. +{% end %} + +{% alert(important=true) %} +Key information users need to know to achieve their goal. +{% end %} + +{% alert(warning=true) %} +Urgent info that needs immediate user attention to avoid problems. +{% end %} + +{% alert(caution=true) %} +Advises about risks or negative outcomes of certain actions. +{% end %} + #### Image By default images come with styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations. diff --git a/i18n/ar.toml b/i18n/ar.toml index 923fadd..95f1a35 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -52,3 +52,8 @@ trigger_warning = "تحذير الزناد" updated = "آخر تحديث في" view_comment = "عرض التعليق على" view_profile = "عرض الملف الشخصي على" +note = "ملاحظة" +tip = "نصيحة" +important = "مهم" +warning = "تحذير" +caution = "احذر" diff --git a/i18n/en.toml b/i18n/en.toml index 7b3234a..8474029 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -56,3 +56,8 @@ trigger_warning = "Trigger Warning" updated = "Last updated on" view_comment = "View comment at" view_profile = "View profile at" +note = "Note" +tip = "Tip" +important = "Important" +warning = "Warning" +caution = "Caution" diff --git a/i18n/ru.toml b/i18n/ru.toml index bfcda9d..13d4dd2 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -62,3 +62,8 @@ trigger_warning = "Предупреждение о Тревоге" updated = "Последний раз обновлено" view_comment = "Показать комментарий на" view_profile = "Показать профиль на" +note = "Заметьте" +tip = "Совет" +important = "Важно" +warning = "Внимание" +caution = "Осторожно" diff --git a/sass/_alerts.scss b/sass/_alerts.scss new file mode 100644 index 0000000..490ff1d --- /dev/null +++ b/sass/_alerts.scss @@ -0,0 +1,113 @@ +blockquote { + &.note { + border-left: 0.25rem solid var(--blue-fg); + + :root[dir*="rtl"] & { + border-right: 0.25rem solid var(--blue-fg); + border-left: unset; + } + + .alert-name { + color: var(--blue-fg); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--blue-fg); + } + } + + &.tip { + border-left: 0.25rem solid var(--green-fg); + + :root[dir*="rtl"] & { + border-right: 0.25rem solid var(--green-fg); + border-left: unset; + } + + .alert-name { + color: var(--green-fg); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--green-fg); + } + } + + &.important { + border-left: 0.25rem solid var(--purple-fg); + + :root[dir*="rtl"] & { + border-right: 0.25rem solid var(--purple-fg); + border-left: unset; + } + + .alert-name { + color: var(--purple-fg); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--purple-fg); + } + } + + &.warning { + border-left: 0.25rem solid var(--yellow-fg); + + :root[dir*="rtl"] & { + border-right: 0.25rem solid var(--yellow-fg); + border-left: unset; + } + + .alert-name { + color: var(--yellow-fg); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--yellow-fg); + } + } + + &.caution { + border-left: 0.25rem solid var(--red-fg); + + :root[dir*="rtl"] & { + border-right: 0.25rem solid var(--red-fg); + border-left: unset; + } + + .alert-name { + color: var(--red-fg); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--red-fg); + } + } + + .alert-name { + font-weight: bold; + margin-bottom: -0.5rem; + } + + .icon { + vertical-align: -0.125em; + margin-inline-end: 0.25rem; + width: 1rem; + height: 1rem; + } +} diff --git a/sass/_article-list.scss b/sass/_article-list.scss index af2ef20..413a23d 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -47,7 +47,7 @@ box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner); border-top-right-radius: 2.125rem; - background-color: var(--faves-bg); + background-color: var(--yellow-bg); padding: 1rem; overflow: hidden; @@ -77,7 +77,7 @@ } &:hover { - outline: 0.125rem dashed var(--faves-fg); + outline: 0.125rem dashed var(--yellow-fg); outline-offset: 0.5rem; &::before { @@ -89,7 +89,7 @@ margin-top: 0.25rem; a { - color: var(--faves-fg); + color: var(--yellow-fg); } } @@ -104,8 +104,8 @@ } .tags a:hover { - background-color: var(--faves-bg); - color: var(--faves-fg); + background-color: var(--yellow-bg); + color: var(--yellow-fg); } :root[dir*="rtl"] & { @@ -167,14 +167,14 @@ } .featured-badge { - background-color: var(--faves-bg); - color: var(--faves-fg); + background-color: var(--yellow-bg); + color: var(--yellow-fg); .icon { $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; - background-color: var(--faves-fg); + background-color: var(--yellow-fg); } } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 935ab7d..96ad686 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -178,10 +178,10 @@ } .boosts { - color: var(--boosts-fg); + color: var(--purple-fg); &:hover { - background-color: var(--boosts-bg); + background-color: var(--purple-bg); .icon { transform: rotate(180deg); @@ -192,15 +192,15 @@ $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; - background-color: var(--boosts-fg); + background-color: var(--purple-fg); } } .faves { - color: var(--faves-fg); + color: var(--yellow-fg); &:hover { - background-color: var(--faves-bg); + background-color: var(--yellow-bg); .icon { transform: rotate(72deg); @@ -211,7 +211,7 @@ $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; - background-color: var(--faves-fg); + background-color: var(--yellow-fg); } } } diff --git a/sass/_statements.scss b/sass/_statements.scss index f845749..506e45e 100644 --- a/sass/_statements.scss +++ b/sass/_statements.scss @@ -45,7 +45,7 @@ color: var(--red-fg); .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E"); + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; background-color: var(--red-fg); @@ -57,7 +57,7 @@ color: var(--yellow-fg); .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E"); + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; mask-image: $icon; background-color: var(--yellow-fg); diff --git a/sass/_variables.scss b/sass/_variables.scss index 64c1c0c..aa8d821 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -8,17 +8,17 @@ --fg-muted-4: rgba(0, 0, 0, 0.5); --fg-muted-5: rgba(0, 0, 0, 0.6); --nav-bg: rgba(242, 242, 242, 0.7); + --blue-bg: rgba(53, 132, 228, 0.1); + --blue-fg: rgb(53, 132, 228); + --green-bg: rgba(38, 162, 105, 0.1); + --green-fg: rgb(38, 162, 105); --purple-bg: rgba(145, 65, 172, 0.1); --purple-fg: rgb(145, 65, 172); --red-bg: rgba(224, 27, 36, 0.1); --red-fg: rgb(224, 27, 36); --yellow-bg: rgba(156, 110, 3, 0.1); --yellow-fg: rgb(156, 110, 3); - --boosts-bg: rgba(145, 65, 172, 0.1); - --boosts-fg: rgb(145, 65, 172); - --faves-bg: rgba(229, 165, 10, 0.1); - --faves-fg: rgb(229, 165, 10); - --star-featured: rgba(229, 165, 10, 0.15); + --star-featured: rgba(156, 110, 3, 0.15); // VARIABLES --active: 0.9; @@ -61,17 +61,17 @@ --fg-muted-4: rgba(255, 255, 255, 0.5); --fg-muted-5: rgba(255, 255, 255, 0.6); --nav-bg: rgba(25, 25, 25, 0.7); + --blue-bg: rgba(153, 193, 241, 0.1); + --blue-fg: rgb(153, 193, 241); + --green-bg: rgba(143, 240, 164, 0.1); + --green-fg: rgb(143, 240, 164); --purple-bg: rgba(220, 138, 221, 0.1); --purple-fg: rgb(220, 138, 221); --red-bg: rgba(226, 97, 81, 0.1); --red-fg: rgb(246, 97, 81); --yellow-bg: rgba(248, 228, 92, 0.1); --yellow-fg: rgb(248, 228, 92); - --boosts-bg: rgba(220, 138, 221, 0.1); - --boosts-fg: rgb(220, 138, 221); - --faves-bg: rgba(249, 240, 107, 0.1); - --faves-fg: rgb(249, 240, 107); - --star-featured: rgba(249, 240, 107, 0.05); + --star-featured: rgba(248, 228, 92, 0.05); color-scheme: dark; } diff --git a/sass/style.scss b/sass/style.scss index 1d2eec7..519ccc9 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -8,6 +8,7 @@ @use "variables"; +@use "alerts"; @use "article-list"; @use "buttons"; @use "code"; diff --git a/templates/shortcodes/alert.html b/templates/shortcodes/alert.html new file mode 100644 index 0000000..959847a --- /dev/null +++ b/templates/shortcodes/alert.html @@ -0,0 +1,34 @@ +{% import "macros/translate.html" as macros_translate %} + +{%- set language_strings = load_data(path="i18n/" ~ lang ~ '.toml', required=false) -%} +{%- if not language_strings -%} + {%- set language_strings = load_data(path="themes/tabi/i18n/" ~ lang ~ ".toml", required=false) -%} +{%- endif -%} + +
+

+ + {%- if note -%} + {{ macros_translate::translate(key="note", default="Note", language_strings=language_strings) }} + {%- endif -%} + {%- if tip -%} + {{ macros_translate::translate(key="tip", default="Tip", language_strings=language_strings) }} + {%- endif -%} + {%- if important -%} + {{ macros_translate::translate(key="important", default="Important", language_strings=language_strings) }} + {%- endif -%} + {%- if warning -%} + {{ macros_translate::translate(key="warning", default="Warning", language_strings=language_strings) }} + {%- endif -%} + {%- if caution -%} + {{ macros_translate::translate(key="caution", default="Caution", language_strings=language_strings) }} + {%- endif -%} +

+ {{ body | markdown | safe }} +