Merge pull request #2643 from RxChi1d/feature/callout-tailwind

✨ Feat: support GitHub Alerts (admonitions)

README.id.md

@@ -41,6 +41,7 @@ Blowfish dirancang sebagai tema yang kuat dan ringan untuk [Hugo](https://gohugo
 - Dukungan untuk konten multibahasa termasuk bahasa RTL  
 - Kemampuan untuk menautkan ke artikel di situs web pihak ketiga  
 - Dukungan untuk beberapa shortcode seperti Galeri, Timeline, Kartu GitHub, dan Carousel
+- Sintaks GitHub Alerts, 15 jenis, dukungan lipat
 - Integrasi BuyMeACoffee  
 - Pencarian situs berbasis klien dengan Fuse.js  
 - Diagram dan visualisasi menggunakan Mermaid  

README.ja.md

@@ -45,6 +45,7 @@ Blowfishは[Hugo](https://gohugo.io)のために設計された強力で軽量
 - RTL 言語を含む多言語コンテンツのサポート
 - サードパーティー ウェブサイトの投稿へのリンク
 - ギャラリー、タイムライン、GitHub カード、カルーセルなど、複数のショートコードに対応
+- GitHub Alerts 構文、15 種類、折りたたみ対応
 - Buy Me a Coffee 連携
 - Fuse.js を利用したクライアントサイドのサイト内検索
 - Mermaid を使用したダイアグラムや視覚化

README.md

@@ -45,6 +45,7 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Multilingual content support including support for RTL languages
 - Ability to link to posts on third-party websites
 - Support for several shortcodes like Gallery, Timeline, GitHub cards, and Carousels
+- GitHub Alerts syntax, 15 types, collapsible support
 - Buymeacoffee integration
 - Client-side site search powered by Fuse.js
 - Diagrams and visualisations using Mermaid

README.zh-cn.md

@@ -43,6 +43,7 @@ Blowfish 是一个轻量有力的 Hugo 主题。它使用 Tailwind CSS 构建，
 - 支持多语言内容，包括 RTL 语言
 - 可链接到第三方网站上的帖子
 - 支持多种简码，如图库、时间轴、GitHub 卡片和图片灯箱
+- 支持 GitHub Alerts 语法、15 种类型和可折叠功能
 - 支持 Buymeacoffee
 - 拥有由 Fuse.js 支持的客户端一侧网站搜索功能
 - 植入了基于 Mermaid 的图表功能

assets/css/compiled/main.css

@@ -9,6 +9,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
+    --container-2xs: 18rem;
     --container-xs: 20rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
@@ -37,6 +38,7 @@
     --font-weight-extrabold: 800;
     --tracking-normal: 0em;
     --leading-snug: 1.375;
+    --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -409,6 +411,9 @@
   .ms-6 {
     margin-inline-start: calc(var(--spacing) * 6);
   }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
   .-me-48 {
     margin-inline-end: calc(var(--spacing) * -48);
   }
@@ -1317,6 +1322,9 @@
   .scale-\[1\.02\] {
     scale: 1.02;
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -1375,6 +1383,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1555,6 +1566,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
   .border-dotted {
     --tw-border-style: dotted;
     border-style: dotted;
@@ -1965,6 +1980,10 @@
     --tw-leading: 1.6;
     line-height: 1.6;
   }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2012,6 +2031,9 @@
   .\!text-neutral {
     color: rgba(var(--color-neutral), 1) !important;
   }
+  .text-inherit {
+    color: inherit;
+  }
   .text-neutral-50 {
     color: rgba(var(--color-neutral-50), 1);
   }
@@ -2151,6 +2173,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2289,6 +2315,11 @@
   .scrollbar-track-neutral-200 {
     --scrollbar-track: oklch(92.2% 0 0);
   }
+  .group-open\:rotate-0 {
+    &:is(:where(.group):is([open], :popover-open, :open) *) {
+      rotate: 0deg;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2846,6 +2877,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:ml-auto {
+    @media (width >= 1024px) {
+      margin-left: auto;
+    }
+  }
   .lg\:block {
     @media (width >= 1024px) {
       display: block;
@@ -2881,6 +2917,11 @@
       width: auto;
     }
   }
+  .lg\:max-w-2xs {
+    @media (width >= 1024px) {
+      max-width: var(--container-2xs);
+    }
+  }
   .lg\:max-w-7xl {
     @media (width >= 1024px) {
       max-width: var(--container-7xl);
@@ -3981,6 +4022,171 @@ body.zen-mode-enable {
 .dark .ios-toggle::after {
   background: #f5f5f5;
 }
+@layer components {
+  :root {
+    --adm-note-border: oklch(68.5% 0.169 237.323);
+    --adm-note-bg: oklch(97.7% 0.013 236.62);
+    --adm-note-text: oklch(39.1% 0.09 240.876);
+    --adm-tip-border: oklch(69.6% 0.17 162.48);
+    --adm-tip-bg: oklch(97.9% 0.021 166.113);
+    --adm-tip-text: oklch(37.8% 0.077 168.94);
+    --adm-important-border: oklch(62.7% 0.265 303.9);
+    --adm-important-bg: oklch(97.7% 0.014 308.299);
+    --adm-important-text: oklch(38.1% 0.176 304.987);
+    --adm-warning-border: oklch(70.5% 0.213 47.604);
+    --adm-warning-bg: oklch(98% 0.016 73.684);
+    --adm-warning-text: oklch(40.8% 0.123 38.172);
+    --adm-caution-border: oklch(63.7% 0.237 25.331);
+    --adm-caution-bg: oklch(97.1% 0.013 17.38);
+    --adm-caution-text: oklch(39.6% 0.141 25.723);
+    --adm-abstract-border: oklch(71.5% 0.143 215.221);
+    --adm-abstract-bg: oklch(98.4% 0.019 200.873);
+    --adm-abstract-text: oklch(39.8% 0.07 227.392);
+    --adm-bug-border: oklch(64.5% 0.246 16.439);
+    --adm-bug-bg: oklch(96.9% 0.015 12.422);
+    --adm-bug-text: oklch(41% 0.159 10.272);
+    --adm-danger-border: oklch(63.7% 0.237 25.331);
+    --adm-danger-bg: oklch(97.1% 0.013 17.38);
+    --adm-danger-text: oklch(39.6% 0.141 25.723);
+    --adm-example-border: oklch(55.8% 0.288 302.321);
+    --adm-example-bg: oklch(97.7% 0.014 308.299);
+    --adm-example-text: oklch(38.1% 0.176 304.987);
+    --adm-failure-border: oklch(65.6% 0.241 354.308);
+    --adm-failure-bg: oklch(97.1% 0.014 343.198);
+    --adm-failure-text: oklch(40.8% 0.153 2.432);
+    --adm-info-border: oklch(62.3% 0.214 259.815);
+    --adm-info-bg: oklch(97% 0.014 254.604);
+    --adm-info-text: oklch(37.9% 0.146 265.522);
+    --adm-question-border: oklch(76.9% 0.188 70.08);
+    --adm-question-bg: oklch(98.7% 0.022 95.277);
+    --adm-question-text: oklch(41.4% 0.112 45.904);
+    --adm-quote-border: oklch(55.1% 0.027 264.364);
+    --adm-quote-bg: oklch(98.5% 0.002 247.839);
+    --adm-quote-text: oklch(27.8% 0.033 256.848);
+    --adm-success-border: oklch(69.6% 0.17 162.48);
+    --adm-success-bg: oklch(97.9% 0.021 166.113);
+    --adm-success-text: oklch(37.8% 0.077 168.94);
+    --adm-todo-border: oklch(68.5% 0.169 237.323);
+    --adm-todo-bg: oklch(97.7% 0.013 236.62);
+    --adm-todo-text: oklch(44.3% 0.11 240.79);
+  }
+  html.dark {
+    --adm-note-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.1% 0.09 240.876) 40%, transparent), black 15%);
+    --adm-note-text: oklch(95.1% 0.026 236.824);
+    --adm-tip-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
+    --adm-tip-text: oklch(95% 0.052 163.051);
+    --adm-important-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
+    --adm-important-text: oklch(94.6% 0.033 307.174);
+    --adm-warning-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.123 38.172) 40%, transparent), black 15%);
+    --adm-warning-text: oklch(95.4% 0.038 75.164);
+    --adm-caution-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
+    --adm-caution-text: oklch(93.6% 0.032 17.717);
+    --adm-abstract-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.8% 0.07 227.392) 40%, transparent), black 15%);
+    --adm-abstract-text: oklch(95.6% 0.045 203.388);
+    --adm-bug-bg: color-mix(in srgb, color-mix(in oklab, oklch(41% 0.159 10.272) 40%, transparent), black 15%);
+    --adm-bug-text: oklch(94.1% 0.03 12.58);
+    --adm-danger-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
+    --adm-danger-text: oklch(93.6% 0.032 17.717);
+    --adm-example-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
+    --adm-example-text: oklch(94.6% 0.033 307.174);
+    --adm-failure-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.153 2.432) 40%, transparent), black 15%);
+    --adm-failure-text: oklch(94.8% 0.028 342.258);
+    --adm-info-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.9% 0.146 265.522) 40%, transparent), black 15%);
+    --adm-info-text: oklch(93.2% 0.032 255.585);
+    --adm-question-bg: color-mix(in srgb, color-mix(in oklab, oklch(41.4% 0.112 45.904) 40%, transparent), black 15%);
+    --adm-question-text: oklch(96.2% 0.059 95.617);
+    --adm-quote-bg: color-mix(in srgb, color-mix(in oklab, oklch(21% 0.034 264.665) 40%, transparent), black 15%);
+    --adm-quote-text: oklch(96.7% 0.003 264.542);
+    --adm-success-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
+    --adm-success-text: oklch(95% 0.052 163.051);
+    --adm-todo-bg: color-mix(in srgb, color-mix(in oklab, oklch(44.3% 0.11 240.79) 40%, transparent), black 15%);
+    --adm-todo-text: oklch(95.1% 0.026 236.824);
+  }
+  .admonition-content > :first-child {
+    margin-top: 0 !important;
+  }
+  .admonition-content > :last-child {
+    margin-bottom: 0 !important;
+  }
+  .admonition-content pre {
+    margin-block: 0 !important;
+  }
+  .admonition[data-type="note"] {
+    border-color: var(--adm-note-border);
+    background-color: var(--adm-note-bg);
+    color: var(--adm-note-text);
+  }
+  .admonition[data-type="tip"] {
+    border-color: var(--adm-tip-border);
+    background-color: var(--adm-tip-bg);
+    color: var(--adm-tip-text);
+  }
+  .admonition[data-type="important"] {
+    border-color: var(--adm-important-border);
+    background-color: var(--adm-important-bg);
+    color: var(--adm-important-text);
+  }
+  .admonition[data-type="warning"] {
+    border-color: var(--adm-warning-border);
+    background-color: var(--adm-warning-bg);
+    color: var(--adm-warning-text);
+  }
+  .admonition[data-type="caution"] {
+    border-color: var(--adm-caution-border);
+    background-color: var(--adm-caution-bg);
+    color: var(--adm-caution-text);
+  }
+  .admonition[data-type="abstract"] {
+    border-color: var(--adm-abstract-border);
+    background-color: var(--adm-abstract-bg);
+    color: var(--adm-abstract-text);
+  }
+  .admonition[data-type="bug"] {
+    border-color: var(--adm-bug-border);
+    background-color: var(--adm-bug-bg);
+    color: var(--adm-bug-text);
+  }
+  .admonition[data-type="danger"] {
+    border-color: var(--adm-danger-border);
+    background-color: var(--adm-danger-bg);
+    color: var(--adm-danger-text);
+  }
+  .admonition[data-type="example"] {
+    border-color: var(--adm-example-border);
+    background-color: var(--adm-example-bg);
+    color: var(--adm-example-text);
+  }
+  .admonition[data-type="failure"] {
+    border-color: var(--adm-failure-border);
+    background-color: var(--adm-failure-bg);
+    color: var(--adm-failure-text);
+  }
+  .admonition[data-type="info"] {
+    border-color: var(--adm-info-border);
+    background-color: var(--adm-info-bg);
+    color: var(--adm-info-text);
+  }
+  .admonition[data-type="question"] {
+    border-color: var(--adm-question-border);
+    background-color: var(--adm-question-bg);
+    color: var(--adm-question-text);
+  }
+  .admonition[data-type="quote"] {
+    border-color: var(--adm-quote-border);
+    background-color: var(--adm-quote-bg);
+    color: var(--adm-quote-text);
+  }
+  .admonition[data-type="success"] {
+    border-color: var(--adm-success-border);
+    background-color: var(--adm-success-bg);
+    color: var(--adm-success-text);
+  }
+  .admonition[data-type="todo"] {
+    border-color: var(--adm-todo-border);
+    background-color: var(--adm-todo-bg);
+    color: var(--adm-todo-text);
+  }
+}
 html.dark {
   color-scheme: dark;
 }

assets/css/components/admonition.css

@@ -0,0 +1,220 @@
+/*
+ * Derived from KKKZOZ/hugo-admonitions (https://github.com/KKKZOZ/hugo-admonitions/)
+ * Copyright (c) 2024 KKKZOZ, Licensed under MIT License
+ */
+:root {
+  /* GitHub Core Types (5) */
+  --adm-note-border: theme("colors.sky.500");
+  --adm-note-bg: theme("colors.sky.50");
+  --adm-note-text: theme("colors.sky.900");
+
+  --adm-tip-border: theme("colors.emerald.500");
+  --adm-tip-bg: theme("colors.emerald.50");
+  --adm-tip-text: theme("colors.emerald.900");
+
+  --adm-important-border: theme("colors.purple.500");
+  --adm-important-bg: theme("colors.purple.50");
+  --adm-important-text: theme("colors.purple.900");
+
+  --adm-warning-border: theme("colors.orange.500");
+  --adm-warning-bg: theme("colors.orange.50");
+  --adm-warning-text: theme("colors.orange.900");
+
+  --adm-caution-border: theme("colors.red.500");
+  --adm-caution-bg: theme("colors.red.50");
+  --adm-caution-text: theme("colors.red.900");
+
+  /* Extended Types (10) */
+  --adm-abstract-border: theme("colors.cyan.500");
+  --adm-abstract-bg: theme("colors.cyan.50");
+  --adm-abstract-text: theme("colors.cyan.900");
+
+  --adm-bug-border: theme("colors.rose.500");
+  --adm-bug-bg: theme("colors.rose.50");
+  --adm-bug-text: theme("colors.rose.900");
+
+  --adm-danger-border: theme("colors.red.500");
+  --adm-danger-bg: theme("colors.red.50");
+  --adm-danger-text: theme("colors.red.900");
+
+  --adm-example-border: theme("colors.purple.600");
+  --adm-example-bg: theme("colors.purple.50");
+  --adm-example-text: theme("colors.purple.900");
+
+  --adm-failure-border: theme("colors.pink.500");
+  --adm-failure-bg: theme("colors.pink.50");
+  --adm-failure-text: theme("colors.pink.900");
+
+  --adm-info-border: theme("colors.blue.500");
+  --adm-info-bg: theme("colors.blue.50");
+  --adm-info-text: theme("colors.blue.900");
+
+  --adm-question-border: theme("colors.amber.500");
+  --adm-question-bg: theme("colors.amber.50");
+  --adm-question-text: theme("colors.amber.900");
+
+  --adm-quote-border: theme("colors.gray.500");
+  --adm-quote-bg: theme("colors.gray.50");
+  --adm-quote-text: theme("colors.gray.800");
+
+  --adm-success-border: theme("colors.emerald.500");
+  --adm-success-bg: theme("colors.emerald.50");
+  --adm-success-text: theme("colors.emerald.900");
+
+  --adm-todo-border: theme("colors.sky.500");
+  --adm-todo-bg: theme("colors.sky.50");
+  --adm-todo-text: theme("colors.sky.800");
+}
+
+html.dark {
+  /* GitHub Core Types (5) */
+  --adm-note-bg: color-mix(in srgb, theme("colors.sky.900 / 0.4"), black 15%);
+  --adm-note-text: theme("colors.sky.100");
+
+  --adm-tip-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%);
+  --adm-tip-text: theme("colors.emerald.100");
+
+  --adm-important-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%);
+  --adm-important-text: theme("colors.purple.100");
+
+  --adm-warning-bg: color-mix(in srgb, theme("colors.orange.900 / 0.4"), black 15%);
+  --adm-warning-text: theme("colors.orange.100");
+
+  --adm-caution-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%);
+  --adm-caution-text: theme("colors.red.100");
+
+  /* Extended Types (10) */
+  --adm-abstract-bg: color-mix(in srgb, theme("colors.cyan.900 / 0.4"), black 15%);
+  --adm-abstract-text: theme("colors.cyan.100");
+
+  --adm-bug-bg: color-mix(in srgb, theme("colors.rose.900 / 0.4"), black 15%);
+  --adm-bug-text: theme("colors.rose.100");
+
+  --adm-danger-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%);
+  --adm-danger-text: theme("colors.red.100");
+
+  --adm-example-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%);
+  --adm-example-text: theme("colors.purple.100");
+
+  --adm-failure-bg: color-mix(in srgb, theme("colors.pink.900 / 0.4"), black 15%);
+  --adm-failure-text: theme("colors.pink.100");
+
+  --adm-info-bg: color-mix(in srgb, theme("colors.blue.900 / 0.4"), black 15%);
+  --adm-info-text: theme("colors.blue.100");
+
+  --adm-question-bg: color-mix(in srgb, theme("colors.amber.900 / 0.4"), black 15%);
+  --adm-question-text: theme("colors.amber.100");
+
+  --adm-quote-bg: color-mix(in srgb, theme("colors.gray.900 / 0.4"), black 15%);
+  --adm-quote-text: theme("colors.gray.100");
+
+  --adm-success-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%);
+  --adm-success-text: theme("colors.emerald.100");
+
+  --adm-todo-bg: color-mix(in srgb, theme("colors.sky.800 / 0.4"), black 15%);
+  --adm-todo-text: theme("colors.sky.100");
+}
+
+/* Base Styles */
+.admonition-content > :first-child {
+  margin-top: 0 !important;
+}
+
+.admonition-content > :last-child {
+  margin-bottom: 0 !important;
+}
+
+.admonition-content pre {
+  margin-block: 0 !important;
+}
+
+/* Type-Specific Palettes Using CSS Variables */
+.admonition[data-type="note"] {
+  border-color: var(--adm-note-border);
+  background-color: var(--adm-note-bg);
+  color: var(--adm-note-text);
+}
+
+.admonition[data-type="tip"] {
+  border-color: var(--adm-tip-border);
+  background-color: var(--adm-tip-bg);
+  color: var(--adm-tip-text);
+}
+
+.admonition[data-type="important"] {
+  border-color: var(--adm-important-border);
+  background-color: var(--adm-important-bg);
+  color: var(--adm-important-text);
+}
+
+.admonition[data-type="warning"] {
+  border-color: var(--adm-warning-border);
+  background-color: var(--adm-warning-bg);
+  color: var(--adm-warning-text);
+}
+
+.admonition[data-type="caution"] {
+  border-color: var(--adm-caution-border);
+  background-color: var(--adm-caution-bg);
+  color: var(--adm-caution-text);
+}
+
+.admonition[data-type="abstract"] {
+  border-color: var(--adm-abstract-border);
+  background-color: var(--adm-abstract-bg);
+  color: var(--adm-abstract-text);
+}
+
+.admonition[data-type="bug"] {
+  border-color: var(--adm-bug-border);
+  background-color: var(--adm-bug-bg);
+  color: var(--adm-bug-text);
+}
+
+.admonition[data-type="danger"] {
+  border-color: var(--adm-danger-border);
+  background-color: var(--adm-danger-bg);
+  color: var(--adm-danger-text);
+}
+
+.admonition[data-type="example"] {
+  border-color: var(--adm-example-border);
+  background-color: var(--adm-example-bg);
+  color: var(--adm-example-text);
+}
+
+.admonition[data-type="failure"] {
+  border-color: var(--adm-failure-border);
+  background-color: var(--adm-failure-bg);
+  color: var(--adm-failure-text);
+}
+
+.admonition[data-type="info"] {
+  border-color: var(--adm-info-border);
+  background-color: var(--adm-info-bg);
+  color: var(--adm-info-text);
+}
+
+.admonition[data-type="question"] {
+  border-color: var(--adm-question-border);
+  background-color: var(--adm-question-bg);
+  color: var(--adm-question-text);
+}
+
+.admonition[data-type="quote"] {
+  border-color: var(--adm-quote-border);
+  background-color: var(--adm-quote-bg);
+  color: var(--adm-quote-text);
+}
+
+.admonition[data-type="success"] {
+  border-color: var(--adm-success-border);
+  background-color: var(--adm-success-bg);
+  color: var(--adm-success-text);
+}
+
+.admonition[data-type="todo"] {
+  border-color: var(--adm-todo-border);
+  background-color: var(--adm-todo-bg);
+  color: var(--adm-todo-text);
+}

assets/css/main.css

@@ -7,6 +7,7 @@
 @import "./components/tabs.css" layer(utilities);
 @import "./components/zen-mode.css";
 @import "./components/a11y.css";
+@import "./components/admonition.css" layer(components);
 
 html.dark {
   color-scheme: dark;

assets/icons/circle-question.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
+</svg>

assets/icons/file-lines.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+  <path fill="currentColor" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
+</svg>

assets/icons/list-check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
+</svg>

assets/icons/list-ol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="currentColor" d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-13.3 0-24-10.7-24-24s10.7-24 24-24H64V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H48c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
+</svg>

assets/icons/quote-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <path fill="currentColor" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z"/>
+</svg>

assets/js/print-support.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+  var closedDetails = [];
+  window.addEventListener('beforeprint', function() {
+    var allDetails = document.querySelectorAll('details:not([open])');
+    for (var i = 0; i < allDetails.length; i++) {
+      allDetails[i].open = true;
+      closedDetails.push(allDetails[i]);
+    }
+  });
+  window.addEventListener('afterprint', function() {
+    for (var i = 0; i < closedDetails.length; i++) {
+      closedDetails[i].open = false;
+    }
+    closedDetails = [];
+  });
+})();

exampleSite/content/docs/shortcodes/index.it.md

@@ -64,6 +64,36 @@ This is an error!
 
 <br/><br/><br/>
 
+## Admonition
+
+Admonitions allow you to insert eye-catching callout boxes in your content.
+
+Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:
+
+```md
+> [!NOTE]
+> A Note type admonition.
+
+> [!TIP]+ Custom Title
+> A collapsible admonition with custom title.
+```
+
+> [!NOTE]
+> A Note type admonition.
+
+> [!TIP]+ Custom Title
+> A collapsible admonition with custom title.
+
+The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.
+
+> [!INFO]- Supported types
+> Valid admonition types include [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) and [Obsidian callout types](https://help.obsidian.md/callouts). The types are case-insensitive.
+>
+> **GitHub types:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`  
+> **Obsidian types:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+
+<br/><br/><br/>
+
 ## Article
 
 `Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.*

exampleSite/content/docs/shortcodes/index.ja.md

@@ -64,6 +64,36 @@ Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘
 
 <br/><br/><br/>
 
+## Admonition
+
+Admonitions は、文書内で読者の注意を引くための強調表示を挿入するための機能です。
+
+Admonitions は alert ショートコードと同様の目的を持ちますが、Hugo の render hooks を用いて実装されています。両者の主な違いは構文にあります。admonitions は Markdown 構文を使用するため、異なるプラットフォーム間でも扱いやすく、一方、ショートコードは Hugo 固有の仕組みです。構文は GitHub の alerts に近い形式です。
+
+```md
+> [!NOTE]
+> NOTE タイプの表示例。
+
+> [!TIP]+ カスタムタイトル
+> タイトルを指定した折りたたみ可能な表示例。
+```
+
+> [!NOTE]
+> NOTE タイプの表示例。
+
+> [!TIP]+ カスタムタイトル
+> タイトルを指定した折りたたみ可能な表示例。
+
+記号（`+` または `-`）は任意で、表示を折りたたむかどうかを制御します。なお、この記号は Obsidian のみ対応しています。
+
+> [!INFO]- 対応しているタイプ
+> 使用可能なタイプには、[GitHub alert タイプ](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) および [Obsidian callout タイプ](https://help.obsidian.md/callouts) が含まれます。タイプ名は大文字・小文字を区別しません。
+>
+> **GitHub タイプ：** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`  
+> **Obsidian タイプ：** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+
+<br/><br/><br/>
+
 ## 記事
 
 `Article` は、1つの記事を Markdown ファイルに埋め込みます。埋め込むファイルへの `link` は、埋め込むファイルの `.RelPermalink` である必要があります。ショートコードは、親を参照している場合は何も表示しないことに注意してください。*注: Blowfish (/blowfish/ など) のようなサブフォルダでウェブサイトを実行している場合は、そのパスをリンクに含めてください。*

exampleSite/content/docs/shortcodes/index.md

@@ -64,9 +64,39 @@ This is an error!
 
 <br/><br/><br/>
 
+## Admonition
+
+Admonitions allow you to insert eye-catching callout boxes in your content.
+
+Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:
+
+```md
+> [!NOTE]
+> A Note type admonition.
+
+> [!TIP]+ Custom Title
+> A collapsible admonition with custom title.
+```
+
+> [!NOTE]
+> A Note type admonition.
+
+> [!TIP]+ Custom Title
+> A collapsible admonition with custom title.
+
+The alert sign (`+` or `-`) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.
+
+> [!INFO]- Supported types
+> Valid admonition types include [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) and [Obsidian callout types](https://help.obsidian.md/callouts). The types are case-insensitive.
+>
+> **GitHub types:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`  
+> **Obsidian types:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+
+<br/><br/><br/>
+
 ## Article
 
-`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. *Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link.*
+`Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. _Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link._
 
 <!-- prettier-ignore-start -->
 | Parameter | Description                                              |
@@ -202,16 +232,15 @@ This shortcode is for importing code from external sources easily without copyin
 | `startLine` | **Optional** The line number to start the import from.    |
 | `endLine` | **Optional** The line number to end the import at.        |
 
-
 <!-- prettier-ignore-end -->
 
-
 **Example:**
 
 ```md
 {{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}
 
 ```
+
 {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}
 
 ```md
@@ -221,7 +250,6 @@ This shortcode is for importing code from external sources easily without copyin
 
 {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}
 
-
 <br/><br/>
 
 ## Codeberg Card
@@ -239,6 +267,7 @@ This shortcode is for importing code from external sources easily without copyin
 ```md
 {{</* codeberg repo="forgejo/forgejo" */>}}
 ```
+
 {{< codeberg repo="forgejo/forgejo" >}}
 
 <br/><br/><br/>
@@ -304,6 +333,7 @@ Blowfish also supports automatic conversion of images included using standard Ma
 ```md
 {{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}
 ```
+
 {{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}
 
 <br/><br/><br/>
@@ -340,7 +370,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 
 <br/><br/><br/>
 
-
 **Example 2: responsive gallery**
 
 ```md
@@ -411,6 +440,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 ```md
 {{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}
 ```
+
 {{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}
 
 <br/><br/><br/>
@@ -531,13 +561,10 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}
 
 <br/><br/><br/>
 
-
 ## Keyword
 
-
 The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.
 
-
 <!-- prettier-ignore-start -->
 | Parameter | Description                             |
 | --------- | --------------------------------------- |
@@ -552,7 +579,7 @@ The input is written in Markdown so you can format it however you please.
 {{</* keyword */>}} *Super* skill {{</* /keyword */>}}
 ```
 
-{{< keyword >}} *Super* skill {{< /keyword >}}
+{{< keyword >}} _Super_ skill {{< /keyword >}}
 
 **Example2 :**
 
@@ -569,7 +596,7 @@ The input is written in Markdown so you can format it however you please.
 {{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
 {{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
 {{< /keywordList >}}
-{{< keyword >}} *Standalone* skill {{< /keyword >}}
+{{< keyword >}} _Standalone_ skill {{< /keyword >}}
 
 <br/><br/><br/>
 
@@ -661,10 +688,8 @@ This shortcode allows you to import markdown files from external sources. This i
 | --------- | ------------------------------------------------------- |
 | `url`     | **Required** URL to an externally hosted markdown file. |
 
-
 <!-- prettier-ignore-end -->
 
-
 **Example:**
 
 ```md
@@ -674,7 +699,6 @@ This shortcode allows you to import markdown files from external sources. This i
 
 {{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
 
-
 <br/><br/>
 
 ## Mermaid
@@ -792,7 +816,6 @@ The `tabs` shortcode is commonly used to present different variants of a particu
 
 The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.
 
-
 <!-- prettier-ignore-start -->
 | Parameter   | Description                                  |
 | ----------- | -------------------------------------------- |
@@ -843,14 +866,12 @@ With other shortcodes
 {{</* /timeline */>}}
 ```
 
-
 {{< timeline >}}
 
 {{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
 {{</ timelineItem >}}
 
-
 {{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
 With html code
 <ul>
@@ -877,7 +898,6 @@ With other shortcodes
 {{</ timelineItem >}}
 {{</ timeline >}}
 
-
 <br/><br/><br/>
 
 ## TypeIt
@@ -959,7 +979,6 @@ consectetur adipiscing elit.
 "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
 {{< /typeit >}}
 
-
 <br/><br/><br/>
 
 ## Youtube Lite

exampleSite/content/docs/shortcodes/index.zh-cn.md

@@ -64,6 +64,36 @@ This is an error!
 
 <br/><br/><br/>
 
+## Admonition
+
+Admonition 用于在内容中插入醒目提示。
+
+Admonition 的用途与 alert shortcode 类似，但其实现方式是通过 Hugo 的 render hooks。两者的关键区别在于语法：admonition 使用 Markdown 语法，因此在不同平台之间具有更好的可移植性；而 shortcode 是 Hugo 专有的。其语法类似 GitHub 的 alerts：
+
+```md
+> [!NOTE]
+> 一个 NOTE 类型的提示块。
+
+> [!TIP]+ 自定义标题
+> 一个带有自定义标题的可折叠提示块。
+```
+
+> [!NOTE]
+> 一个 NOTE 类型的提示块。
+
+> [!TIP]+ 自定义标题
+> 一个带有自定义标题的可折叠提示块。
+
+提示符号（`+` 或 `-`）是可选的，用于控制提示块是否默认折叠。请注意，该提示符号仅在 Obsidian 中兼容。
+
+> [!INFO]- 支持的类型
+> 可用的 admonition 类型包括 [GitHub alert 类型](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) 和 [Obsidian callout 类型](https://help.obsidian.md/callouts)。类型名称不区分大小写。
+>
+> **GitHub 类型：** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`  
+> **Obsidian 类型：** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
+
+<br/><br/><br/>
+
 ## Article
 
 `Article` 将把一篇文章嵌入到一个 markdown 文件中。 参数中的 `link`应该是要嵌入的文件的 `.RelPermalink`。请注意，如果简码引用其父级文件，则它不会显示任何内容。 *注意：如果您在 Blowfish（即 /blowfish/）等子文件夹中运行网站，请在链接中包含该路径。*

i18n/it.yaml

@@ -72,3 +72,20 @@ shortcode:
 
 recent:
   show_more: "Mostra di Più"
+
+admonition:
+  abstract: Sommario
+  bug: Bug
+  caution: Attenzione
+  danger: Pericolo
+  example: Esempio
+  failure: Fallimento
+  important: Importante
+  info: Info
+  note: Nota
+  question: Domanda
+  quote: Citazione
+  success: Successo
+  tip: Suggerimento
+  todo: Da fare
+  warning: Avviso

i18n/ja.yaml

@@ -84,3 +84,20 @@ shortcode:
 
 recent:
   show_more: "もっと見る"
+
+admonition:
+  abstract: 概要
+  bug: バグ
+  caution: 注意
+  danger: 危険
+  example: 例
+  failure: 失敗
+  important: 重要
+  info: 情報
+  note: ノート
+  question: 質問
+  quote: 引用
+  success: 成功
+  tip: ヒント
+  todo: TODO
+  warning: 警告

i18n/zh-CN.yaml

@@ -84,3 +84,20 @@ shortcode:
 
 recent:
   show_more: "显示更多"
+
+admonition:
+  abstract: 摘要
+  bug: 错误
+  caution: 注意
+  danger: 危险
+  example: 示例
+  failure: 失败
+  important: 重要
+  info: 信息
+  note: 笔记
+  question: 问题
+  quote: 引用
+  success: 成功
+  tip: 提示
+  todo: 待办
+  warning: 警告

i18n/zh-TW.yaml

@@ -84,3 +84,20 @@ shortcode:
 
 recent:
   show_more: "顯示更多"
+
+admonition:
+  abstract: 摘要
+  bug: 錯誤
+  caution: 注意
+  danger: 危險
+  example: 範例
+  failure: 失敗
+  important: 重要
+  info: 資訊
+  note: 註記
+  question: 問題
+  quote: 引用
+  success: 成功
+  tip: 提示
+  todo: 待辦
+  warning: 警告

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,90 @@
+{{- if eq .Type "alert" -}}
+  {{- $typeMap := dict
+    "attention" "warning"
+    "check" "success"
+    "cite" "quote"
+    "done" "success"
+    "error" "danger"
+    "fail" "failure"
+    "faq" "question"
+    "hint" "tip"
+    "help" "question"
+    "missing" "failure"
+    "summary" "abstract"
+    "tldr" "abstract"
+  -}}
+
+  {{- $iconMap := dict
+    "abstract" "file-lines"
+    "bug" "bug"
+    "caution" "fire"
+    "danger" "fire"
+    "example" "list-ol"
+    "failure" "xmark"
+    "important" "star"
+    "info" "circle-info"
+    "note" "circle-info"
+    "success" "check"
+    "todo" "list-check"
+    "tip" "lightbulb"
+    "question" "circle-question"
+    "quote" "quote-left"
+    "warning" "triangle-exclamation"
+  -}}
+
+  {{- $rawType := .AlertType | lower -}}
+  {{- $normalizedType := index $typeMap $rawType | default $rawType -}}
+  {{- $iconName := index $iconMap $normalizedType | default "circle-info" -}}
+  {{- $admonitionTitle := .AlertTitle | default (i18n (printf "admonition.%s" $normalizedType) | default $normalizedType) -}}
+
+  {{- $containerClass := "admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm" -}}
+  {{- $headerClass := "flex items-center gap-2 font-semibold text-inherit capitalize" -}}
+  {{- $contentClass := "admonition-content mt-3 text-base leading-relaxed text-inherit" -}}
+
+  {{- $isCollapsible := in (slice "+" "-") .AlertSign -}}
+  {{- if $isCollapsible -}}
+    <details
+      class="{{ $containerClass }} group"
+      data-type="{{ $normalizedType }}"
+      {{ if eq .AlertSign "+" }}open{{ end }}>
+      <summary class="{{ $headerClass }} cursor-pointer">
+        <div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg">
+          {{- partial "icon.html" $iconName -}}
+        </div>
+        <div class="grow">
+          {{ $admonitionTitle }}
+        </div>
+        <div
+          class="ms-auto flex h-5 w-5 items-center justify-center transition-transform ease-in-out -rotate-90 group-open:rotate-0 print:hidden">
+          {{- partial "icon.html" "chevron-down" -}}
+        </div>
+      </summary>
+      {{- if .Text -}}
+        <div class="{{ $contentClass }}">
+          {{- .Text | safeHTML -}}
+        </div>
+      {{- end -}}
+    </details>
+  {{- else -}}
+    <div class="{{ $containerClass }}" data-type="{{ $normalizedType }}">
+      <div class="{{ $headerClass }}">
+        <div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg">
+          {{- partial "icon.html" $iconName -}}
+        </div>
+        <div class="grow">
+          {{ $admonitionTitle }}
+        </div>
+      </div>
+      {{- if .Text -}}
+        <div class="{{ $contentClass }}">
+          {{- .Text | safeHTML -}}
+        </div>
+      {{- end -}}
+    </div>
+  {{- end -}}
+
+{{- else -}}
+  <blockquote {{ with .Attributes }}{{ . | safeHTMLAttr }}{{ end }}>
+    {{- .Text | safeHTML -}}
+  </blockquote>
+{{- end -}}

layouts/_default/index.json

@@ -11,7 +11,7 @@
       "date" (.Date | time.Format (.Site.Language.Params.dateFormat | default ":date_long"))
       "title" (.Title | emojify | safeJS)
       "section" ($section.Title | emojify | safeJS)
-      "summary" (.Summary | safeJS)
+      "summary" (.Summary | plainify | htmlUnescape | safeJS)
       "content" (.Plain | safeJS)
       "permalink" .RelPermalink
       "externalUrl" .Params.externalUrl
@@ -21,7 +21,7 @@
       {{- $index = $index | append (dict
       "title" (.Title | emojify | safeJS)
       "section" ($section.Title | emojify | safeJS)
-      "summary" (.Summary | safeJS)
+      "summary" (.Summary | plainify | htmlUnescape | safeJS)
       "content" (.Plain | safeJS)
       "permalink" .RelPermalink
       "externalUrl" .Params.externalUrl

layouts/_default/rss.xml

@@ -40,7 +40,7 @@
       <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
       {{ with .Site.Params.Author.email }}<author>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</author>{{end}}
       <guid>{{ .Permalink }}</guid>
-      <description>{{ .Summary | html }}</description>
+      <description>{{ .Summary | plainify | htmlUnescape | safeHTML }}</description>
       {{ range ( where .Site.RegularPages ".RelPermalink" .RelPermalink | first 1 ) }}
         {{- $images := .Resources.ByType "image" -}}
         {{- $featured := $images.GetMatch "*feature*" -}}

layouts/partials/head.html

@@ -157,6 +157,7 @@
   {{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
+  {{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
   {{ if $jsResources }}
     {{ $bundleJS := $jsResources | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint $alg }}
     <script

layouts/partials/schema.html

@@ -25,6 +25,7 @@
     "name": "{{ .Title | safeJS }}",
     "headline": "{{ .Title | safeJS }}",
     {{ with .Description }}"description": "{{ . | safeJS }}",{{ end }}
+    {{ with .Summary }}"abstract": "{{ . | plainify | htmlUnescape | safeJS }}",{{ end }}
     {{ with .Site.LanguageCode }}"inLanguage": "{{ . }}",{{ end }}
     "url" : {{ .Permalink }},
     "author" : {