@dominikcz/greg 0.9.27

package/src/lib/MarkdownDocs/rehypeCodeGroup.js

@@ -0,0 +1,326 @@
+import { visit, SKIP } from 'unist-util-visit';
+
+const START_DELIMITER_REGEX = /^::: code-group(?:\s+labels=\[([^\]]+)\])?$/;
+const END_DELIMITER = ':::';
+
+const languageLabelMap = {
+	javascript: 'js',
+	typescript: 'ts',
+	bash: 'sh',
+	shell: 'sh',
+	sh: 'sh',
+};
+
+function getNodeText(node) {
+	if (!node) return '';
+	if (node.type === 'text') return node.value ?? '';
+	if (!node.children) return '';
+	return node.children.map(getNodeText).join('');
+}
+
+function isHeadingElement(node) {
+	return node?.type === 'element' && /^h[1-6]$/i.test(String(node.tagName ?? ''));
+}
+
+function isCodeGroupStartNode(node) {
+	if (node?.type !== 'element' || node.tagName !== 'p') return false;
+	return START_DELIMITER_REGEX.test(getNodeText(node).trim());
+}
+
+function isEndDelimiterNode(node) {
+	if (!node) return false;
+	if (node.type === 'element' && node.tagName === 'p') {
+		return getNodeText(node).trim() === END_DELIMITER;
+	}
+	if (node.type === 'raw' || node.type === 'text') {
+		return String(node.value ?? '').trim() === END_DELIMITER;
+	}
+	return false;
+}
+
+function splitNodeWithAttachedEndDelimiter(node) {
+	if (!node) return null;
+
+	let kind = null;
+	let value = '';
+
+	if (node.type === 'raw' || node.type === 'text') {
+		kind = node.type;
+		value = String(node.value ?? '');
+	} else if (
+		node.type === 'element' &&
+		node.tagName === 'p' &&
+		Array.isArray(node.children) &&
+		node.children.every((child) => child?.type === 'text')
+	) {
+		kind = 'p-text';
+		value = node.children.map((child) => String(child.value ?? '')).join('');
+	}
+
+	if (!kind) return null;
+
+	const match = value.match(/^(.*)\r?\n\s*:::\s*$/s);
+	if (!match) return null;
+
+	const prefix = match[1] ?? '';
+	const delimiterNode = {
+		type: 'element',
+		tagName: 'p',
+		properties: {},
+		children: [{ type: 'text', value: END_DELIMITER }],
+	};
+
+	if (!prefix.trim()) return [delimiterNode];
+
+	if (kind === 'raw' || kind === 'text') {
+		return [{ ...node, value: prefix }, delimiterNode];
+	}
+
+	return [
+		{
+			...node,
+			children: [{ type: 'text', value: prefix }],
+		},
+		delimiterNode,
+	];
+}
+
+function stripTrailingDelimiter(node) {
+	if (!node || (node.type !== 'raw' && node.type !== 'text')) return node;
+	const value = String(node.value ?? '');
+	if (!/(?:^|\r?\n)\s*:::\s*$/.test(value)) return node;
+	const stripped = value.replace(/\r?\n\s*:::\s*$/, '');
+	if (!stripped.trim()) return null;
+	return { ...node, value: stripped };
+}
+
+function isIgnorableNode(node) {
+	if (!node) return true;
+	if (node.type === 'text') return !String(node.value ?? '').trim();
+	if (node.type === 'comment') return true;
+	if (node.type === 'element' && node.tagName === 'p') {
+		const text = getNodeText(node).trim();
+		return text.length === 0;
+	}
+	return false;
+}
+
+function normalizeClassNameList(value) {
+	if (Array.isArray(value)) return value;
+	if (typeof value === 'string') return value.split(/\s+/).filter(Boolean);
+	return [];
+}
+
+function normalizeLanguageLabel(value) {
+	const normalized = String(value ?? '').trim().toLowerCase();
+	if (!normalized) return '';
+	return languageLabelMap[normalized] ?? normalized;
+}
+
+function findLanguageFromClassName(className) {
+	const classList = normalizeClassNameList(className);
+	const match = classList.find((name) => /^language-/.test(name));
+	if (!match) return '';
+	return normalizeLanguageLabel(match.replace(/^language-/, ''));
+}
+
+function getElementProperty(properties, keys) {
+	for (const key of keys) {
+		if (properties?.[key] !== undefined) return String(properties[key]);
+	}
+	return '';
+}
+
+function inferLabelFromElement(node) {
+	if (!node || node.type !== 'element') return '';
+
+	const explicitTitle = getElementProperty(node.properties, ['data-code-title', 'dataCodeTitle']);
+	if (explicitTitle.trim()) return explicitTitle.trim();
+
+	const directLang = getElementProperty(node.properties, ['data-code-lang', 'dataCodeLang', 'data-language', 'dataLanguage']);
+	if (directLang.trim()) return normalizeLanguageLabel(directLang);
+
+	const fromClass = findLanguageFromClassName(node.properties?.className);
+	if (fromClass) return fromClass;
+
+	for (const child of node.children ?? []) {
+		const nested = inferLabelFromElement(child);
+		if (nested) return nested;
+	}
+
+	return '';
+}
+
+function inferLabelFromRaw(node) {
+	if (!node || node.type !== 'raw') return '';
+	const raw = String(node.value ?? '');
+
+	const titleMatch = raw.match(/data-code-title=["']([^"']+)["']/i);
+	if (titleMatch?.[1]) return titleMatch[1].trim();
+
+	const langAttr = raw.match(/data-(?:code-)?lang(?:uage)?=["']([^"']+)["']/i);
+	if (langAttr?.[1]) return normalizeLanguageLabel(langAttr[1]);
+
+	const classLang = raw.match(/class=["'][^"']*language-([a-z0-9_-]+)[^"']*["']/i);
+	if (classLang?.[1]) return normalizeLanguageLabel(classLang[1]);
+
+	return '';
+}
+
+function inferLabelFromBlock(block, index) {
+	if (block?.type === 'element') {
+		const label = inferLabelFromElement(block);
+		if (label) return label;
+	}
+
+	if (block?.type === 'raw') {
+		const label = inferLabelFromRaw(block);
+		if (label) return label;
+	}
+
+	return `Tab ${index + 1}`;
+}
+
+function createBlockWrapper(block, index) {
+	const isActive = index === 0;
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: {
+			className: ['rcg-block', ...(isActive ? ['active'] : [])],
+			...(isActive ? {} : { hidden: true }),
+		},
+		children: [block],
+	};
+}
+
+function createTabs(tabLabels, uniqueId) {
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: ['rcg-tab-container'], role: 'tablist' },
+		children: tabLabels.map((label, index) => ({
+			type: 'element',
+			tagName: 'button',
+			properties: {
+				type: 'button',
+				className: ['rcg-tab', ...(index === 0 ? ['active'] : [])],
+				role: 'tab',
+				'aria-selected': index === 0 ? 'true' : 'false',
+				'aria-controls': `${uniqueId}-block-${index}`,
+				id: `${uniqueId}-tab-${index}`,
+			},
+			children: [{ type: 'text', value: label }],
+		})),
+	};
+}
+
+function createStaticBlockWrapper(block, uniqueId, index) {
+	const isActive = index === 0;
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: {
+			className: ['rcg-block', ...(isActive ? ['active'] : [])],
+			role: 'tabpanel',
+			'aria-labelledby': `${uniqueId}-tab-${index}`,
+			id: `${uniqueId}-block-${index}`,
+			...(isActive ? {} : { hidden: true }),
+		},
+		children: [block],
+	};
+}
+
+export default function rehypeCodeGroup(options = {}) {
+	const output = options.output === 'static-tabs' ? 'static-tabs' : 'hydrated-element';
+	return (tree) => {
+		let counter = 0;
+
+		visit(tree, 'element', (node, index, parent) => {
+			if (!parent || typeof index !== 'number') return;
+			if (node.tagName !== 'p') return;
+
+			const startText = getNodeText(node).trim();
+			const startMatch = startText.match(START_DELIMITER_REGEX);
+			if (!startMatch) return;
+
+			let endIndex = -1;
+			for (let i = index + 1; i < parent.children.length; i++) {
+				const candidate = parent.children[i];
+				if (isEndDelimiterNode(candidate)) {
+					endIndex = i;
+					break;
+				}
+
+				const splitNodes = splitNodeWithAttachedEndDelimiter(candidate);
+				if (splitNodes) {
+					parent.children.splice(i, 1, ...splitNodes);
+					endIndex = splitNodes.length === 1 ? i : i + 1;
+					break;
+				}
+			}
+
+			let implicitBoundaryIndex = -1;
+			if (endIndex === -1) {
+				for (let i = index + 1; i < parent.children.length; i++) {
+					const candidate = parent.children[i];
+					if (isHeadingElement(candidate) || isCodeGroupStartNode(candidate)) {
+						implicitBoundaryIndex = i;
+						break;
+					}
+				}
+				if (implicitBoundaryIndex === -1) return;
+			}
+
+			const explicitLabels = (startMatch[1] ?? '').split(',').map((label) => label.trim()).filter(Boolean);
+			const sliceEnd = endIndex !== -1 ? endIndex : implicitBoundaryIndex;
+			const between = parent.children.slice(index + 1, sliceEnd);
+			const normalizedBlocks = between
+				.map((child) => stripTrailingDelimiter(child))
+				.filter(Boolean);
+			const codeBlocks = normalizedBlocks.filter(
+				(child) => !isIgnorableNode(child) && !isEndDelimiterNode(child),
+			);
+			const usedLabels = codeBlocks.map((block, blockIndex) => {
+				return explicitLabels[blockIndex] ?? inferLabelFromBlock(block, blockIndex);
+			});
+
+			const uniqueId = `rcg-${counter++}`;
+
+			const groupNode = output === 'static-tabs'
+				? {
+					type: 'element',
+					tagName: 'div',
+					properties: { className: ['rehype-code-group'] },
+					children: [
+						createTabs(usedLabels, uniqueId),
+						...codeBlocks.map((block, blockIndex) =>
+							createStaticBlockWrapper(block, uniqueId, blockIndex),
+						),
+					],
+				}
+				: {
+					type: 'element',
+					tagName: 'codegroup',
+					properties: {
+						className: ['rehype-code-group'],
+						'data-codegroup-tabs': JSON.stringify(usedLabels),
+						'data-codegroup-active': '0',
+					},
+					children: codeBlocks.map((block, blockIndex) => createBlockWrapper(block, blockIndex)),
+				};
+
+			const deleteCount = endIndex !== -1
+				? endIndex - index + 1
+				: implicitBoundaryIndex - index;
+			parent.children.splice(index, deleteCount, groupNode);
+
+			return [SKIP, index + 1];
+		});
+
+		visit(tree, 'element', (node) => {
+			if (!node.properties?.className) return;
+			node.properties.className = normalizeClassNameList(node.properties.className);
+		});
+	};
+}

package/src/lib/MarkdownDocs/rehypeCodeTitle.js

@@ -0,0 +1,96 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * Rehype plugin that wraps fenced code blocks that have a `data-code-title`
+ * attribute in a container div and prepends a title bar, similar to how
+ * code groups display their tab labels.
+ *
+ * Code blocks processed by the Shiki highlighter become `raw` nodes in the
+ * hast tree (mdsvex wraps them in {@html `…`}).  The title is carried as an
+ * HTML attribute inside the raw string, e.g.:
+ *   <pre data-code-title="filename.js" data-code-lang="js">…</pre>
+ *
+ * Output:
+ *   <div class="code-block-with-title">
+ *     <div class="code-block-title">filename.js</div>
+ *     {raw node}
+ *   </div>
+ *
+ * Code blocks that already live inside a code-group tab panel (.rcg-block)
+ * are intentionally skipped – their title is already shown as the tab label.
+ */
+
+const TITLE_ATTR_RE = /data-code-title=["']([^"']+)["']/i;
+
+function normalizeClassNameList(value) {
+	if (Array.isArray(value)) return value;
+	if (typeof value === 'string') return value.split(/\s+/).filter(Boolean);
+	return [];
+}
+
+function getTitleFromElement(node) {
+	if (!node || node.type !== 'element') return '';
+	const own = node.properties?.['data-code-title'] ?? node.properties?.dataCodeTitle;
+	if (typeof own === 'string' && own.trim()) return own.trim();
+
+	if (node.tagName === 'pre') {
+		for (const child of node.children ?? []) {
+			if (child?.type !== 'element' || child.tagName !== 'code') continue;
+			const nested = child.properties?.['data-code-title'] ?? child.properties?.dataCodeTitle;
+			if (typeof nested === 'string' && nested.trim()) return nested.trim();
+		}
+	}
+
+	return '';
+}
+
+function wrapWithTitle(title, node) {
+	const titleNode = {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: ['code-block-title'] },
+		children: [{ type: 'text', value: title }],
+	};
+
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: ['code-block-with-title'] },
+		children: [titleNode, node],
+	};
+}
+
+export default function rehypeCodeTitle() {
+	return (tree) => {
+		visit(tree, 'element', (node, index, parent) => {
+			if (!parent || typeof index !== 'number') return;
+			if (node.tagName !== 'pre') return;
+
+			// Skip blocks inside code-group tab panels
+			const parentClasses = normalizeClassNameList(parent.properties?.className);
+			if (parentClasses.includes('rcg-block')) return;
+
+			const title = getTitleFromElement(node);
+			if (!title) return;
+
+			parent.children[index] = wrapWithTitle(title, node);
+		});
+
+		visit(tree, 'raw', (node, index, parent) => {
+			if (!parent || typeof index !== 'number') return;
+
+			// Skip blocks inside code-group tab panels
+			const parentClasses = normalizeClassNameList(parent.properties?.className);
+			if (parentClasses.includes('rcg-block')) return;
+
+			const raw = String(node.value ?? '');
+			const titleMatch = raw.match(TITLE_ATTR_RE);
+			if (!titleMatch) return;
+
+			const title = titleMatch[1].trim();
+			if (!title) return;
+
+			parent.children[index] = wrapWithTitle(title, node);
+		});
+	};
+}

package/src/lib/MarkdownDocs/rehypeToc.js

@@ -0,0 +1,170 @@
+import { visit, SKIP } from 'unist-util-visit';
+
+/**
+ * Default options — compatible with @mdit-vue/plugin-toc
+ * @see https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc
+ *
+ * @typedef {Object} TocOptions
+ * @property {RegExp}    pattern        - Placeholder pattern. Default: /^\[\[toc\]\]$/i
+ * @property {number[]}  level          - Heading levels to include. Default: [2, 3]
+ * @property {string}    containerTag   - Container element tag. Default: 'nav'
+ * @property {string}    containerClass - Container element class. Default: 'table-of-contents'
+ * @property {'ul'|'ol'} listTag        - List element tag. Default: 'ul'
+ * @property {string}    listClass      - List element class. Default: ''
+ * @property {string}    itemClass      - List item class. Default: ''
+ * @property {string}    linkTag        - Link tag. Default: 'a'
+ * @property {string}    linkClass      - Link class. Default: ''
+ * @property {Function}  format         - Optional heading text formatter. Default: undefined
+ */
+
+const defaults = {
+	pattern: /^\[\[toc\]\]$/i,
+	level: [2, 3],
+	containerTag: 'nav',
+	containerClass: 'table-of-contents',
+	listTag: 'ul',
+	listClass: '',
+	itemClass: '',
+	linkTag: 'a',
+	linkClass: '',
+	format: undefined,
+};
+
+/**
+ * Rehype plugin: replaces [[TOC]] paragraph with a nested TOC tree,
+ * compatible with @mdit-vue/plugin-toc HTML output and options.
+ *
+ * @param {Partial<typeof defaults>} userOptions
+ */
+export function rehypeTocPlaceholder(userOptions = {}) {
+	const options = { ...defaults, ...userOptions };
+
+	return (tree) => {
+		// Collect headings matching the requested levels
+		const headings = [];
+		visit(tree, 'element', (node) => {
+			const level = parseInt(node.tagName.slice(1), 10);
+			if (
+				node.tagName.match(/^h[1-6]$/) &&
+				options.level.includes(level) &&
+				node.properties?.id
+			) {
+				const text = options.format
+					? options.format(collectText(node))
+					: collectText(node);
+				headings.push({ id: node.properties.id, text, level });
+			}
+		});
+
+		if (!headings.length) return;
+
+		// Find [[TOC]] paragraph and replace it
+		visit(tree, 'element', (node, index, parent) => {
+			if (node.tagName !== 'p' || !parent || index == null) return;
+			const raw = collectText(node).trim();
+			if (!options.pattern.test(raw)) return;
+
+			const nested = buildNestedTree(headings);
+			const listNode = renderList(nested, options);
+
+			const containerProps = options.containerClass
+				? { className: options.containerClass.split(' ').filter(Boolean) }
+				: {};
+
+			parent.children.splice(index, 1, {
+				type: 'element',
+				tagName: options.containerTag,
+				properties: containerProps,
+				children: [listNode],
+			});
+		});
+	};
+}
+
+/** Collect all text content from a node, skipping header-anchor elements */
+function collectText(node) {
+	let text = '';
+	visit(node, (n) => {
+		if (n.type === 'element' && (n.properties?.class === 'header-anchor' || n.properties?.className?.includes?.('header-anchor'))) return SKIP;
+		if (n.type === 'text') text += n.value;
+	});
+	return text;
+}
+
+/**
+ * Build a nested tree from a flat headings list,
+ * matching mdit-vue's resolveHeadersFromTokens behavior.
+ */
+function buildNestedTree(headings) {
+	const root = [];
+	const stack = [];
+
+	for (const h of headings) {
+		const node = { ...h, children: [] };
+
+		while (stack.length > 0 && stack[stack.length - 1].level >= h.level) {
+			stack.pop();
+		}
+
+		if (stack.length === 0) {
+			root.push(node);
+		} else {
+			stack[stack.length - 1].children.push(node);
+		}
+
+		stack.push(node);
+	}
+
+	return root;
+}
+
+/**
+ * Recursively render nested heading tree to hast nodes.
+ * Output matches mdit-vue's createRenderHeaders structure:
+ *   <ul>
+ *     <li><a href="#id">text</a><ul>...</ul></li>
+ *   </ul>
+ */
+function renderList(nodes, options) {
+	const listProps = options.listClass
+		? { className: options.listClass.split(' ').filter(Boolean) }
+		: {};
+
+	const items = nodes.map((node) => {
+		const linkProps = { href: `#${node.id}` };
+		if (options.linkClass) {
+			linkProps.className = options.linkClass.split(' ').filter(Boolean);
+		}
+
+		const liChildren = [
+			{
+				type: 'element',
+				tagName: options.linkTag,
+				properties: linkProps,
+				children: [{ type: 'text', value: node.text }],
+			},
+		];
+
+		if (node.children.length > 0) {
+			liChildren.push(renderList(node.children, options));
+		}
+
+		const itemProps = options.itemClass
+			? { className: options.itemClass.split(' ').filter(Boolean) }
+			: {};
+
+		return {
+			type: 'element',
+			tagName: 'li',
+			properties: itemProps,
+			children: liChildren,
+		};
+	});
+
+	return {
+		type: 'element',
+		tagName: options.listTag,
+		properties: listProps,
+		children: items,
+	};
+}

package/src/lib/MarkdownDocs/remarkCodeMeta.js

@@ -0,0 +1,22 @@
+import { visit } from 'unist-util-visit';
+import { normalizeCodeFenceInfo } from './codeFenceInfo.js';
+
+const TITLE_RE = /\[([^\]]+)\]/;
+
+export function remarkCodeMeta() {
+	return (tree) => {
+		visit(tree, 'code', (node) => {
+			const { lang, meta } = normalizeCodeFenceInfo(node.lang ?? '', node.meta ?? '');
+			const titleMatch = meta.match(TITLE_RE);
+			const title = titleMatch?.[1]?.trim() ?? '';
+
+			node.data = node.data ?? {};
+			node.data.hProperties = {
+				...(node.data.hProperties ?? {}),
+				...(lang ? { 'data-code-lang': lang } : {}),
+				...(meta ? { 'data-code-meta': meta } : {}),
+				...(title ? { 'data-code-title': title } : {}),
+			};
+		});
+	};
+}