Switch from remark-directive to remark-mdc, add support for ::tabs / :::tab and :icon

Author: techniq

docs/mdsx.config.js

@@ -2,7 +2,7 @@ import { defineConfig } from 'mdsx';
 
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
-import remarkDirective from 'remark-directive';
+import remarkMDC from 'remark-mdc';
 import rehypePrettyCode from 'rehype-pretty-code';
 
 import {
@@ -17,8 +17,8 @@ export const mdsxConfig = defineConfig({
 	extensions: ['.md'],
 	remarkPlugins: [
 		remarkGfm,
-		remarkDirective, // Parse directive syntax (:::directive)
-		remarkDirectives, // Transform directives to components
+		remarkMDC, // Parse MDC syntax (::component, :::component)
+		remarkDirectives, // Transform MDC components to Svelte components
 		remarkLiveCode
 	],
 	rehypePlugins: [

docs/package.json

@@ -93,8 +93,8 @@
 		"prettier-plugin-svelte": "^3.4.0",
 		"rehype-pretty-code": "^0.14.1",
 		"rehype-slug": "^6.0.0",
-		"remark-directive": "^3.0.0",
 		"remark-gfm": "^4.0.1",
+		"remark-mdc": "^3.10.0",
 		"runed": "^0.37.0",
 		"shiki": "^3.20.0",
 		"solar-calculator": "^0.3.0",

docs/src/lib/markdown/components/Icon.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cls } from '@layerstack/tailwind';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		name?: string; // Iconify icon name (e.g., "lucide:code" or "i-lucide-code")
+		component?: Component; // Component import
+	}
+
+	const { name, component, class: className, ...restProps }: Props = $props();
+
+	// Convert i-collection-name format to collection:name format for Iconify
+	const iconifyName = $derived.by(() => {
+		if (!name) return undefined;
+		// If already in collection:name format, use as-is
+		if (name.includes(':')) return name;
+		// Convert i-collection-name to collection:name
+		const match = name.match(/^i-([^-]+)-(.+)$/);
+		if (match) {
+			const [, collection, iconName] = match;
+			return `${collection}:${iconName.replace(/-/g, '-')}`;
+		}
+		return name;
+	});
+</script>
+
+<svelte:head>
+	<!-- Load Iconify web component/script - load unconditionally if Icon component is used -->
+	<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js">
+	</script>
+</svelte:head>
+
+{#if component}
+	<!-- Component import (dynamic by default in runes mode) -->
+	{@const IconComponent = component}
+	<IconComponent class={cls('inline-block', className)} {...restProps} />
+{:else if iconifyName}
+	<!-- Iconify web component -->
+	<iconify-icon icon={iconifyName} class={cls('inline-block', className)} {...restProps}
+	></iconify-icon>
+{/if}

docs/src/lib/markdown/components/Tab.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cls } from '@layerstack/tailwind';
+	import { getContext, untrack } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+		label?: string;
+		icon?: string | Component;
+	}
+
+	const { children, label, icon, class: className, ...restProps }: Props = $props();
+
+	const tabsContext = getContext<{
+		activeTab: number;
+		setActiveTab: (index: number) => void;
+		registerTab: (label: string | undefined, icon: string | Component | undefined) => number;
+	}>('tabs');
+
+	// Register this tab and get its index
+	// Use untrack to capture the initial values without creating a reactive dependency
+	const tabIndex = tabsContext?.registerTab(untrack(() => label), untrack(() => icon)) ?? 0;
+
+	const isActive = $derived(tabsContext?.activeTab === tabIndex);
+</script>
+
+<div class={cls('tab-content', !isActive && 'hidden', className)} {...restProps}>
+	{@render children?.()}
+</div>

docs/src/lib/markdown/components/Tabs.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cls } from '@layerstack/tailwind';
+	import { setContext } from 'svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	const { children, class: className, ...restProps }: Props = $props();
+
+	let activeTab = $state(0);
+	let tabs = $state<Array<{ label?: string; icon?: string | Component }>>([]);
+	let tabCounter = 0;
+
+	// Provide context for Tab components to register themselves
+	setContext('tabs', {
+		get activeTab() {
+			return activeTab;
+		},
+		setActiveTab: (index: number) => {
+			activeTab = index;
+		},
+		registerTab: (label: string | undefined, icon: string | Component | undefined) => {
+			const index = tabCounter++;
+			tabs = [...tabs, { label, icon }];
+			return index;
+		}
+	});
+
+	// Convert i-collection-name format to collection:name format for Iconify
+	function getIconifyName(name: string): string {
+		// If already in collection:name format, use as-is
+		if (name.includes(':')) return name;
+		// Convert i-collection-name to collection:name
+		const match = name.match(/^i-([^-]+)-(.+)$/);
+		if (match) {
+			const [, collection, iconName] = match;
+			return `${collection}:${iconName.replace(/-/g, '-')}`;
+		}
+		return name;
+	}
+
+	// Check if any tabs have string icons (need Iconify)
+	const hasIconifyIcons = $derived(tabs.some((tab) => typeof tab.icon === 'string'));
+</script>
+
+<svelte:head>
+	<!-- Load Iconify web component if needed -->
+	{#if hasIconifyIcons}
+		<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js">
+		</script>
+	{/if}
+</svelte:head>
+
+<div class={cls('tabs mt-4 flex flex-col', className)} {...restProps}>
+	<!-- Tabs -->
+	<div class="flex gap-1 overflow-auto z-1 -mb-px">
+		{#each tabs as tab, index}
+			{@const isActive = activeTab === index}
+			<button
+				type="button"
+				class={cls(
+					'inline-flex items-center gap-1 whitespace-nowrap border px-3 py-2 text-xs transition-colors rounded-t',
+					isActive
+						? 'bg-surface-100 text-surface-content border-b-surface-100'
+						: 'bg-surface-200 text-surface-content/50 hover:text-surface-content'
+				)}
+				onclick={() => (activeTab = index)}
+			>
+				{#if tab.icon}
+					{#if typeof tab.icon === 'string'}
+						<!-- Iconify web component -->
+						<iconify-icon icon={getIconifyName(tab.icon)} class="size-4"></iconify-icon>
+					{:else}
+						<!-- Component import (dynamic by default in runes mode) -->
+						{@const IconComponent = tab.icon}
+						<IconComponent class="size-4" />
+					{/if}
+				{/if}
+				{tab.label || `Tab ${index + 1}`}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Tab content -->
+	<div class="border rounded-lg rounded-tl-none p-3 bg-surface-100">
+		{@render children?.()}
+	</div>
+</div>

docs/src/lib/markdown/remark/directives.js

@@ -1,71 +1,83 @@
-import { visit } from 'unist-util-visit';
+import { visit, EXIT } from 'unist-util-visit';
 
 /**
- * Remark plugin to transform directives (:::tip, :::note, :::steps, etc.) into custom components
- * Works with remark-directive to convert container directives into Svelte components
+ * Remark plugin to transform MDC components (::tip, ::note, ::steps, etc.) into custom Svelte components
+ * Works with remark-mdc to convert MDC components into Svelte components
  *
- * Supported directives:
- * - :::tip - renders as Note component with variant="tip"
- * - :::note - renders as Note component with variant="note"
- * - :::warning - renders as Note component with variant="warning"
- * - :::caution - renders as Note component with variant="caution"
- * - :::steps - renders as Steps component
+ * Supported components:
+ * - ::tip / :::tip - renders as Note component with variant="tip"
+ * - ::note / :::note - renders as Note component with variant="note"
+ * - ::warning / :::warning - renders as Note component with variant="warning"
+ * - ::caution / :::caution - renders as Note component with variant="caution"
+ * - ::steps / :::steps - renders as Steps component
+ * - ::tabs / :::tabs - renders as Tabs component (supports nested ::tab)
+ * - ::tab / :::tab - renders as Tab component (used inside tabs, supports icon attribute)
+ * - :icon - renders as Icon component (inline icon with name attribute)
  *
  * @returns {(tree: any) => void} A remark transformer function
  */
 export function remarkDirectives() {
 	return (tree) => {
 		const componentsToImport = new Set();
 
+		// Process MDC components (remark-mdc creates leafComponent and containerComponent nodes)
 		visit(tree, (node) => {
-			// Handle container directives (:::directive)
-			if (node.type === 'containerDirective') {
-				const directiveName = node.name;
+			// Handle both leafComponent (::component) and containerComponent (::component...::)
+			if (node.type === 'leafComponent' || node.type === 'containerComponent') {
+				const componentName = node.name;
 
 				// Alert variants all use the Note component
 				const alertVariants = ['tip', 'note', 'warning', 'caution'];
 
-				// Map directive names to component names and variants
-				let componentName;
+				// Map component names to Svelte component names and variants
+				let svelteComponent;
 				let variant;
 
-				if (alertVariants.includes(directiveName)) {
-					componentName = 'Note';
-					variant = directiveName;
-				} else if (directiveName === 'steps') {
-					componentName = 'Steps';
+				if (alertVariants.includes(componentName)) {
+					svelteComponent = 'Note';
+					variant = componentName;
+				} else if (componentName === 'steps') {
+					svelteComponent = 'Steps';
+				} else if (componentName === 'tabs') {
+					svelteComponent = 'Tabs';
+				} else if (componentName === 'tab') {
+					svelteComponent = 'Tab';
 				} else {
-					// Unknown directive, skip
+					// Unknown component, skip transformation
 					return;
 				}
 
 				// Track which components we need to import
-				componentsToImport.add(componentName);
+				componentsToImport.add(svelteComponent);
 
-				// Get directive attributes
+				// Get component attributes from MDC
 				const attributes = node.attributes || {};
 
-				// Convert the directive into a custom component in the HTML tree
+				// Convert the MDC component into a component that rehype can handle
 				// We set data.hName to tell rehype to convert this to the component
 				const data = node.data || (node.data = {});
-				data.hName = componentName;
+				data.hName = svelteComponent;
 				data.hProperties = {
 					...attributes,
 					// Pass variant for alert components
-					...(variant && { variant }),
-					// Pass any directive label as a prop
-					...(node.attributes?.label && { label: node.attributes.label })
+					...(variant && { variant })
 				};
 			}
 
-			// Handle text directives (:directive[text]) if needed
-			if (node.type === 'textDirective') {
-				// Can be used for inline directives if needed in the future
-			}
+			// Handle inline text components (:component)
+			if (node.type === 'textComponent') {
+				const componentName = node.name;
+
+				// Support :icon{name="i-lucide-code"} syntax
+				if (componentName === 'icon') {
+					componentsToImport.add('Icon');
 
-			// Handle leaf directives (::directive) if needed
-			if (node.type === 'leafDirective') {
-				// Can be used for self-closing directives if needed in the future
+					const data = node.data || (node.data = {});
+					data.hName = 'Icon';
+					data.hProperties = {
+						...(node.attributes || {})
+					};
+				}
 			}
 		});
 
@@ -83,9 +95,10 @@ export function remarkDirectives() {
 					hasScript = true;
 					node.value = node.value.replace(
 						/<script[^>]*>/,
+						/** @param {string} match */
 						(match) => `${match}\n${importStatements}`
 					);
-					return visit.EXIT;
+					return EXIT;
 				}
 			});
 

docs/src/routes/docs/markdown/+page.md

@@ -163,14 +163,53 @@ This action cannot be undone. This uses `:::caution`.
 First, install the required packages:
 
 ```bash
-npm install remark-directive
+npm install remark-mdc
 ```
 
 ## Step 2: Configure mdsx
 
-Add the directive plugins to your mdsx configuration.
+Add the remark-mdc plugin to your mdsx configuration.
 
-## Step 3: Use directives
+## Step 3: Use MDC components
 
-Start using `:::directive` syntax in your markdown files!
+Start using `::component` and `:::component` syntax in your markdown files!
 :::
+
+### Tabs (Nested Components)
+
+:::tabs
+
+::tab{label="JavaScript" icon="vscode-icons:file-type-js-official"}
+
+```js
+console.log('Hello from JavaScript');
+```
+
+::
+
+::tab{label="TypeScript" icon="vscode-icons:file-type-typescript-official"}
+
+```ts
+const message: string = 'Hello from TypeScript';
+console.log(message);
+```
+
+::
+
+::tab{label="Python" icon="vscode-icons:file-type-python"}
+
+```python
+print('Hello from Python')
+```
+
+::
+
+:::
+
+### Icons (Inline)
+
+You can also use icons inline with the `:icon` directive:
+
+Here's a :icon{name="lucide:code" class="text-primary"} code icon, a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
+
+Icons support both formats: `collection:name` (like `lucide:code`) or `i-collection-name` (like `i-lucide-code`).