[Tip] Add icons

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: `<span class="admonition-icon"><${iconComponent} classNames="w-5 h-5" /></span>`,
+			};
+			const spanOpen = {
+				type: "html",
+				value: `<span>`,
+			};
+			const spanClose = {
+				type: "html",
+				value: `</span>`,
+			};
+
+			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 || [];

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;

kit/src/lib/IconInfo.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<circle cx="12" cy="12" r="10" />
+	<path d="M12 16v-4" />
+	<path d="M12 8h.01" />
+</svg>

kit/src/lib/IconLightbulb.svelte

@@ -0,0 +1,25 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<path
+		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"
+	/>
+	<path d="M9 18h6" />
+	<path d="M10 22h4" />
+</svg>

kit/src/lib/IconMessageSquareWarning.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+	<path d="M12 7v2" />
+	<path d="M12 13h.01" />
+</svg>

kit/src/lib/IconOctagonAlert.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z" />
+	<path d="M12 8v4" />
+	<path d="M12 16h.01" />
+</svg>

kit/src/lib/IconTriangleAlert.svelte

@@ -0,0 +1,23 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<path 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" />
+	<path d="M12 9v4" />
+	<path d="M12 17h.01" />
+</svg>

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";

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";