Fixes runtime rendering of mdx in cms preview

package.json

@@ -16,7 +16,7 @@
     "clean": "find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' + && yarn && yarn gatsby-clean"
   },
   "dependencies": {
-    "@openeventkit/event-site": "2.0.108-beta.9",
+    "@openeventkit/event-site": "2.0.108-beta.11",
     "gatsby": "5.9.1"
   }
 }

src/@openeventkit/event-site/templates/content-page/shortcodes.js

@@ -1,9 +1,11 @@
 import Grid from "../../../../components/Grid";
 import SpeakerCard from "../../../../components/SpeakerCard";
+import ResponsiveImage from "../../../../components/ResponsiveImage";
 
 const shortcodes = {
   Grid,
-  SpeakerCard
+  SpeakerCard,
+  "img": ResponsiveImage,
 };
 
 export default shortcodes;

src/components/ResponsiveImage.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const imageStyles = {
+  maxWidth: "100%",
+  height: "auto"
+};
+
+const ResponsiveImage = ({ src, alt, maxWidth = "100%", padding = "0" }) => {
+  const containerStyles = {
+    maxWidth: maxWidth,
+    padding: padding,
+    display: "flex",
+    justifyContent: "center"
+  };
+  return (
+    <div style={containerStyles}>
+      <img src={src} alt={alt} style={imageStyles} />
+    </div>
+  );
+};
+
+ResponsiveImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export default ResponsiveImage;

src/components/SpeakerCard.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { cloneElement } from "react";
 import PropTypes from "prop-types";
 
 const cardStyle = {
@@ -27,11 +27,14 @@ const pStyle = {
   marginBottom: 0
 };
 
-const SpeakerCard = ({ name, role, children }) => {
+const SpeakerCard = ({ name, role, children, ...props }) => {
+  const childrenWithProps = React.Children.map(children, child =>
+    cloneElement(child, { ...props })
+  );
   return (
     <div style={cardStyle}>
       <div style={innerContainerStyle}>
-        <div style={contentStyle}>{children}</div>
+        <div style={contentStyle}>{childrenWithProps}</div>
         <div style={textStyle}>
           <p style={pStyle}>
             <b>{name}</b><br/>