drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 04:41:50 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support github style alerts (#513)
Some checks are pending
Deploy Hugo site to Pages / build (push) Waiting to run
Details
Deploy Hugo site to Pages / deploy (push) Blocked by required conditions
Details

Browse Source 
* 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 3a70540e0b.

* chore: redo "docs: add alerts instructions to markdown""

This reverts commit 8399373747.

* chore(build): bump hugo version
This commit is contained in:
Xin
2024-12-14 23:44:10 +00:00
committed by GitHub
parent 0c90c1aa50
commit 68dd327312
11 changed files with 229 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
layouts/partials/components/github-style-alert.html Normal file
View 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
View 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>