Help:Shortcode GitLab Label
Use GitLab Labels as badges in a page.
On this page
On this page
Shortcode | |
Description | |
---|---|
Type | HTML Shortcode |
Nested? | false |
Shortcode | gitlab_label |
Return Type | HTML |
Short Description Display value or key-value-pair badge, which look like a GitLab lable. | |
Development | |
Maintainer | Michael 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.
Parameters
The GitLab Label shortcode has the following parameters:
Parameter | Description |
---|---|
label | The label syntax used on GitLab |
color | Set a color to the label |
id | The part of the URL with is used to identify the project, group or subgroup. For example matrixpython/website for the website project |
inline | When 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" >}}
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.
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" >}}
Code
Below you find the implementation of the shortcode.
HTML
Defined in layouts/shortcodes/gitlab_label.html
.
<!--
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.html ❘ 7.96 KB
- md5 7395b2606297f19ce24fe0ad461205f2
- sha1 a8923e031ee2b559ca0bba5ce38a4f8154d25c7f
- sha256 8f81eddaddab899505b697258cd56d0a23408a5e5e7161f8ae82b9a6308e3ba0
SASS
Defined in: /assets/scss/components/_shortcode_gitlab_label.scss
/*
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.
- _shortcode_gitlab_label.scss ❘ 1.35 KB
- md5 fe1af3cc4793cd0b0e911a05b66cef78
- sha1 58b4ffa57ad8b056dbc9798ec3403a306cbb2b77
- sha256 984b364602813e916d03cb69ebf588d2108145677b5d6bed5ee23d716df6144f
Categories | Contributors |
---|---|
Help, Contribute and Shortcode | Michael Sasser |