diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 72dc5f4a..95a2ec4d 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1176,6 +1176,9 @@ video { .hx-text-4xl { font-size: 2.25rem; } +.hx-text-\[\.65rem\] { + font-size: .65rem; +} .hx-text-\[10px\] { font-size: 10px; } @@ -2269,7 +2272,6 @@ article details > summary::before { top: 5px; right: 5px; z-index: 10; - font-size: .65rem; } .steps h3 { counter-increment: step; @@ -2594,6 +2596,10 @@ nav .search-wrapper { overflow: auto; font-size: .75rem; } +.hextra-badge { + display: inline-flex; + align-items: center; +} html { font-size: 1rem; -webkit-font-smoothing: antialiased; diff --git a/assets/css/components/badge.css b/assets/css/components/badge.css new file mode 100644 index 00000000..ae5d9c5f --- /dev/null +++ b/assets/css/components/badge.css @@ -0,0 +1,3 @@ +.hextra-badge { + @apply hx-inline-flex hx-items-center; +} \ No newline at end of file diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css index 20f2a828..a7704218 100644 --- a/assets/css/components/cards.css +++ b/assets/css/components/cards.css @@ -38,5 +38,4 @@ top: 5px; right: 5px; z-index: 10; - font-size: .65rem; } diff --git a/assets/css/styles.css b/assets/css/styles.css index 83b795f1..229c261c 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -11,6 +11,7 @@ @import "components/code-copy.css"; @import "components/hextra/feature-grid.css"; @import "components/jupyter.css"; +@import "components/badge.css"; html { @apply hx-text-base hx-antialiased; diff --git a/exampleSite/content/docs/guide/shortcodes/others.md b/exampleSite/content/docs/guide/shortcodes/others.md index 19bb0dfe..8c96e65b 100644 --- a/exampleSite/content/docs/guide/shortcodes/others.md +++ b/exampleSite/content/docs/guide/shortcodes/others.md @@ -10,6 +10,41 @@ sidebar: These shortcodes are considered less stable and may be changed anytime. {{< /callout >}} +## Badge + +``` +{{}} +``` + +Result: + +{{< badge "Badge" >}} + +Variants: + +``` +{{}} +{{}} +{{}} +``` + +Result: + +{{< badge content="info" type="info" >}}   +{{< badge content="warning" type="warning" >}}   +{{< badge content="error" type="error" >}} + +With link: + +``` +{{}} +``` + +Result: + +{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}} + + ## YouTube Embed a YouTube video. diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index c1429ece..2d498b3a 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -209,6 +209,7 @@ "group-hover:hx-underline", "group-open:before:hx-rotate-90", "hamburger-menu", + "hextra-badge", "hextra-card", "hextra-card-icon", "hextra-card-image", @@ -464,6 +465,7 @@ "hx-sticky", "hx-text-2xl", "hx-text-4xl", + "hx-text-[.65rem]", "hx-text-[10px]", "hx-text-[color:hsl(var(--primary-hue),100%,50%)]", "hx-text-base", @@ -488,7 +490,6 @@ "hx-text-white", "hx-text-xl", "hx-text-xs", - "hx-text-xxs", "hx-text-yellow-900", "hx-to-gray-600", "hx-top-0", diff --git a/layouts/partials/shortcodes/badge.html b/layouts/partials/shortcodes/badge.html new file mode 100644 index 00000000..3e249d76 --- /dev/null +++ b/layouts/partials/shortcodes/badge.html @@ -0,0 +1,16 @@ +{{- $content := .content -}} +{{- $type := .type -}} +{{- $class := .class | default "" -}} +{{- $border := .border | default false -}} + +{{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}} +{{- $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" -}} +{{- $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" -}} +{{- $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" -}} + +{{- $borderClass := cond (eq $border true) "hx-border" "" -}} +{{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}} +
+
{{- $content -}}
+
+{{- /* Strip trailing newline. */ -}} diff --git a/layouts/partials/shortcodes/card.html b/layouts/partials/shortcodes/card.html index 3bbe1517..894cda9d 100644 --- a/layouts/partials/shortcodes/card.html +++ b/layouts/partials/shortcodes/card.html @@ -54,15 +54,13 @@ {{- end -}} {{- if $tag }} - {{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-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" }} - {{ $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" }} - {{ $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" }} - - {{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }} -
- {{ $tag }} -
+ {{- partial "shortcodes/badge.html" (dict + "content" $tag + "type" $tagType + "class" "hextra-card-tag" + "border" true + ) + -}} {{- end -}} {{- /* Strip trailing newline. */ -}} diff --git a/layouts/shortcodes/badge.html b/layouts/shortcodes/badge.html new file mode 100644 index 00000000..e09e05db --- /dev/null +++ b/layouts/shortcodes/badge.html @@ -0,0 +1,33 @@ +{{- if .IsNamedParams -}} + {{- $content := .Get "content" -}} + {{- $type := .Get "type" | default "" -}} + {{- $class := .Get "class" | default "" -}} + {{- $link := .Get "link" | default "" -}} + + {{- if $link -}} + + {{- partial "shortcodes/badge.html" (dict + "content" $content + "type" $type + "class" $class + "border" true + ) + -}} + + {{- else -}} + {{- partial "shortcodes/badge.html" (dict + "content" $content + "type" $type + "class" $class + "border" true + ) + -}} + {{- end -}} +{{- else -}} + {{- $content := .Get 0 -}} + {{- partial "shortcodes/badge.html" (dict + "content" $content + "border" true + ) + -}} +{{- end -}} \ No newline at end of file