Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: add callout shortcode and doc

Browse Source 
chore: disable underline for not-prose
This commit is contained in:
Xin 2023-07-27 23:26:07 +01:00
parent c8eb404fe6
commit 50b1b7db68
3 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/typography.css
View File

@ -23,6 +23,9 @@
a { a {
@apply text-primary-600 underline decoration-from-font [text-underline-position:from-font]; @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
} }
.not-prose a {
@apply text-current no-underline;
}
blockquote { blockquote {
@apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6; @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
} }

24
content/docs/guide/callouts.md Normal file
View File

@ -0,0 +1,24 @@
---
title: Callout Component
linkTitle: Callout
---
A built-in component to show important information to the reader.
## Example
{{< callout emoji="👾">}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
{{< callout type="info" >}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
{{< callout type="warning" >}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
{{< callout type="error" >}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

24
layouts/shortcodes/callout.html Normal file
View File

@ -0,0 +1,24 @@
{{ $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 }}
{{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
{{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
{{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
{{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
{{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
<div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
<div class="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2" style='font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";'>{{ $emoji }}</div>
<div class="w-full min-w-0 leading-7">
<p class="mt-6 leading-7 first:mt-0">
{{ .Inner | markdownify }}
</p>
</div>
</div>