feat: Implement mdx

src/components/Markdown/index.tsx

@@ -14,6 +14,7 @@ import "prismjs/components/prism-python"
 import "prismjs/components/prism-yaml"
 import "prismjs/plugins/line-numbers/prism-line-numbers.css"
 import React, { FC, useEffect } from "react"
+import { MDXRenderer } from "gatsby-plugin-mdx"
 import * as SC from "./styles"
 
 interface IMarkdownProps {
@@ -30,8 +31,9 @@ export const Markdown: FC<IMarkdownProps> = ({ content, ...restProps }) => {
   }, [])
   return (
     <SC.MarkdownWrapper
-      dangerouslySetInnerHTML={{ __html: content }}
       {...restProps}
-    />
+    >
+      <MDXRenderer>{content}</MDXRenderer>
+    </SC.MarkdownWrapper>
   )
 }

src/components/ResourcesHomeContent/index.tsx

@@ -6,7 +6,7 @@ import * as SC from "./styles"
 
 interface IResourcesHomeContent extends HTMLAttributes<HTMLDivElement> {
   language: string
-  html: any
+  body: any
 }
 
 export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
@@ -20,7 +20,7 @@ export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
       <ResourcesList relativeDirectory={props.language} />
       <SC.Box>
         <SC.Title>Extra resources</SC.Title>
-        <Markdown content={props.html} />
+        <Markdown content={props.body} />
       </SC.Box>
       <Footer />
     </>

src/components/ResourcesList/index.tsx

@@ -15,7 +15,7 @@ const ALL_RESOURCES = graphql`
         node {
           relativePath
           relativeDirectory
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title

src/components/ResourcesSidebar/index.tsx

@@ -18,7 +18,7 @@ const ALL_RESOURCES = graphql`
       edges {
         node {
           relativePath
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title
@@ -31,7 +31,7 @@ const ALL_RESOURCES = graphql`
       edges {
         node {
           relativePath
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title