temp: styled mdx

Author: jamiehenson

data/createPages/index.ts

@@ -75,6 +75,7 @@ interface MdxEdge {
     id: string;
     frontmatter: {
       slug: string;
+      title: string;
     };
     internal: {
       contentFilePath: string;
@@ -131,6 +132,7 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
             id
             frontmatter {
               slug
+              title
             }
             internal {
               contentFilePath
@@ -251,12 +253,16 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
       return slug;
     }
 
+    const mdxWrapper = path.resolve('src/components/Layout/MDXWrapper.tsx');
+
+    console.log('cat', edge.node.frontmatter);
+
     createPage({
       path: slug,
-      component: edge.node.internal.contentFilePath,
+      component: `${mdxWrapper}?__contentFilePath=${edge.node.internal.contentFilePath}`,
       context: {
         slug,
-        mdx: true,
+        title: edge.node.frontmatter.title,
         layout: { sidebar: true, searchBar: true, template: 'base' },
       },
     });
@@ -287,6 +293,8 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions:
     throw new Error('API reference result is undefined');
   }
 
+  console.log('lucie', mdxResult.data);
+
   await Promise.all([
     ...documentResult.data.allFileHtml.edges.map(documentCreator(documentTemplate)),
     ...apiReferenceResult.data.allFileHtml.edges.map(documentCreator(apiReferenceTemplate)),

gatsby-browser.tsx

@@ -13,7 +13,6 @@ import {
 import { reducerApiKeyData } from './src/redux/api-key/api-key-reducer';
 import UserContextWrapper from './src/contexts/user-context/wrap-with-provider';
 import { useSiteMetadata } from './src/hooks/use-site-metadata';
-import { MDXProvider } from '@mdx-js/react';
 
 const onClientEntry: GatsbyBrowser['onClientEntry'] = () => {
   setupObserver();
@@ -78,19 +77,6 @@ export const wrapRootElement = ({ element }) => {
   );
 };
 
-export const wrapPageElement = ({ element }: { element: React.ReactNode }) => {
-  return (
-    <MDXProvider
-      components={{
-        h1: (props: any) => <h1 className="text-4xl font-bold mb-4" {...props} />,
-        h2: (props: any) => <h2 className="text-2xl font-semibold mb-3" {...props} />,
-      }}
-    >
-      {element}
-    </MDXProvider>
-  );
-};
-
 export const onRouteUpdate = () => {
   trackPageView();
 };

src/components/Layout/MDXWrapper.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PageProps } from 'gatsby';
+
+import '../../styles/global.css';
+import PageTitle from '../PageTitle';
+import { MarkdownProvider } from '../Markdown';
+
+type PageContextType = {
+  title: string;
+};
+
+type MDXWrapperProps = PageProps<unknown, PageContextType>;
+
+const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, pageContext }) => {
+  const { title } = pageContext;
+
+  return (
+    <MarkdownProvider>
+      {title && <PageTitle>{title}</PageTitle>}
+      {children}
+    </MarkdownProvider>
+  );
+};
+
+export default MDXWrapper;