Skip to content

MkCompactAdmonition

Show source on GitHub

Compact admonition info box.

Example: Types

Jinja

{% for typ in ["info", "warning", "bug"] %}
{{ "Different types." | MkCompactAdmonition(typ=typ) }}
{% endfor %}

Python

MkContainer(
    [
        MkCompactAdmonition("Different types."),
        MkCompactAdmonition("Different types.", typ="warning"),
        MkCompactAdmonition("Different types.", typ="bug"),
    ]
)

Different types.

Different types.

Different types.

<div class="mdx-grid-wrapper mdx-admo--info">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

<div class="mdx-grid-wrapper mdx-admo--warning">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

<div class="mdx-grid-wrapper mdx-admo--bug">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

<div class="mdx-grid-wrapper mdx-admo--info">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

<div class="mdx-grid-wrapper mdx-admo--warning">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

<div class="mdx-grid-wrapper mdx-admo--bug">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">Different types.</div>
</div>

MkContainer
├── MkCompactAdmonition('Different types.')
├── MkCompactAdmonition('Different types.', typ='warning')
╰── MkCompactAdmonition('Different types.', typ='bug')

Bases: MkNode

__init__ 

__init__(text: str | MkNode, *, typ: AdmonitionTypeStr | str = 'info', **kwargs: Any)

Parameters:

Name Type Description Default
text str | MkNode

Admonition text

 required
typ AdmonitionTypeStr | str

Admonition type

 'info'
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkNode
mknodes.basenodes.mknode
Base class for everything which can be expressed as Markup.		 
graph TD
  94721308062864["mkcompactadmonition.MkCompactAdmonition"]
  94721308848336["mknode.MkNode"]
  94721311766592["node.Node"]
  140564252373184["builtins.object"]
  94721308848336 --> 94721308062864
  94721311766592 --> 94721308848336
  140564252373184 --> 94721311766592
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkcompactadmonition/metadata.toml
[metadata]
icon = "octicon:info-16"
status = "new"
name = "MkCompactAdmonition"

[[resources.css]]
filename = "compactadmonition.css"
content = """
{% set admon = file.admonitions[node.typ] %}
:root {
    --md-badge-fg--{{ node.typ }}: {{ admon.header_color }};
    --md-badge-bg--{{ node.typ }}: {{ admon.header_color }}1a;
    --badge-icon--{{ node.typ }}: {{ admon.icon | get_icon_svg | svg_to_data_uri }};
}

.mdx-grid-wrapper {
    display: grid;
    grid-template-columns: .5fr 9fr;
    gap: 1rem;

    border: .075rem solid #448aff;
    border-radius: .2rem;
}

.mdx-grid-child {
    align-self: center;
    font-size: .64rem;
}

.mdx-grid-child.mdx-grid-child--icon {
    background-color: "#448aff1a";
}

.mdx-grid-child.mdx-grid-child--icon::before {
    content: "";

    background-color: "#448aff";

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    height: 1rem;
    width: 1rem;

    margin: .4rem;

    display: block;

    -webkit-mask-image: var(--badge-icon--note);
    mask-image: var(--badge-icon--note);
}

.mdx-admo--{{ node.typ }} {
    border-color: var(--md-badge-fg--{{ node.typ }});
}

.mdx-admo--{{ node.typ }} .mdx-grid-child--icon {
    background-color: var(--md-badge-bg--{{ node.typ }});
}

.mdx-admo--{{ node.typ }} .mdx-grid-child--icon::before {
    background-color: var(--md-badge-fg--{{ node.typ }});

    -webkit-mask-image: var(--badge-icon--{{ node.typ }});
            mask-image: var(--badge-icon--{{ node.typ }});
}
"""

[examples.types]
title = "Types"
jinja = """
{% for typ in ["info", "warning", "bug"] %}
{{ "Different types." | MkCompactAdmonition(typ=typ) }}
{% endfor %}
"""

[output.html]
template = """
<div class="mdx-grid-wrapper{{ node.typ | add(prefix=" mdx-admo--") }}">
  <div class="mdx-grid-child mdx-grid-child--icon"></div>
  <div class="mdx-grid-child">{{ node.text }}</div>
</div>
"""

[admonitions]
note = {icon="mdi:pencil-circle", header_color="#448aff"}
abstract = {icon="mdi:clipboard-text", header_color="#00b0ff"}
info = {icon="mdi:information", header_color="#00b8d4"}
tip = {icon="mdi:fire", header_color="#00bfa5"}
success = {icon="mdi:check", header_color="#00c853"}
question = {icon="mdi:help-circle", header_color="#64dd17"}
warning = {icon="mdi:alert", header_color="#ff9100"}
failure = {icon="mdi:close", header_color="#ff5252"}
danger = {icon="mdi:lightning-bolt-circle", header_color="#ff1744"}
bug = {icon="mdi:shield-bug", header_color="#f50057"}
example = {icon="mdi:test-tube", header_color="#7c4dff"}
quote = {icon="mdi:format-quote-close", header_color="#9e9e9e"}
mknodes.basenodes.mkcompactadmonition.MkCompactAdmonition
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class MkCompactAdmonition(mknode.MkNode):
    """Compact admonition info box."""

    ICON = "octicons/info-16"
    CSS = [resources.CSSFile("compactadmonition.css")]

    def __init__(
        self,
        text: str | mknode.MkNode,
        *,
        typ: datatypes.AdmonitionTypeStr | str = "info",
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            text: Admonition text
            typ: Admonition type
            kwargs: Keyword arguments passed to parent
        """
        self.text = text
        self.typ = typ
        super().__init__(**kwargs)

    def _to_markdown(self) -> str:
        kls = f"mdx-grid-wrapper mdx-admo--{self.typ}" if self.typ else "mdx-grid-wrapper"
        root = xmlhelpers.Div(kls)
        xmlhelpers.Div("mdx-grid-child mdx-grid-child--icon", parent=root)
        text_div = xmlhelpers.Div("mdx-grid-child", parent=root)
        text_div.text = str(self.text)
        return root.to_string()