From 1ab58d7b5cf088a1cd1d9c56c4bcc4728f20eebb Mon Sep 17 00:00:00 2001
From: Lee Calcote <lee.calcote@layer5.io>
Date: Mon, 22 Sep 2025 16:36:38 -0500
Subject: [PATCH] mdx-plugin render children-body

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
---
 gatsby-config.js                 | 4 ++++
 src/components/mdx-layout.js     | 8 ++++++++
 src/templates/blog-single.js     | 5 ++++-
 src/templates/event-single.js    | 7 ++++---
 src/templates/resource-single.js | 5 ++++-
 src/templates/workshop-single.js | 5 ++++-
 6 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 src/components/mdx-layout.js

diff --git a/gatsby-config.js b/gatsby-config.js
index 095194a8a271b..2d2e8395ff264 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -467,6 +467,10 @@ module.exports = {
       resolve: "gatsby-plugin-mdx",
       options: {
         extensions: [".mdx", ".md"],
+        mdxOptions: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
         gatsbyRemarkPlugins: [],
       },
     },
diff --git a/src/components/mdx-layout.js b/src/components/mdx-layout.js
new file mode 100644
index 0000000000000..fa953922989fc
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/templates/blog-single.js b/src/templates/blog-single.js
index 5fd86e069bb4f..b2c8462f1a3e6 100644
--- a/src/templates/blog-single.js
+++ b/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>
 
diff --git a/src/templates/event-single.js b/src/templates/event-single.js
index f5e7f4622d68f..d5572e3c82109 100644
--- a/src/templates/event-single.js
+++ b/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,6 +37,8 @@ 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 (
 
@@ -45,7 +46,7 @@ const EventSinglePage = ({ data, children }) => {
 
 
       <EventSingle data={data}>
-        {children}
+        {MDXContent ? <MDXContent /> : children}
       </EventSingle>
       <LearnServiceMeshCTA />
       <Subscribe />
diff --git a/src/templates/resource-single.js b/src/templates/resource-single.js
index 91383f2f38e83..2452a0c1eebb6 100644
--- a/src/templates/resource-single.js
+++ b/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>
 
diff --git a/src/templates/workshop-single.js b/src/templates/workshop-single.js
index b9d9b6df2bbf8..71cbdb4fe0e78 100644
--- a/src/templates/workshop-single.js
+++ b/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,6 +36,8 @@ 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 (
 
@@ -42,7 +45,7 @@ const WorkshopSingle = ({ data, children }) => {
 
 
       <WorkshopSinglePage frontmatter={data.mdx.frontmatter}>
-        {children}
+        {MDXContent ? <MDXContent /> : children}
       </WorkshopSinglePage>
 
     </>