forked from drowl87/hextra_mirror
feat: support github style alerts (#513)
* feat: basic github style alerts support * feat: implement github style alert * chore: re-generate css * chore: add missing prettier config * docs: add alerts instructions to markdown * chore: revert "docs: add alerts instructions to markdown" This reverts commit 3a70540e0b5651e485612209ee22e04b26432e72. * chore: redo "docs: add alerts instructions to markdown"" This reverts commit 8399373747f081ff7164c4dd60ac5598a1a0c121. * chore(build): bump hugo version
This commit is contained in:
Xin
9
layouts/_default/_markup/render-blockquote-alert.html
Normal file
9
layouts/_default/_markup/render-blockquote-alert.html
Normal file
@ -0,0 +1,9 @@
|
||||
{{- if not (in (slice "note" "tip" "important" "warning" "caution") .AlertType) -}}
|
||||
{{- warnf "Alert type %s is not supported" .AlertType -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $content := .Text -}}
|
||||
{{- $alertType := .AlertType -}}
|
||||
{{- $alertTitle := .AlertTitle -}}
|
||||
|
||||
{{- partial "components/github-style-alert.html" (dict "content" $content "alertType" $alertType "alertTitle" $alertTitle) -}}
|
||||
3
layouts/_default/_markup/render-blockquote-regular.html
Normal file
3
layouts/_default/_markup/render-blockquote-regular.html
Normal file
@ -0,0 +1,3 @@
|
||||
<blockquote>
|
||||
{{ .Text }}
|
||||
</blockquote>
|
||||
42
layouts/partials/components/github-style-alert.html
Normal file
42
layouts/partials/components/github-style-alert.html
Normal file
@ -0,0 +1,42 @@
|
||||
{{- $content := .content -}}
|
||||
{{- $alertType := .alertType -}}
|
||||
{{- $alertTitle := .alertTitle -}}
|
||||
|
||||
{{- $icons := dict
|
||||
"note" "information-circle"
|
||||
"tip" "light-bulb"
|
||||
"important" "information-circle"
|
||||
"warning" "exclamation"
|
||||
"caution" "exclamation-circle"
|
||||
-}}
|
||||
|
||||
{{- $icon := index $icons $alertType -}}
|
||||
{{- $title := or $alertTitle (or (i18n $alertType) (title $alertType)) -}}
|
||||
|
||||
{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
|
||||
|
||||
{{- $alertClasses := dict
|
||||
"note" "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200"
|
||||
"tip" "hx-border-green-200 hx-bg-green-100 hx-text-green-900 dark:hx-border-green-200/30 dark:hx-bg-green-900/30 dark:hx-text-green-200"
|
||||
"important" "hx-border-indigo-200 hx-bg-indigo-100 hx-text-indigo-900 dark:hx-border-indigo-200/30 dark:hx-bg-indigo-900/30 dark:hx-text-indigo-200"
|
||||
"warning" "hx-border-amber-200 hx-bg-amber-100 hx-text-amber-900 dark:hx-border-amber-200/30 dark:hx-bg-amber-900/30 dark:hx-text-amber-200"
|
||||
"caution" "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-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 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
|
||||
<p class="hx-flex hx-items-center hx-font-medium">
|
||||
{{- with $icon -}}
|
||||
{{- partial "utils/icon.html" (dict "name" . "attributes" `height=16px class="hx-inline-block hx-align-middle hx-mr-2"`) -}}
|
||||
{{- end -}}
|
||||
{{- $title -}}
|
||||
</p>
|
||||
|
||||
<div class="hx-w-full hx-min-w-0 hx-leading-7">
|
||||
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
|
||||
{{- $content -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
layouts/partials/shortcodes/callout.html
Normal file
28
layouts/partials/shortcodes/callout.html
Normal file
@ -0,0 +1,28 @@
|
||||
{{- $content := .content -}}
|
||||
{{- $emoji := .emoji -}}
|
||||
{{- $icon := .icon -}}
|
||||
|
||||
{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" -}}
|
||||
|
||||
{{- $class := .class | default $defaultClass -}}
|
||||
|
||||
|
||||
<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
|
||||
<div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
|
||||
{{- with $emoji -}}
|
||||
<div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
|
||||
{{- . -}}
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{- with $icon -}}
|
||||
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
<div class="hx-w-full hx-min-w-0 hx-leading-7">
|
||||
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
|
||||
{{- $content -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,37 +1,19 @@
|
||||
{{ $calloutEmojiDict := dict "info" "ℹ️" "warning" "⚠️" "error" "🚫" }}
|
||||
{{ $type := .Get "type" | default "default" }}
|
||||
{{- $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 }}
|
||||
{{- $emoji := .Get "emoji" -}}
|
||||
{{- if eq $emoji "" -}}
|
||||
{{- $emoji = index $calloutEmojiDict $type -}}
|
||||
{{- end -}}
|
||||
{{/* Also allow using "icon" */}}
|
||||
{{ $icon := .Get "icon" }}
|
||||
{{- $icon := .Get "icon" -}}
|
||||
{{- $content := .InnerDeindent | markdownify -}}
|
||||
|
||||
{{ $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
|
||||
{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
|
||||
{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
|
||||
{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
|
||||
{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" -}}
|
||||
{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}}
|
||||
{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
|
||||
{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}}
|
||||
|
||||
{{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
|
||||
{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
|
||||
|
||||
|
||||
<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
|
||||
<div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
|
||||
{{- with $emoji -}}
|
||||
<div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{- else -}}
|
||||
{{- with $icon }}
|
||||
{{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
<div class="hx-w-full hx-min-w-0 hx-leading-7">
|
||||
<div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
|
||||
{{ .InnerDeindent | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- partial "shortcodes/callout.html" (dict "content" $content "emoji" $emoji "icon" $icon "class" $class) -}}
|
||||
|
||||
Reference in New Issue
Block a user