From 66dd5443aebb14ed9172097b934a9452650c085c Mon Sep 17 00:00:00 2001 From: stevhliu Date: Tue, 22 Jul 2025 13:49:23 -0700 Subject: [PATCH 1/6] align icon with text --- kit/src/lib/Tip.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/kit/src/lib/Tip.svelte b/kit/src/lib/Tip.svelte index a3f318a2..70f66112 100644 --- a/kit/src/lib/Tip.svelte +++ b/kit/src/lib/Tip.svelte @@ -1,4 +1,8 @@ - From f6d637bb43242ab78881696e1b359306dba8838b Mon Sep 17 00:00:00 2001 From: stevhliu Date: Tue, 29 Jul 2025 15:37:11 -0700 Subject: [PATCH 2/6] prettier --- kit/src/lib/Tip.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kit/src/lib/Tip.svelte b/kit/src/lib/Tip.svelte index 70f66112..5660e60b 100644 --- a/kit/src/lib/Tip.svelte +++ b/kit/src/lib/Tip.svelte @@ -2,7 +2,7 @@ interface IconData { paths: string[]; } - + export let warning = false; From 31c145c6b1171ff2fe29b771fcb6fd3d57de6d43 Mon Sep 17 00:00:00 2001 From: stevhliu Date: Wed, 8 Oct 2025 16:35:28 -0700 Subject: [PATCH 3/6] support for other admonitions --- kit/preprocessors/mdsvex/index.js | 19 ++++++++ kit/src/app.css | 48 +++++++++++++++++++++ kit/src/lib/IconInfo.svelte | 23 ++++++++++ kit/src/lib/IconLightbulb.svelte | 25 +++++++++++ kit/src/lib/IconMessageSquareWarning.svelte | 23 ++++++++++ kit/src/lib/IconOctagonAlert.svelte | 23 ++++++++++ kit/src/lib/IconTriangleAlert.svelte | 25 +++++++++++ kit/src/lib/Tip.svelte | 6 +-- src/doc_builder/convert_md_to_mdx.py | 5 +++ tests/test_convert_md_to_mdx.py | 5 +++ 10 files changed, 197 insertions(+), 5 deletions(-) create mode 100644 kit/src/lib/IconInfo.svelte create mode 100644 kit/src/lib/IconLightbulb.svelte create mode 100644 kit/src/lib/IconMessageSquareWarning.svelte create mode 100644 kit/src/lib/IconOctagonAlert.svelte create mode 100644 kit/src/lib/IconTriangleAlert.svelte diff --git a/kit/preprocessors/mdsvex/index.js b/kit/preprocessors/mdsvex/index.js index 2857b26d..c8d29956 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,15 @@ 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" />`, + }; + childrenLevel1[0].children.unshift(iconNode); + } + 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..42d0ebc8 100644 --- a/kit/src/app.css +++ b/kit/src/app.css @@ -409,6 +409,54 @@ .dark .prose .caution a { @apply !text-red-600; } + +/* Admonition Icons */ +.prose .admonition-icon { + @apply mt-0.5 mr-2.5 flex-shrink-0; + width: 1.25rem; + height: 1.25rem; + line-height: 0; + float: none; +} +.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: flex-start; +} +.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; } 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..d40bea8e --- /dev/null +++ b/kit/src/lib/IconTriangleAlert.svelte @@ -0,0 +1,25 @@ + + + diff --git a/kit/src/lib/Tip.svelte b/kit/src/lib/Tip.svelte index 5660e60b..a3f318a2 100644 --- a/kit/src/lib/Tip.svelte +++ b/kit/src/lib/Tip.svelte @@ -1,8 +1,4 @@ - 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"; From 091494520208519fc410f8b4af9b20b873346bf0 Mon Sep 17 00:00:00 2001 From: stevhliu Date: Wed, 8 Oct 2025 16:47:40 -0700 Subject: [PATCH 4/6] fix --- kit/src/lib/IconTriangleAlert.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/kit/src/lib/IconTriangleAlert.svelte b/kit/src/lib/IconTriangleAlert.svelte index d40bea8e..7c42df04 100644 --- a/kit/src/lib/IconTriangleAlert.svelte +++ b/kit/src/lib/IconTriangleAlert.svelte @@ -17,9 +17,7 @@ height="1em" viewBox="0 0 24 24" > - + From 76aabe5b82a37972810e4ff5bba78a65c441baf4 Mon Sep 17 00:00:00 2001 From: stevhliu Date: Thu, 16 Oct 2025 14:09:05 -0700 Subject: [PATCH 5/6] feedback --- kit/src/app.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/kit/src/app.css b/kit/src/app.css index 42d0ebc8..f8b94a1d 100644 --- a/kit/src/app.css +++ b/kit/src/app.css @@ -412,7 +412,7 @@ /* Admonition Icons */ .prose .admonition-icon { - @apply mt-0.5 mr-2.5 flex-shrink-0; + @apply mr-1.5 flex-shrink-0 translate-y-px; width: 1.25rem; height: 1.25rem; line-height: 0; @@ -425,6 +425,7 @@ .prose blockquote.caution p:first-of-type { display: flex; align-items: flex-start; + margin-top: 0; } .prose .note .admonition-icon { @apply text-sky-700; From 3f8528d178f4e85359f5022b840bdcefb2e1a053 Mon Sep 17 00:00:00 2001 From: stevhliu Date: Thu, 16 Oct 2025 15:20:17 -0700 Subject: [PATCH 6/6] more tweaks --- kit/preprocessors/mdsvex/index.js | 12 +++++++++++- kit/src/app.css | 13 ++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/kit/preprocessors/mdsvex/index.js b/kit/preprocessors/mdsvex/index.js index c8d29956..5a26c636 100644 --- a/kit/preprocessors/mdsvex/index.js +++ b/kit/preprocessors/mdsvex/index.js @@ -285,7 +285,17 @@ function treeVisitor() { type: "html", value: `<${iconComponent} classNames="w-5 h-5" />`, }; - childrenLevel1[0].children.unshift(iconNode); + 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 || {}; diff --git a/kit/src/app.css b/kit/src/app.css index f8b94a1d..db7c88ae 100644 --- a/kit/src/app.css +++ b/kit/src/app.css @@ -412,11 +412,14 @@ /* Admonition Icons */ .prose .admonition-icon { - @apply mr-1.5 flex-shrink-0 translate-y-px; - width: 1.25rem; - height: 1.25rem; + @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, @@ -424,7 +427,7 @@ .prose blockquote.warning p:first-of-type, .prose blockquote.caution p:first-of-type { display: flex; - align-items: flex-start; + align-items: baseline; margin-top: 0; } .prose .note .admonition-icon { @@ -459,7 +462,7 @@ } .prose blockquote { - @apply py-3 text-base; + @apply py-3 pl-4 pr-1.5 text-base; } .prose blockquote blockquote { @apply my-3;