Introduce Badge shortcode

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;
 }

assets/_shortcodes.scss

@@ -1,4 +1,5 @@
 .markdown {
+
   // {{< expand "Label" "icon" >}}
   .book-expand {
     margin-top: $padding-16;
@@ -56,9 +57,11 @@
     input[type="radio"]:checked+label {
       border-bottom: $padding-1 solid var(--color-link);
     }
+
     input[type="radio"]:checked+label+.book-tabs-content {
       display: block;
     }
+
     input[type="radio"]:focus+label {
       @include outline;
     }
@@ -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;
+      }
+    }
+  }
 }

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="info" title="Hugo" value="0.147.6" >}}     |
+| `{{</* badge style="success" title="Build" value="Passing" */>}}` | {{< badge style="success" title="Build" value="Passing" >}} |
+| `{{</* badge style="warning" title="Coverage" value="25%" */>}}`  | {{< badge style="warning" title="Coverage" value="25%" >}}  |
+| `{{</* badge style="danger" title="Issues" value="120" */>}}`     | {{< badge style="danger" title="Issues" value="120" >}}     |
+| | |
+| `{{</* badge style="info" title="Title" */>}}`                    | {{< badge style="info" title="Title" >}}                    |
+| `{{</* badge style="info" value="Value" */>}}`                    | {{< badge style="info" value="Value" >}}                    |
+| `{{</* badge title="Default" */>}}`                               | {{< 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
+[{{</* badge title="Hugo" value="0.147.6" */>}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6)
+```

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

layouts/_shortcodes/badge.html

@@ -0,0 +1,12 @@
+{{- $style := default "default" (.Get "style") -}}
+{{- if .Get "href" }}
+<a href="{{ .Get "href" }}" target="_blank" class="book-badge {{ $style }}">
+  {{- with .Get "title" }}<span class="book-badge-title">{{ . | plainify }}</span>{{ end -}}
+  {{- with .Get "value" }}<span class="book-badge-value">{{ . | plainify }}</span>{{ end -}}
+</a>
+{{ else }}
+<span class="book-badge {{ $style }}">
+  {{- with .Get "title" }}<span class="book-badge-title">{{ . | plainify }}</span>{{ end -}}
+  {{- with .Get "value" }}<span class="book-badge-value">{{ . | plainify }}</span>{{ end -}}
+</span>
+{{ end -}}

layouts/_shortcodes/hint.html

@@ -1,3 +1,3 @@
-<blockquote class="book-hint {{ .Get 0 }}">
+<blockquote class="book-hint {{ default "default" (.Get 0) }}">
   {{ .Inner | safeHTML }}
 </blockquote>