feat: add markdown alerts support (#1221)

* Markdown alerts

* refactor(alert): move alert color to variable.scss and simplify the style

* style: fix indent in render-blockquote

* feat(alert): add customizable alert icons for different alert types

* doc: add example usage of markdown alert

---------

Co-authored-by: Jimmy Cai <jimmy@cai.im>

assets/scss/partials/layout/article.scss

@@ -329,6 +329,34 @@
         }
     }
 
+    blockquote.alert {
+        .alert-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5em;
+            font-weight: bold;
+        }
+
+        .alert-body {
+            > :last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        $alert-types: note, tip, important, warning, caution;
+
+        @each $type in $alert-types {
+            &.alert-#{$type} {
+                border-color: var(--alert-#{$type}-color);
+                background-color: var(--alert-#{$type}-background);
+
+                .alert-title {
+                    color: var(--alert-#{$type}-color);
+                }
+            }
+        }
+    }
+
     hr {
         width: 100px;
         margin: 40px auto;

assets/scss/variables.scss

@@ -105,6 +105,17 @@
 
     --heading-border-size: 4px;
 
+    --alert-note-color: #4da3ff;
+    --alert-note-background: rgba(77, 163, 255, 0.08);
+    --alert-tip-color: #3fb950;
+    --alert-tip-background: rgba(63, 185, 80, 0.08);
+    --alert-important-color: #8457d9;
+    --alert-important-background: rgba(130, 80, 223, 0.08);
+    --alert-warning-color: #d29922;
+    --alert-warning-background: rgba(210, 153, 34, 0.1);
+    --alert-caution-color: #f85149;
+    --alert-caution-background: rgba(248, 81, 73, 0.1);
+
     --link-background-color: 189, 195, 199;
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;

config/_default/params.toml

@@ -51,6 +51,14 @@ SortBy             = "default"
         # Can also be set per-diagram with %%transparent%% directive
         transparentBackground = false
 
+    [article.alertIcon]
+        # Alert icons for different alert types (note, tip, important, warning, caution)
+        note      = "📝"
+        tip       = "💡"
+        important = "📌"
+        warning   = "⚠️"
+        caution   = "🚨"
+
 [widgets]
     homepage = []
     page     = []

demo/content/post/Markdown Syntax/index.md

@@ -47,6 +47,23 @@ The blockquote element represents content that is quoted from another source, op
 
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
+### Blockquote with alert
+
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
 ## Tables
 
 Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

demo/content/post/Markdown Syntax/index.zh.md

@@ -47,6 +47,23 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 [^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
 
+### 带提示的引用
+
+> [!NOTE]  
+> 突出显示用户在快速浏览时也应注意的信息。
+
+> [!TIP]
+> 可选信息，帮助用户更顺利地完成任务。
+
+> [!IMPORTANT]  
+> 用户成功所必需的关键信息。
+
+> [!WARNING]  
+> 由于潜在风险而需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 某个操作可能带来的负面后果。
+
 ## 表格 (Tables)
 
 表格虽然不是 Markdown 核心规范的一部分，但 Hugo 出箱即用地支持它们。

layouts/_markup/render-blockquote.html

@@ -0,0 +1,20 @@
+{{- $type := .AlertType -}}
+{{- $icons := site.Params.article.alertIcon -}}
+{{- $icon := index $icons $type -}}
+
+<blockquote class="{{ if $type }}alert alert-{{ $type }}{{ end }}">
+    {{- if $type -}}
+        <div class="alert-header">
+            <span class="alert-icon">
+                {{- $icon -}}
+            </span>
+            <span class="alert-title">
+                {{- title $type -}}
+            </span>
+        </div>
+    {{- end -}}
+
+    <div class="alert-body">
+        {{ .Text }}
+    </div>
+</blockquote>