feat(callout): revamp of the callouts (#767)

* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts

exampleSite/content/docs/guide/deploy-site.ja.md

@@ -101,7 +101,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/deploy-site.md

@@ -102,7 +102,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/deploy-site.zh-cn.md

@@ -102,7 +102,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   在仓库设置中，将 **Pages** > **构建与部署** > **源** 设为 **GitHub Actions**：
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/organize-files.fa.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   توصیه می‌شود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آن‌ها را به چند بخش تقسیم کنید**.
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.ja.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.zh-cn.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   建议不要让侧边栏过深。如果有大量内容，可以考虑**将其拆分为多个部分**。
 {{< /callout >}}
 

exampleSite/content/docs/guide/shortcodes/callout.fa.md

@@ -14,24 +14,44 @@ prev: /docs/guide/shortcodes
 > [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
 > این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
 
-##   أمثلة
+## أمثلة
+
+{{< callout >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
 
 ### تقصير
 
-{{< callout emoji="🌐">}}
+{{< callout >}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
+{{</* callout */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 
-### معلومات
+### Info
 
 {{< callout type="info" >}}
-  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
@@ -40,27 +60,83 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### تحذير
+### Warning
 
 {{< callout type="warning" >}}
-  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="warning" */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 
-### خطأ
+### Error
 
 {{< callout type="error" >}}
- **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه. 
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="error" */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### Important
+
+{{< callout type="important" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### أيقونة مخصصة
+
+{{< callout icon="sparkles" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### الرموز التعبيرية
+
+{{< callout emoji="🌐" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 

exampleSite/content/docs/guide/shortcodes/callout.ja.md

@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
 
 ## 例
 
+{{< callout >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
 ### デフォルト
 
-{{< callout emoji="🌐">}}
+{{< callout >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
+{{</* callout */>}}
-    **コールアウト** は注目を集めることを目的とした短いテキストです。
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
 {{</* /callout */>}}
 ```
 
-### 情報
+### Info
 
 {{< callout type="info" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 警告
+### Warning
 
 {{< callout type="warning" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### エラー
+### Error
 
 {{< callout type="error" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+### カスタムアイコン
+
+{{< callout icon="sparkles" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+### 絵文字
+
+{{< callout emoji="🌐" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
 ## オプション
 
 | パラメータ   | 説明                                          |

exampleSite/content/docs/guide/shortcodes/callout.md

@@ -16,15 +16,35 @@ A built-in component to show important information to the reader.
 
 ## Examples
 
+{{< callout >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="important" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
 ### Default
 
-{{< callout emoji="🌐">}}
+{{< callout >}}
   A **callout** is a short piece of text intended to attract attention.
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
+{{</* callout */>}}
-    A **callout** is a short piece of text intended to attract attention.
+  A **callout** is a short piece of text intended to attract attention.
 {{</* /callout */>}}
 ```
 
@@ -64,10 +84,66 @@ A built-in component to show important information to the reader.
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Custom Icon
+
+{{< callout icon="sparkles" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Emoji
+
+{{< callout emoji="🌐" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
 ## Options
 
-| Parameter | Description                                                          |
+| Parameter | Description                                                                     |
-|-----------|----------------------------------------------------------------------|
+|-----------|---------------------------------------------------------------------------------|
-| `type`    | The type of callout. (default, `info`, `warning`, `error`)           |
+| `type`    | The type of callout. (default, `info`, `warning`, `error`, `important`)         |
-| `emoji`   | The emoji to show before the callout.                                |
+| `emoji`   | The emoji to show before the callout.                                           |
-| `icon`    | The emoji of the callout (related to type or can be a custom emoji). |
+| `icon`    | The icon to show before the callout. (related to type or can be a custom icon). |

exampleSite/content/docs/guide/shortcodes/callout.zh-cn.md

@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
 
 ## 示例
 
+{{< callout >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
 ### 默认
 
-{{< callout emoji="🌐">}}
+{{< callout >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
+{{</* callout */>}}
-    **标注** 是一小段旨在吸引注意力的文字。
+  **标注** 是一小段旨在吸引注意力的文字。
 {{</* /callout */>}}
 ```
 
-### 信息
+### Info
 
 {{< callout type="info" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 警告
+### Warning
 
 {{< callout type="warning" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 错误
+### Error
 
 {{< callout type="error" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+### 自定义图标
+
+{{< callout icon="sparkles" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+### 表情符号
+
+{{< callout emoji="🌐" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
 ## 选项
 
 | 范围      | 描述                         |

exampleSite/content/docs/guide/shortcodes/jupyter.fa.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
+{{< callout type="warning" >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) یک برنامه نوت‌بوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان می‌دهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
 

exampleSite/content/docs/guide/shortcodes/jupyter.ja.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
+{{< callout type="warning" >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
 

exampleSite/content/docs/guide/shortcodes/jupyter.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
+{{< callout type="warning" >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
 

exampleSite/content/docs/guide/shortcodes/jupyter.zh-cn.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
+{{< callout type="warning" >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和分享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
 

exampleSite/content/docs/guide/shortcodes/others.fa.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   برخی از این‌ها شورتکدهای داخلی Hugo هستند.
   این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.ja.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   これらの一部は Hugo 組み込みのショートコードです。
   これらのショートコードは安定性が低く、いつでも変更される可能性があります。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   Some of these are Hugo built-in shortcodes.
   These shortcodes are considered less stable and may be changed anytime.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.zh-cn.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   其中部分为Hugo内置短代码。
   这些短代码稳定性较低，可能随时变更。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.fa.md

@@ -25,7 +25,7 @@ title: مراحل
 
 ## نحوه استفاده
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
   اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.ja.md

@@ -25,7 +25,7 @@ title: ステップ
 
 ## 使い方
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   このショートコードは **Markdown コンテンツ専用** であることに注意してください。
   HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.md

@@ -25,7 +25,7 @@ This is the third step.
 
 ## Usage
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   Please note that this shortcode is intended **only for Markdown content**.
   If you put HTML content or other shortcodes as step content, it may not render as expected.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.zh-cn.md

@@ -25,7 +25,7 @@ title: 步骤
 
 ## 使用方法
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   请注意，此短代码**仅适用于Markdown内容**。
   如果在步骤内容中放入HTML或其他短代码，可能无法按预期渲染。
 {{< /callout >}}

exampleSite/hugo_stats.json

@@ -182,13 +182,12 @@
       "hx:bg-gradient-to-r",
       "hx:bg-gray-100",
       "hx:bg-green-100",
-      "hx:bg-indigo-100",
       "hx:bg-neutral-50",
-      "hx:bg-orange-50",
       "hx:bg-primary-100",
       "hx:bg-primary-400",
       "hx:bg-primary-600",
       "hx:bg-primary-700/5",
+      "hx:bg-purple-100",
       "hx:bg-red-100",
       "hx:bg-transparent",
       "hx:bg-white",
@@ -203,8 +202,7 @@
       "hx:border-gray-200",
       "hx:border-gray-500",
       "hx:border-green-200",
-      "hx:border-indigo-200",
+      "hx:border-purple-200",
-      "hx:border-orange-100",
       "hx:border-red-200",
       "hx:border-t",
       "hx:border-transparent",
@@ -250,13 +248,12 @@
       "hx:dark:bg-dark/50",
       "hx:dark:bg-gray-50/10",
       "hx:dark:bg-green-900/30",
-      "hx:dark:bg-indigo-900/30",
       "hx:dark:bg-neutral-800",
       "hx:dark:bg-neutral-900",
-      "hx:dark:bg-orange-400/20",
       "hx:dark:bg-primary-300/10",
       "hx:dark:bg-primary-400/10",
       "hx:dark:bg-primary-600",
+      "hx:dark:bg-purple-900/30",
       "hx:dark:bg-red-900/30",
       "hx:dark:bg-yellow-700/30",
       "hx:dark:block",
@@ -265,10 +262,9 @@
       "hx:dark:border-gray-100/20",
       "hx:dark:border-gray-400",
       "hx:dark:border-green-200/30",
-      "hx:dark:border-indigo-200/30",
       "hx:dark:border-neutral-700",
       "hx:dark:border-neutral-800",
-      "hx:dark:border-orange-400/30",
+      "hx:dark:border-purple-200/30",
       "hx:dark:border-red-200/30",
       "hx:dark:border-white/10",
       "hx:dark:border-yellow-200/30",
@@ -309,11 +305,10 @@
       "hx:dark:text-gray-400",
       "hx:dark:text-gray-50",
       "hx:dark:text-green-200",
-      "hx:dark:text-indigo-200",
       "hx:dark:text-neutral-200",
       "hx:dark:text-neutral-400",
-      "hx:dark:text-orange-300",
       "hx:dark:text-primary-600",
+      "hx:dark:text-purple-200",
       "hx:dark:text-red-200",
       "hx:dark:text-slate-100",
       "hx:dark:text-yellow-200",
@@ -628,11 +623,10 @@
       "hx:text-gray-800",
       "hx:text-gray-900",
       "hx:text-green-900",
-      "hx:text-indigo-900",
       "hx:text-left",
       "hx:text-lg",
-      "hx:text-orange-800",
       "hx:text-primary-800",
+      "hx:text-purple-900",
       "hx:text-red-900",
       "hx:text-slate-900",
       "hx:text-sm",

layouts/_partials/components/github-style-alert.html

@@ -2,33 +2,44 @@
 {{- $alertType := .alertType -}}
 {{- $alertTitle := .alertTitle -}}
 
-{{- $icons := dict
+{{- $styles := newScratch -}}
-  "note" "information-circle"
+{{- $styles.Set "default" (dict
-  "tip" "light-bulb"
+  "icon" "light-bulb"
-  "important" "information-circle"
+  "style" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
-  "warning" "exclamation"
+  )
-  "caution" "exclamation-circle"
+-}}
+{{- $styles.Set "note" (dict
+  "icon" "information-circle"
+  "style" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200"
+  )
+-}}
+{{- $styles.Set "tip" (dict
+  "icon" "light-bulb"
+  "style" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
+  )
+-}}
+{{- $styles.Set "important" (dict
+  "icon" "information-circle"
+  "style" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200"
+  )
+-}}
+{{- $styles.Set "warning" (dict
+  "icon" "exclamation"
+  "style" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200"
+  )
+-}}
+{{- $styles.Set "caution" (dict
+  "icon" "exclamation-circle"
+  "style" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200"
+  )
 -}}
 
-{{- $icon := index $icons $alertType -}}
+{{- $style := or ($styles.Get $alertType) ($styles.Get "default") -}}
 {{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
 
-{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" }}
+<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $style.style }}">
-
-{{- $alertClasses := dict
-  "note" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200"
-  "tip" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
-  "important" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200"
-  "warning" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200"
-  "caution" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200"
--}}
-
-{{- $class := index $alertClasses $alertType | default $defaultClass -}}
-
-
-<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:flex-col hx:rounded-lg hx:border hx:py-4 hx:px-4 hx:border-gray-200 hx:contrast-more:border-current hx:contrast-more:dark:border-current {{ $class }}">
   <p class="hx:flex hx:items-center hx:font-medium">
-    {{- with $icon -}}
+    {{- with $style.icon -}}
       {{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx:inline-block hx:align-middle hx:mr-2"`) -}}
     {{- end -}}
     {{- $title -}}

layouts/_shortcodes/callout.html

@@ -1,32 +1,57 @@
 {{- /*
 A shortcode to create a callout.
 
-@param {string} type The type of the callout (default, info, warning, error).
+@param {string} type The type of the callout (default, info, warning, error, important).
 @param {string} content The content of the callout.
-@param {string} emoji The emoji of the callout (related to type or can be a custom emoji).
+@param {string} emoji The emoji of the callout.
-@param {string} icon The icon of the callout.
+@param {string} icon The icon of the callout (related to type or can be a custom icon).
 
 @example {{< callout type="info" >}}Content{{< /callout >}}
 */ -}}
 
-{{- $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" -}}
 {{- $type := .Get "type" | default "default" -}}
-{{/* If emoji is not set, use the emoji from dict */}}
 {{- $emoji := .Get "emoji" -}}
-{{- if eq $emoji "" -}}
-  {{- $emoji = index $calloutEmojiDict $type -}}
-{{- end -}}
-{{/* Also allow using "icon" */}}
 {{- $icon := .Get "icon" -}}
+
+{{- $styles := newScratch -}}
+{{- $styles.Set "default" (dict
+  "icon" "light-bulb"
+  "style" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200"
+  )
+-}}
+{{- $styles.Set "info" (dict
+  "icon" "information-circle"
+  "style" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200"
+  )
+-}}
+{{- $styles.Set "warning" (dict
+  "icon" "exclamation"
+  "style" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200"
+  )
+-}}
+{{- $styles.Set "error" (dict
+  "icon" "ban"
+  "style" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200"
+  )
+-}}
+{{- $styles.Set "important" (dict
+  "icon" "exclamation-circle"
+  "style" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200"
+  )
+-}}
+
+{{- $style := or ($styles.Get $type) ($styles.Get "default") -}}
+
+{{- if and (not $emoji) (not $icon) -}}
+  {{- $icon = $style.icon -}}
+{{- end -}}
+
 {{- $content := .InnerDeindent | markdownify -}}
 
-{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
+{{- partial "shortcodes/callout.html" (dict
-
+  "content" $content
-{{- $styleClass := newScratch -}}
+  "emoji" $emoji
-{{- $styleClass.Set "info" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
+  "icon" $icon
-{{- $styleClass.Set "warning" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
+  "class" $style.style
-{{- $styleClass.Set "error" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
+  )
-
+-}}
-{{- $class := or ($styleClass.Get $type) $defaultClass -}}
-
-{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}