mdx-plugin render children-body

gatsby-config.js

@@ -467,6 +467,10 @@ module.exports = {
       resolve: "gatsby-plugin-mdx",
       options: {
         extensions: [".mdx", ".md"],
+        mdxOptions: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
         gatsbyRemarkPlugins: [],
       },
     },

src/components/mdx-layout.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+// Default layout for MDX content
+const MDXLayout = ({ children }) => {
+  return <div className="mdx-content">{children}</div>;
+};
+
+export default MDXLayout;

src/templates/blog-single.js

@@ -11,6 +11,7 @@ import BlogSingle from "../sections/Blog/Blog-single";
 import SimpleReactLightbox from "simple-react-lightbox";
 export const query = graphql`query BlogsBySlug($slug: String!) {
   mdx(fields: {slug: {eq: $slug}}) {
+    body
     frontmatter {
       title
       subtitle
@@ -43,6 +44,8 @@ export const query = graphql`query BlogsBySlug($slug: String!) {
 
 const BlogSinglePage = ({ data, children }) => {
 
+  // In gatsby-plugin-mdx v5, body is a function component
+  const MDXContent = data.mdx.body;
 
   return (
 
@@ -51,7 +54,7 @@ const BlogSinglePage = ({ data, children }) => {
 
       <SimpleReactLightbox>
         <BlogSingle data={data}>
-          {children}
+          {MDXContent ? <MDXContent /> : children}
         </BlogSingle>
       </SimpleReactLightbox>
 

src/templates/event-single.js

@@ -1,8 +1,6 @@
 import React from "react";
 import { graphql } from "gatsby";
 
-
-
 import EventSingle from "../sections/Community/Event-single";
 
 import LearnServiceMeshCTA from "../sections/Learn/Learn-Service-Mesh-CTA";
@@ -11,6 +9,7 @@ import SEO from "../components/seo";
 
 export const query = graphql`query EventsBySlug($slug: String!) {
   mdx(fields: {slug: {eq: $slug}}) {
+    body
     frontmatter {
       attribute {
         name
@@ -38,14 +37,16 @@ export const query = graphql`query EventsBySlug($slug: String!) {
 
 const EventSinglePage = ({ data, children }) => {
 
+  // In gatsby-plugin-mdx v5, body is a function component
+  const MDXContent = data.mdx.body;
 
   return (
 
     <>
 
 
       <EventSingle data={data}>
-        {children}
+        {MDXContent ? <MDXContent /> : children}
       </EventSingle>
       <LearnServiceMeshCTA />
       <Subscribe />

src/templates/resource-single.js

@@ -11,6 +11,7 @@ import ResourceSingle from "../sections/Resources/Resource-single";
 import SimpleReactLightbox from "simple-react-lightbox";
 export const query = graphql`query ResourcesBySlug($slug: String!) {
   mdx(fields: {slug: {eq: $slug}}) {
+    body
     frontmatter {
       title
       subtitle
@@ -36,6 +37,8 @@ export const query = graphql`query ResourcesBySlug($slug: String!) {
 
 const ResourceSinglePage = ({ data, children }) => {
 
+  // In gatsby-plugin-mdx v5, body is a function component
+  const MDXContent = data.mdx.body;
 
   return (
 
@@ -44,7 +47,7 @@ const ResourceSinglePage = ({ data, children }) => {
 
       <SimpleReactLightbox>
         <ResourceSingle data={data}>
-          {children}
+          {MDXContent ? <MDXContent /> : children}
         </ResourceSingle>
       </SimpleReactLightbox>
 

src/templates/workshop-single.js

@@ -9,6 +9,7 @@ import WorkshopSinglePage from "../sections/Learn/Workshop-single/index";
 
 export const query = graphql`query WorkshopBySlug($slug: String!) {
   mdx(fields: {slug: {eq: $slug}}) {
+    body
     frontmatter {
       title
       date(formatString: "MMMM Do, YYYY")
@@ -35,14 +36,16 @@ export const query = graphql`query WorkshopBySlug($slug: String!) {
 
 const WorkshopSingle = ({ data, children }) => {
 
+  // In gatsby-plugin-mdx v5, body is a function component
+  const MDXContent = data.mdx.body;
 
   return (
 
     <>
 
 
       <WorkshopSinglePage frontmatter={data.mdx.frontmatter}>
-        {children}
+        {MDXContent ? <MDXContent /> : children}
       </WorkshopSinglePage>
 
     </>