mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-09-02 19:52:40 +00:00
🎉 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
This commit is contained in:
Cell
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -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');
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Notiz"
|
||||
abstract = "Kurzfassung"
|
||||
info = "Info"
|
||||
todo = "Aufgabe"
|
||||
tip = "Tipp"
|
||||
success = "Erfolg"
|
||||
question = "Frage"
|
||||
|
||||
@@ -186,6 +186,7 @@ caution = "Caution"
|
||||
note = "Note"
|
||||
abstract = "Abstract"
|
||||
info = "Info"
|
||||
todo = "Todo"
|
||||
tip = "Tip"
|
||||
success = "Success"
|
||||
question = "Question"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Nota"
|
||||
abstract = "Resumen"
|
||||
info = "Información"
|
||||
todo = "Por hacer"
|
||||
tip = "Consejo"
|
||||
success = "Éxito"
|
||||
question = "Pregunta"
|
||||
|
||||
@@ -186,6 +186,7 @@ caution = ""
|
||||
note = "Remarque"
|
||||
abstract = "Résumé"
|
||||
info = "Info"
|
||||
todo = "À faire"
|
||||
tip = "Astuce"
|
||||
success = "Succès"
|
||||
question = "Question"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "ध्यान दें"
|
||||
abstract = "सारांश"
|
||||
info = "जानकारी"
|
||||
todo = "करने के लिए"
|
||||
tip = "टिप"
|
||||
success = "सफलता"
|
||||
question = "प्रश्न"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Note"
|
||||
abstract = "Sommario"
|
||||
info = "Info"
|
||||
todo = "Da fare"
|
||||
tip = "Suggerimenti"
|
||||
success = "Successo"
|
||||
question = "Domande"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Notka"
|
||||
abstract = "Streszczenie"
|
||||
info = "Info"
|
||||
todo = "Do zrobienia"
|
||||
tip = "Wskazówka"
|
||||
success = "Sukces"
|
||||
question = "Pytanie"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Nota"
|
||||
abstract = "Abstrato"
|
||||
info = "Info"
|
||||
todo = "A fazer"
|
||||
tip = "Dica"
|
||||
success = "Sucesso"
|
||||
question = "Pergunta"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Notă"
|
||||
abstract = "Rezumat"
|
||||
info = "Info"
|
||||
todo = "De făcut"
|
||||
tip = "Sfat"
|
||||
success = "Succes"
|
||||
question = "Întrebare"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Замечание"
|
||||
abstract = "Краткое описание"
|
||||
info = "Инфо"
|
||||
todo = "Сделать"
|
||||
tip = "Совет"
|
||||
success = "Удачто"
|
||||
question = "Вопрос"
|
||||
|
||||
@@ -187,6 +187,7 @@ caution = ""
|
||||
note = "Напомена"
|
||||
abstract = "Сажетак"
|
||||
info = "Инфо"
|
||||
todo = "То-до"
|
||||
tip = "Савет"
|
||||
success = "Успех"
|
||||
question = "Питање"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -182,6 +182,7 @@ caution = "小心"
|
||||
note = "注意"
|
||||
abstract = "摘要"
|
||||
info = "信息"
|
||||
todo = "待办"
|
||||
tip = "技巧"
|
||||
success = "成功"
|
||||
question = "问题"
|
||||
|
||||
@@ -182,6 +182,7 @@ caution = "小心"
|
||||
note = "注意"
|
||||
abstract = "摘要"
|
||||
info = "資訊"
|
||||
todo = "待辦"
|
||||
tip = "提示"
|
||||
success = "成功"
|
||||
question = "問題"
|
||||
|
||||
@@ -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 -}}
|
||||
@@ -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 -}}
|
||||
<blockquote {{- with $attrs }} {{ . | safeHTMLAttr }}{{ end }}>{{ .Text | safeHTML }}</blockquote>
|
||||
{{- end -}}
|
||||
@@ -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 */ -}}
|
||||
@@ -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) -}}
|
||||
|
||||
@@ -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" -}}
|
||||
<div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
|
||||
<div class="details-summary admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}" aria-hidden="true"></i>{{ .Get "title" | .Page.RenderString | default (T (printf "admonition.%v" $type)) }}<i class="details-icon {{ $iconDetails }}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{- $type := .Get 0 | default "note" -}}
|
||||
<div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
|
||||
<div class="details-summary admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}" aria-hidden="true"></i>{{ .Get 1 | .Page.RenderString | default (T (printf "admonition.%v" $type)) }}<i class="details-icon {{ $iconDetails }}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- dict
|
||||
"Type" $type
|
||||
"Title" $title
|
||||
"Open" $open
|
||||
"Text" $inner
|
||||
| partial "plugin/admonition.html"
|
||||
-}}
|
||||
|
||||
Reference in New Issue
Block a user