Help:Shortcode GitLab Label

Use GitLab Labels as badges in a page.

GitLab Label
Shortcode
Description
TypeHTML Shortcode
Nested?false
Shortcodegitlab_label
Return TypeHTML
Short Description
Display value or key-value-pair badge, which look like a GitLab lable.
Development
MaintainerMichael Sasser

With the gitlab_label shortcode you can create labels which can be linked to the GitLab issue list. They look exactly like the labels used in GitLab.

Besides some presets, labels are not hard-coded to this project, our group or any subgroup on Gitlab. This makes them more flexible. On the other hand, they need more information when they are linked.

For example our group has the URL https://gitlab.com/matrixpython. The label needs an id parameter which is matrixpython.

This website has the URL https://gitlab.com/matrixpython/website. The label needs an id label, which is matrixpython/website.

To make it easier for our common triage process labels, we check the name of the label (label) against a hashtable. If the label is in found, the color of the label and the id is automatically set/overwritten and linked to the issue list. The hashtable is hard-coded in the shortcodes code.

Our triage process labels can be found in the eponymous documentation.

Help:Triage Process
How we handle issues and use GitLab labels.

Parameters

The GitLab Label shortcode has the following parameters:

ParameterDescription
labelThe label syntax used on GitLab
colorSet a color to the label
idThe part of the URL with is used to identify the project, group or subgroup. For example matrixpython/website for the website project
inlineWhen true the label is rendered smaller for inline use

Examples

This example creates three arbitrary labels.

{{< gitlab_label label="labelName" color="#3399cc" >}}

{{< gitlab_label label="another::scope" color="#aa3300" >}}

<!-- The default color is #aa0000 -->

{{< gitlab_label label="defaultColor" >}}
Rendered
labelName anotherscope defaultColor

The following example uses a label which is a, common in our triage process. Additional information, such as the color, id and whether they are linked to the issue list are overwritten by a hashmap in the shortcodes code.

The last example shows how labels can be used inline.

{{< gitlab_label label="Exception::Release Blocker" >}}

{{< gitlab_label label="Exception::Release Blocker" color="#aa3300" >}}

{{< gitlab_label label="Exception::Release Blocker" color="#3399cc" id="foo" >}}

<br /><br />
An inline {{< gitlab_label label="Exception::Release Blocker" inline=true >}} example.
Rendered
ExceptionRelease Blocker ExceptionRelease Blocker ExceptionRelease Blocker

An inline ExceptionRelease Blocker example.

Maintainer labels will only be linked, when a id is given, except for group labels. They default to the id matrixpython. The color is automatically overwritten.

<!-- A maintainer group label, the id defaults to our group -->
{{< gitlab_label label="G-Does Not Exist" >}}

<!-- A maintainer subgroup label, no id is given, not linked -->
{{< gitlab_label label="S-Does Not Exist Either" >}}

<!-- A maintainer project label, where the id is given, so it will be linked -->
{{< gitlab_label label="P-foo" id="matrixpython/website" >}}
Rendered
G-Does Not Exist S-Does Not Exist Either P-foo

Code

Below you find the implementation of the shortcode.

HTML

Defined in layouts/shortcodes/gitlab_label.html.

This code is licensed under the MIT license.
<!--

  Gitlab_Label Shortcode
  ======================

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

  LAYOUT: /layouts/shortcodes/gitlab_label.html
  STYLE:  /assets/scss/components/_shortcode_gitlab_label.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_GitLab_Label.md

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

  Use the gitlab_label shortcode to create a value or key-value-pair badge,
  which look like a GitLab lable.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

{{- $label := .Get "label" -}}
{{- $color := .Get "color" | default "#aa0000" -}}
{{- $id := .Get "id" | default "" -}}
{{- $inline := .Get "inline" | default false -}}

{{- $labels := split $label "::" -}}
{{- $last_element := sub (len $labels) 1 -}}

<!-- Decide which kind of link will be used -->
{{- $is_group := eq (len (split $id "/")) 0 -}}

<!--
  This dictionary defines well known labels, which predefines how it will
  look like
-->
{{- $well_known := dict
  "Type::Enhancement"           (dict "color" "#009966"   "url" "matrixpython")
  "Type::Defect"                (dict "color" "#009966"   "url" "matrixpython")
  "Type::Task"                  (dict "color" "#009966"   "url" "matrixpython")
  "Type::Other"                 (dict "color" "#009966"   "url" "matrixpython")

  "Severity::Critical"          (dict "color" "#8B0000"   "url" "matrixpython")
  "Severity::Major"             (dict "color" "#ff0000"   "url" "matrixpython")
  "Severity::Minor"             (dict "color" "#ed9121"   "url" "matrixpython")
  "Severity::Tolerable"         (dict "color" "#745E00"   "url" "matrixpython")

  "Security::Vulnerability"     (dict "color" "#8B0000"   "url" "matrixpython")
  "Security::Potential"         (dict "color" "#8B0000"   "url" "matrixpython")

  "Difficulty::Easy"            (dict "color" "#00b140"   "url" "matrixpython")
  "Difficulty::Medium"          (dict "color" "#00b140"   "url" "matrixpython")
  "Difficulty::Hard"            (dict "color" "#00b140"   "url" "matrixpython")

  "Exception"                   (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Needs Discussion" (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Needs Info"       (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Release Blocker"  (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Awaiting Changes" (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Cannot Reproduce" (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Help Needed"      (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Help Wanted"      (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Upstream"         (dict "color" "#330066"   "url" "matrixpython")
  "Exception::Other"            (dict "color" "#330066"   "url" "matrixpython")

  "Good First Issue"            (dict "color" "#0000ff"   "url" "matrixpython")
  "Bot"                         (dict "color" "#0000ff"   "url" "matrixpython")
  "Dependency"                  (dict "color" "#38587A"   "url" "matrixpython")
  "Future Task"                 (dict "color" "#cc338b"   "url" "matrixpython")

  "Exception::Hugo"             (dict "color" "#330066"   "url" "matrixpython")
  "Type::Enhancement"           (dict "color" "#009966"   "url" "matrixpython")

  "Component"                   (dict "color" "#6699cc"   "url" "matrixpython/website")
  "Component::Wiki"             (dict "color" "#6699cc"   "url" "matrixpython/website")
  "Component::Docs"             (dict "color" "#6699cc"   "url" "matrixpython/website")
  "Component::Blog"             (dict "color" "#6699cc"   "url" "matrixpython/website")
  "Component::Other"            (dict "color" "#6699cc"   "url" "matrixpython/website")

  "Content"                     (dict "color" "#38587A"   "url" "matrixpython/website")
  "Content::Wiki"               (dict "color" "#38587A"   "url" "matrixpython/website")
  "Content::Help"               (dict "color" "#38587A"   "url" "matrixpython/website")
  "Content::Docs"               (dict "color" "#38587A"   "url" "matrixpython/website")
  "Content::Blog"               (dict "color" "#38587A"   "url" "matrixpython/website")
  "Content::Other"              (dict "color" "#38587A"   "url" "matrixpython/website")
-}}

{{- $linked := false -}}

<!-- Overwrite values of labels which are well-known -->
{{- range $key, $value := $well_known -}}
  {{- if eq $label $key -}}
    {{- $color = index $value "color" -}}
    {{- $id = index $value "url" -}}
    {{- $linked = true -}}
  {{- end -}}
{{- end -}}


<!-- Overwrite values of labels which are maintainer labels -->
{{- if hasPrefix $label "G-" -}} <!-- Group label-->
  {{- $color = "#255947" -}}
  {{- if eq $id "" -}}
    {{- $id = "matrixpython" -}}
    {{- $linked = true -}}
  {{- end -}}
{{- else if hasPrefix $label "S-" -}} <!-- Subgroup label-->
  {{- $color = "#1D3E32" -}}
{{- else if hasPrefix $label "P-" -}} <!-- Project label-->
  {{- $color = "#162E26" -}}
{{- end -}}

{{- if and (eq $id "") (eq $linked true) -}}
  {{- errorf "Failed to process gitlab_label shortcode: %s. An non-well-known and non-group label cannot be without an \"id\". An example for an project level \"id\" might look like \"matrixpython/website\"." $.Position -}}
{{- else if and (ne $id "") (eq $linked false) -}}
  {{- $linked = true -}}
{{- end -}}

<!--
  Hazard: if there is only one element, the last element is the first element
-->
{{- $label_scope := (index $labels $last_element) -}}

<!--
  If there is no scope (last element is 0) clear the string inside the scope
-->
{{- if eq $last_element 0 -}}
  {{- $label_scope = "" -}}
{{- end -}}


<!--
  Split elements into a slice without the last one, except there is only one,
  and combine them into a string with the "::" delimiter for nested,
  scoped labels.
  Store the string in the variable the slice was, since we do not need it
  anymore.
-->
{{- $label_text := slice -}}
{{- range $idx, $element := $labels -}}
  {{- if or (ne $idx $last_element) (eq $last_element 0) -}}
    {{- $label_text = $label_text | append . -}}
  {{- end -}}
{{- end -}}
{{- $label_text = delimit $label_text "::" -}}

<!-- The label name at the end of the url -->
{{- $link_label_name_ext := (delimit $labels "::") | safeURL -}}


{{/*
<!-- Uncomment to show debug output on website -->
  <br />
  <h4>Debug: GitLab label</h4>
  labels: {{ $labels }} <br />
  label_length: {{ $last_element }} <br />
  label_text: {{ $label_text }} <br />
  scope: {{ $label_scope }} <br />
  link: {{ $link_label_name_ext }} <br />
  <br />
*/}}

{{- if eq $label_text ""  -}}
  {{- errorf "Failed to process gitlab_label shortcode: %s. The label cannot be empty." $.Position -}}
{{- end -}}


<!-- TODO: Add link option -->
<!-- https://gitlab.com/matrixpython/website/-/merge_requests?scope=all&state=opened&label_name[]={{- $label_text -}}{{- with $label_scope -}}%3A%3A{{- . -}}{{- end -}} -->

<span
  class="gl-label {{ if $inline -}}gl-label-sm{{- end }} gl-label-scoped"
  style="--label-inset-border: inset 0 0 0 2px {{ $color -}}; color: {{ $color -}}"
  >
  {{- if $linked -}}
    <a
      {{- if $is_group }}
      href="https://gitlab.com/groups/{{- $id -}}/-/issues?scope=all&state=opened&label_name[]={{- $link_label_name_ext -}}"
      {{- else }}
      href="https://gitlab.com/{{- $id -}}/-/issues?scope=all&state=opened&label_name[]={{- $link_label_name_ext -}}"
      {{- end }}
      class="stretched-link"
      target="_blank"
      rel="noopener noreferrer"
    >
    </a>
  {{- end -}}
  <span
    class="gl-label-text gl-label-text-light"
    data-container="body"
    data-html="true"
    style="background-color: {{ $color -}}"
  >
    {{- $label_text -}}
  </span>
  {{- with $label_scope -}}
  <span class="gl-label-text-scoped" data-container="body" data-html="true">
    {{- . -}}
  </span>
  {{- end -}}
</span>

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • GitLab Label Shortcode
    gitlab_label.html7.96 KB
  • md5   7395b2606297f19ce24fe0ad461205f2
  • sha1   a8923e031ee2b559ca0bba5ce38a4f8154d25c7f
  • sha256   8f81eddaddab899505b697258cd56d0a23408a5e5e7161f8ae82b9a6308e3ba0

SASS

Defined in: /assets/scss/components/_shortcode_gitlab_label.scss

This code is licensed under the MIT license.
/*

  Gitlab_Label Shortcode
  ======================

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

  LAYOUT: /layouts/shortcodes/gitlab_label.html
  STYLE:  /assets/scss/components/_shortcode_gitlab_label.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_GitLab_Label.md

*/

.gl-label {
  background-color: $body-bg;
  overflow: hidden;
  display: inline-flex;
  border-radius: 0.75rem;
  position: relative;
  max-width: 100%;
  font-size: 0.875rem;
  box-shadow: var(--label-inset-border) !important;
  vertical-align: bottom !important;
}

.gl-label-text-light.gl-label-text-light {
  color: $white;
}

.gl-label-scoped .gl-label-text-scoped {
  color: $body-color;
  padding-left: 0.25rem;
  padding-right: 0.5rem;
}

.gl-label .gl-label-text,
.gl-label .gl-label-text-scoped {
  display: block;
  padding: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.gl-label-sm .gl-label-text,
.gl-label-sm .gl-label-text-scoped {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@include color-mode(dark) {
  body .gl-label-scoped .gl-label-text-scoped {
    color: $white;
  }

  body .gl-label {
    background-color: $body-bg-dark;
  }
}

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • Gitlab Label Style
    _shortcode_gitlab_label.scss1.35 KB
  • md5   fe1af3cc4793cd0b0e911a05b66cef78
  • sha1   58b4ffa57ad8b056dbc9798ec3403a306cbb2b77
  • sha256   984b364602813e916d03cb69ebf588d2108145677b5d6bed5ee23d716df6144f
Top