Help:Shortcode Badge

{{< badge title="foo" shape="rounded" type="primary" >}}
{{< badge title="bar" >}}

<!--

  Badge Shortcode
  ===============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/badge.html
  STYLE:  /assets/scss/components/_shortcode_badge.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Badge.md

  Description
  -----------

  Create a badge.

  Changelog
  =========

  Version 1 (2022-11-17)
  ----------------------

  Initial release

-->

{{- $title := .Get "title" -}}
{{- $type := .Get "type" | default "primary" -}}
{{- $shape := .Get "shape" | default "rounded" -}}

{{- $types_possible := slice "primary" "secondary" "success" "danger" "warning" -}}
{{- $shapes_possible := slice "rounded" "square" "pill" -}}

{{- if not $title -}}
  {{- errorf "Failed to process badge shortcode: %s. The shortcode needs a title" $.Position -}}
{{- end -}}

{{- if not (in $types_possible $type) -}}
  {{- errorf "Failed to process badge shortcode: %s. Only %s are valid types." $.Position  (delimit ($types_possible) ", ") -}}
{{- end -}}

{{- if not (in $shapes_possible $shape) -}}
  {{- errorf "Failed to process badge shortcode: %s. Only %s are valid shapes." $.Position  (delimit ($shapes_possible) ", ") -}}
{{- end -}}


<span class="badge badge-{{- $type }} badge-{{- $shape }}">{{- $title -}}</span>

/*
  Badge Shortcode
  ===============

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/badge.html
  STYLE:  /assets/scss/components/_shortcode_badge.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Badge.md

*/

/* Variants */
.badge-primary {
  color: darken($primary, 35%);
  background: lighten($primary, 30%);
}

.badge-secondary {
  color: darken($secondary, 40%);
  background: lighten($secondary, 45%);
}

.badge-danger {
  color: darken($danger, 35%);
  background: lighten($danger, 30%);
}

.badge-warning {
  color: darken($warning, 35%);
  background: lighten($warning, 30%);
}

.badge-success {
  color: darken($success, 20%);
  background: lighten($success, 30%);
}

/* Shapes */
.badge-rounded {
  border-radius: 3px;
}

.badge-pill {
  border-radius: 25px;
}

.badge-square {
  border-radius: 0;
}