From 470d619e1dd4160ec7063e5d8f78925ffd2d3163 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Mon, 4 Aug 2025 01:17:28 +0200 Subject: [PATCH] Introduce Badge shortcode --- assets/_defaults.scss | 16 ++----- assets/_shortcodes.scss | 46 ++++++++++++++++--- .../content.en/docs/shortcodes/badges.md | 29 ++++++++++++ .../content.en/docs/shortcodes/hints.md | 17 +++++-- layouts/_shortcodes/badge.html | 12 +++++ layouts/_shortcodes/hint.html | 2 +- 6 files changed, 101 insertions(+), 21 deletions(-) create mode 100644 exampleSite/content.en/docs/shortcodes/badges.md create mode 100644 layouts/_shortcodes/badge.html diff --git a/assets/_defaults.scss b/assets/_defaults.scss index 96c4d84..8a4f01d 100644 --- a/assets/_defaults.scss +++ b/assets/_defaults.scss @@ -22,9 +22,11 @@ $toc-width: 16rem !default; $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default; $hint-colors: ( - info: #6bf, - warning: #fd6, - danger: #f66, + default: #64748b, + info: #4486dd, + success: #3bad3b, + warning: #f59e42, + danger: #d84747, ) !default; // Themes @@ -40,10 +42,6 @@ $hint-colors: ( --body-font-color: black; --icon-filter: none; - - --hint-color-info: #6bf; - --hint-color-warning: #fd6; - --hint-color-danger: #f66; } @mixin theme-dark { @@ -58,8 +56,4 @@ $hint-colors: ( --body-font-color: #e9ecef; --icon-filter: brightness(0) invert(1); - - --hint-color-info: #6bf; - --hint-color-warning: #fd6; - --hint-color-danger: #f66; } diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index 41a8e3e..99ecec4 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -1,4 +1,5 @@ .markdown { + // {{< expand "Label" "icon" >}} .book-expand { margin-top: $padding-16; @@ -20,7 +21,7 @@ padding: $padding-16; } - input[type="checkbox"]:checked + .book-expand-content { + input[type="checkbox"]:checked+.book-expand-content { display: block; } } @@ -53,13 +54,15 @@ display: none; } - input[type="radio"]:checked + label { + input[type="radio"]:checked+label { border-bottom: $padding-1 solid var(--color-link); } - input[type="radio"]:checked + label + .book-tabs-content { + + input[type="radio"]:checked+label+.book-tabs-content { display: block; } - input[type="radio"]:focus + label { + + input[type="radio"]:focus+label { @include outline; } } @@ -69,7 +72,7 @@ margin-left: -$padding-16; margin-right: -$padding-16; - > div { + >div { margin: $padding-16 0; min-width: $body-min-width * 0.66; padding: 0 $padding-16; @@ -101,4 +104,35 @@ } } } -} + + // {{< badge >}} + .book-badge { + display: inline-block; + font-size: $font-size-14; + vertical-align: middle; + border-radius: $border-radius; + overflow: hidden; + text-wrap: nowrap; + color: var(--color-text); + + span { + display: inline-block; + padding: 0 $padding-8; + } + + span.book-badge-title { + background-color: var(--body-background); + opacity: 0.9; + } + + span.book-badge-value { + color: var(--body-background); + } + + @each $name, $color in $hint-colors { + &.#{$name} { + background-color: $color; + } + } + } +} \ No newline at end of file diff --git a/exampleSite/content.en/docs/shortcodes/badges.md b/exampleSite/content.en/docs/shortcodes/badges.md new file mode 100644 index 0000000..9ce552a --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/badges.md @@ -0,0 +1,29 @@ +# Badges + +{{< badge title="Title" value="Value" >}} +{{< badge style="info" title="Hugo" value="0.147.6" >}} +{{< badge style="success" title="Build" value="Passing" >}} +{{< badge style="warning" title="Coverage" value="25%" >}} +{{< badge style="danger" title="Issues" value="120" >}} + +Badges can be used to annotate your pages with additional information or mark specific places in markdown content. + +## Examples + +| Shortcode | Output | +| -- | -- | +| `{{}}` | {{< badge style="info" title="Hugo" value="0.147.6" >}} | +| `{{}}` | {{< badge style="success" title="Build" value="Passing" >}} | +| `{{}}` | {{< badge style="warning" title="Coverage" value="25%" >}} | +| `{{}}` | {{< badge style="danger" title="Issues" value="120" >}} | +| | | +| `{{}}` | {{< badge style="info" title="Title" >}} | +| `{{}}` | {{< badge style="info" value="Value" >}} | +| `{{}}` | {{< badge value="Default" >}} | + +## Use in links + +A badge can be wrapped in markdown link producing following result: [{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6) +```tpl +[{{}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6) +``` diff --git a/exampleSite/content.en/docs/shortcodes/hints.md b/exampleSite/content.en/docs/shortcodes/hints.md index 961bc05..a7562da 100644 --- a/exampleSite/content.en/docs/shortcodes/hints.md +++ b/exampleSite/content.en/docs/shortcodes/hints.md @@ -1,10 +1,9 @@ # Hints -Hint shortcode can be used as hint/alerts/notification block. -There are 3 colors to choose: `info`, `warning` and `danger`. +Hint shortcode can be used as a hint/alert/notification block. ```tpl -{{%/* hint [info|warning|danger] */%}} +{{%/* hint [info|success|warning|danger] */%}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa @@ -13,12 +12,24 @@ stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa ## Example +{{% hint %}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{% /hint %}} + {{% hint info %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} +{{% hint success %}} +**Markdown content** +Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat +stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa +{{% /hint %}} + {{% hint warning %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat diff --git a/layouts/_shortcodes/badge.html b/layouts/_shortcodes/badge.html new file mode 100644 index 0000000..0d4eed6 --- /dev/null +++ b/layouts/_shortcodes/badge.html @@ -0,0 +1,12 @@ +{{- $style := default "default" (.Get "style") -}} +{{- if .Get "href" }} + + {{- with .Get "title" }}{{ . | plainify }}{{ end -}} + {{- with .Get "value" }}{{ . | plainify }}{{ end -}} + +{{ else }} + + {{- with .Get "title" }}{{ . | plainify }}{{ end -}} + {{- with .Get "value" }}{{ . | plainify }}{{ end -}} + +{{ end -}} \ No newline at end of file diff --git a/layouts/_shortcodes/hint.html b/layouts/_shortcodes/hint.html index 95e4f83..a71f1fd 100644 --- a/layouts/_shortcodes/hint.html +++ b/layouts/_shortcodes/hint.html @@ -1,3 +1,3 @@ -
+
{{ .Inner | safeHTML }}