fix: images

__tests__/transformers/readme-components.test.ts

@@ -49,7 +49,7 @@ Second
     },
     image: {
       md: `![](http://placekitten.com/600/200)`,
-      mdx: `<Image src="http://placekitten.com/600/200" />`,
+      mdx: `<Image url="http://placekitten.com/600/200" />`,
     },
     table: {
       md: `

processor/compile/image.ts

@@ -1,15 +1,20 @@
-import type { Image } from "mdast";
+import type { Image } from 'mdast';
 
 const image = (node: Image) => {
   const { align, className, width } = node.data?.hProperties || {};
   const complexImage: boolean = Boolean(width) || Boolean(className) || Boolean(align);
-
+
+  console.log(JSON.stringify({ node }, null, 2));
+
   if (complexImage) {
-    const attributes = Object.keys(node.data?.hProperties).map(key => `${key}="${node.data?.hProperties[key]}"`).join(' ')
+    const attributes = Object.keys(node.data?.hProperties)
+      .map(key => `${key}="${node.data?.hProperties[key]}"`)
+      .join(' ');
     return `<Image ${attributes} />`;
   }
 
   return `![${node.alt}](${node.url}${node.title ? ` "${node.title}")` : ')'}`;
-}
+};
+
+export default image;
 
-export default image;

processor/transform/readme-components.ts

@@ -53,14 +53,14 @@ const coerceJsxToMd =
       parent.children[index] = mdNode;
     } else if (node.name === 'Image') {
       const { position } = node;
-      const { alt = '', src, title = null } = attributes<Pick<Image, 'alt' | 'title'> & { src: string }>(node);
+      const { alt = '', url, title = null } = attributes<Pick<Image, 'alt' | 'title' | 'url'>>(node);
 
       const mdNode: Image = {
         alt,
         position,
         title,
         type: 'image',
-        url: src,
+        url,
       };
 
       parent.children[index] = mdNode;