🎉 Feat: support alert foldable title for blockquote compatible with O…

…bsidian Callouts refactor admonition shortcode: add todo type and aliases type change min hugo version: 0.134.0
hugo-fixit · Oct 8, 2024 · bd40c85 · bd40c85
1 parent 19ceeb2
commit bd40c85
Show file tree

Hide file tree

Showing 23 changed files with 170 additions and 84 deletions.
diff --git a/assets/css/_partials/_details.scss b/assets/css/_partials/_details.scss
@@ -1,40 +1,46 @@
 .details {
-  .details-summary {
+  > .details-summary {
     @include border-radius($global-border-radius);
 
     &:hover {
       cursor: pointer;
     }
-  }
 
-  i.details-icon {
-    color: $global-font-secondary-color;
-    @include transition(transform 0.2s ease);
+    i.details-icon {
+      color: $global-font-secondary-color;
+      @include transition(transform 0.2s ease);
 
-    [data-theme='dark'] & {
-      color: $global-font-secondary-color-dark;
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
     }
   }
 
-  .details-content {
+  > .details-content {
     max-height: 0;
     overflow-y: hidden;
     @include details-transition-open;
   }
 
   &.open {
-    .details-summary {
+    > .details-summary {
       @include border-radius($global-border-radius $global-border-radius 0 0);
-    }
 
-    i.details-icon {
-      @include transform(rotate(90deg));
+      i.details-icon {
+        @include transform(rotate(90deg));
+      }
     }
 
-    .details-content {
+    > .details-content {
       max-height: 100%;
       @include border-radius(0 0 $global-border-radius $global-border-radius);
       @include details-transition-close;
     }
   }
+
+  &.disabled {
+    > .details-summary {
+      cursor: default;
+    }
+  }
 }
diff --git a/assets/css/_partials/_maps/_admonition.scss b/assets/css/_partials/_maps/_admonition.scss
@@ -3,9 +3,10 @@ $admonition-color-map:
   'note' #448aff rgba(68, 138, 255, 0.1),
   'abstract' #00b0ff rgba(0, 176, 255, 0.1),
   'info' #00b8d4 rgba(0, 184, 212, 0.1),
+  'todo' #5e9aff rgba(94, 154, 255, 0.1),
   'tip' #00bfa5 rgba(0, 191, 165, 0.1),
   'success' #00c853 rgba(0, 200, 83, 0.1),
-  'question' #64dd17 rgba(100, 221, 23, 0.1),
+  'question' #ffbd67 rgba(255, 190, 0, 0.1),
   'warning' #ff9100 rgba(255, 145, 0, 0.1),
   'failure' #ff5252 rgba(255, 82, 82, 0.1),
   'danger' #ff1744 rgba(255, 23, 68, 0.1),

diff --git a/assets/css/_shortcodes/_admonition.scss b/assets/css/_shortcodes/_admonition.scss
@@ -16,6 +16,19 @@
 
   .admonition-content {
     padding: 0.5rem 0;
+
+    // for extended alert syntax
+    > p {
+      margin: 0;
+    }
+    // title-only alert
+    &:empty {
+      display: none;
+    }
+    // BUG of Hugo https://github.com/gohugoio/hugo/issues/12913
+    &:has(> p:only-child:empty) {
+      display: none;
+    }
   }
 
   i.icon {
@@ -36,17 +49,17 @@
       background-color: $background-color;
       border-left-color: $color;
 
-      .admonition-title {
+      > .admonition-title {
         border-bottom-color: $background-color;
         background-color: opacify($background-color, 0.15);
-      }
 
-      &.open .admonition-title {
-        background-color: $background-color;
+        i.icon {
+          color: $color;
+        }
       }
 
-      i.icon {
-        color: $color;
+      &.open > .admonition-title {
+        background-color: $background-color;
       }
     }
 
@@ -55,17 +68,17 @@
         background-color: $background-color;
         border-left-color: $color;
 
-        .admonition-title {
+        > .admonition-title {
           border-bottom-color: $background-color;
           background-color: opacify($background-color, 0.15);
-        }
 
-        &.open .admonition-title {
-          background-color: $background-color;
+          i.icon {
+            color: $color;
+          }
         }
 
-        i.icon {
-          color: $color;
+        &.open > .admonition-title {
+          background-color: $background-color;
         }
       }
     }

diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -334,7 +334,7 @@ class FixIt {
   }
 
   initDetails(target = document) {
-    this.util.forEach(target.getElementsByClassName('details'), ($details) => {
+    this.util.forEach(target.querySelectorAll('.details:not(.disabled)'), ($details) => {
       const $summary = $details.querySelector('.details-summary');
       $summary.addEventListener('click', () => {
         $details.classList.toggle('open');

diff --git a/i18n/de.toml b/i18n/de.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Notiz"
 abstract = "Kurzfassung"
 info = "Info"
+todo = "Aufgabe"
 tip = "Tipp"
 success = "Erfolg"
 question = "Frage"

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -186,6 +186,7 @@ caution = "Caution"
 note = "Note"
 abstract = "Abstract"
 info = "Info"
+todo = "Todo"
 tip = "Tip"
 success = "Success"
 question = "Question"

diff --git a/i18n/es.toml b/i18n/es.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Nota"
 abstract = "Resumen"
 info = "Información"
+todo = "Por hacer"
 tip = "Consejo"
 success = "Éxito"
 question = "Pregunta"

diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -186,6 +186,7 @@ caution = ""
 note = "Remarque"
 abstract = "Résumé"
 info = "Info"
+todo = "À faire"
 tip = "Astuce"
 success = "Succès"
 question = "Question"

diff --git a/i18n/hi.toml b/i18n/hi.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "ध्यान दें"
 abstract = "सारांश"
 info = "जानकारी"
+todo = "करने के लिए"
 tip = "टिप"
 success = "सफलता"
 question = "प्रश्न"

diff --git a/i18n/it.toml b/i18n/it.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Note"
 abstract = "Sommario"
 info = "Info"
+todo = "Da fare"
 tip = "Suggerimenti"
 success = "Successo"
 question = "Domande"

diff --git a/i18n/pl.toml b/i18n/pl.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Notka"
 abstract = "Streszczenie"
 info = "Info"
+todo = "Do zrobienia"
 tip = "Wskazówka"
 success = "Sukces"
 question = "Pytanie"

diff --git a/i18n/pt-BR.toml b/i18n/pt-BR.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Nota"
 abstract = "Abstrato"
 info = "Info"
+todo = "A fazer"
 tip = "Dica"
 success = "Sucesso"
 question = "Pergunta"

diff --git a/i18n/ro.toml b/i18n/ro.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Notă"
 abstract = "Rezumat"
 info = "Info"
+todo = "De făcut"
 tip = "Sfat"
 success = "Succes"
 question = "Întrebare"

diff --git a/i18n/ru.toml b/i18n/ru.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Замечание"
 abstract = "Краткое описание"
 info = "Инфо"
+todo = "Сделать"
 tip = "Совет"
 success = "Удачто"
 question = "Вопрос"

diff --git a/i18n/sr.toml b/i18n/sr.toml
@@ -187,6 +187,7 @@ caution = ""
 note = "Напомена"
 abstract = "Сажетак"
 info = "Инфо"
+todo = "То-до"
 tip = "Савет"
 success = "Успех"
 question = "Питање"

diff --git a/i18n/vi.toml b/i18n/vi.toml
@@ -186,6 +186,7 @@ caution = ""
 note = "Ghi chú"
 abstract = "Tóm tắt"
 info = "Thông tin"
+todo = "Cần làm"
 tip = "Mẹo"
 success = "Thành công"
 question = "Câu hỏi"

diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
@@ -182,6 +182,7 @@ caution = "小心"
 note = "注意"
 abstract = "摘要"
 info = "信息"
+todo = "待办"
 tip = "技巧"
 success = "成功"
 question = "问题"

diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml
@@ -182,6 +182,7 @@ caution = "小心"
 note = "注意"
 abstract = "摘要"
 info = "資訊"
+todo = "待辦"
 tip = "提示"
 success = "成功"
 question = "問題"

diff --git a/layouts/_default/_markup/render-blockquote-alert.html b/layouts/_default/_markup/render-blockquote-alert.html
@@ -0,0 +1,29 @@
+{{- if .AlertTitle -}}
+  {{- /* The extended syntax is compatible with Obsidian and FixIt admonition shortcode. */ -}}
+  {{- /* === Dirty hack === */ -}}
+  {{- $title := .AlertTitle -}}
+  {{- if ne .AlertTitle (.AlertTitle | plainify) -}}
+    {{- /* BUG of Hugo https://github.com/gohugoio/hugo/issues/12913 */ -}}
+    {{- $title = add .AlertTitle ">" -}}
+  {{- end -}}
+  {{- /* === Dirty hack === */ -}}
+  {{- $openMap := dict "+" true "-" false -}}
+  {{- $open := index $openMap .AlertSign | default true -}}
+  {{- $foldable := ne .AlertSign "" -}}
+  {{- dict
+    "Type" .AlertType
+    "Title" $title
+    "Open" $open
+    "Text" .Text
+    "Foldable" $foldable
+    | partial "plugin/admonition.html"
+  -}}
+{{- else -}}
+  {{- /* The basic syntax is compatible with GitHub, Obsidian, and Typora. */ -}}
+  {{- dict
+    "Type" .AlertType
+    "Text" .Text
+    "Attributes" .Attributes
+    | partial "plugin/alert.html"
+  -}}
+{{- end -}}
diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html
diff --git a/layouts/partials/plugin/admonition.html b/layouts/partials/plugin/admonition.html
@@ -0,0 +1,63 @@
+
+{{- /*
+  * The extended syntax of alert is compatible with Obsidian and FixIt admonition shortcode.
+  * @param {String} .Text the content of the admonition box
+  * @param {String} [.Type] the type of the admonition box
+  * @param {String} [.Title] the title of the admonition box
+  * @param {Boolean} [.Open] whether the admonition box is open, default is true
+  * @param {Boolean} [.Foldable] whether the admonition box is foldable, default is true
+  * TODO support customize admonitions by any .AlertType (add params to config iconMap)
+*/ -}}
+
+{{- $iconMap := dict
+  "note" "fa-solid fa-pencil-alt"
+  "abstract" "fa-solid fa-clipboard-list"
+  "info" "fa-solid fa-circle-info"
+  "todo" "fa-solid fa-list-check"
+  "tip" "fa-regular fa-lightbulb"
+  "success" "fa-solid fa-check"
+  "question" "fa-regular fa-circle-question"
+  "warning" "fa-solid fa-exclamation-triangle"
+  "failure" "fa-solid fa-xmark"
+  "danger" "fa-solid fa-bolt"
+  "bug" "fa-solid fa-bug"
+  "example" "fa-solid fa-list-ul"
+  "quote" "fa-solid fa-quote-right"
+-}}
+{{- $aliasMap := dict
+  "summary" "abstract"
+  "tldr" "abstract"
+  "hint" "tip"
+  "important" "tip"
+  "check" "success"
+  "done" "success"
+  "help" "question"
+  "faq" "question"
+  "caution" "warning"
+  "attention" "warning"
+  "fail" "failure"
+  "missing" "failure"
+  "error" "danger"
+  "cite" "quote"
+-}}
+{{- $type := .Type | lower -}}
+{{- $type = index $aliasMap $type | default $type | default "note" -}}
+{{- $icon := index $iconMap $type | default "fa-solid fa-pencil-alt" -}}
+{{- $title := .Title | default (T (printf "admonition.%v" $type)) | default (title $type) -}}
+{{- $foldable := ne .Foldable false -}}
+
+<div class="details admonition {{ $type }}{{ if .Open | ne false }} open{{ end }}{{ if not $foldable }} disabled{{ end }}">
+  <div class="details-summary admonition-title">
+    {{- dict "Class" (add "icon fa-fw " $icon) | partial "plugin/icon.html" -}}
+    {{- $title | safeHTML -}}
+    {{- if $foldable -}}
+      {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+    {{- end -}}
+  </div>
+  <div class="details-content">
+    <div class="admonition-content">
+      {{- .Text | safeHTML -}}
+    </div>
+  </div>
+</div>
+{{- /* EOF */ -}}
diff --git a/layouts/partials/plugin/alert.html b/layouts/partials/plugin/alert.html
@@ -1,12 +1,12 @@
 {{- /*
-  This partial is used to render an alert box.
-  @param {String} .Type the type of the alert box
-  @param {String} .Text the content of the alert box
-  @param {Map} [.Attributes] the attributes of the alert box
-  @example {{- dict "Text" .Text "Type" .AlertType "Attributes" .Attributes | partial "plugin/alert.html" -}}
+  * The basic syntax of alert is compatible with GitHub, Obsidian, and Typora.
+  * @param {String} .Type the type of the alert box
+  * @param {String} .Text the content of the alert box
+  * @param {Map} [.Attributes] the attributes of the alert box
+  * @example {{- dict "Text" .Text "Type" .AlertType "Attributes" .Attributes | partial "plugin/alert.html" -}}
 */ -}}
 
-{{- $icons := dict
+{{- $iconMap := dict
   "caution" "images/icons/alerts/stop.svg"
   "important" "images/icons/alerts/report.svg"
   "note" "images/icons/alerts/info.svg"
@@ -27,7 +27,7 @@
 {{- $attrs = trim $attrs " " -}}
 
 <div {{ $attrs | safeHTMLAttr }}>
-  {{- $icon := index $icons .Type -}}
+  {{- $icon := index $iconMap .Type -}}
   <p class="alert-title">
     {{- dict "Src" $icon | partial "plugin/icon.html" }}
     {{- or (T (printf "alert.%v" .Type)) (title .Type) -}}