Skip to content

MkBadge

Show source on GitHub

Node for a locally-created badge (based on "anybadge").

Description

The node creates a badge svg, appends it to the virtual files, and shows it as an image.

Example: Regular

Jinja

{{ ("Some", "Badge") | MkBadge }}

Python

MkBadge('Some', 'Badge')

Some Some Badge Badge

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_17">        <rect width="86" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_17)">        <path fill="#555" d="M0 0h41v20H0z"/>        <path fill="#4051b5" d="M41 0h45v20H41z"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="21.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="20.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="64.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="63.5" y="14">Badge</text>    </g></svg></body>
<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_18">        <rect width="86" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_18)">        <path fill="#555" d="M0 0h41v20H0z"/>        <path fill="#4c1" d="M41 0h45v20H41z"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="21.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="20.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="64.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="63.5" y="14">Badge</text>    </g></svg></body>

Example: Font size

Jinja

{{ ("Some", "Badge") | MkBadge(font_size=12) }}

Python

MkBadge('Some', 'Badge', font_size=12)

Some Some Badge Badge

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_19">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_19)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4051b5" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>
<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_20">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_20)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4c1" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

Example: Char padding

Jinja

{{ ("Some", "Badge") | MkBadge(num_padding_chars=5) }}

Python

MkBadge('Some', 'Badge', num_padding_chars=5)

Some Some Badge Badge

<body><svg xmlns="http://www.w3.org/2000/svg" width="266" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_21">        <rect width="266" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_21)">        <path fill="#555" d="M0 0h131v20H0z"/>        <path fill="#4051b5" d="M131 0h135v20H131z"/>        <path fill="url(#b)" d="M0 0h266v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="66.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="65.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="199.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="198.5" y="14">Badge</text>    </g></svg></body>
<body><svg xmlns="http://www.w3.org/2000/svg" width="266" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_22">        <rect width="266" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_22)">        <path fill="#555" d="M0 0h131v20H0z"/>        <path fill="#4c1" d="M131 0h135v20H131z"/>        <path fill="url(#b)" d="M0 0h266v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="66.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="65.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="199.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="198.5" y="14">Badge</text>    </g></svg></body>

Example: Badge color

Jinja

{{ ("Some", "Badge") | MkBadge(font_size=12) }}

Python

MkBadge('Some', 'Badge', font_size=12)

Some Some Badge Badge

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_19">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_19)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4051b5" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>
<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_20">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_20)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4c1" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

Example: GitLab style

Jinja

{{ ("Some", "Badge") | MkBadge(use_gitlab_style=True) }}

Python

MkBadge('Some', 'Badge', use_gitlab_style=True)

Some Badge

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_23">        <rect width="86" height="20" rx="10" fill="#fff"/>    </mask>    <g mask="url(#anybadge_23)">        <path fill="#4051b5" d="M0 0h86v20H0z"/>        <path fill="#262626" d="M41 2h36v16H41z"/>        <path fill="#262626" d="M76,18 a1,1 0 0,0 0,-16"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="20.5" y="14">Some</text>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="63.5" y="14">Badge</text>    </g></svg></body>
<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_24">        <rect width="86" height="20" rx="10" fill="#fff"/>    </mask>    <g mask="url(#anybadge_24)">        <path fill="#4c1" d="M0 0h86v20H0z"/>        <path fill="#262626" d="M41 2h36v16H41z"/>        <path fill="#262626" d="M76,18 a1,1 0 0,0 0,-16"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="20.5" y="14">Some</text>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="63.5" y="14">Badge</text>    </g></svg></body>

Bases: MkImage

__init__

__init__(
    label: str | tuple[str, str],
    value: str | None = None,
    *,
    font_size: Literal[10, 11, 12] | None = None,
    font_name: str | None = None,
    num_padding_chars: int | None = None,
    badge_color: str | None = None,
    text_color: str | None = None,
    use_gitlab_style: bool = False,
    **kwargs: Any
)

Parameters:

Name Type Description Default
label str | tuple[str, str]

Left part of the badge. If given a tuple, use 2nd item as value.

required
value str | None

Right part of the badge

None
font_size Literal[10, 11, 12] | None

Size of font to use

None
font_name str | None

Name of font to use

None
num_padding_chars int | None

Number of chars to use for padding

None
badge_color str | None

Badge color

None
text_color str | None

Badge color

None
use_gitlab_style bool

Use Gitlab-scope style

False
kwargs Any

Keyword arguments passed to parent

{}
Name Children Inherits
MkImage
mknodes.basenodes.mkimage
Image including optional caption.
graph TD
  94721312519520["mkbadge.MkBadge"]
  94721307729824["mkimage.MkImage"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721307729824 --> 94721312519520
  94721308848336 --> 94721307729824
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592
/home/runner/work/mknodes/mknodes/mknodes/templatenodes/mkbadge/metadata.toml
[metadata]
icon = "simple-icons:shieldsdotio"
name = "MkBadge"
group = "badge"

[requirements.package.anybadge]

[examples.regular]
title = "Regular"
jinja = """
{{ ("Some", "Badge") | MkBadge }}
"""

[examples.font_size]
title = "Font size"
jinja = """
{{ ("Some", "Badge") | MkBadge(font_size=12) }}
"""

[examples.char_padding]
title = "Char padding"
jinja = """
{{ ("Some", "Badge") | MkBadge(num_padding_chars=5) }}
"""

[examples.badge_color]
title = "Badge color"
jinja = """
{{ ("Some", "Badge") | MkBadge(font_size=12) }}
"""

[examples.gitlab_style]
title = "GitLab style"
jinja = """
{{ ("Some", "Badge") | MkBadge(use_gitlab_style=True) }}
"""

[output.html]
template = """
<body>{{ node.data | replace("\n", "") | html_link(node.url) }}</body>
"""
mknodes.templatenodes.mkbadge.MkBadge
class MkBadge(mkimage.MkImage):
    """Node for a locally-created badge (based on "anybadge").

    The node creates a badge svg, appends it to the virtual files, and
    shows it as an image.
    """

    ICON = "simple/shieldsdotio"
    REQUIRED_PACKAGES = [resources.Package("anybadge")]

    def __init__(
        self,
        label: str | tuple[str, str],
        value: str | None = None,
        *,
        font_size: Literal[10, 11, 12] | None = None,
        font_name: str | None = None,
        num_padding_chars: int | None = None,
        badge_color: str | None = None,
        text_color: str | None = None,
        use_gitlab_style: bool = False,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            label: Left part of the badge. If given a tuple, use 2nd item as value.
            value: Right part of the badge
            font_size: Size of font to use
            font_name: Name of font to use
            num_padding_chars: Number of chars to use for padding
            badge_color: Badge color
            text_color: Badge color
            use_gitlab_style: Use Gitlab-scope style
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("", **kwargs)
        if isinstance(label, tuple):
            self.label, self.value = label
        else:
            self.label = label
            self.value = value
        self.font_size = font_size
        self.font_name = font_name
        self.num_padding_chars = num_padding_chars
        self._badge_color = badge_color
        self._text_color = text_color
        self.use_gitlab_style = use_gitlab_style

    @property
    def badge_color(self) -> str | None:
        if isinstance(self._badge_color, str):
            return self._badge_color
        return self.ctx.theme.primary_color

    def _to_markdown(self):
        inner = htmlfilters.html_link(self.data.replace("\n", ""), self.url)
        return f"<body>{inner}</body>"

    @property
    def text_color(self) -> str | None:
        if isinstance(self._text_color, str):
            return self._text_color
        color = self.ctx.theme.text_color
        return f"{color},#fff" if self.use_gitlab_style else f"#fff,{color}"

    @property
    def data(self) -> str:
        return get_badge(
            label=self.label,
            value=self.value,
            font_size=self.font_size,
            font_name=self.font_name,
            num_padding_chars=self.num_padding_chars,
            badge_color=self.badge_color,
            text_color=self.text_color,
            use_gitlab_style=self.use_gitlab_style,
        )

    @property
    def path(self) -> str:
        hashed = utils.get_hash(repr(self))
        unique = f"{self.label}_{self.value}_{hashed}.svg"
        return textfilters.slugify(unique)