eui_docs_to_mdx.js

(async function(copy) {
	const callOutToAdmonitionType = {
		'euiCallOut--success': 'tip',
		'euiCallOut--info': 'info',
		'euiCallOut--warning': 'warning',
		'euiCallOut--danger': 'danger',
		'euiCallOut--primary': 'note'
	};

	function cleanAttribute(attribute) {
		return attribute ? attribute.replace(/(\n+\s*)+/g, '\n') : ''
	}

	const title = document.querySelector('.euiPageHeaderContent .euiTitle').innerText;
	const slug = location.hash.substring(1);
	const id = slug.substring(1).replaceAll('/', '_').replaceAll('-', '_');

	for (let panel of document.querySelectorAll('button[name="demoJS"], button[name="demoTS"], button[name="demoTSX"]')) {
		panel.click();

		// const panelElement = panel.parentElement.parentElement.parentElement.parentElement.parentElement;
		// const ch = document.createTextNode('<!-- TODO: Add example -->');
		// panelElement.parentElement.replaceChild(ch, panelElement);
	}
	await new Promise(resolve => setTimeout(resolve, 500));

	function loadScript(src) {
		return new Promise((resolve) => {
			const el = document.createElement('script');
			el.src = src;
			el.onload = () => resolve();
			document.head.appendChild(el);
		});
	}

	await Promise.all([
		loadScript('https://unpkg.com/turndown/dist/turndown.js'),
		loadScript('https://unpkg.com/turndown-plugin-gfm@1.0.2/dist/turndown-plugin-gfm.js'),
	]);

	const ts = new TurndownService({ headingStyle: 'atx', codeBlockStyle: 'fenced' });
	const { gfm } = turndownPluginGfm;
	ts.use(gfm);

	ts.addRule('callout', {
		filter(node) {
			return node.nodeName === 'DIV' && node.classList.contains('euiCallOut');
		},
		replacement(content, node) {
			for (let [className, type] of Object.entries(callOutToAdmonitionType)) {
				if (node.classList.contains(className)) {
					const title = node.querySelector('.euiCallOutHeader__title')?.innerText;
					const contentWithoutTitle = content.replace(title, '');

					if (!contentWithoutTitle.trim().length) {
						return `:::${type}\n${content}:::`;
					}

					return `:::${type}${title ? ` ${title}` : ''}\n${contentWithoutTitle}:::`;
					break;
				}
			}

			return '';
		}
	});

	ts.addRule('demo', {
		filter(node) {
			return node.nodeName === 'DIV' && node.dataset.euiDocsExample === 'true';
		},
		replacement(content, node) {
			const demoButton = node.querySelector('button[name="demoJS"], button[name="demoTS"], button[name="demoTSX"]');
			if (!demoButton) {
				return null;
			}
			const code = demoButton.parentElement.parentElement.parentElement.parentElement.querySelector('.euiCodeBlock__code').innerText;

			return `\`\`\`tsx interactive\n${code}\n\`\`\``;
		},
	});

	ts.addRule('link', {
		filter(node) {
			return node.nodeName === 'A';
		},
		replacement(content, node) {
			let href = node.getAttribute('href');
		    if (href) href = href.replace(/([()])/g, '\\$1');
		    if (href?.startsWith('#/')) {
		    	href = `/docs/${href.substring(2)}`;
		    }

		    let title = cleanAttribute(node.getAttribute('title'));
		    if (title) title = ' "' + title.replace(/"/g, '\\"') + '"';

		    return '[' + content + '](' + href + title + ')'
		}
	});

	const contentElement = document.getElementById('start-of-content');
	let result = await ts.turndown(contentElement.innerHTML);
	result = result.replace(/^#(.+)\n/, '');
	result = result.replace(/^(#+) ([\w- ]+)(?<hash>\[\]\(.+\))$/gm, '$1 $2');
	result = result.replace(/^\n/, '');
	result = result.replace(/\n{2,}/g, '\n\n');

	const fullPageContent = `---\nslug: ${slug}\nid: ${id}\n---\n\n# ${title}\n\n${result}`;

	copy(fullPageContent);
})(copy)