Add GitHub-styled alerts

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.

i18n/ar.toml

@@ -52,3 +52,8 @@ trigger_warning = "تحذير الزناد"
 updated = "آخر تحديث في"
 view_comment = "عرض التعليق على"
 view_profile = "عرض الملف الشخصي على"
+note = "ملاحظة"
+tip = "نصيحة"
+important = "مهم"
+warning = "تحذير"
+caution = "احذر"

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"

i18n/ru.toml

@@ -62,3 +62,8 @@ trigger_warning = "Предупреждение о Тревоге"
 updated = "Последний раз обновлено"
 view_comment = "Показать комментарий на"
 view_profile = "Показать профиль на"
+note = "Заметьте"
+tip = "Совет"
+important = "Важно"
+warning = "Внимание"
+caution = "Осторожно"

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

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);
+				background-color: var(--yellow-bg);
-				color: var(--faves-fg);
+				color: var(--yellow-fg);
 			}
 
 			:root[dir*="rtl"] & {
@@ -167,14 +167,14 @@
 		}
 
 		.featured-badge {
-			background-color: var(--faves-bg);
+			background-color: var(--yellow-bg);
-			color: var(--faves-fg);
+			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);
 			}
 		}
 	}

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

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);

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);
+	--star-featured: rgba(156, 110, 3, 0.15);
-	--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);
 
 	// 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);
+		--star-featured: rgba(248, 228, 92, 0.05);
-		--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);
 
 		color-scheme: dark;
 	}

sass/style.scss

@@ -8,6 +8,7 @@
 
 @use "variables";
 
+@use "alerts";
 @use "article-list";
 @use "buttons";
 @use "code";

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 -%}
+
+<blockquote class="
+	{% if note %}note{% endif %}
+	{% if tip %}tip{% endif %}
+	{% if important %}important{% endif %}
+	{% if warning %}warning{% endif %}
+	{% if caution %}caution{% endif %}
+">
+	<p class="alert-name">
+		<i class="icon"></i>
+		{%- 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 -%}
+	</p>
+	{{ body | markdown | safe }}
+</blockquote>