Skip to content

Commit

Permalink
misc: Produce extra admonition types with Python script
Browse files Browse the repository at this point in the history
  • Loading branch information
iBug committed Feb 16, 2024
1 parent f234d95 commit 74d2327
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 29 deletions.
7 changes: 5 additions & 2 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,8 @@ all:

css: docs/css/extra.css

docs/css/extra.css: docs/css/extra.scss
sassc -t compact $^ > $@
docs/css/extra.css: docs/css/extra.scss docs/css/admonitions.scss
sassc -t compact $< $@

docs/css/admonitions.scss: scripts/custom-admonitions.py
python3 $<
21 changes: 21 additions & 0 deletions docs/css/admonitions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
:root {
--md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9Z"/></svg>');
}

.md-typeset {
.admonition.comment,
details.comment {
border-color: rgb(43, 155, 70);
}

.comment > .admonition-title,
.comment > summary {
background-color: rgba(43, 155, 70, 0.1);

&::before {
background-color: rgb(43, 155, 70);
-webkit-mask-image: var(--md-admonition-icon--comment);
mask-image: var(--md-admonition-icon--comment);
}
}
}
16 changes: 9 additions & 7 deletions docs/css/extra.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
:root { --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9Z"/></svg>'); }

.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #2b9b46; }

.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(43, 155, 70, 0.1); }

.md-typeset .comment > .admonition-title::before, .md-typeset .comment > summary::before { background-color: #2b9b46; -webkit-mask-image: var(--md-admonition-icon--comment); mask-image: var(--md-admonition-icon--comment); }

.red, .red-important { color: red !important; }

.darkred, .darkred-important { color: darkred !important; }
Expand All @@ -8,7 +16,7 @@

.limegreen, .limegreen-important { color: limegreen !important; }

:root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; --md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9Z"/></svg>'); }
:root { --md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; }

.mermaid { text-align: center; }

Expand Down Expand Up @@ -41,9 +49,3 @@
.md-typeset p.caption { text-align: center; font-size: 0.94em; color: grey; margin: -0.7em 0 0; }

.md-typeset .footnote hr { margin-top: 0.2em; }

.md-typeset .admonition.comment, .md-typeset details.comment { border-color: #2b9b46; }

.md-typeset .comment > .admonition-title, .md-typeset .comment > summary { background-color: rgba(43, 155, 70, 0.1); }

.md-typeset .comment > .admonition-title::before, .md-typeset .comment > summary::before { background-color: #2b9b46; -webkit-mask-image: var(--md-admonition-icon--comment); mask-image: var(--md-admonition-icon--comment); }
23 changes: 3 additions & 20 deletions docs/css/extra.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// Manually compile this file:
//
// sassc -t compact > extra.css
// sassc -t compact extra.scss extra.css

@import "admonitions.scss";

$color-codes: red, darkred, orangered, green, limegreen;
@each $color in $color-codes {
Expand All @@ -11,8 +13,6 @@ $color-codes: red, darkred, orangered, green, limegreen;

:root {
--md-code-font-family: Roboto Mono, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
// https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/templates/.icons/material/comment.svg
--md-admonition-icon--comment: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29H9Z"/></svg>');
}

.mermaid {
Expand Down Expand Up @@ -95,21 +95,4 @@ $color-codes: red, darkred, orangered, green, limegreen;
.footnote hr {
margin-top: 0.2em;
}

.admonition.comment,
details.comment {
border-color: rgb(43, 155, 70);
}

.comment > .admonition-title,
.comment > summary {
background-color: rgba(43, 155, 70, 0.1);
}

.comment > .admonition-title::before,
.comment > summary::before {
background-color: rgb(43, 155, 70);
-webkit-mask-image: var(--md-admonition-icon--comment);
mask-image: var(--md-admonition-icon--comment);
}
}
65 changes: 65 additions & 0 deletions scripts/custom-admonitions.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
#!/usr/bin/env python3

import inspect
import os

import material


CUSTOM_ADMONITIONS = {
"comment": {
"icon": "material/comment",
"rgb": [43, 155, 70],
},
}

# ensure we're in project root directory
if not os.path.isfile("mkdocs.yml"):
raise FileNotFoundError("mkdocs.yml not found")


material_root = os.path.dirname(inspect.getfile(material))
material_root = os.path.join(material_root, "templates", ".icons")


def get_icon(name):
with open(os.path.join(material_root, name + ".svg")) as f:
return f.read()


root_defs = []
typeset_defs = []
for name, data in CUSTOM_ADMONITIONS.items():
varname = f"--md-admonition-icon--{name}"
content = get_icon(data["icon"])
s = f" {varname}: url('data:image/svg+xml;charset=utf-8,{content}');"
root_defs.append(s)

rgb = data["rgb"]
rgb_s = f"{rgb[0]}, {rgb[1]}, {rgb[2]}"
s = f"""
.admonition.{name},
details.{name} {{
border-color: rgb({rgb_s});
}}
.{name} > .admonition-title,
.{name} > summary {{
background-color: rgba({rgb_s}, 0.1);
&::before {{
background-color: rgb({rgb_s});
-webkit-mask-image: var({varname});
mask-image: var({varname});
}}
}}""".lstrip("\n")
typeset_defs.append(s)

with open("docs/css/admonitions.scss", "w") as f:
print(":root {", file=f)
print("\n".join(root_defs), file=f)
print("}", file=f, end="\n\n")

print(".md-typeset {", file=f)
print("\n\n".join(typeset_defs), file=f)
print("}", file=f)

0 comments on commit 74d2327

Please sign in to comment.