-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmd_admonition.templ
83 lines (76 loc) · 4.34 KB
/
md_admonition.templ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
package website
// admonitionTemplate is a generic template for creating admonition blocks.
// We use the aside element to represent admonitions.
// Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
templ admonitionTemplate(borderColour, titleColour string, body []byte) {
<aside class={ "my-8 pl-6 border-l-4 " + borderColour }>
<h4 class={ "flex items-center gap-x-2 " + titleColour }>
{ children... }
</h4>
<div>
@templ.Raw(string(body))
</div>
</aside>
}
templ admonitionNote(title string, body []byte) {
@admonitionTemplate("border-v-note", "text-v-note", body) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
</svg>
{ title }
}
}
templ admonitionTip(title string, body []byte) {
@admonitionTemplate("border-v-tip", "text-v-tip", body) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path>
</svg>
{ title }
}
}
templ admonitionImportant(title string, body []byte) {
@admonitionTemplate("border-v-important", "text-v-important", body) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
</svg>
{ title }
}
}
templ admonitionWarning(title string, body []byte) {
@admonitionTemplate("border-v-warning", "text-v-warning", body) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"></path>
</svg>
{ title }
}
}
templ admonitionCaution(title string, body []byte) {
@admonitionTemplate("border-v-caution", "text-v-caution", body) {
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>
{ title }
}
}
// templ mdAdmonitionImportant(title string, body string) {
// <aside class="my-8 pl-6 border-l-4 border-v-lilac">
// <h4 class="text-v-lilac flex items-center gap-x-2">
// <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
// <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
// </svg>
// {title}
// </h4>
// <p class="text-v-black/70">{body}</p>
// </aside>
// }
// templ mdAdmonitionWarning(title string, body string) {
// <aside class="my-8 pl-6 border-l-4 border-v-pink">
// <h4 class="text-v-pink flex items-center gap-x-2">
// <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
// <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
// </svg>
// {title}
// </h4>
// <p class="text-v-black/70">{body}</p>
// </aside>
// }