From bd40c855862af61b68c8b0a9b1e77581f1209bb4 Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Mon, 7 Oct 2024 17:03:52 +0800 Subject: [PATCH] :tada: Feat: support alert foldable title for blockquote compatible with Obsidian Callouts refactor admonition shortcode: add todo type and aliases type change min hugo version: 0.134.0 --- assets/css/_partials/_details.scss | 34 +++++----- assets/css/_partials/_maps/_admonition.scss | 3 +- assets/css/_shortcodes/_admonition.scss | 37 +++++++---- assets/js/theme.js | 2 +- i18n/de.toml | 1 + i18n/en.toml | 1 + i18n/es.toml | 1 + i18n/fr.toml | 1 + i18n/hi.toml | 1 + i18n/it.toml | 1 + i18n/pl.toml | 1 + i18n/pt-BR.toml | 1 + i18n/ro.toml | 1 + i18n/ru.toml | 1 + i18n/sr.toml | 1 + i18n/vi.toml | 1 + i18n/zh-CN.toml | 1 + i18n/zh-TW.toml | 1 + .../_markup/render-blockquote-alert.html | 29 +++++++++ .../_default/_markup/render-blockquote.html | 11 ---- layouts/partials/plugin/admonition.html | 63 +++++++++++++++++++ layouts/partials/plugin/alert.html | 14 ++--- layouts/shortcodes/admonition.html | 49 +++------------ 23 files changed, 171 insertions(+), 85 deletions(-) create mode 100644 layouts/_default/_markup/render-blockquote-alert.html delete mode 100644 layouts/_default/_markup/render-blockquote.html create mode 100644 layouts/partials/plugin/admonition.html diff --git a/assets/css/_partials/_details.scss b/assets/css/_partials/_details.scss index 926288df..7b4c7c90 100644 --- 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 index 5c79eeb1..8a0f5591 100644 --- 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 index 1a8c38ef..7a6a38d5 100644 --- 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,18 +49,18 @@ background-color: $background-color; border-left-color: $color; - .admonition-title { + > .admonition-title { border-bottom-color: $background-color; background-color: opacify($background-color, 0.15); + + i.icon { + color: $color; + } } - &.open .admonition-title { + &.open > .admonition-title { background-color: $background-color; } - - i.icon { - color: $color; - } } @else { @@ -55,18 +68,18 @@ background-color: $background-color; border-left-color: $color; - .admonition-title { + > .admonition-title { border-bottom-color: $background-color; background-color: opacify($background-color, 0.15); + + i.icon { + color: $color; + } } - &.open .admonition-title { + &.open > .admonition-title { background-color: $background-color; } - - i.icon { - color: $color; - } } } } diff --git a/assets/js/theme.js b/assets/js/theme.js index d5d70c4e..71aaa49a 100644 --- 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 index d473aef3..fb2fa6f3 100644 --- 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 index c87b6395..e3ae77b3 100644 --- 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 index 4cda041e..55ba8a00 100644 --- 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 index 10a3437d..4a07ca56 100644 --- 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 index dc48801e..75b46b2a 100644 --- 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 index 2d74d520..8c72e96f 100644 --- 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 index 076ecb65..be142e67 100644 --- 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 index 34bd6ba1..ceccd54d 100644 --- 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 index c6422dc7..85a24a47 100644 --- 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 index 73eb947a..b5fd91e1 100644 --- 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 index 84ec9dd0..ae3a6dea 100644 --- 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 index 2b2b9b71..ada6b9ff 100644 --- 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 index 53c71939..7f13f6c8 100644 --- 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 index 4af6c3be..53092dea 100644 --- 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 new file mode 100644 index 00000000..52a0458e --- /dev/null +++ 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 deleted file mode 100644 index 7c0eb281..00000000 --- a/layouts/_default/_markup/render-blockquote.html +++ /dev/null @@ -1,11 +0,0 @@ -{{- $attrs := "" }} -{{- range $key, $value := .Attributes }} - {{- $attrs = printf "%s %s=%q" $attrs $key $value }} -{{- end }} -{{- $attrs = trim $attrs " " }} - -{{- if eq .Type "alert" -}} - {{- dict "Text" .Text "Type" .AlertType "Attributes" .Attributes | partial "plugin/alert.html" -}} -{{- else -}} -
{{ .Text | safeHTML }}
-{{- end -}} diff --git a/layouts/partials/plugin/admonition.html b/layouts/partials/plugin/admonition.html new file mode 100644 index 00000000..1b9d5bc1 --- /dev/null +++ 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 -}} + +
+
+ {{- 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 -}} +
+
+
+ {{- .Text | safeHTML -}} +
+
+
+{{- /* EOF */ -}} diff --git a/layouts/partials/plugin/alert.html b/layouts/partials/plugin/alert.html index 197d5cad..2d78bdba 100644 --- 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 " " -}}
- {{- $icon := index $icons .Type -}} + {{- $icon := index $iconMap .Type -}}

{{- dict "Src" $icon | partial "plugin/icon.html" }} {{- or (T (printf "alert.%v" .Type)) (title .Type) -}} diff --git a/layouts/shortcodes/admonition.html b/layouts/shortcodes/admonition.html index 07d6ebf8..c7b929a9 100644 --- a/layouts/shortcodes/admonition.html +++ b/layouts/shortcodes/admonition.html @@ -1,41 +1,12 @@ +{{- $type := cond .IsNamedParams (.Get "type") (.Get 0) -}} +{{- $title := cond .IsNamedParams (.Get "title") (.Get 1) | .Page.RenderString -}} +{{- $open := cond .IsNamedParams (.Get "open") (.Get 2) -}} {{- $inner := .Inner | .Page.RenderString -}} -{{- $iconMap := dict "note" "fa-solid fa-pencil-alt fa-fw" -}} -{{- $iconMap = dict "abstract" "fa-solid fa-list-ul fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "info" "fa-solid fa-info-circle fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "tip" "fa-solid fa-lightbulb fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "success" "fa-solid fa-check-circle fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "question" "fa-solid fa-question-circle fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "warning" "fa-solid fa-exclamation-triangle fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "failure" "fa-solid fa-times-circle fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "danger" "fa-solid fa-skull-crossbones fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "bug" "fa-solid fa-bug fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "example" "fa-solid fa-list-ol fa-fw" | merge $iconMap -}} -{{- $iconMap = dict "quote" "fa-solid fa-quote-right fa-fw" | merge $iconMap -}} -{{- $iconDetails := "fa-solid fa-angle-right fa-fw" -}} - -{{- if .IsNamedParams -}} - {{- $type := .Get "type" | default "note" -}} -

-
- {{ .Get "title" | .Page.RenderString | default (T (printf "admonition.%v" $type)) }} -
-
-
- {{- $inner -}} -
-
-
-{{- else -}} - {{- $type := .Get 0 | default "note" -}} -
-
- {{ .Get 1 | .Page.RenderString | default (T (printf "admonition.%v" $type)) }} -
-
-
- {{- $inner -}} -
-
-
-{{- end -}} +{{- dict + "Type" $type + "Title" $title + "Open" $open + "Text" $inner + | partial "plugin/admonition.html" +-}}