@mintlify/common
Version:
Commonly shared code within Mintlify
38 lines (37 loc) • 1.51 kB
JavaScript
import { toMdxJsxFlowElement } from '../../lib/remark-utils.js';
export const remarkFrames = () => {
return (tree) => {
let preTree = { children: [] };
tree.children = tree.children.map((node) => {
// Start of horizontal block: -- block
if (node.type === 'paragraph' &&
node.children.length === 1 &&
node.children[0].value === '-- block') {
node.type = 'jsx';
node.value = `<div className='grid md:grid-cols-2 md:gap-8'><div>`;
}
// Start a new column: -- column
if (node.type === 'paragraph' &&
node.children.length === 1 &&
node.children[0].value === '-- column') {
node.type = 'jsx';
node.value = `</div><div>`;
}
// End of horizontal block: -- /block
if (node.type === 'paragraph' &&
node.children.length === 1 &&
node.children[0].value === '-- /block') {
node.type = 'jsx';
node.value = `</div></div>`;
}
if (node.type === 'mdxJsxFlowElement' && (node.name === 'Example' || node.name === 'Frame')) {
node.name = 'Frame';
}
if (node.type === 'jsx') {
node = toMdxJsxFlowElement(node.value);
}
return node;
});
tree.children = [...preTree.children, ...tree.children];
};
};