Skip to content

Commit 31c145c

Browse files
stevhliustevhliu
committed
support for other admonitions
1 parent f6d637b commit 31c145c

File tree

10 files changed

+197
-5
lines changed

10 files changed

+197
-5
lines changed

‎kit/preprocessors/mdsvex/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,16 @@ function treeVisitor() {
257257
return;
258258
}
259259

260+
// Map marker to icon component
261+
const iconMap = {
262+
note: "IconInfo",
263+
tip: "IconLightbulb",
264+
important: "IconMessageSquareWarning",
265+
warning: "IconTriangleAlert",
266+
caution: "IconOctagonAlert",
267+
};
268+
const iconComponent = iconMap[marker];
269+
260270
childrenLevel1[0].children = childrenLevel1[0].children.slice(1);
261271
const [firstChild] = childrenLevel1[0].children;
262272
if (firstChild && firstChild.type === "text") {
@@ -269,6 +279,15 @@ function treeVisitor() {
269279
node.children = node.children.slice(1);
270280
}
271281

282+
// Inject icon HTML node at the beginning of the first paragraph
283+
if (childrenLevel1.length > 0 && childrenLevel1[0].type === "paragraph") {
284+
const iconNode = {
285+
type: "html",
286+
value: `<span class="admonition-icon"><${iconComponent} classNames="w-5 h-5" /></span>`,
287+
};
288+
childrenLevel1[0].children.unshift(iconNode);
289+
}
290+
272291
node.data = node.data || {};
273292
node.data.hProperties = node.data.hProperties || {};
274293
const existingClasses = node.data.hProperties.className || [];

‎kit/src/app.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,54 @@
409409
.dark .prose .caution a {
410410
@apply !text-red-600;
411411
}
412+
413+
/* Admonition Icons */
414+
.prose .admonition-icon {
415+
@apply mt-0.5 mr-2.5 flex-shrink-0;
416+
width: 1.25rem;
417+
height: 1.25rem;
418+
line-height: 0;
419+
float: none;
420+
}
421+
.prose blockquote.tip p:first-of-type,
422+
.prose blockquote.note p:first-of-type,
423+
.prose blockquote.important p:first-of-type,
424+
.prose blockquote.warning p:first-of-type,
425+
.prose blockquote.caution p:first-of-type {
426+
display: flex;
427+
align-items: flex-start;
428+
}
429+
.prose .note .admonition-icon {
430+
@apply text-sky-700;
431+
}
432+
.dark .prose .note .admonition-icon {
433+
@apply text-sky-400;
434+
}
435+
.prose .tip .admonition-icon {
436+
@apply text-green-700;
437+
}
438+
.dark .prose .tip .admonition-icon {
439+
@apply text-green-400;
440+
}
441+
.prose .important .admonition-icon {
442+
@apply text-violet-700;
443+
}
444+
.dark .prose .important .admonition-icon {
445+
@apply text-violet-400;
446+
}
447+
.prose .warning .admonition-icon {
448+
@apply text-orange-700;
449+
}
450+
.dark .prose .warning .admonition-icon {
451+
@apply text-orange-400;
452+
}
453+
.prose .caution .admonition-icon {
454+
@apply text-red-700;
455+
}
456+
.dark .prose .caution .admonition-icon {
457+
@apply text-red-400;
458+
}
459+
412460
.prose blockquote {
413461
@apply py-3 text-base;
414462
}

‎kit/src/lib/IconInfo.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
aria-hidden="true"
9+
fill="none"
10+
stroke="currentColor"
11+
stroke-width="2"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
focusable="false"
15+
role="img"
16+
width="1em"
17+
height="1em"
18+
viewBox="0 0 24 24"
19+
>
20+
<circle cx="12" cy="12" r="10" />
21+
<path d="M12 16v-4" />
22+
<path d="M12 8h.01" />
23+
</svg>

‎kit/src/lib/IconLightbulb.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script>
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
aria-hidden="true"
9+
fill="none"
10+
stroke="currentColor"
11+
stroke-width="2"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
focusable="false"
15+
role="img"
16+
width="1em"
17+
height="1em"
18+
viewBox="0 0 24 24"
19+
>
20+
<path
21+
d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
22+
/>
23+
<path d="M9 18h6" />
24+
<path d="M10 22h4" />
25+
</svg>

‎kit/src/lib/IconMessageSquareWarning.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
aria-hidden="true"
9+
fill="none"
10+
stroke="currentColor"
11+
stroke-width="2"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
focusable="false"
15+
role="img"
16+
width="1em"
17+
height="1em"
18+
viewBox="0 0 24 24"
19+
>
20+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
21+
<path d="M12 7v2" />
22+
<path d="M12 13h.01" />
23+
</svg>

‎kit/src/lib/IconOctagonAlert.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
aria-hidden="true"
9+
fill="none"
10+
stroke="currentColor"
11+
stroke-width="2"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
focusable="false"
15+
role="img"
16+
width="1em"
17+
height="1em"
18+
viewBox="0 0 24 24"
19+
>
20+
<path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z" />
21+
<path d="M12 8v4" />
22+
<path d="M12 16h.01" />
23+
</svg>

‎kit/src/lib/IconTriangleAlert.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script>
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
aria-hidden="true"
9+
fill="none"
10+
stroke="currentColor"
11+
stroke-width="2"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
focusable="false"
15+
role="img"
16+
width="1em"
17+
height="1em"
18+
viewBox="0 0 24 24"
19+
>
20+
<path
21+
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
22+
/>
23+
<path d="M12 9v4" />
24+
<path d="M12 17h.01" />
25+
</svg>

‎kit/src/lib/Tip.svelte‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<script lang="ts">
2-
interface IconData {
3-
paths: string[];
4-
}
5-
1+
<script>
62
export let warning = false;
73
</script>
84

‎src/doc_builder/convert_md_to_mdx.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ def convert_md_to_mdx(md_text, page_info):
4545
import DocNotebookDropdown from "$lib/DocNotebookDropdown.svelte";
4646
import CourseFloatingBanner from "$lib/CourseFloatingBanner.svelte";
4747
import IconCopyLink from "$lib/IconCopyLink.svelte";
48+
import IconInfo from "$lib/IconInfo.svelte";
49+
import IconLightbulb from "$lib/IconLightbulb.svelte";
50+
import IconMessageSquareWarning from "$lib/IconMessageSquareWarning.svelte";
51+
import IconTriangleAlert from "$lib/IconTriangleAlert.svelte";
52+
import IconOctagonAlert from "$lib/IconOctagonAlert.svelte";
4853
import FrameworkContent from "$lib/FrameworkContent.svelte";
4954
import Markdown from "$lib/Markdown.svelte";
5055
import Question from "$lib/Question.svelte";

‎tests/test_convert_md_to_mdx.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ def test_convert_md_to_mdx(self):
4141
import DocNotebookDropdown from "$lib/DocNotebookDropdown.svelte";
4242
import CourseFloatingBanner from "$lib/CourseFloatingBanner.svelte";
4343
import IconCopyLink from "$lib/IconCopyLink.svelte";
44+
import IconInfo from "$lib/IconInfo.svelte";
45+
import IconLightbulb from "$lib/IconLightbulb.svelte";
46+
import IconMessageSquareWarning from "$lib/IconMessageSquareWarning.svelte";
47+
import IconTriangleAlert from "$lib/IconTriangleAlert.svelte";
48+
import IconOctagonAlert from "$lib/IconOctagonAlert.svelte";
4449
import FrameworkContent from "$lib/FrameworkContent.svelte";
4550
import Markdown from "$lib/Markdown.svelte";
4651
import Question from "$lib/Question.svelte";

0 commit comments

Comments
 (0)