Bump MDX to v2

gatsby-node.js

@@ -42,6 +42,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
                             language
                             published(formatString: "YYYY/MM")
                         }
+                        internal {
+                            contentFilePath
+                        }
                     }
                 }
             }
@@ -147,7 +150,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
                 }/${node.childMdx.frontmatter.published}/${
                     node.childMdx.frontmatter.url
                 }`,
-                component: blogTemplate,
+                component: `${blogTemplate}?__contentFilePath=${node.childMdx.internal.contentFilePath}`,
                 context: {
                     mdxId: node.childMdx.id,
                     lang: node.childMdx.frontmatter.language,

package.json

@@ -23,8 +23,7 @@
         "@babel/plugin-transform-typescript": "7.18.12",
         "@fontsource/encode-sans": "4.5.7",
         "@icons-pack/react-simple-icons": "5.4.0",
-        "@mdx-js/mdx": "1.6.22",
+        "@mdx-js/react": "^2.1.3",
-        "@mdx-js/react": "1.6.22",
         "@react-hook/media-query": "1.1.1",
         "@types/animejs": "3.1.5",
         "@types/node": "17.0.14",
@@ -39,7 +38,7 @@
         "gatsby-plugin-feed": "4.21.0",
         "gatsby-plugin-image": "2.21.0",
         "gatsby-plugin-manifest": "4.21.0",
-        "gatsby-plugin-mdx": "3.20.0",
+        "gatsby-plugin-mdx": "^4.0.0",
         "gatsby-plugin-netlify": "5.0.1",
         "gatsby-plugin-offline": "5.21.0",
         "gatsby-plugin-portal": "1.0.7",
@@ -54,7 +53,7 @@
         "gatsby-plugin-typescript": "4.21.0",
         "gatsby-remark-copy-linked-files": "5.21.0",
         "gatsby-remark-images": "6.21.0",
-        "gatsby-source-filesystem": "4.21.1",
+        "gatsby-source-filesystem": "^4.21.1",
         "gatsby-transformer-json": "4.21.0",
         "gatsby-transformer-sharp": "4.21.0",
         "hamburger-react": "2.5.0",

src/pages/about.tsx

@@ -7,7 +7,6 @@ import * as projectStyles from "./projects.module.scss";
 
 import { Trans, Link } from "gatsby-plugin-react-i18next";
 import { graphql } from "gatsby";
-import { MDXRenderer } from "gatsby-plugin-mdx";
 import { GatsbyImage } from "gatsby-plugin-image";
 
 import {
@@ -102,7 +101,7 @@ const AboutPage = (props) => {
     const { t, i18n } = useTranslation();
     const { modules } = useSiteMetadata();
 
-    let file = props.data.file;
+    //let file = props.data.file;
 
     const career = props.data.career.nodes;
     const lang = i18n.language;
@@ -120,7 +119,10 @@ const AboutPage = (props) => {
             <section className={styles.aboutSection}>
                 <article>
                     <div className={styles.aboutText}>
-                        <MDXRenderer>{file.childMdx.body}</MDXRenderer>
+                        {/*<MDXRenderer>{file.childMdx.body}</MDXRenderer>*/}
+                        {
+                            // TODO: This.
+                        }
                     </div>
                     <div className={styles.skills}>
                         <h2>

src/templates/blog/post.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import { graphql } from "gatsby";
-import { MDXRenderer } from "gatsby-plugin-mdx";
 import { MDXProvider } from "@mdx-js/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -11,7 +10,7 @@ import Layout from "../../layouts/default";
 import * as styles from "./post.module.scss";
 import { Link } from "gatsby-plugin-react-i18next";
 
-const BlogPost = ({ data }) => {
+const BlogPost = ({ data, children }) => {
     const { t } = useTranslation();
 
     return (
@@ -82,15 +81,7 @@ const BlogPost = ({ data }) => {
                         )}
                     </span>
 
-                    <MDXProvider components={{ Chat }}>
+                    <MDXProvider components={{ Chat }}>{children}</MDXProvider>
-                        <MDXRenderer
-                            localImages={
-                                data.mdx.frontmatter.embeddedImagesLocal
-                            }
-                        >
-                            {data.mdx.body}
-                        </MDXRenderer>
-                    </MDXProvider>
 
                     <Utterances
                         repo="Unkn0wnCat/KevinK.dev.js"

src/templates/project.tsx

@@ -5,7 +5,6 @@ import Layout from "../layouts/default";
 import PropTypes from "prop-types";
 
 import * as styles from "./project.module.scss";
-import { MDXRenderer } from "gatsby-plugin-mdx";
 import { GatsbyImage } from "gatsby-plugin-image";
 import { ExternalLink, Github } from "lucide-react";
 
@@ -58,10 +57,11 @@ export const query = graphql`
 `;
 
 const ProjectTemplate = ({ data }) => {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     let project = data.allProjectsJson.nodes[0];
     let projectName = project.name;
     let file = data.file;
+    const lang = i18n.language;
 
     return (
         <Layout
@@ -93,13 +93,11 @@ const ProjectTemplate = ({ data }) => {
                     <div className={styles.headerPlaceholder}></div>
                 </div>
             </section>
-            {file != null && file.childMdx != null ? (
+            {file != null && file.childMdx != null
-                <section className={styles.projectAbout}>
+                ? (() => {
-                    <article>
+                      // TODO: This.
-                        <MDXRenderer>{file.childMdx.body}</MDXRenderer>
+                  })()
-                    </article>
+                : null}
-                </section>
-            ) : null}
             {project.links !== null ? (
                 <section className={styles.projectLinks}>
                     <div>