Skip to content

Commit 55b1e97

Browse files
flaportflaport
committed
nicer looking admonitions
1 parent ec4b04c commit 55b1e97

4 files changed

Lines changed: 118 additions & 25 deletions

File tree

‎pyproject.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ shadcn = "shadcn"
3535
[project.entry-points."mkdocs.plugins"]
3636
"shadcn/search" = "shadcn.plugins.search:SearchPlugin"
3737
"shadcn/excalidraw" = "shadcn.plugins.excalidraw:ExcalidrawPlugin"
38+
"shadcn/myst" = "shadcn.plugins.myst:MystPlugin"
3839

3940
[build-system]
4041
requires = ["hatchling"]

‎shadcn/css/base.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shadcn/plugins/myst.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
from mkdocs.plugins import BasePlugin
2+
3+
from shadcn.plugins.mixins.myst_admonitions import MystAdmonitionsMixin
4+
5+
6+
class MystPlugin(MystAdmonitionsMixin, BasePlugin):
7+
"""Standalone plugin that converts MyST-style fenced admonitions.
8+
9+
Converts ``{note}``, ``{warning}``, etc. to standard mkdocs admonitions.
10+
Use this when not using ``shadcn/search``.
11+
"""

‎tailwind/admonition.css‎

Lines changed: 105 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,131 @@
1-
/* article .admonition {
2-
@apply w-full px-4 py-3 [&:not(:first-child)]:mt-6 relative rounded-lg border text-sm text-foreground bg-muted/50;
3-
} */
4-
51
article .admonition {
6-
@apply relative border px-4 py-3 text-sm w-auto rounded-xl border-surface bg-surface text-card-foreground/80 md:-mx-1 [&_code]:border [&_code]:bg-transparent mt-6;
2+
@apply relative text-sm w-auto mt-6 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700;
73
}
84

9-
article .admonition > p:nth-child(1) {
10-
@apply inline !m-0;
5+
article .admonition > p.admonition-title {
6+
@apply font-semibold px-4 py-2.5 m-0 text-sm leading-5
7+
bg-slate-100 dark:bg-slate-800
8+
text-slate-700 dark:text-slate-300;
9+
display: flex;
10+
align-items: center;
11+
gap: 0.5rem;
1112
}
1213

13-
article .admonition > p:nth-child(2) {
14-
@apply inline !m-0;
14+
article .admonition > p.admonition-title::before {
15+
content: "";
16+
display: inline-block;
17+
width: 1rem;
18+
height: 1rem;
19+
flex-shrink: 0;
20+
background-color: currentColor;
21+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
22+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
23+
-webkit-mask-size: contain;
24+
-webkit-mask-repeat: no-repeat;
25+
-webkit-mask-position: center;
26+
mask-size: contain;
27+
mask-repeat: no-repeat;
28+
mask-position: center;
1529
}
1630

17-
article .admonition > p.admonition-title {
18-
@apply font-bold;
31+
article .admonition > *:not(.admonition-title) {
32+
@apply px-4 m-0;
33+
}
34+
35+
article .admonition > .admonition-title + * {
36+
@apply pt-3;
37+
}
38+
39+
article .admonition > *:last-child {
40+
@apply pb-3;
41+
}
42+
43+
article .admonition > p + p {
44+
@apply pt-2;
45+
}
46+
47+
article .admonition ul {
48+
@apply my-1;
1949
}
2050

2151
article .admonition .codehilite {
2252
@apply mt-2 bg-background/40;
2353
}
2454

25-
article .admonition.danger {
26-
@apply border-destructive/50 bg-destructive/10 dark:border-destructive dark:bg-destructive/50 [&_code]:border-destructive/10 dark:[&_code]:border-destructive/20;
55+
article .admonition pre code {
56+
@apply border-none;
2757
}
2858

29-
/* see https://ui.shadcn.com/docs/components/chart#your-first-chart */
30-
article .admonition.warning {
31-
@apply border-warning bg-warning/10 [&_code]:border-warning/10 dark:[&_code]:border-warning/40;
59+
/* note — blue */
60+
article .admonition.note {
61+
@apply border-blue-200 dark:border-blue-800;
3262
}
3363

64+
article .admonition.note > .admonition-title {
65+
@apply bg-blue-100 dark:bg-blue-900/60 text-blue-800 dark:text-blue-300;
66+
}
67+
68+
/* info — sky */
3469
article .admonition.info {
35-
@apply bg-blue-50 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:border-blue-200 dark:[&_code]:border-blue-900;
70+
@apply border-sky-200 dark:border-sky-800;
71+
}
72+
73+
article .admonition.info > .admonition-title {
74+
@apply bg-sky-100 dark:bg-sky-900/60 text-sky-800 dark:text-sky-300;
75+
}
76+
77+
/* tip — emerald, lightbulb icon */
78+
article .admonition.tip {
79+
@apply border-emerald-200 dark:border-emerald-800;
3680
}
3781

38-
/* see https://ui.shadcn.com/docs/installation */
82+
article .admonition.tip > .admonition-title {
83+
@apply bg-emerald-100 dark:bg-emerald-900/60 text-emerald-800 dark:text-emerald-300;
84+
}
85+
86+
article .admonition.tip > .admonition-title::before {
87+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
88+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
89+
}
90+
91+
/* warning — amber, triangle icon */
92+
article .admonition.warning {
93+
@apply border-amber-200 dark:border-amber-800;
94+
}
95+
96+
article .admonition.warning > .admonition-title {
97+
@apply bg-amber-100 dark:bg-amber-900/60 text-amber-800 dark:text-amber-300;
98+
}
99+
100+
article .admonition.warning > .admonition-title::before {
101+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
102+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
103+
}
104+
105+
/* danger — red, X-circle icon */
106+
article .admonition.danger {
107+
@apply border-red-200 dark:border-red-800;
108+
}
109+
110+
article .admonition.danger > .admonition-title {
111+
@apply bg-red-100 dark:bg-red-900/60 text-red-800 dark:text-red-300;
112+
}
113+
114+
article .admonition.danger > .admonition-title::before {
115+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E");
116+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E");
117+
}
118+
119+
/* success — green, checkmark-circle icon */
39120
article .admonition.success {
40-
@apply border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900 [&_code]:border-emerald-200 dark:[&_code]:border-emerald-800;
121+
@apply border-green-200 dark:border-green-800;
41122
}
42123

43-
article .admonition ul {
44-
@apply my-1;
124+
article .admonition.success > .admonition-title {
125+
@apply bg-green-100 dark:bg-green-900/60 text-green-800 dark:text-green-300;
45126
}
46127

47-
/* remove border in code blocks */
48-
article .admonition pre code {
49-
@apply border-none;
128+
article .admonition.success > .admonition-title::before {
129+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
130+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
50131
}

0 commit comments

Comments
 (0)