From 4465cc24aa407b08359f8f431bb75bbd05fefc78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Sun, 15 Dec 2024 18:00:29 +0100
Subject: [PATCH] fix: fix MDX handling in Page compoment

---
 gatsby-node.mjs      |  6 +++---
 src/layouts/Page.tsx | 26 +++++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/gatsby-node.mjs b/gatsby-node.mjs
index 5bb0642..d741de6 100644
--- a/gatsby-node.mjs
+++ b/gatsby-node.mjs
@@ -49,10 +49,10 @@ export const createPages = async ({
   const allEdges = results.data.allMdx.edges;
 
   const blogEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "posts"
+    (edge) => edge.node.fields.source === "posts",
   );
   const pageEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "pages"
+    (edge) => edge.node.fields.source === "pages",
   );
 
   blogEdges.forEach((edge, index) => {
@@ -80,7 +80,7 @@ export const createPages = async ({
       component: path.resolve("./src/layouts/Page.tsx"),
       context: {
         id: edge.node.id,
-        slug: edge.node.slug,
+        slug: edge.node.fields.slug,
       },
     });
   });
diff --git a/src/layouts/Page.tsx b/src/layouts/Page.tsx
index 54c5fe4..04b4a0f 100644
--- a/src/layouts/Page.tsx
+++ b/src/layouts/Page.tsx
@@ -1,15 +1,19 @@
-import * as React from "react"
-import { graphql, PageProps } from "gatsby"
-import { MDXRenderer } from "gatsby-plugin-mdx"
-import Layout from "../components/organisms/Layout"
+import * as React from "react";
+import { graphql, PageProps } from "gatsby";
+import { MDXProvider } from "@mdx-js/react";
+import Layout from "../components/organisms/Layout";
 
-const Page = ({ data: { mdx }, path }: PageProps<Queries.PageQuery>) => (
+const mdxComponents = {};
+
+const Page = ({
+  data: { mdx },
+  path,
+  children,
+}: PageProps<Queries.PageQuery>) => (
   <Layout pageTitle={mdx?.frontmatter?.title ?? ""}>
-    <MDXRenderer>
-      {mdx?.body ?? ""}
-    </MDXRenderer>
+    <MDXProvider components={mdxComponents}>{children}</MDXProvider>
   </Layout>
-)
+);
 
 export const query = graphql`
   query Page($id: String) {
@@ -21,6 +25,6 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 
-export default Page
+export default Page;