diff --git a/kit/preprocessors/mdsvex/index.js b/kit/preprocessors/mdsvex/index.js
index 2857b26d..5a26c636 100644
--- a/kit/preprocessors/mdsvex/index.js
+++ b/kit/preprocessors/mdsvex/index.js
@@ -257,6 +257,16 @@ function treeVisitor() {
return;
}
+ // Map marker to icon component
+ const iconMap = {
+ note: "IconInfo",
+ tip: "IconLightbulb",
+ important: "IconMessageSquareWarning",
+ warning: "IconTriangleAlert",
+ caution: "IconOctagonAlert",
+ };
+ const iconComponent = iconMap[marker];
+
childrenLevel1[0].children = childrenLevel1[0].children.slice(1);
const [firstChild] = childrenLevel1[0].children;
if (firstChild && firstChild.type === "text") {
@@ -269,6 +279,25 @@ function treeVisitor() {
node.children = node.children.slice(1);
}
+ // Inject icon HTML node at the beginning of the first paragraph
+ if (childrenLevel1.length > 0 && childrenLevel1[0].type === "paragraph") {
+ const iconNode = {
+ type: "html",
+ value: `<${iconComponent} classNames="w-5 h-5" />`,
+ };
+ const spanOpen = {
+ type: "html",
+ value: ``,
+ };
+ const spanClose = {
+ type: "html",
+ value: ``,
+ };
+
+ childrenLevel1[0].children.unshift(iconNode, spanOpen);
+ childrenLevel1[0].children.push(spanClose);
+ }
+
node.data = node.data || {};
node.data.hProperties = node.data.hProperties || {};
const existingClasses = node.data.hProperties.className || [];
diff --git a/kit/src/app.css b/kit/src/app.css
index 1d50bcc2..db7c88ae 100644
--- a/kit/src/app.css
+++ b/kit/src/app.css
@@ -409,8 +409,60 @@
.dark .prose .caution a {
@apply !text-red-600;
}
+
+/* Admonition Icons */
+.prose .admonition-icon {
+ @apply mr-1.5 flex-shrink-0;
+ width: 1rem;
+ height: 1rem;
+ line-height: 0;
+ float: none;
+ display: inline-flex;
+ align-items: center;
+ transform: translateY(0.125rem);
+}
+.prose blockquote.tip p:first-of-type,
+.prose blockquote.note p:first-of-type,
+.prose blockquote.important p:first-of-type,
+.prose blockquote.warning p:first-of-type,
+.prose blockquote.caution p:first-of-type {
+ display: flex;
+ align-items: baseline;
+ margin-top: 0;
+}
+.prose .note .admonition-icon {
+ @apply text-sky-700;
+}
+.dark .prose .note .admonition-icon {
+ @apply text-sky-400;
+}
+.prose .tip .admonition-icon {
+ @apply text-green-700;
+}
+.dark .prose .tip .admonition-icon {
+ @apply text-green-400;
+}
+.prose .important .admonition-icon {
+ @apply text-violet-700;
+}
+.dark .prose .important .admonition-icon {
+ @apply text-violet-400;
+}
+.prose .warning .admonition-icon {
+ @apply text-orange-700;
+}
+.dark .prose .warning .admonition-icon {
+ @apply text-orange-400;
+}
+.prose .caution .admonition-icon {
+ @apply text-red-700;
+}
+.dark .prose .caution .admonition-icon {
+ @apply text-red-400;
+}
+
.prose blockquote {
- @apply py-3 text-base;
+ @apply py-3 pl-4 pr-1.5 text-base;
}
.prose blockquote blockquote {
@apply my-3;
diff --git a/kit/src/lib/IconInfo.svelte b/kit/src/lib/IconInfo.svelte
new file mode 100644
index 00000000..f2d7dd0b
--- /dev/null
+++ b/kit/src/lib/IconInfo.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/kit/src/lib/IconLightbulb.svelte b/kit/src/lib/IconLightbulb.svelte
new file mode 100644
index 00000000..63e3227c
--- /dev/null
+++ b/kit/src/lib/IconLightbulb.svelte
@@ -0,0 +1,25 @@
+
+
+
diff --git a/kit/src/lib/IconMessageSquareWarning.svelte b/kit/src/lib/IconMessageSquareWarning.svelte
new file mode 100644
index 00000000..49dea853
--- /dev/null
+++ b/kit/src/lib/IconMessageSquareWarning.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/kit/src/lib/IconOctagonAlert.svelte b/kit/src/lib/IconOctagonAlert.svelte
new file mode 100644
index 00000000..f6b7764f
--- /dev/null
+++ b/kit/src/lib/IconOctagonAlert.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/kit/src/lib/IconTriangleAlert.svelte b/kit/src/lib/IconTriangleAlert.svelte
new file mode 100644
index 00000000..7c42df04
--- /dev/null
+++ b/kit/src/lib/IconTriangleAlert.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/src/doc_builder/convert_md_to_mdx.py b/src/doc_builder/convert_md_to_mdx.py
index de8f626a..4505a6a9 100644
--- a/src/doc_builder/convert_md_to_mdx.py
+++ b/src/doc_builder/convert_md_to_mdx.py
@@ -45,6 +45,11 @@ def convert_md_to_mdx(md_text, page_info):
import DocNotebookDropdown from "$lib/DocNotebookDropdown.svelte";
import CourseFloatingBanner from "$lib/CourseFloatingBanner.svelte";
import IconCopyLink from "$lib/IconCopyLink.svelte";
+import IconInfo from "$lib/IconInfo.svelte";
+import IconLightbulb from "$lib/IconLightbulb.svelte";
+import IconMessageSquareWarning from "$lib/IconMessageSquareWarning.svelte";
+import IconTriangleAlert from "$lib/IconTriangleAlert.svelte";
+import IconOctagonAlert from "$lib/IconOctagonAlert.svelte";
import FrameworkContent from "$lib/FrameworkContent.svelte";
import Markdown from "$lib/Markdown.svelte";
import Question from "$lib/Question.svelte";
diff --git a/tests/test_convert_md_to_mdx.py b/tests/test_convert_md_to_mdx.py
index 06964d2a..b2f56bf1 100644
--- a/tests/test_convert_md_to_mdx.py
+++ b/tests/test_convert_md_to_mdx.py
@@ -41,6 +41,11 @@ def test_convert_md_to_mdx(self):
import DocNotebookDropdown from "$lib/DocNotebookDropdown.svelte";
import CourseFloatingBanner from "$lib/CourseFloatingBanner.svelte";
import IconCopyLink from "$lib/IconCopyLink.svelte";
+import IconInfo from "$lib/IconInfo.svelte";
+import IconLightbulb from "$lib/IconLightbulb.svelte";
+import IconMessageSquareWarning from "$lib/IconMessageSquareWarning.svelte";
+import IconTriangleAlert from "$lib/IconTriangleAlert.svelte";
+import IconOctagonAlert from "$lib/IconOctagonAlert.svelte";
import FrameworkContent from "$lib/FrameworkContent.svelte";
import Markdown from "$lib/Markdown.svelte";
import Question from "$lib/Question.svelte";