feat: translate recipes between mdx and md

__tests__/transformers/readme-components.test.ts

@@ -7,6 +7,7 @@ describe('Readme Components Transformer', () => {
     { md: '<CodeTabs />', type: 'code-tabs' },
     { md: '<Image />', type: 'image' },
     { md: '<Table />', type: 'table' },
+    { md: '<TutorialTile />', type: 'tutorial-tile' },
   ];
 
   it.each(nodes)('transforms $md into a(n) $type node', ({ md, type }) => {

__tests__/transformers/readme-to-mdx.test.ts

@@ -0,0 +1,25 @@
+import { mdx } from '../../index';
+
+describe('readme-to-mdx transformer', () => {
+  it('converts a tutorial tile to MDX', () => {
+    const ast = {
+      type: 'root',
+      children: [
+        {
+          type: 'tutorial-tile',
+          backgroundColor: 'red',
+          emoji: '🦉',
+          id: 'test-id',
+          link: 'http://example.com',
+          slug: 'test-id',
+          title: 'Test',
+        },
+      ],
+    };
+
+    expect(mdx(ast)).toMatchInlineSnapshot(`
+      "<TutorialTile backgroundColor="red" emoji="🦉" id="test-id" link="http://example.com" slug="test-id" title="Test" />
+      "
+    `);
+  });
+});

enums.ts

@@ -1,12 +1,13 @@
 export enum NodeTypes {
   callout = 'rdme-callout',
   codeTabs = 'code-tabs',
+  embed = 'embed',
   emoji = 'gemoji',
+  glossary = 'readme-glossary-item',
+  htmlBlock = 'html-block',
   i = 'i',
   image = 'image',
-  htmlBlock = 'html-block',
-  embed = 'embed',
-  variable = 'readme-variable',
-  glossary = 'readme-glossary-item',
   reusableContent = 'reusable-content',
+  tutorialTile = 'tutorial-tile',
+  variable = 'readme-variable',
 }

index.tsx

@@ -14,7 +14,7 @@ import * as Components from './components';
 import { getHref } from './components/Anchor';
 import { options } from './options';
 
-import transformers, { readmeComponentsTransformer } from './processor/transform';
+import transformers, { readmeComponentsTransformer, readmeToMdx } from './processor/transform';
 import compilers from './processor/compile';
 import MdxSyntaxError from './errors/mdx-syntax-error';
 import { GlossaryTerm } from './contexts/GlossaryTerms';
@@ -118,7 +118,9 @@ export const reactTOC = (text: string, opts = {}) => {
 };
 
 export const mdx = (tree: any, opts = {}) => {
-  return remark().use(remarkMdx).use(remarkGfm).use(compilers).stringify(tree, opts);
+  const processor = remark().use(remarkMdx).use(remarkGfm).use(readmeToMdx).use(compilers);
+
+  return processor.stringify(processor.runSync(tree), opts);
 };
 
 export const html = (text: string, opts = {}) => {

package.json

@@ -105,7 +105,7 @@
     "prettier": "^3.2.5",
     "puppeteer": "^19.8.3",
     "react-router-dom": "^6.22.3",
-    "sass": "^1.77.2",
+    "sass": "^1.77.3",
     "sass-loader": "^13.2.2",
     "semantic-release": "^22.0.12",
     "stream-browserify": "^3.0.0",

processor/transform/index.ts

@@ -3,7 +3,8 @@ import codeTabsTransfromer from './code-tabs';
 import embedTransformer from './embeds';
 import gemojiTransformer from './gemoji+';
 import readmeComponentsTransformer from './readme-components';
+import readmeToMdx from './readme-to-mdx';
 
-export { readmeComponentsTransformer };
+export { readmeComponentsTransformer, readmeToMdx };
 
 export default [calloutTransformer, codeTabsTransfromer, embedTransformer, gemojiTransformer];

processor/transform/readme-components.ts

@@ -16,6 +16,7 @@ const types = {
   Variable: NodeTypes['variable'],
   td: 'tableCell',
   tr: 'tableRow',
+  TutorialTile: NodeTypes.tutorialTile,
 };
 
 const attributes = <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) =>

processor/transform/readme-to-mdx.ts

@@ -0,0 +1,31 @@
+import { NodeTypes } from '../../enums';
+import { Transform } from 'mdast-util-from-markdown';
+import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
+
+import { visit } from 'unist-util-visit';
+
+const readmeToMdx = (): Transform => tree => {
+  visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
+    const attributes: MdxJsxAttribute[] = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
+      const value = tile[name];
+      delete tile[name];
+
+      return {
+        type: 'mdxJsxAttribute',
+        name,
+        value,
+      };
+    });
+
+    parent.children.splice(index, 1, {
+      type: 'mdxJsxFlowElement',
+      name: 'TutorialTile',
+      attributes,
+      children: [],
+    });
+  });
+
+  return tree;
+};
+
+export default readmeToMdx;

types.d.ts

@@ -53,12 +53,23 @@ interface FaEmoji extends Literal {
   type: NodeTypes.i;
 }
 
+interface TutorialTile extends Node {
+  backgroundColor: string;
+  emoji: string;
+  id: string;
+  link: string;
+  slug: string;
+  title: string;
+  type: NodeTypes.tutorialTile;
+}
+
 declare module 'mdast' {
   interface BlockContentMap {
     [NodeTypes.callout]: Callout;
     [NodeTypes.codeTabs]: CodeTabs;
     [NodeTypes.embed]: Embed;
     [NodeTypes.htmlBlock]: HTMLBlock;
+    [NodeTypes.tutorialTile]: TutorialTile;
   }
 
   interface PhrasingContentMap {
@@ -72,5 +83,6 @@ declare module 'mdast' {
     [NodeTypes.embed]: Embed;
     [NodeTypes.emoji]: Gemoji;
     [NodeTypes.i]: FaEmoji;
+    [NodeTypes.tutorialTile]: TutorialTile;
   }
 }